aboutsummaryrefslogtreecommitdiff
path: root/docs/prototypes/2026-07-02-desktop-settings-panel-prototype-3.html
diff options
context:
space:
mode:
authorCraig Jennings <c@cjennings.net>2026-07-19 23:45:24 -0500
committerCraig Jennings <c@cjennings.net>2026-07-19 23:45:24 -0500
commit0468fedb23ae34a140b6a5a903adedb4e9873ca5 (patch)
tree188151ac2e0e9a27b205cd523c7872028795e5ca /docs/prototypes/2026-07-02-desktop-settings-panel-prototype-3.html
parentc4b3710b14a47d4c8297322297f217be264349ea (diff)
downloadarchsetup-0468fedb23ae34a140b6a5a903adedb4e9873ca5.tar.gz
archsetup-0468fedb23ae34a140b6a5a903adedb4e9873ca5.zip
docs: expand desktop-settings spec and add panel prototypes
I folded the home-handoff control-set decisions into the desktop-settings panel spec. The controls table gains night-light, Do Not Disturb, power profile, lock/suspend actions, scenes, and a wallpaper sub-view. Volume and theme are out of scope, with reasons, and the format pickers move to their own display-format sibling spec (stubbed). The scenes and wallpaper-shape decisions close. The spec stays DRAFT pending UI prototyping. I added five direction prototypes over a shared engine (tile grid, sectioned rack, scenes-first, instrument cluster, expandable rows) so the layout gets picked against working behavior. I closed the shipped Next Session Focus work in todo.org: notification loudness, clock right-click dismiss, date-only scrolling, the wired-interface indicator, and best-saved WiFi connect, plus velox boot recovery. The three design-blocked network and audio items stay TODO with their open question recorded.
Diffstat (limited to 'docs/prototypes/2026-07-02-desktop-settings-panel-prototype-3.html')
-rw-r--r--docs/prototypes/2026-07-02-desktop-settings-panel-prototype-3.html130
1 files changed, 130 insertions, 0 deletions
diff --git a/docs/prototypes/2026-07-02-desktop-settings-panel-prototype-3.html b/docs/prototypes/2026-07-02-desktop-settings-panel-prototype-3.html
new file mode 100644
index 0000000..8c383f1
--- /dev/null
+++ b/docs/prototypes/2026-07-02-desktop-settings-panel-prototype-3.html
@@ -0,0 +1,130 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Desktop Settings — Prototype 3 (scenes-first)</title>
+<link rel="stylesheet" href="desktop-settings-shared.css">
+<style>
+ /* Scenes-first: the hero scene grid + the active-scene readout. */
+ .ds-scene.hero { min-height: 74px; padding: 12px 8px; }
+ .ds-scene.hero .sc-glyph { font-size: 24px; }
+ .ds-scene.hero .sc-name { font-size: 12.5px; }
+ .scene-readout {
+ background: var(--well); border: 1px solid var(--line); border-radius: 10px;
+ padding: 8px 11px; font-size: 11.5px; color: var(--steel); min-height: 20px;
+ }
+ .scene-readout b { color: var(--gold); font-weight: 700; }
+ .scene-readout .sets { color: var(--silver); }
+ .manual-head { display: flex; align-items: center; gap: 8px; }
+ .manual-head .hint { color: var(--dim); font-size: 10px; margin-left: auto; }
+</style>
+</head>
+<body class="ds-stage">
+ <div class="ds-caption">
+ <b>Direction 3 — Scenes-first.</b> The scene selector is the hero: one tap sets
+ the whole desktop (the iOS-Focus idea). Individual controls sit below as the
+ manual-override layer, and touching one drops you out of the active scene.
+ </div>
+
+ <div class="ds-bar"><span>19:24</span><span class="gear">⚙</span></div>
+
+ <div class="ds-panel" id="panel">
+ <div class="ds-face">
+ <span class="glyph">⚙</span>
+ <span class="title">Settings</span>
+ <span class="sub" id="scene-sub"></span>
+ <span class="x">✕</span>
+ </div>
+ <div id="body"></div>
+ <div class="ds-toast" id="toast"></div>
+ <div class="ds-subview" id="subview"></div>
+ </div>
+
+<script src="desktop-settings-shared.js"></script>
+<script>
+const body = document.getElementById("body");
+const subview = document.getElementById("subview");
+DS.bindToast(document.getElementById("toast"));
+
+const NAMEOF = {
+ autodim: "auto-dim", caffeine: "caffeine", touchpad: "touchpad", mouse: "mouse",
+ airplane: "airplane", nightlight: "night light", dnd: "DND",
+};
+function sceneSummary(name) {
+ const sets = DS.SCENES[name].sets;
+ const parts = Object.entries(sets).map(([k, v]) => {
+ if (k === "powerprofile") return v;
+ return (v ? "" : "no ") + (NAMEOF[k] || k);
+ });
+ return parts.join(", ");
+}
+
+function openWallpaper() {
+ subview.innerHTML = "";
+ subview.appendChild(DS.wallpaperSubview(() => subview.classList.remove("open")));
+ subview.classList.add("open");
+}
+
+function render() {
+ body.innerHTML = "";
+ const col = DS.h("div", "ds-col");
+
+ // Hero scenes
+ col.appendChild(DS.engrave("Scene"));
+ const grid = DS.h("div", "ds-grid2");
+ Object.keys(DS.SCENES).forEach((n) => {
+ const k = DS.sceneKey(n);
+ k.classList.add("hero");
+ k.addEventListener("mouseenter", () => setReadout(n));
+ grid.appendChild(k);
+ });
+ col.appendChild(grid);
+
+ const readout = DS.h("div", "scene-readout");
+ readout.id = "readout";
+ col.appendChild(readout);
+
+ // Manual override layer
+ const mh = DS.h("div", "manual-head");
+ mh.appendChild(DS.engrave("Manual"));
+ const hint = DS.h("span", "hint", "overrides the scene");
+ mh.appendChild(hint);
+ col.appendChild(mh);
+
+ const grid2 = DS.h("div", "ds-grid2");
+ ["autodim", "caffeine", "touchpad", "mouse", "nightlight", "dnd"].forEach((key) =>
+ grid2.appendChild(DS.toggleTile(key)));
+ if (DS.state.laptop) grid2.appendChild(DS.toggleTile("airplane"));
+ col.appendChild(grid2);
+
+ const levels = DS.h("div", "ds-well");
+ levels.appendChild(DS.slider("brightness"));
+ levels.appendChild(DS.slider("kbd"));
+ col.appendChild(levels);
+
+ col.appendChild(DS.profileSeg());
+
+ const acts = DS.h("div", "ds-grid3");
+ acts.appendChild(DS.actionBtn("Lock", "\u{f033e}", false));
+ acts.appendChild(DS.actionBtn("Suspend", "\u{f04b2}", false));
+ acts.appendChild(DS.actionBtn("Wallpaper", "\u{f021c}", false, openWallpaper));
+ col.appendChild(acts);
+
+ body.appendChild(col);
+ setReadout(DS.state.scene);
+ document.getElementById("scene-sub").textContent = DS.state.scene ? "▶ " + DS.state.scene : "";
+}
+
+function setReadout(name) {
+ const r = document.getElementById("readout");
+ if (!r) return;
+ if (!name) { r.innerHTML = `<span>No scene active — controls are manual.</span>`; return; }
+ r.innerHTML = `<b>${name}</b> — <span class="sets">${sceneSummary(name)}</span>`;
+}
+
+DS.onChange(render);
+render();
+</script>
+</body>
+</html>