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).
This commit is contained in:
2026-07-22 21:21:00 -04:00
parent aa194be09a
commit 3a0007118c
12 changed files with 335 additions and 135 deletions
+29
View File
@@ -468,6 +468,35 @@ code {
}
.tabs a:hover { color: var(--text); }
.tabs a.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.tabs a.tab-disabled { opacity: 0.45; }
.tabs a.tab-disabled:hover { opacity: 0.7; }
.frame-name-view { display: inline-flex; align-items: center; gap: 6px; }
.frame-name-pencil {
background: none;
border: none;
box-shadow: none;
cursor: pointer;
font-size: 14px;
line-height: 1;
padding: 4px;
margin: 0;
opacity: 0.55;
color: var(--text);
transition: opacity .12s ease, background-color .12s ease;
}
.frame-name-pencil:hover { opacity: 1; background: var(--surface-alt); border-radius: 6px; }
.frame-name-edit { display: inline-flex; align-items: center; gap: 6px; }
.frame-name-edit input {
width: auto;
margin-top: 0;
padding: 5px 8px;
font-size: 15px;
font-weight: 700;
}
.frame-name-edit button { margin-top: 0; }
.frame-mode-select { width: auto; margin-top: 0; padding: 7px 10px; font-size: 13px; font-weight: 600; }
.control-banner {
display: flex;