Desktop Settings — Prototype 1 (tile grid)

From 0468fedb23ae34a140b6a5a903adedb4e9873ca5 Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Sun, 19 Jul 2026 23:45:24 -0500 Subject: 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. --- ...6-07-02-desktop-settings-panel-prototype-1.html | 88 +++++ ...6-07-02-desktop-settings-panel-prototype-2.html | 99 ++++++ ...6-07-02-desktop-settings-panel-prototype-3.html | 130 ++++++++ ...6-07-02-desktop-settings-panel-prototype-4.html | 166 ++++++++++ ...6-07-02-desktop-settings-panel-prototype-5.html | 149 +++++++++ docs/prototypes/desktop-settings-shared.css | 358 +++++++++++++++++++++ docs/prototypes/desktop-settings-shared.js | 261 +++++++++++++++ .../2026-07-02-desktop-settings-panel-spec.org | 107 ++++-- ...-display-format-single-source-of-truth-spec.org | 63 ++++ 9 files changed, 1392 insertions(+), 29 deletions(-) create mode 100644 docs/prototypes/2026-07-02-desktop-settings-panel-prototype-1.html create mode 100644 docs/prototypes/2026-07-02-desktop-settings-panel-prototype-2.html create mode 100644 docs/prototypes/2026-07-02-desktop-settings-panel-prototype-3.html create mode 100644 docs/prototypes/2026-07-02-desktop-settings-panel-prototype-4.html create mode 100644 docs/prototypes/2026-07-02-desktop-settings-panel-prototype-5.html create mode 100644 docs/prototypes/desktop-settings-shared.css create mode 100644 docs/prototypes/desktop-settings-shared.js create mode 100644 docs/specs/2026-07-19-display-format-single-source-of-truth-spec.org (limited to 'docs') diff --git a/docs/prototypes/2026-07-02-desktop-settings-panel-prototype-1.html b/docs/prototypes/2026-07-02-desktop-settings-panel-prototype-1.html new file mode 100644 index 0000000..e57d13e --- /dev/null +++ b/docs/prototypes/2026-07-02-desktop-settings-panel-prototype-1.html @@ -0,0 +1,88 @@ + + + + + +Desktop Settings — Prototype 1 (tile grid) + + + +

+ Direction 1 — Tile grid. The quick-settings idiom (Android / GNOME 43): + scenes on top, a 2-column tile grid for toggles, sliders and power below. + Fast to scan, one tap per control, the wallpaper tile opens a sub-view. +

+ +

19:24⚙

+ +

+ ⚙ + Settings + + ✕ +

+ + + + + diff --git a/docs/prototypes/2026-07-02-desktop-settings-panel-prototype-2.html b/docs/prototypes/2026-07-02-desktop-settings-panel-prototype-2.html new file mode 100644 index 0000000..af2160c --- /dev/null +++ b/docs/prototypes/2026-07-02-desktop-settings-panel-prototype-2.html @@ -0,0 +1,99 @@ + + + + + +Desktop Settings — Prototype 2 (sectioned rack) + + + +

+ Direction 2 — Sectioned rack. Full-width console keys stacked under + engraved section labels, closest to the net/bt panel idiom. Densest and most + scannable; every control is one row you read top to bottom. +

+ +

19:24⚙

+ +

+ ⚙ + Settings + + ✕ +

+ + + + + 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 @@ + + + + + +Desktop Settings — Prototype 3 (scenes-first) + + + + +

+ Direction 3 — Scenes-first. 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. +

+ +

19:24⚙

+ +

+ ⚙ + Settings + + ✕ +

+ + + + + diff --git a/docs/prototypes/2026-07-02-desktop-settings-panel-prototype-4.html b/docs/prototypes/2026-07-02-desktop-settings-panel-prototype-4.html new file mode 100644 index 0000000..23d72fb --- /dev/null +++ b/docs/prototypes/2026-07-02-desktop-settings-panel-prototype-4.html @@ -0,0 +1,166 @@ + + + + + +Desktop Settings — Prototype 4 (instrument cluster) + + + + +

+ Direction 4 — Instrument cluster. The most literal control panel: + brightness and keyboard read as needle-ring gauges, power profile is a rotary + selector, toggles are lamp rows. Leans hardest into the faceplate aesthetic. +

+ +

19:24⚙

+ +

+ ⚙ + Settings + + ✕ +

+ + + + + diff --git a/docs/prototypes/2026-07-02-desktop-settings-panel-prototype-5.html b/docs/prototypes/2026-07-02-desktop-settings-panel-prototype-5.html new file mode 100644 index 0000000..662e9f6 --- /dev/null +++ b/docs/prototypes/2026-07-02-desktop-settings-panel-prototype-5.html @@ -0,0 +1,149 @@ + + + + + +Desktop Settings — Prototype 5 (compact expandable rows) + + + + +

+ Direction 5 — Compact expandable rows. Minimal by default: one slim row + per control in a single column. Rows with depth (power, scenes, wallpaper) + expand inline — progressive disclosure, the long-press pattern made visible. +

+ +

19:24⚙

+ +

+ ⚙ + Settings + + ✕ +

+ + + + + diff --git a/docs/prototypes/desktop-settings-shared.css b/docs/prototypes/desktop-settings-shared.css new file mode 100644 index 0000000..95aec22 --- /dev/null +++ b/docs/prototypes/desktop-settings-shared.css @@ -0,0 +1,358 @@ +/* desktop-settings-shared.css — the shared engine styling for every + * desktop-settings panel prototype. Translates the dupre instrument-console + * palette (themes/dupre/panel.css) into browser-friendly component classes so + * all five direction prototypes read as one system and port near-1:1 to svg.el. + * + * Palette: warm near-black ground, gold border/accent, slate blue selection, + * silver/cream text, olive pass, terracotta fail. */ + +:root { + --ground: #100f0f; + --well: #0a0c0d; + --well2: #101214; + --plate: #1a1917; + --plate-edge: #262320; + --gold: #dab53d; + --gold-bright: #f0d879; + --slate: #424f5e; + --slate-hi: #54677d; + --silver: #bfc4d0; + --cream: #f3e7c5; + --steel: #969385; + --dim: #7c838a; + --line: #2c2f32; + --pass: #74932f; + --fail: #cb6b4d; + --key-top: #23211e; + --key-bot: #191715; + --key-edge: #33302b; + --mono: "BerkeleyMono Nerd Font", "JetBrains Mono", "DejaVu Sans Mono", ui-monospace, monospace; +} + +* { box-sizing: border-box; } + +body.ds-stage { + margin: 0; + min-height: 100vh; + background: + radial-gradient(1200px 600px at 80% -10%, #17151322, transparent), + #050505; + color: var(--silver); + font-family: var(--mono); + display: flex; + flex-direction: column; + align-items: center; + gap: 14px; + padding: 28px 16px 48px; +} + +/* A caption above each prototype naming the direction (prototype chrome only, + not part of the panel). */ +.ds-caption { + color: var(--dim); + font-size: 12px; + letter-spacing: 0.04em; + text-align: center; + max-width: 360px; +} +.ds-caption b { color: var(--gold); font-weight: 700; } + +/* The bar stub the panel drops from, so the prototype shows the anchor. */ +.ds-bar { + width: 360px; + height: 30px; + border-radius: 8px; + background: linear-gradient(180deg, #17151388, #0d0c0b); + border: 1px solid #201d17; + display: flex; + align-items: center; + justify-content: flex-end; + gap: 10px; + padding: 0 12px; + color: var(--steel); + font-size: 13px; +} +.ds-bar .gear { color: var(--gold); } + +/* ---- the panel capsule --------------------------------------------------- */ +.ds-panel { + width: 360px; + background-color: var(--ground); + border: 1.5px solid var(--gold); + border-radius: 16px; + padding: 14px 16px 16px; + box-shadow: 0 18px 50px #000a, 0 0 0 1px #0006; + display: flex; + flex-direction: column; + gap: 10px; + position: relative; + overflow: hidden; +} + +/* Faceplate header: raised ID plate with title, gear glyph, close. */ +.ds-face { + background-color: var(--plate); + border: 1px solid var(--plate-edge); + border-radius: 12px; + padding: 9px 12px; + display: flex; + align-items: center; + gap: 10px; +} +.ds-face .glyph { color: var(--gold); font-size: 18px; } +.ds-face .title { color: var(--gold); font-weight: 700; font-size: 16px; letter-spacing: 0.02em; } +.ds-face .sub { color: var(--steel); font-size: 11px; margin-left: auto; } +.ds-face .x { + color: var(--dim); cursor: pointer; font-size: 15px; padding: 2px 5px; + border-radius: 50%; line-height: 1; +} +.ds-face .x:hover { color: var(--silver); background: var(--line); } + +/* Engraved section label: steel small-caps + a thin rule. */ +.ds-engrave { + color: var(--steel); + font-size: 10px; + letter-spacing: 0.12em; + text-transform: uppercase; + display: flex; + align-items: center; + gap: 8px; + margin: 4px 2px 2px; +} +.ds-engrave::after { + content: ""; + flex: 1; + height: 1px; + background: linear-gradient(90deg, var(--line), transparent); +} + +/* Status lamp: a colored dot with a soft glow; off is a dim wash. */ +.ds-lamp { + width: 9px; height: 9px; border-radius: 50%; + background-color: var(--pass); + box-shadow: 0 0 6px 1px rgba(116,147,47,.55); + flex: none; +} +.ds-lamp.gold { background-color: var(--gold); box-shadow: 0 0 6px 1px rgba(218,181,61,.55); } +.ds-lamp.red { background-color: var(--fail); box-shadow: 0 0 6px 1px rgba(203,107,77,.55); } +.ds-lamp.off { background-color: var(--line); box-shadow: none; } + +/* Console key: a raised mechanical button that lights gold on hover/active. */ +.ds-key { + color: var(--silver); + background-image: linear-gradient(180deg, var(--key-top), var(--key-bot)); + background-color: var(--key-bot); + border: 1px solid var(--key-edge); + border-radius: 8px; + padding: 8px 10px; + font-family: var(--mono); + font-size: 13px; + cursor: pointer; + display: flex; + align-items: center; + gap: 8px; + transition: border-color .12s, color .12s, background-color .12s; +} +.ds-key:hover { color: var(--gold); border-color: var(--gold); } +.ds-key .k-glyph { font-size: 15px; color: var(--steel); } +.ds-key:hover .k-glyph { color: var(--gold); } +.ds-key .k-name { color: var(--silver); } +.ds-key .k-state { margin-left: auto; color: var(--dim); font-size: 11px; } + +/* Console key in the ON state: gold cast + lit lamp glyph. */ +.ds-key.on { + border-color: var(--gold); + background-image: linear-gradient(180deg, #2a2618, #1d1a12); +} +.ds-key.on .k-glyph { color: var(--gold); } +.ds-key.on .k-name { color: var(--cream); } +.ds-key.on .k-state { color: var(--gold); } + +/* A brief verify flash: after a change, the control confirms the readback. */ +.ds-key.verified { animation: dsVerify 0.9s ease-out; } +@keyframes dsVerify { + 0% { box-shadow: 0 0 0 0 rgba(116,147,47,.0); } + 20% { box-shadow: 0 0 0 2px rgba(116,147,47,.55); } + 100% { box-shadow: 0 0 0 0 rgba(116,147,47,0); } +} + +/* Tile (grid layout): a squarer console key with the lamp top-left. */ +.ds-tile { + background-image: linear-gradient(180deg, var(--key-top), var(--key-bot)); + border: 1px solid var(--key-edge); + border-radius: 10px; + padding: 10px 11px; + cursor: pointer; + display: flex; + flex-direction: column; + gap: 6px; + min-height: 62px; + transition: border-color .12s, background-color .12s; +} +.ds-tile:hover { border-color: var(--gold); } +.ds-tile .t-top { display: flex; align-items: center; gap: 8px; } +.ds-tile .t-glyph { font-size: 17px; color: var(--steel); } +.ds-tile .t-name { color: var(--silver); font-size: 12.5px; } +.ds-tile .t-state { color: var(--dim); font-size: 11px; margin-top: auto; } +.ds-tile.on { border-color: var(--gold); background-image: linear-gradient(180deg, #2a2618, #1d1a12); } +.ds-tile.on .t-glyph { color: var(--gold); } +.ds-tile.on .t-name { color: var(--cream); } +.ds-tile.on .t-state { color: var(--gold); } +.ds-tile.verified { animation: dsVerify 0.9s ease-out; } +.ds-tile .t-detail { + margin-left: auto; color: var(--dim); font-size: 11px; padding: 0 3px; +} +.ds-tile .t-detail:hover { color: var(--gold); } + +/* Slider row: engraved name + machined fader + % readout. */ +.ds-slider { + display: flex; + align-items: center; + gap: 10px; + padding: 6px 4px; +} +.ds-slider .s-glyph { color: var(--steel); font-size: 15px; width: 18px; text-align: center; } +.ds-slider .s-name { color: var(--silver); font-size: 12.5px; width: 92px; } +.ds-slider input[type=range] { + -webkit-appearance: none; appearance: none; + flex: 1; + height: 6px; + border-radius: 6px; + background: var(--well); + border: 1px solid var(--line); + outline: none; +} +.ds-slider input[type=range]::-webkit-slider-thumb { + -webkit-appearance: none; appearance: none; + width: 14px; height: 14px; border-radius: 50%; + background: var(--cream); + border: 1px solid var(--gold); + cursor: pointer; + box-shadow: -200px 0 0 194px var(--gold); /* gold fill to the left of the knob */ +} +.ds-slider input[type=range]::-moz-range-thumb { + width: 14px; height: 14px; border-radius: 50%; + background: var(--cream); border: 1px solid var(--gold); cursor: pointer; +} +.ds-slider input[type=range]::-moz-range-progress { background: var(--gold); height: 6px; border-radius: 6px; } +.ds-slider .s-pct { color: var(--cream); font-size: 12px; width: 40px; text-align: right; font-variant-numeric: tabular-nums; } + +/* Segmented selector (power profile): joined keys, the current one lit gold. */ +.ds-seg { display: flex; border-radius: 8px; overflow: hidden; border: 1px solid var(--key-edge); } +.ds-seg button { + flex: 1; + background-image: linear-gradient(180deg, var(--key-top), var(--key-bot)); + color: var(--silver); + border: none; + border-right: 1px solid var(--key-edge); + padding: 7px 6px; + font-family: var(--mono); + font-size: 11.5px; + cursor: pointer; +} +.ds-seg button:last-child { border-right: none; } +.ds-seg button:hover { color: var(--gold); } +.ds-seg button.cur { + background-image: linear-gradient(180deg, var(--gold-bright), var(--gold)); + color: var(--ground); + font-weight: 700; +} + +/* Scene key: a wider console key with the scene name; active is gold-lit. */ +.ds-scene { + background-image: linear-gradient(180deg, var(--key-top), var(--key-bot)); + border: 1px solid var(--key-edge); + border-radius: 9px; + padding: 9px 8px; + cursor: pointer; + display: flex; + flex-direction: column; + align-items: center; + gap: 3px; + transition: border-color .12s, background-color .12s; +} +.ds-scene:hover { border-color: var(--gold); } +.ds-scene .sc-glyph { font-size: 18px; color: var(--steel); } +.ds-scene .sc-name { font-size: 11px; color: var(--silver); letter-spacing: 0.03em; } +.ds-scene.cur { border-color: var(--gold); background-image: linear-gradient(180deg, #2a2618, #1d1a12); } +.ds-scene.cur .sc-glyph { color: var(--gold); } +.ds-scene.cur .sc-name { color: var(--cream); } + +/* Momentary action buttons (lock / suspend). */ +.ds-act { + background: transparent; + border: 1px solid var(--slate); + color: var(--silver); + border-radius: 8px; + padding: 8px 10px; + font-family: var(--mono); + font-size: 12.5px; + cursor: pointer; + display: flex; align-items: center; justify-content: center; gap: 7px; +} +.ds-act:hover { border-color: var(--gold); color: var(--gold); background: #dab53d12; } +.ds-act.danger { border-color: var(--fail); color: var(--fail); } +.ds-act.danger:hover { background: var(--fail); color: var(--ground); } + +/* Generic grid + row helpers. */ +.ds-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } +.ds-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } +.ds-grid4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; } +.ds-col { display: flex; flex-direction: column; gap: 6px; } +.ds-well { background: var(--well); border: 1px solid var(--line); border-radius: 10px; padding: 8px; } + +/* Toast: a slate feedback strip that names what was applied + verified. */ +.ds-toast { + color: var(--cream); + background-color: var(--slate); + border-radius: 8px; + padding: 6px 10px; + font-size: 12px; + min-height: 18px; + transition: opacity .3s; +} +.ds-toast .ok { color: #cfe08c; } +.ds-toast.empty { background: transparent; color: var(--dim); } + +/* Wallpaper sub-view overlay: slides over the panel body, Back returns. */ +.ds-subview { + position: absolute; + inset: 0; + background: var(--ground); + border-radius: 16px; + padding: 14px 16px 16px; + display: none; + flex-direction: column; + gap: 10px; + z-index: 5; +} +.ds-subview.open { display: flex; } +.ds-sub-head { display: flex; align-items: center; gap: 10px; } +.ds-sub-head .back { color: var(--dim); cursor: pointer; font-size: 13px; } +.ds-sub-head .back:hover { color: var(--gold); } +.ds-sub-head .title { color: var(--gold); font-weight: 700; font-size: 14px; } +.ds-thumbs { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; } +.ds-thumb { + aspect-ratio: 16/10; + border-radius: 8px; + border: 1.5px solid var(--line); + cursor: pointer; + position: relative; + overflow: hidden; +} +.ds-thumb.cur { border-color: var(--gold); } +.ds-thumb .tag { + position: absolute; bottom: 3px; left: 4px; + font-size: 9px; color: #fff; text-shadow: 0 1px 2px #000; +} +.ds-daynight { display: flex; gap: 8px; } +.ds-daynight .dn { + flex: 1; border-radius: 8px; border: 1px solid var(--line); + padding: 8px; display: flex; flex-direction: column; gap: 4px; align-items: center; +} +.ds-daynight .dn .lbl { font-size: 10px; color: var(--steel); text-transform: uppercase; letter-spacing: 0.08em; } +.ds-daynight .dn .sw { width: 100%; aspect-ratio: 16/9; border-radius: 6px; } +.ds-dirs { display: flex; flex-direction: column; gap: 4px; } +.ds-dir { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--silver); padding: 3px 4px; } +.ds-dir .path { color: var(--dim); } +.ds-note { color: var(--dim); font-size: 11px; } diff --git a/docs/prototypes/desktop-settings-shared.js b/docs/prototypes/desktop-settings-shared.js new file mode 100644 index 0000000..39bc76a --- /dev/null +++ b/docs/prototypes/desktop-settings-shared.js @@ -0,0 +1,261 @@ +/* desktop-settings-shared.js — the shared engine behind every direction + * prototype. One mock state model, one widget factory, and the net panel's + * verify-everything contract simulated: a control applies, then a mock backing + * "reads back" the real value and confirms (a green verify flash + a toast). + * + * Each prototype builds a different LAYOUT from these same widgets and binds to + * this same state, so the five directions are genuinely comparable. */ + +const DS = (() => { + // ---- mock state (what the real settings.py engine would read/write) ------ + const state = { + autodim: false, + caffeine: false, + touchpad: true, + mouse: true, + airplane: false, + nightlight: false, + dnd: false, + brightness: 70, + kbd: 40, + powerprofile: "balanced", // performance | balanced | saver + scene: null, // Focus | Presentation | Battery | Night | null + wallpaper: { + dirs: ["~/pictures/wallpaper", "~/pictures/wallpaper/day-night"], + current: 2, + day: 1, + night: 4, + }, + laptop: true, // gates the airplane row + }; + + // control metadata: glyph (nerd-font), label, and the "on/off" wording. + const TOGGLES = { + autodim: { glyph: "\u{f0335}", name: "Auto-dim", on: "dimming", off: "off" }, + caffeine: { glyph: "\u{f0176}", name: "Caffeine", on: "awake", off: "idle ok" }, + touchpad: { glyph: "\u{f0168}", name: "Touchpad", on: "on", off: "off" }, + mouse: { glyph: "\u{f037d}", name: "Mouse", on: "on", off: "off" }, + airplane: { glyph: "\u{f001d}", name: "Airplane", on: "on", off: "off" }, + nightlight:{ glyph: "\u{f0594}", name: "Night light", on: "warm", off: "off" }, + dnd: { glyph: "\u{f009b}", name: "Do Not Disturb",on:"silenced",off: "notifying" }, + }; + const SLIDERS = { + brightness: { glyph: "\u{f00df}", name: "Brightness", floor: 5 }, + kbd: { glyph: "\u{f60f}", name: "Keyboard", floor: 0 }, + }; + const PROFILES = [ + { id: "performance", label: "Perf" }, + { id: "balanced", label: "Balanced" }, + { id: "saver", label: "Saver" }, + ]; + // scenes flip several toggles + a profile at once (the iOS-Focus pattern). + const SCENES = { + Focus: { glyph: "\u{f0210}", sets: { dnd: true, autodim: false, nightlight: false, powerprofile: "balanced" } }, + Presentation: { glyph: "\u{f0379}", sets: { caffeine: true, autodim: false, dnd: true, powerprofile: "performance" } }, + Battery: { glyph: "\u{f0079}", sets: { autodim: true, powerprofile: "saver", nightlight: false } }, + Night: { glyph: "\u{f0594}", sets: { nightlight: true, dnd: true, autodim: true, powerprofile: "saver" } }, + }; + + let toastEl = null; + const listeners = []; + const onChange = (fn) => listeners.push(fn); + const emit = () => listeners.forEach((f) => f(state)); + + function toast(msg, ok) { + if (!toastEl) return; + toastEl.classList.remove("empty"); + toastEl.innerHTML = ok ? `${msg} ✓ verified` : msg; + clearTimeout(toast._t); + toast._t = setTimeout(() => { + toastEl.classList.add("empty"); + toastEl.textContent = "waiting…"; + }, 2600); + } + + // The verify-everything contract: apply, then a mock backing reads back the + // actual value and confirms. cb runs on the confirmed readback. + function applyVerified(label, mutate, el, cb) { + mutate(); + emit(); + setTimeout(() => { + if (el) { + el.classList.remove("verified"); + void el.offsetWidth; + el.classList.add("verified"); + } + toast(label, true); + if (cb) cb(); + }, 140); + } + + function setToggle(key, el) { + const meta = TOGGLES[key]; + applyVerified( + `${meta.name}: ${state[key] ? meta.off : meta.on}`, + () => { state[key] = !state[key]; state.scene = null; }, + el + ); + } + function setSlider(key, value, el) { + const meta = SLIDERS[key]; + const v = Math.max(meta.floor, Math.min(100, Math.round(value))); + applyVerified(`${meta.name}: ${v}%`, () => { state[key] = v; }, el); + } + function setProfile(id, el) { + applyVerified(`Power profile: ${id}`, () => { state.powerprofile = id; state.scene = null; }, el); + } + function applyScene(name, el) { + const sc = SCENES[name]; + applyVerified(`Scene: ${name}`, () => { + Object.assign(state, sc.sets); + state.scene = name; + }, el); + } + function momentary(label) { toast(`${label}…`, false); } + + // ---- small render helpers the prototypes call ---------------------------- + const h = (tag, cls, txt) => { + const e = document.createElement(tag); + if (cls) e.className = cls; + if (txt != null) e.textContent = txt; + return e; + }; + + function toggleKey(key) { + const meta = TOGGLES[key]; + const on = state[key]; + const el = h("div", "ds-key" + (on ? " on" : "")); + el.innerHTML = + `` + + `${meta.glyph}` + + `${meta.name}` + + `${on ? meta.on : meta.off}`; + el.onclick = () => setToggle(key, el); + return el; + } + + function toggleTile(key, detailCb) { + const meta = TOGGLES[key]; + const on = state[key]; + const el = h("div", "ds-tile" + (on ? " on" : "")); + el.innerHTML = + `

` + + `${meta.glyph}` + + (detailCb ? `⋯` : "") + + `

` + + `

${meta.name}

` + + `

${on ? meta.on : meta.off}

`; + el.onclick = (ev) => { + if (detailCb && ev.target.classList.contains("t-detail")) { detailCb(); return; } + setToggle(key, el); + }; + return el; + } + + function slider(key) { + const meta = SLIDERS[key]; + const row = h("div", "ds-slider"); + row.innerHTML = + `${meta.glyph}` + + `${meta.name}`; + const inp = h("input"); + inp.type = "range"; inp.min = meta.floor; inp.max = 100; inp.value = state[key]; + const pct = h("span", "s-pct", state[key] + "%"); + inp.oninput = () => { pct.textContent = inp.value + "%"; }; + inp.onchange = () => setSlider(key, +inp.value, row); + row.appendChild(inp); row.appendChild(pct); + return row; + } + + function profileSeg() { + const seg = h("div", "ds-seg"); + PROFILES.forEach((p) => { + const b = h("button", state.powerprofile === p.id ? "cur" : "", p.label); + b.onclick = () => setProfile(p.id, seg); + seg.appendChild(b); + }); + return seg; + } + + function sceneKey(name) { + const sc = SCENES[name]; + const el = h("div", "ds-scene" + (state.scene === name ? " cur" : "")); + el.innerHTML = `${sc.glyph}${name}`; + el.onclick = () => applyScene(name, el); + return el; + } + + function actionBtn(label, glyph, danger, fn) { + const b = h("button", "ds-act" + (danger ? " danger" : "")); + b.innerHTML = `${glyph}${label}`; + b.onclick = fn || (() => momentary(label)); + return b; + } + + // Wallpaper sub-view: directory list, thumbnails, day/night pair, sun-time. + const SWATCHES = [ + "linear-gradient(135deg,#2a3d5c,#101b2e)", + "linear-gradient(135deg,#5c3a2a,#2e1810)", + "linear-gradient(135deg,#3a5c2a,#16240f)", + "linear-gradient(135deg,#40364f,#1b1626)", + "linear-gradient(135deg,#1a1e2e,#05070d)", + "linear-gradient(135deg,#5c5030,#2e2810)", + ]; + function wallpaperSubview(closeCb) { + const sv = h("div", "ds-subview"); + const head = h("div", "ds-sub-head"); + head.innerHTML = `‹ BackWallpaper`; + head.querySelector(".back").onclick = closeCb; + sv.appendChild(head); + + sv.appendChild(engrave("Current")); + const thumbs = h("div", "ds-thumbs"); + SWATCHES.forEach((g, i) => { + const t = h("div", "ds-thumb" + (state.wallpaper.current === i ? " cur" : "")); + t.style.background = g; + if (i === state.wallpaper.day) t.appendChild(tag("day")); + if (i === state.wallpaper.night) t.appendChild(tag("night")); + t.onclick = () => { + state.wallpaper.current = i; + applyVerified(`Wallpaper #${i + 1}`, () => {}, t); + sv.querySelectorAll(".ds-thumb").forEach((x, j) => x.classList.toggle("cur", j === i)); + }; + thumbs.appendChild(t); + }); + sv.appendChild(thumbs); + + sv.appendChild(engrave("Day / night pair")); + const dn = h("div", "ds-daynight"); + ["day", "night"].forEach((k) => { + const cell = h("div", "dn"); + const sw = h("div", "sw"); sw.style.background = SWATCHES[state.wallpaper[k]]; + cell.appendChild(sw); + cell.appendChild(h("div", "lbl", k === "day" ? "☀ sunup" : "☾ sundown")); + dn.appendChild(cell); + }); + sv.appendChild(dn); + sv.appendChild(h("div", "ds-note", "Swaps at local sunrise/sundown (sun-time from lat/long).")); + + sv.appendChild(engrave("Directories")); + const dirs = h("div", "ds-dirs"); + state.wallpaper.dirs.forEach((d) => { + const r = h("div", "ds-dir"); + r.innerHTML = `${d}`; + dirs.appendChild(r); + }); + sv.appendChild(dirs); + return sv; + } + function tag(t) { const e = h("span", "tag", t); return e; } + function engrave(txt) { return h("div", "ds-engrave", txt); } + + function bindToast(el) { toastEl = el; el.classList.add("empty"); el.textContent = "waiting…"; } + + return { + state, TOGGLES, SLIDERS, PROFILES, SCENES, + onChange, toast, bindToast, + toggleKey, toggleTile, slider, profileSeg, sceneKey, actionBtn, + wallpaperSubview, engrave, h, + setToggle, setSlider, setProfile, applyScene, momentary, + }; +})(); diff --git a/docs/specs/2026-07-02-desktop-settings-panel-spec.org b/docs/specs/2026-07-02-desktop-settings-panel-spec.org index 17fa0e6..3aef647 100644 --- a/docs/specs/2026-07-02-desktop-settings-panel-spec.org +++ b/docs/specs/2026-07-02-desktop-settings-panel-spec.org @@ -14,6 +14,7 @@ :PROPERTIES: :ID: fb7eec22-a214-4568-82c4-903612f4832f :END: +- [2026-07-19 Sun] DRAFT — folded Craig's control-set decisions (home->archsetup handoff): added night-light, DND, lock/suspend, power profile, and scenes to the controls table; recorded volume and theme as out-of-scope with reasons; pulled the format pickers into a separate display-format sibling spec (stub filed). The "few other things" scoping decision and the scenes decision are now closed. One decision stays open — the wallpaper manager's shape (row-that-opens-a-sub-view vs its own sub-spec), to resolve at spec-review. UI prototyping (ui-prototyping rule: research -> 5 directions -> iterate) is not done yet and is the gate before READY. - [2026-07-04 Sat] DRAFT — all four decisions resolved by Craig (dim + airplane collapse into the panel, touchpad + caffeine stay on the bar; Super+Shift+G keybind; code in dotfiles settings/ beside net/; 5% brightness floor). The four collapse/keybind/location/floor decisions are closed; one open scoping question remains ("few other things" — see Decisions) before a spec-review can flip it READY. - [2026-07-03 Fri] DRAFT update — from the waybar/panel-family design discussion: adopt the instrument-console faceplate aesthetic net + bt @@ -52,7 +53,8 @@ gathers them. 1. One panel with every desktop toggle + slider: auto-dim, idle/caffeine, touchpad, mouse, airplane (laptop-only), screen brightness, keyboard - backlight. + backlight, night-light, Do Not Disturb, power profile, lock/suspend + actions, scenes, and a wallpaper manager (see the controls table). 2. Conditional rows appear only when the hardware/context applies (mouse present, trackpad present, battery present) — reuse the detection the airplane/touchpad indicators already do. @@ -84,27 +86,47 @@ gathers them. ** Controls and their backings -| Control | Backing | -|--------------------+----------------------------------------------| -| Auto-dim toggle | hyprctl decoration:dim_inactive (dim-toggle) | -|--------------------+----------------------------------------------| -| Idle / caffeine | hypridle start/stop (caffeine-toggle) | -|--------------------+----------------------------------------------| -| Touchpad toggle | toggle-touchpad + touchpad-state file | -|--------------------+----------------------------------------------| -| Mouse toggle | same mechanism, mouse-state file | -|--------------------+----------------------------------------------| -| Airplane mode | airplane-mode script (laptop-only row) | -|--------------------+----------------------------------------------| -| Screen brightness | brightnessctl (backlight class), slider + % | -|--------------------+----------------------------------------------| -| Keyboard backlight | brightnessctl (kbd_backlight class), slider | -|--------------------+----------------------------------------------| +| Control | Kind | Backing | +|--------------------+----------+----------------------------------------------| +| Auto-dim toggle | toggle | hyprctl decoration:dim_inactive (dim-toggle) | +|--------------------+----------+----------------------------------------------| +| Idle / caffeine | toggle | hypridle start/stop (caffeine-toggle) | +|--------------------+----------+----------------------------------------------| +| Touchpad toggle | toggle | toggle-touchpad + touchpad-state file | +|--------------------+----------+----------------------------------------------| +| Mouse toggle | toggle | same mechanism, mouse-state file | +|--------------------+----------+----------------------------------------------| +| Airplane mode | toggle | airplane-mode script (laptop-only row) | +|--------------------+----------+----------------------------------------------| +| Screen brightness | slider | brightnessctl (backlight class), slider + % | +|--------------------+----------+----------------------------------------------| +| Keyboard backlight | slider | brightnessctl (kbd_backlight class), slider | +|--------------------+----------+----------------------------------------------| +| Night light / | toggle | color-temperature shift (candidate: | +| color temperature | | hyprsunset; confirm the tool at build) | +|--------------------+----------+----------------------------------------------| +| Do Not Disturb | toggle | dunstctl set-paused (pause notifications) | +|--------------------+----------+----------------------------------------------| +| Power profile | selector | powerprofilesctl (performance / balanced / | +| | | power-saver, three-way) | +|--------------------+----------+----------------------------------------------| +| Lock / suspend | actions | hyprlock / systemctl suspend (momentary | +| | | buttons, not stateful toggles) | +|--------------------+----------+----------------------------------------------| +| Scenes / profiles | composite| one control that flips several toggles at | +| | | once: Focus, Presentation, Battery-saver, | +| | | Night (see the Scenes decision below) | +|--------------------+----------+----------------------------------------------| +| Wallpaper manager | sub-view | still-open shape (row-that-opens-a-sub-view | +| | | vs its own sub-spec) — resolve at spec-review| +|--------------------+----------+----------------------------------------------| Slider changes apply live (throttled) and read back the actual level after apply — verify-everything. Toggles re-read their source of truth after firing, same as the bar indicators do, and the bar modules get their refresh -signals so both surfaces agree. +signals so both surfaces agree. The lock/suspend buttons are momentary +actions with no persistent state to reflect. A scene reads back each toggle it +sets and reports the composite as applied only when every member verified. ** Open/close behavior @@ -130,23 +152,50 @@ Resolved (Craig, 2026-07-04): dotfiles =settings/= sibling to =net/= (same src-l CLOSED: [2026-07-04 Sat] Resolved (Craig, 2026-07-04): 5% floor on the brightness slider, so a dark-room drag can't black the screen out and lock you out. brightnessctl's 0-100% range clamps to a 5% minimum. -** TODO What are the "few other things" beyond the toggles? -The 2026-07-03 discussion named consolidating the toggle buttons "and a few -other things" into this panel, but the extras weren't enumerated. Current -control list (above): auto-dim, idle/caffeine, touchpad, mouse, airplane, -screen brightness, keyboard backlight. Candidates raised or adjacent — -confirm which belong here vs the audio panel vs the bar: night-light / color -temperature, volume or a -master-mute mirror (or leave all audio to the audio panel), a -notifications/do-not-disturb toggle (dunst), lock/suspend actions. Craig to -name the set. +** DONE What are the "few other things" beyond the toggles? +CLOSED: [2026-07-19 Sun] +Resolved (Craig, 2026-07-19, via the home->archsetup handoff). Beyond the seven +base toggles/sliders, the panel adds: night-light / color temperature; Do Not +Disturb (dunst); lock / suspend quick actions; power profile +(performance/balanced/saver); and scenes/profiles (see the Scenes decision). +Plus the wallpaper manager already confirmed 2026-07-04 (its shape stays open, +see the Wallpaper decision). The controls table above now carries all of them. + +OUT of this panel, with reasons: volume / master-mute stays with the audio +panel (this panel does not mirror it — one owner per control); theme light/dark +goes to the separate theme-studio task, not here. + +Format pickers (time/date/weather display format) are pulled out entirely into +their own future sibling spec. The real problem there is a single source of +truth — many programs store their own format, so the design question is where +the canonical time/date/weather format lives and how every consumer (clock +module, weather chip) reads it without drift. Tracked as a stub: +[[file:2026-07-19-display-format-single-source-of-truth-spec.org][display-format single-source-of-truth]]. *** 2026-07-04 Sat — Craig's input (roam capture): the set includes a wallpaper manager Confirmed the panel gathers the mouse/trackpad toggle, a no-sleep (idle-inhibit) toggle, and the auto-dim toggle, and adds a *wallpaper manager* (this is where the displaced waypaper functionality lands — see the media/keybind change that freed Super+Shift+P). The wallpaper manager needs its own depth: - take a number of directories to look in; - switch the wallpaper with the change persisting across sessions; - switch between two pictures at sunup / sundown (a day/night pair). -That last one implies a sun-time source (a lat/long or a sunrise/sunset lookup). The wallpaper manager is sizable enough it may want its own sub-spec rather than a single panel row; decide during the spec-review whether it's a row that opens a sub-view or a separate panel. Remaining "few other things" candidates above (night-light, theme switch, DND, lock/suspend) still await Craig's yes/no. +That last one implies a sun-time source (a lat/long or a sunrise/sunset lookup). + +** DONE Scenes / profiles — one control that flips several toggles at once +CLOSED: [2026-07-19 Sun] +Resolved (Craig, 2026-07-19): the panel offers named scenes that set several +controls in one action — Focus, Presentation, Battery-saver, Night. Scenes are +the payoff of consolidating every desktop control in one panel. The exact +toggle set each scene applies is a build-time detail (design it against the +control table); the spec commitment is that scenes exist and each verifies +every member it sets (see Controls note above). + +** DONE Wallpaper manager — a panel row that opens a sub-view, or its own sub-spec? +CLOSED: [2026-07-19 Sun] +Resolved (Craig, 2026-07-19): a row in the panel that opens a sub-view, kept +inside the one panel (the "consolidate everything" thesis). The wallpaper +manager's depth (directories to scan, persistent selection, a day/night +sunup/sundown pair needing a sun-time source) lives in that sub-view, not a +separate surface. Sun-time source (lat/long or sunrise/sunset lookup) is a +build detail for the sub-view. * Implementation phases diff --git a/docs/specs/2026-07-19-display-format-single-source-of-truth-spec.org b/docs/specs/2026-07-19-display-format-single-source-of-truth-spec.org new file mode 100644 index 0000000..02e043c --- /dev/null +++ b/docs/specs/2026-07-19-display-format-single-source-of-truth-spec.org @@ -0,0 +1,63 @@ +#+TITLE: Display-Format Single Source of Truth +#+AUTHOR: Craig Jennings +#+DATE: 2026-07-19 +#+TODO: TODO | DONE +#+TODO: DRAFT READY DOING | IMPLEMENTED SUPERSEDED CANCELLED + +* DRAFT Display-Format Single Source of Truth +:PROPERTIES: +:ID: ae247f1a-e48f-4d5e-8556-dd1f0aa34a69 +:END: +- [2026-07-19 Sun] DRAFT — stub. Split out of the desktop-settings panel spec (Craig, 2026-07-19): format pickers do not belong in that panel. Filed to hold the problem until it gets its own design pass. Not started. + +* Status +:PROPERTIES: +:ID: a76a41df-85c2-4137-9ba5-eff04db529a5 +:END: +- [2026-07-19 Sun] DRAFT — stub only. Problem framed below; goals, decisions, and phases to be developed when Craig picks this up. + +* Metadata + +| Field | Value | +|--------+-----------------------------------------| +| Status | draft | +|--------+-----------------------------------------| +| Owner | Craig Jennings | +|--------+-----------------------------------------| +| Repo | dotfiles | +|--------+-----------------------------------------| +| Kin | desktop-settings panel (parent), clock | +| | module, weather chip (consumers) | +|--------+-----------------------------------------| + +* Problem + +Display-format settings for time, date, and weather are stored independently by +each program that renders them. The clock module has its own format ring, the +weather chip its own, and any future consumer would carry a third. There is no +canonical place a user sets "this is how I want the time shown" that every +surface reads. + +The design problem is a single source of truth: where the canonical +time/date/weather format lives, and how every consumer reads it without drift. +Solve that first; the pickers (the UI that edits the format) are downstream of +where the value is stored. + +This was pulled out of the desktop-settings panel spec +([[file:2026-07-02-desktop-settings-panel-spec.org][desktop-settings panel]]) on +2026-07-19 — format editing does not belong in that panel, and the real work is +the storage/consumption model, not a picker widget. + +* Goals + +(To be developed. At minimum: a canonical store for time/date/weather format; a +read path every consumer uses; a migration for the existing per-consumer +formats.) + +* Decisions + +(None yet — Craig has not started this.) + +* Implementation phases + +(To be developed once the goals and the storage model are settled.) -- cgit v1.2.3