docs(adr): ADR-032 visual refresh — light(B)+dark(C) charm-reader themes + sketches (issue #17)
This commit is contained in:
@@ -1267,6 +1267,53 @@ map) → TDD → implement → SemVer + docs.
|
||||
|
||||
---
|
||||
|
||||
## ADR-032 — Visual refresh: one charm-reader layout, light + dark themes
|
||||
|
||||
**Status:** Proposed (2026-06-12). Issue #17. **Draft for review — no code yet.** Follows the
|
||||
sketch-first explore step (3 throwaway mockups in `docs/sketches/`, screenshotted for review).
|
||||
|
||||
**Context / decision.** The UI is flat. From the mockups, directions **B (light reader + charm)**
|
||||
and **C (dark cozy terminal)** are the SAME layout — readable sans body, monospace meta, charm
|
||||
palette accents, lipgloss-style bordered cards — in two palettes. Direction A (full-monospace TUI)
|
||||
is dropped as too heavy to read long summaries. Decision: ship that one layout with **both a light
|
||||
theme (B) and a dark theme (C)**, user-toggleable, defaulting to the OS preference.
|
||||
|
||||
**Requirements.**
|
||||
- R1: one set of markup/structure; the two themes are pure palette (CSS variables), no duplicate templates.
|
||||
- R2: a **theme toggle** persisted across visits; default to `prefers-color-scheme` when no choice stored.
|
||||
- R3: charm language in both — mint/purple/pink accents, mono meta + section labels, lipgloss
|
||||
bordered/gradient cards, the (fixed) ASCII tapir; readable sans body.
|
||||
- R4: style the existing pieces — list, compact card, **expanded card incl. the already-present
|
||||
video embed (ADR-031/summaryBody)**, detail page, chat dock, the queue note, the charm spinner.
|
||||
- R5: WCAG-AA contrast for body text in BOTH themes; keep `prefers-reduced-motion` (already honoured).
|
||||
- R6: stay HTMX+Templ; no CSS framework.
|
||||
|
||||
**Architecture.**
|
||||
1. **Palette as CSS variables.** `:root` holds the light (B) tokens; `:root[data-theme="dark"]`
|
||||
holds the dark (C) tokens; a `prefers-color-scheme: dark` media block sets the dark tokens when
|
||||
no explicit `data-theme` is set. All component CSS references variables only (R1). The existing
|
||||
`CharmMint/Purple/Pink/Cream/Dim` Go consts remain the source for the spinner's inline colours.
|
||||
2. **Theme toggle** = a small inline script (a dozen lines, no framework) in `Layout`: on load,
|
||||
apply stored theme (localStorage) or fall through to the media query; a header toggle button
|
||||
flips `data-theme` on `<html>` and stores it. This is the one new bit of JS; everything else
|
||||
stays server-rendered + HTMX. (Considered: cookie + server-render — rejected, a full round-trip
|
||||
per toggle is clunky for a pure presentation flip.)
|
||||
3. **Scope = the `styleTag` CSS in `view.go`** (the single style source) plus tiny class hooks in
|
||||
the templ where needed; content/structure are unchanged, so existing view tests keep passing.
|
||||
|
||||
**Verification.** The deployed UI is behind auth (web-shot can't log in), so visual review is via
|
||||
the mockups now + a styled full-set mockup screenshot before merge, then a live eyeball on device.
|
||||
Automated tests stay structural/behavioural (theme tokens present, toggle persists, expanded card
|
||||
embeds the video, no-JS still renders a readable default) — colours are not unit-tested.
|
||||
|
||||
**Reversibility.** A CSS theme swap + one small script + a few class hooks; revert `styleTag` to
|
||||
roll back. No schema, no structural change.
|
||||
|
||||
**Next steps (gated):** on approval → BDD (`docs/use-cases/visual_theme.feature` + coverage map)
|
||||
→ TDD → implement → SemVer + docs.
|
||||
|
||||
---
|
||||
|
||||
## Rejected alternatives
|
||||
|
||||
Approaches considered during the 2026-06-02 planning + grill session and **deliberately not
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>tapir — A · TUI panels</title>
|
||||
<style>
|
||||
:root{--bg:#0d0d12;--panel:#14141c;--line:#2a2a3a;--mint:#0EF9B6;--pink:#F740A0;--purple:#7653fc;--cream:#F5E9D6;--dim:#6b6b86;--text:#d9d9e6}
|
||||
*{box-sizing:border-box}
|
||||
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,"Cascadia Code",monospace}
|
||||
.wrap{max-width:760px;margin:0 auto;padding:18px 14px 60px}
|
||||
header{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:18px}
|
||||
.brand{color:var(--mint);font-weight:700;letter-spacing:.5px}
|
||||
.brand b{color:var(--cream)}
|
||||
.tip{margin-left:auto;color:var(--dim);font-size:12px}
|
||||
.note{color:var(--dim);font-size:12.5px;border-left:2px solid var(--purple);padding:6px 10px;margin:0 0 16px;background:#11111a}
|
||||
/* lipgloss-style bordered panel */
|
||||
.card{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:12px 14px;margin:0 0 12px;position:relative}
|
||||
.card::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--purple)}
|
||||
.card.ready::before{background:var(--mint)}
|
||||
.title{color:var(--cream);font-size:15px;font-weight:600;margin:0 0 4px}
|
||||
.meta{color:var(--dim);font-size:12px}
|
||||
.chip{display:inline-block;border:1px solid var(--mint);color:var(--mint);border-radius:4px;padding:0 6px;font-size:11px;margin-left:6px}
|
||||
.chip.q{border-color:var(--pink);color:var(--pink)}
|
||||
.preview{color:var(--dim);margin:6px 0 0;font-size:13px}
|
||||
/* expanded */
|
||||
.exp{border-color:var(--purple)}
|
||||
.exp .head{display:flex;justify-content:space-between;align-items:baseline}
|
||||
.collapse{color:var(--mint);font-size:12px;text-decoration:none;border:1px solid var(--line);border-radius:4px;padding:1px 7px}
|
||||
.sec h2{color:var(--mint);font-size:12px;text-transform:uppercase;letter-spacing:1px;margin:16px 0 6px;border-bottom:1px dashed var(--line);padding-bottom:3px}
|
||||
.sec ul{margin:0;padding-left:18px}.sec li{margin:3px 0}
|
||||
.body{color:var(--text)}
|
||||
.dock{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
|
||||
.ask{display:inline-block;background:linear-gradient(90deg,var(--purple),var(--pink));color:#fff;border:0;border-radius:6px;padding:7px 12px;font:inherit;font-size:13px;cursor:pointer}
|
||||
pre.tapir{margin:0;color:var(--mint);font-size:10px;line-height:1.05}
|
||||
</style></head><body><div class="wrap">
|
||||
<header>
|
||||
<pre class="tapir"> ▄█▓▓█▄ ∩
|
||||
█▓( ◕ ◕ )▓█──┘</pre>
|
||||
<span class="brand">◆ <b>tapir</b> · watch less, know more</span>
|
||||
<span class="tip">261 in queue</span>
|
||||
</header>
|
||||
<p class="note">Tapir fetches captions slowly on purpose, to respect YouTube's limits — new summaries land gradually.</p>
|
||||
|
||||
<div class="card ready"><div class="title">How the Attention Economy Rewires Your Brain</div>
|
||||
<div class="meta">youtube · 2026-06-11 · 18 min <span class="chip">ready</span></div>
|
||||
<div class="preview">A tour of the incentive loops behind infinite feeds and three concrete ways to claw back focus…</div></div>
|
||||
|
||||
<article class="card exp ready">
|
||||
<div class="head"><div class="title">Postgres 18 — What's Actually New</div><a class="collapse" href="#">collapse ↑</a></div>
|
||||
<div class="meta">youtube · 2026-06-10 · 42 min · phi4-mini</div>
|
||||
<div class="sec"><h2>Takeaways</h2><ul>
|
||||
<li>Async I/O cuts cold-cache read latency materially on NVMe.</li>
|
||||
<li>Skip-scan makes more multicolumn indexes usable without rewrites.</li>
|
||||
<li>Upgrade path is smooth; test the new planner stats first.</li></ul></div>
|
||||
<div class="sec"><h2>Highlights</h2><ul>
|
||||
<li>Async I/O subsystem (effective_io_concurrency now matters more).</li>
|
||||
<li>B-tree skip scan for leading-column gaps.</li>
|
||||
<li>Better partition-wise joins.</li></ul></div>
|
||||
<div class="sec"><h2>Summary</h2><p class="body">Postgres 18 is an incremental but meaningful release: the headline is the new asynchronous I/O path, with skip-scan and planner improvements close behind. For most homelabs the upgrade is low-risk and worth it for the read-latency wins.</p></div>
|
||||
<div class="dock"><button class="ask">Dig deeper — ask about this video →</button></div>
|
||||
</article>
|
||||
|
||||
<div class="card"><div class="title">RAG is dead, right?? — Conference Talk</div>
|
||||
<div class="meta">youtube · 2026-06-09 · 31 min <span class="chip q">queued</span></div></div>
|
||||
</div></body></html>
|
||||
@@ -0,0 +1,62 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>tapir — B · reader + charm accents</title>
|
||||
<style>
|
||||
:root{--bg:#faf7f2;--card:#fff;--ink:#1c1b22;--soft:#6a6878;--line:#e7e2d8;--mint:#0bbf8c;--purple:#6a4cf0;--pink:#e0379a}
|
||||
*{box-sizing:border-box}
|
||||
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif}
|
||||
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
|
||||
.wrap{max-width:680px;margin:0 auto;padding:20px 16px 60px}
|
||||
header{display:flex;align-items:center;gap:10px;margin-bottom:18px}
|
||||
.brand{font-weight:800;font-size:18px;letter-spacing:-.3px}
|
||||
.brand .dot{color:var(--mint)}
|
||||
.tag{color:var(--soft);font-size:13px}
|
||||
.tip{margin-left:auto;color:var(--soft);font-size:12px}
|
||||
.note{color:var(--soft);font-size:13px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--mint);border-radius:8px;padding:8px 12px;margin:0 0 18px}
|
||||
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:0 0 14px;box-shadow:0 1px 2px rgba(20,18,40,.04)}
|
||||
.title{font-size:18px;font-weight:700;letter-spacing:-.2px;margin:0 0 4px;line-height:1.3}
|
||||
.meta{color:var(--soft);font-size:13px}
|
||||
.meta .mono{font-size:12.5px}
|
||||
.chip{display:inline-block;background:rgba(11,191,140,.12);color:var(--mint);border-radius:999px;padding:1px 9px;font-size:12px;font-weight:600;margin-left:6px}
|
||||
.chip.q{background:rgba(224,55,154,.12);color:var(--pink)}
|
||||
.preview{color:var(--soft);margin:8px 0 0}
|
||||
.exp{border-color:#d9d0ee;box-shadow:0 6px 24px rgba(106,76,240,.10)}
|
||||
.head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
|
||||
.collapse{color:var(--purple);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
|
||||
.sec h2{font-size:12px;text-transform:uppercase;letter-spacing:1.2px;color:var(--purple);margin:18px 0 6px}
|
||||
.sec ul{margin:0;padding-left:20px}.sec li{margin:5px 0}
|
||||
.body{line-height:1.7}
|
||||
.dock{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
|
||||
.ask{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:#fff;border:0;border-radius:999px;padding:9px 16px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
|
||||
pre.tapir{margin:0;color:var(--mint);font-size:10px;line-height:1.05}
|
||||
</style></head><body><div class="wrap">
|
||||
<header>
|
||||
<pre class="tapir"> ▄█▓▓█▄ ∩
|
||||
█▓( ◕ ◕ )▓█──┘</pre>
|
||||
<span class="brand">tapir<span class="dot">.</span></span><span class="tag">watch less, know more</span>
|
||||
<span class="tip mono">261 in queue</span>
|
||||
</header>
|
||||
<p class="note">Tapir fetches captions slowly on purpose, to respect YouTube's limits — new summaries land gradually.</p>
|
||||
|
||||
<div class="card"><div class="title">How the Attention Economy Rewires Your Brain</div>
|
||||
<div class="meta mono">youtube · 2026-06-11 · 18 min <span class="chip">ready</span></div>
|
||||
<div class="preview">A tour of the incentive loops behind infinite feeds and three concrete ways to claw back focus…</div></div>
|
||||
|
||||
<article class="card exp">
|
||||
<div class="head"><div class="title">Postgres 18 — What's Actually New</div><a class="collapse" href="#">collapse ↑</a></div>
|
||||
<div class="meta mono">youtube · 2026-06-10 · 42 min · phi4-mini</div>
|
||||
<div class="sec"><h2>Takeaways</h2><ul>
|
||||
<li>Async I/O cuts cold-cache read latency materially on NVMe.</li>
|
||||
<li>Skip-scan makes more multicolumn indexes usable without rewrites.</li>
|
||||
<li>Upgrade path is smooth; test the new planner stats first.</li></ul></div>
|
||||
<div class="sec"><h2>Highlights</h2><ul>
|
||||
<li>Async I/O subsystem (effective_io_concurrency now matters more).</li>
|
||||
<li>B-tree skip scan for leading-column gaps.</li>
|
||||
<li>Better partition-wise joins.</li></ul></div>
|
||||
<div class="sec"><h2>Summary</h2><p class="body">Postgres 18 is an incremental but meaningful release: the headline is the new asynchronous I/O path, with skip-scan and planner improvements close behind. For most homelabs the upgrade is low-risk and worth it for the read-latency wins.</p></div>
|
||||
<div class="dock"><button class="ask">✦ Ask about this video</button></div>
|
||||
</article>
|
||||
|
||||
<div class="card"><div class="title">RAG is dead, right?? — Conference Talk</div>
|
||||
<div class="meta mono">youtube · 2026-06-09 · 31 min <span class="chip q">queued</span></div></div>
|
||||
</div></body></html>
|
||||
@@ -0,0 +1,65 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>tapir — C · cozy terminal</title>
|
||||
<style>
|
||||
:root{--bg:#16131d;--card:#1e1a28;--ink:#ece7f5;--soft:#9a92b4;--line:#322b44;--mint:#2ee6b6;--purple:#9d7bff;--pink:#ff6bdb;--cream:#f3ead8}
|
||||
*{box-sizing:border-box}
|
||||
body{margin:0;background:radial-gradient(1200px 600px at 70% -10%,#231b33,transparent),var(--bg);color:var(--ink);font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif}
|
||||
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
|
||||
.wrap{max-width:700px;margin:0 auto;padding:20px 16px 60px}
|
||||
header{display:flex;align-items:center;gap:12px;margin-bottom:18px}
|
||||
.brand{font-weight:800;font-size:18px}.brand .c{color:var(--mint)}
|
||||
.tag{color:var(--soft);font-size:13px}
|
||||
.tip{margin-left:auto;color:var(--soft);font-size:12px}
|
||||
.note{color:var(--soft);font-size:13px;background:#1b1726;border:1px solid var(--line);border-radius:10px;padding:9px 12px;margin:0 0 18px}
|
||||
.note b{color:var(--mint);font-weight:600}
|
||||
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px 14px 18px;margin:0 0 13px;overflow:hidden}
|
||||
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--purple)}
|
||||
.card.ready::before{background:linear-gradient(var(--mint),var(--purple))}
|
||||
.title{font-size:16px;font-weight:700;margin:0 0 4px;color:var(--cream)}
|
||||
.meta{color:var(--soft);font-size:12.5px}
|
||||
.chip{display:inline-block;border-radius:999px;padding:1px 9px;font-size:11px;font-weight:600;margin-left:6px;background:rgba(46,230,182,.14);color:var(--mint)}
|
||||
.chip.q{background:rgba(157,123,255,.18);color:var(--purple)}
|
||||
.preview{color:var(--soft);margin:7px 0 0;font-size:14px}
|
||||
.exp{border-color:#473a63;box-shadow:0 10px 40px rgba(0,0,0,.35)}
|
||||
.head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
|
||||
.collapse{color:var(--mint);font-size:12px;text-decoration:none;border:1px solid var(--line);border-radius:6px;padding:2px 8px;white-space:nowrap}
|
||||
.sec h2{font-size:11px;text-transform:uppercase;letter-spacing:1.3px;color:var(--mint);margin:18px 0 7px;display:flex;align-items:center;gap:8px}
|
||||
.sec h2::after{content:"";flex:1;height:1px;background:var(--line)}
|
||||
.sec ul{margin:0;padding-left:18px}.sec li{margin:5px 0}
|
||||
.body{line-height:1.7;color:var(--ink)}
|
||||
.dock{margin-top:18px;border-top:1px dashed var(--line);padding-top:14px;display:flex;align-items:center;gap:10px}
|
||||
.ask{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(90deg,var(--purple),var(--mint));color:#10101a;border:0;border-radius:999px;padding:9px 16px;font:inherit;font-weight:700;font-size:14px;cursor:pointer}
|
||||
.dockhint{color:var(--soft);font-size:12px}
|
||||
pre.tapir{margin:0;color:var(--mint);font-size:11px;line-height:1.05}
|
||||
</style></head><body><div class="wrap">
|
||||
<header>
|
||||
<pre class="tapir"> ▄█▓▓█▄ ∩
|
||||
█▓( ◕ ◕ )▓█──┘</pre>
|
||||
<span class="brand">tapir<span class="c">_</span></span><span class="tag">watch less, know more</span>
|
||||
<span class="tip mono">261 in queue</span>
|
||||
</header>
|
||||
<p class="note">Tapir fetches captions slowly on purpose, to respect YouTube's limits — <b>new summaries land gradually</b>.</p>
|
||||
|
||||
<div class="card ready"><div class="title">How the Attention Economy Rewires Your Brain</div>
|
||||
<div class="meta mono">youtube · 2026-06-11 · 18 min <span class="chip">ready</span></div>
|
||||
<div class="preview">A tour of the incentive loops behind infinite feeds and three concrete ways to claw back focus…</div></div>
|
||||
|
||||
<article class="card exp ready">
|
||||
<div class="head"><div class="title">Postgres 18 — What's Actually New</div><a class="collapse" href="#">collapse ↑</a></div>
|
||||
<div class="meta mono">youtube · 2026-06-10 · 42 min · phi4-mini</div>
|
||||
<div class="sec"><h2>Takeaways</h2><ul>
|
||||
<li>Async I/O cuts cold-cache read latency materially on NVMe.</li>
|
||||
<li>Skip-scan makes more multicolumn indexes usable without rewrites.</li>
|
||||
<li>Upgrade path is smooth; test the new planner stats first.</li></ul></div>
|
||||
<div class="sec"><h2>Highlights</h2><ul>
|
||||
<li>Async I/O subsystem (effective_io_concurrency now matters more).</li>
|
||||
<li>B-tree skip scan for leading-column gaps.</li>
|
||||
<li>Better partition-wise joins.</li></ul></div>
|
||||
<div class="sec"><h2>Summary</h2><p class="body">Postgres 18 is an incremental but meaningful release: the headline is the new asynchronous I/O path, with skip-scan and planner improvements close behind. For most homelabs the upgrade is low-risk and worth it for the read-latency wins.</p></div>
|
||||
<div class="dock"><button class="ask">◆ Ask about this video</button><span class="dockhint mono">answers only from this video's transcript</span></div>
|
||||
</article>
|
||||
|
||||
<div class="card"><div class="title">RAG is dead, right?? — Conference Talk</div>
|
||||
<div class="meta mono">youtube · 2026-06-09 · 31 min <span class="chip q">queued</span></div></div>
|
||||
</div></body></html>
|
||||
Reference in New Issue
Block a user