Add per-widget border option (style, thickness, palette color)

A Widget-level property (border_style/border_thickness/border_color_index),
not a per-type config field, since every widget type can have one -- drawn
once centrally in device.py's _render_widgets before compositing, using
an exact panel palette color so it never dithers. Styles: solid, dashed,
dotted, and a fancy double-line picture-frame-mat look. Configurable from
a shared "Border" card in every widget's gear-icon dialog.

server/app/templates/_widget_border_fields.html

@@ -0,0 +1,32 @@
+<section class="card" style="margin-top: 20px;">
+  <h2 class="card-title">Border</h2>
+  <p class="sub">An optional border drawn around this widget's own box --
+    "None" (the default) draws nothing. Shows on the frame's actual live
+    view, not in the standalone preview below.</p>
+  <form id="border-config-form">
+    <label>Style
+      <select id="border_style">
+        {% for style in border_styles %}
+          <option value="{{ style }}" {% if widget.border_style == style %}selected{% endif %}>{{ border_style_labels[style] }}</option>
+        {% endfor %}
+      </select>
+    </label>
+    <label>Thickness
+      <input type="range" id="border_thickness" min="{{ min_border_thickness }}" max="{{ max_border_thickness }}" step="1"
+        value="{{ widget.border_thickness }}">
+      <span class="slider-value" id="border_thickness_value">{{ widget.border_thickness }}px</span>
+    </label>
+    <label>Color</label>
+    {% set current_palette = frame.palette_rgb or default_palette_rgb %}
+    {% set current_hex = palette_to_hex(current_palette) %}
+    <div class="border-color-picker" id="border-color-picker">
+      {% for label in border_color_labels %}
+        <button type="button" class="color-swatch {% if widget.border_color_index == loop.index0 %}selected{% endif %}"
+                data-index="{{ loop.index0 }}" title="{{ label }}"
+                style="background-color: {{ current_hex[loop.index0] }};"></button>
+      {% endfor %}
+    </div>
+    <input type="hidden" id="border_color_index" value="{{ widget.border_color_index }}">
+    <button type="submit">Save</button>
+  </form>
+</section>

server/app/templates/_widget_dialog_battery.html

@@ -15,6 +15,8 @@
   </form>
 </section>
 
+{% include "_widget_border_fields.html" %}
+
 <section class="card" style="margin-top: 20px;">
   <h2 class="card-title">Preview</h2>
   <p class="sub">How this widget currently renders.</p>

server/app/templates/_widget_dialog_calendar.html

@@ -127,6 +127,8 @@
   </div>
 </section>
 
+{% include "_widget_border_fields.html" %}
+
 <section class="card" style="margin-top: 20px;">
   <h2 class="card-title">Preview</h2>
   <p class="sub">How this widget currently renders.</p>

server/app/templates/_widget_dialog_photos.html

@@ -41,6 +41,8 @@
   </form>
 </section>
 
+{% include "_widget_border_fields.html" %}
+
 <section class="card" style="margin-top: 20px;">
   <h2 class="card-title">Now displaying</h2>
   <div id="current-thumb"><p class="sub">Loading...</p></div>

server/app/templates/_widget_dialog_static.html

@@ -36,6 +36,8 @@
   </form>
 </section>
 
+{% include "_widget_border_fields.html" %}
+
 <section class="card" style="margin-top: 20px;">
   <h2 class="card-title">Preview</h2>
   <p class="sub">How this widget currently renders.</p>

server/app/templates/_widget_dialog_tasks.html

@@ -59,6 +59,8 @@
   </form>
 </section>
 
+{% include "_widget_border_fields.html" %}
+
 <section class="card" style="margin-top: 20px;">
   <h2 class="card-title">Preview</h2>
   <p class="sub">How this widget currently renders.</p>

server/app/templates/_widget_dialog_text.html

@@ -47,6 +47,8 @@
   </form>
 </section>
 
+{% include "_widget_border_fields.html" %}
+
 <section class="card" style="margin-top: 20px;">
   <h2 class="card-title">Preview</h2>
   <p class="sub">How this widget currently renders.</p>

server/app/templates/_widget_dialog_weather.html

@@ -73,6 +73,8 @@
   </div>
 </section>
 
+{% include "_widget_border_fields.html" %}
+
 <section class="card" style="margin-top: 20px;">
   <h2 class="card-title">Preview</h2>
   <p class="sub">How this widget currently renders.</p>

server/app/templates/_widget_dialog_whiteboard.html

@@ -50,6 +50,8 @@
   {% endif %}
 </section>
 
+{% include "_widget_border_fields.html" %}
+
 <section class="card" style="margin-top: 20px;">
   <h2 class="card-title">Preview</h2>
   <p class="sub">How this widget currently renders.</p>

server/app/templates/frame_layout.html

@@ -76,6 +76,7 @@
   <script src="/static/widget_dialog_text.js"></script>
   <script src="/static/widget_dialog_weather.js"></script>
   <script src="/static/widget_dialog_battery.js"></script>
+  <script src="/static/widget_dialog_border.js"></script>
   <script src="/static/frame_layout.js"></script>
   <script src="/static/saved_layouts.js"></script>
 {% endblock %}