Move frame name/mode into the page header; Calendar gets its own tab

Frame name (pencil-icon inline edit) and the Photos/Calendar mode
selector now live in the page header, shared across all four per-frame
pages instead of being buried in the Configuration form -- so renaming
a frame or flipping its mode no longer requires navigating to a
specific tab first.

Calendar settings move out of a conditionally-hidden card on the
Configuration tab into their own dedicated tab (new /frames/{id}/
calendar route), visually greyed out when the frame is in Photos mode
but still fully usable so calendar settings can be configured ahead of
switching modes. Also wires the week-start setting into the UI for the
first time (the column/backend support landed earlier but had no
control anywhere).

server/app/templates/_frame_mode_select.html

@@ -0,0 +1,4 @@
+<select id="frame-mode-select" class="frame-mode-select" title="Frame mode" aria-label="Frame mode">
+  <option value="photos" {% if frame.mode == "photos" %}selected{% endif %}>Photos</option>
+  <option value="calendar" {% if frame.mode == "calendar" %}selected{% endif %}>Calendar</option>
+</select>

server/app/templates/_frame_name_edit.html

@@ -0,0 +1,9 @@
+<span class="frame-name-view" id="frame-name-view">
+  <span id="frame-name-text">{{ frame.name or ("Frame " ~ frame.id) }}</span>
+  <button type="button" class="frame-name-pencil" id="frame-name-pencil" title="Rename frame" aria-label="Rename frame">&#9998;</button>
+</span>
+<span class="frame-name-edit" id="frame-name-edit-row" style="display: none;">
+  <input type="text" id="frame-name-input" maxlength="64" value="{{ frame.name }}">
+  <button type="button" class="btn-inline" id="frame-name-save">Save</button>
+  <button type="button" class="btn-inline secondary" id="frame-name-cancel">Cancel</button>
+</span>

server/app/templates/_frame_tabs.html

@@ -1,5 +1,7 @@
 <nav class="tabs">
   <a href="/frames/{{ frame.id }}" class="{% if active_tab == 'photos' %}active{% endif %}">Photos</a>
   <a href="/frames/{{ frame.id }}/config" class="{% if active_tab == 'config' %}active{% endif %}">Configuration</a>
+  <a href="/frames/{{ frame.id }}/calendar"
+     class="{% if active_tab == 'calendar' %}active{% endif %} {% if frame.mode != 'calendar' %}tab-disabled{% endif %}">Calendar</a>
   <a href="/frames/{{ frame.id }}/stats" class="{% if active_tab == 'stats' %}active{% endif %}">Stats</a>
 </nav>

server/app/templates/frame_calendar.html

@@ -0,0 +1,99 @@
+{% extends "app_base.html" %}
+
+{% block title %}{{ frame.name or "Frame" }} · Calendar{% endblock %}
+{% block page_title %}{% include "_frame_name_edit.html" %}{% endblock %}
+{% block head_actions %}{% include "_frame_mode_select.html" %}{% endblock %}
+
+{% block device_status %}{% include "_device_status_bar.html" %}{% endblock %}
+{% block tabs %}{% include "_frame_tabs.html" %}{% endblock %}
+
+{% block content %}
+  <div id="control-banner" class="control-banner" style="display: none;">
+    <span id="control-holder"></span>
+    <button type="button" id="take-control" class="btn-inline">Take control</button>
+  </div>
+
+  {% if frame.mode != 'calendar' %}
+    <div class="info-box">This frame is currently in <strong>Photos</strong> mode --
+      settings below take effect once you switch it to <strong>Calendar</strong> mode
+      using the selector at the top of the page.</div>
+  {% endif %}
+
+  <div class="layout">
+    <div class="main-col">
+      <section class="card">
+        <h2 class="card-title">Calendar</h2>
+        <form id="calendar-config-form">
+          <label>View
+            <select id="calendar_view">
+              {% for value, label in calendar_views.items() %}
+                <option value="{{ value }}" {% if frame.calendar_view == value %}selected{% endif %}>{{ label }}</option>
+              {% endfor %}
+            </select>
+          </label>
+          <label>Week starts on
+            <select id="calendar_week_start">
+              {% for value, label in week_start_labels.items() %}
+                <option value="{{ value }}" {% if frame.calendar_week_start == value %}selected{% endif %}>{{ label }}</option>
+              {% endfor %}
+            </select>
+          </label>
+          <p class="sub" style="margin-top: 4px;">Only affects the Week and Month views.</p>
+          <div class="checkbox-row" id="calendar-inlay-row">
+            <input type="checkbox" id="calendar_photo_inlay" {% if frame.calendar_photo_inlay %}checked{% endif %}>
+            <label for="calendar_photo_inlay">Show a photo alongside the calendar</label>
+          </div>
+          <p class="sub" id="calendar-inlay-hint" style="margin-top: 4px;">
+            Uses the same album configured on the Photos tab -- nothing extra to set up.</p>
+          <button type="submit">Save</button>
+        </form>
+
+        <h2 class="card-title" style="margin-top: 20px;">Included calendars</h2>
+        <p class="sub">Each linked person decides whether their own calendar
+          contributes to this frame -- being linked here doesn't include it
+          automatically.</p>
+        <ul class="calendar-user-list">
+          {% for u in calendar_users %}
+            <li>
+              {% if u.user_id == user.id %}
+                {% if u.has_url %}
+                  <label class="checkbox-row" style="margin-top: 6px;">
+                    <input type="checkbox" class="calendar-self-toggle" {% if u.included %}checked{% endif %}>
+                    {{ u.display_name }} (you)
+                  </label>
+                {% else %}
+                  <p class="sub" style="margin-top: 6px;">{{ u.display_name }} (you) -- no calendar set, add one in <a href="/settings">Settings</a>.</p>
+                {% endif %}
+              {% else %}
+                <p class="sub" style="margin-top: 6px;">{{ u.display_name }}:
+                  {% if not u.has_url %}no calendar set{% elif u.included %}included{% else %}not included{% endif %}</p>
+              {% endif %}
+            </li>
+          {% endfor %}
+        </ul>
+
+        {% if frame.calendar_fetch_summary %}
+          <p class="sub" style="margin-top: 8px; color: var(--danger-text);">Last fetch: {{ frame.calendar_fetch_summary }}</p>
+        {% endif %}
+      </section>
+    </div>
+
+    <div class="side-col">
+      <section class="card">
+        <h2 class="card-title">Preview</h2>
+        <p class="sub">How this frame's calendar currently renders.</p>
+        <img class="preview-img" id="calendar-preview" alt="Calendar preview">
+        <button type="button" class="secondary" id="calendar-preview-refresh">Refresh preview</button>
+      </section>
+    </div>
+  </div>
+
+  <div id="result"></div>
+{% endblock %}
+
+{% block scripts %}
+  <script>window.FRAME_API = {{ ("/api/frames/" ~ frame.id) | tojson }};</script>
+  <script src="/static/device_status_bar.js"></script>
+  <script src="/static/frame_header.js"></script>
+  <script src="/static/frame_calendar.js"></script>
+{% endblock %}

server/app/templates/frame_config.html

@@ -1,7 +1,8 @@
 {% extends "app_base.html" %}
 
 {% block title %}{{ frame.name or "Frame" }} · Configuration{% endblock %}
-{% block page_title %}{{ frame.name or "Frame " ~ frame.id }}{% endblock %}
+{% block page_title %}{% include "_frame_name_edit.html" %}{% endblock %}
+{% block head_actions %}{% include "_frame_mode_select.html" %}{% endblock %}
 
 {% block device_status %}{% include "_device_status_bar.html" %}{% endblock %}
 {% block tabs %}{% include "_frame_tabs.html" %}{% endblock %}
@@ -17,15 +18,6 @@
       <section class="card">
         <h2 class="card-title">Display settings</h2>
         <form id="config-form">
-          <label>Frame mode
-            <select id="frame_mode">
-              <option value="photos" {% if frame.mode == "photos" %}selected{% endif %}>Photos</option>
-              <option value="calendar" {% if frame.mode == "calendar" %}selected{% endif %}>Calendar</option>
-            </select>
-          </label>
-          <label>Frame name
-            <input type="text" id="frame_name" maxlength="64" value="{{ frame.name }}">
-          </label>
           <label>Order
             <select id="order">
               <option value="sequential" {% if frame.order == "sequential" %}selected{% endif %}>Sequential</option>
@@ -83,59 +75,6 @@
           <button type="submit">Save</button>
         </form>
       </section>
-
-      <section class="card" id="calendar-card" style="{% if frame.mode != 'calendar' %}display: none;{% endif %}">
-        <h2 class="card-title">Calendar</h2>
-        <form id="calendar-config-form">
-          <label>View
-            <select id="calendar_view">
-              {% for value, label in calendar_views.items() %}
-                <option value="{{ value }}" {% if frame.calendar_view == value %}selected{% endif %}>{{ label }}</option>
-              {% endfor %}
-            </select>
-          </label>
-          <div class="checkbox-row" id="calendar-inlay-row" style="{% if frame.calendar_view != 'agenda' %}display: none;{% endif %}">
-            <input type="checkbox" id="calendar_photo_inlay" {% if frame.calendar_photo_inlay %}checked{% endif %}>
-            <label for="calendar_photo_inlay">Show a photo alongside today's agenda</label>
-          </div>
-          <p class="sub" id="calendar-inlay-hint" style="margin-top: 4px; {% if frame.calendar_view != 'agenda' %}display: none;{% endif %}">
-            Uses the same album configured on the Photos tab -- nothing extra to set up.</p>
-          <button type="submit">Save</button>
-        </form>
-
-        <h2 class="card-title" style="margin-top: 20px;">Included calendars</h2>
-        <p class="sub">Each linked person decides whether their own calendar
-          contributes to this frame -- being linked here doesn't include it
-          automatically.</p>
-        <ul class="calendar-user-list">
-          {% for u in calendar_users %}
-            <li>
-              {% if u.user_id == user.id %}
-                {% if u.has_url %}
-                  <label class="checkbox-row" style="margin-top: 6px;">
-                    <input type="checkbox" class="calendar-self-toggle" {% if u.included %}checked{% endif %}>
-                    {{ u.display_name }} (you)
-                  </label>
-                {% else %}
-                  <p class="sub" style="margin-top: 6px;">{{ u.display_name }} (you) -- no calendar set, add one in <a href="/settings">Settings</a>.</p>
-                {% endif %}
-              {% else %}
-                <p class="sub" style="margin-top: 6px;">{{ u.display_name }}:
-                  {% if not u.has_url %}no calendar set{% elif u.included %}included{% else %}not included{% endif %}</p>
-              {% endif %}
-            </li>
-          {% endfor %}
-        </ul>
-
-        {% if frame.calendar_fetch_summary %}
-          <p class="sub" style="margin-top: 8px; color: var(--danger-text);">Last fetch: {{ frame.calendar_fetch_summary }}</p>
-        {% endif %}
-
-        <h2 class="card-title" style="margin-top: 20px;">Preview</h2>
-        <p class="sub">How this frame's calendar currently renders.</p>
-        <img class="preview-img" id="calendar-preview" alt="Calendar preview">
-        <button type="button" class="secondary" id="calendar-preview-refresh">Refresh preview</button>
-      </section>
     </div>
 
     <div class="side-col">
@@ -267,5 +206,6 @@
     window.DEFAULT_PALETTE_HEX = {{ palette_to_hex(default_palette_rgb) | tojson }};
   </script>
   <script src="/static/device_status_bar.js"></script>
+  <script src="/static/frame_header.js"></script>
   <script src="/static/frame_config.js"></script>
 {% endblock %}

server/app/templates/frame_photos.html

@@ -1,7 +1,8 @@
 {% extends "app_base.html" %}
 
 {% block title %}{{ frame.name or "Frame" }} · Photos{% endblock %}
-{% block page_title %}{{ frame.name or "Frame " ~ frame.id }}{% endblock %}
+{% block page_title %}{% include "_frame_name_edit.html" %}{% endblock %}
+{% block head_actions %}{% include "_frame_mode_select.html" %}{% endblock %}
 
 {% block device_status %}{% include "_device_status_bar.html" %}{% endblock %}
 {% block tabs %}{% include "_frame_tabs.html" %}{% endblock %}
@@ -57,6 +58,7 @@
 {% block scripts %}
   <script>window.FRAME_API = {{ ("/api/frames/" ~ frame.id) | tojson }};</script>
   <script src="/static/device_status_bar.js"></script>
+  <script src="/static/frame_header.js"></script>
   <script src="/static/queue.js"></script>
   <script src="/static/frame_photos.js"></script>
 {% endblock %}

server/app/templates/frame_stats.html

@@ -1,7 +1,8 @@
 {% extends "app_base.html" %}
 
 {% block title %}{{ frame.name or "Frame" }} · Stats{% endblock %}
-{% block page_title %}{{ frame.name or "Frame " ~ frame.id }}{% endblock %}
+{% block page_title %}{% include "_frame_name_edit.html" %}{% endblock %}
+{% block head_actions %}{% include "_frame_mode_select.html" %}{% endblock %}
 
 {% block device_status %}{% include "_device_status_bar.html" %}{% endblock %}
 {% block tabs %}{% include "_frame_tabs.html" %}{% endblock %}
@@ -24,5 +25,6 @@
   <script>window.FRAME_API = {{ ("/api/frames/" ~ frame.id) | tojson }};</script>
   <script src="/static/battery_chart.js"></script>
   <script src="/static/device_status_bar.js"></script>
+  <script src="/static/frame_header.js"></script>
   <script src="/static/frame_stats.js"></script>
 {% endblock %}