docs: PTT waybar-indicator prototypeHEAD main

Design prototype for the push-to-talk bar indicator: an always-present outline tag (account-voice glyph) left of the mic — dim grey when off so the bar never reflows, gold + glow when armed, brighter while transmitting, click-to-toggle. The states and icon were settled against this before wiring it into waybar.
author: Craig Jennings <c@cjennings.net> 2026-07-06 17:22:25 -0500
committer: Craig Jennings <c@cjennings.net> 2026-07-06 17:22:25 -0500
commit: 96881fccae125c8803ac5c26b8ddb7ee77be363a (patch)
tree: 0823c58cd19ea8060c5cc614485378c649310440 /docs/prototypes
parent: 79daceb4bf82ab5bfc93512702807f3763de89ef (diff)
download: archsetup-96881fccae125c8803ac5c26b8ddb7ee77be363a.tar.gz
archsetup-96881fccae125c8803ac5c26b8ddb7ee77be363a.zip
1 files changed, 133 insertions, 0 deletions
diff --git a/docs/prototypes/2026-07-06-ptt-waybar-indicator-prototype.html b/docs/prototypes/2026-07-06-ptt-waybar-indicator-prototype.html
new file mode 100644
index 0000000..0b5d6e8
--- /dev/null
+++ b/docs/prototypes/2026-07-06-ptt-waybar-indicator-prototype.html
@@ -0,0 +1,133 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>PTT waybar indicator — prototype</title>
+<style>
+:root{
+  --ground:#151311; --panel:#100f0f; --bar:#0d0c0b; --well:#0a0c0d; --raise:#1a1917;
+  --gold:#dab53d; --gold-hi:#ffd75f; --silver:#bfc4d0; --cream:#f3e7c5;
+  --steel:#969385; --dim:#7c838a; --wash:#2c2f32; --pass:#74932f; --fail:#cb6b4d;
+  --mono:"BerkeleyMono Nerd Font","Berkeley Mono","JetBrainsMono Nerd Font",monospace;
+}
+*{box-sizing:border-box}
+body{font-family:var(--mono);color:var(--silver);margin:0;padding:2.6rem 2rem 5rem;line-height:1.5;
+  background:radial-gradient(1200px 600px at 70% -10%,#1c1915 0%,transparent 60%),var(--ground)}
+h1{font-size:1.05rem;letter-spacing:.02em;color:var(--cream);font-weight:700;margin:0 0 .3rem}
+.sub{color:var(--dim);font-size:.82rem;margin:0 0 2rem;max-width:60ch}
+h2{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--steel);
+  margin:2.2rem 0 .8rem;display:flex;align-items:center;gap:10px}
+h2::after{content:"";height:1px;background:var(--wash);flex:1}
+
+/* a slice of the real waybar: dark rounded bar, right-aligned modules */
+.bar{display:inline-flex;align-items:center;gap:2px;background:var(--bar);
+  border:1px solid #201d17;border-radius:10px;padding:5px 8px;
+  box-shadow:0 2px 10px rgba(0,0,0,.45)}
+.mod{display:flex;align-items:center;gap:7px;padding:4px 9px;border-radius:7px;color:var(--silver);
+  font-size:14px}
+.mod .g{font-size:17px;line-height:1}
+.mod.muted .g{color:var(--fail)}
+.mod.live .g{color:var(--silver)}
+.sep{width:1px;height:16px;background:#26231d;margin:0 2px}
+.neighbor{color:var(--dim);font-size:13px;padding:4px 8px}
+
+/* the PTT tag — outline only, ALWAYS present (so the bar never reflows), and
+   click-to-toggle. Off = barely-visible grey; on = glowing gold; transmitting
+   = brighter gold. Like the gallery 2.4G ghost tag, lit when engaged. */
+.badge{font-size:15px;line-height:1;border-radius:4px;padding:3px 7px;
+  background:transparent;border:1px solid #2a2723;color:#54585c;
+  text-shadow:none;box-shadow:none;cursor:pointer;transition:all .15s ease}
+.badge.txt{font-size:.62rem;letter-spacing:.18em;font-weight:700;padding:2px 7px}
+.badge.on{color:var(--gold);border-color:var(--gold);
+  text-shadow:0 0 6px rgba(218,181,61,.75);
+  box-shadow:0 0 6px rgba(218,181,61,.28),inset 0 0 5px rgba(218,181,61,.15)}
+.badge.talk{color:var(--gold-hi);border-color:var(--gold-hi);
+  text-shadow:0 0 10px rgba(255,215,95,.95);
+  box-shadow:0 0 11px rgba(255,215,95,.5),inset 0 0 6px rgba(255,215,95,.2)}
+.badge.ghost{border-color:var(--wash);color:var(--dim)}
+
+.row{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:10px 0}
+.label{width:16rem;color:var(--dim);font-size:.8rem}
+.label b{color:var(--cream);font-weight:700}
+.note{color:var(--dim);font-size:.78rem;margin:.6rem 0 0;max-width:70ch}
+.opt{margin:2.4rem 0 0;padding:14px 16px;border:1px solid #262320;border-radius:10px;
+  background:linear-gradient(180deg,var(--raise),var(--panel));max-width:70ch}
+.opt h3{margin:0 0 .5rem;color:var(--cream);font-size:.86rem;letter-spacing:.04em}
+.opt p{margin:.3rem 0;color:var(--silver);font-size:.82rem}
+.k{color:var(--gold);font-weight:700}
+</style>
+</head>
+<body>
+
+<h1>Push-to-talk — waybar indicator</h1>
+<p class="sub">How the bar reads in each state, so you can tell at a glance whether you're in PTT mode.
+Two elements move together: the <b>mic glyph</b> (live vs muted, the module you already have) and a
+<b>PTT tag</b> — an outline flag that's <b>always present</b> (dim grey when off, so the bar never jumps),
+glows gold when PTT is engaged, and is itself <b>click-to-toggle</b> for PTT mode.</p>
+
+<h2>Not in PTT mode — the tag sits dim (present, barely visible)</h2>
+
+<div class="row">
+  <div class="label"><b>Mic live.</b> Tag dim grey.</div>
+  <div class="bar">
+    <span class="neighbor">󰂯</span><span class="sep"></span>
+    <div class="mod live"><span class="badge">&#xF05CB;</span> <span class="g">󰍬</span></div>
+    <span class="neighbor">85%</span>
+  </div>
+</div>
+
+<div class="row">
+  <div class="label"><b>Mic muted</b> (plain mic-toggle). Tag still dim.</div>
+  <div class="bar">
+    <span class="neighbor">󰂯</span><span class="sep"></span>
+    <div class="mod muted"><span class="badge">&#xF05CB;</span> <span class="g">󰍭</span></div>
+    <span class="neighbor">85%</span>
+  </div>
+</div>
+
+<p class="note">The tag is <b>always there</b> — dim grey when off — so the bar never reflows when PTT flips.
+<b>Click the tag to toggle PTT mode</b> (same as Super+Shift+A). A plain mic-mute leaves the tag dim; only PTT lights it gold.</p>
+
+<h2>In PTT mode — the tag lights gold</h2>
+
+<div class="row">
+  <div class="label"><b>Armed, not talking.</b> Mic muted, tag glows gold.</div>
+  <div class="bar">
+    <span class="neighbor">󰂯</span><span class="sep"></span>
+    <div class="mod muted"><span class="badge on">&#xF05CB;</span> <span class="g">󰍭</span></div>
+    <span class="neighbor">85%</span>
+  </div>
+</div>
+
+<div class="row">
+  <div class="label"><b>Holding the key — transmitting.</b> Mic live, tag brightens.</div>
+  <div class="bar">
+    <span class="neighbor">󰂯</span><span class="sep"></span>
+    <div class="mod live"><span class="badge talk">&#xF05CB;</span> <span class="g">󰍬</span></div>
+    <span class="neighbor">85%</span>
+  </div>
+</div>
+
+<p class="note">Only the letters and outline change colour — the box holds its place, so nothing shifts. While you hold to talk the mic flips live and the tag brightens, so you see you're transmitting, not just armed.</p>
+
+<h2>The four states side by side — the tag never moves</h2>
+<div class="row">
+  <div class="bar">
+    <div class="mod live"><span class="badge">&#xF05CB;</span> <span class="g">󰍬</span></div><span class="sep"></span>
+    <div class="mod muted"><span class="badge">&#xF05CB;</span> <span class="g">󰍭</span></div><span class="sep"></span>
+    <div class="mod muted"><span class="badge on">&#xF05CB;</span> <span class="g">󰍭</span></div><span class="sep"></span>
+    <div class="mod live"><span class="badge talk">&#xF05CB;</span> <span class="g">󰍬</span></div>
+  </div>
+</div>
+<p class="note">left → right: off + live · off + muted · PTT armed · PTT transmitting. The tag holds its position through all four — no jump.</p>
+
+<div class="opt">
+  <h3>Variants to consider</h3>
+  <p>• <span class="k">Tag icon</span> — the account-voice glyph 󰗋 (shown). Alternatives if it doesn't read right: radio-handheld 󰐺, broadcast 󱜠, or plain "PTT"/"TALK" text.</p>
+  <p>• <span class="k">Tag colour</span> — gold (shown, matches the panel's PUSH·TALK lamp). A red tag would read more like "mic hot/muted"; gold reads "mode engaged".</p>
+  <p>• <span class="k">Tag placement</span> — left of the mic glyph (shown) so the flag leads. Could sit right of it instead.</p>
+  <p>• <span class="k">Transmit cue</span> — brighten + glow the tag while holding (shown), or leave the tag steady and let only the mic glyph carry the live/muted change.</p>
+</div>
+
+</body>
+</html>
author	Craig Jennings <c@cjennings.net>	2026-07-06 17:22:25 -0500
committer	Craig Jennings <c@cjennings.net>	2026-07-06 17:22:25 -0500
commit	96881fccae125c8803ac5c26b8ddb7ee77be363a (patch)
tree	0823c58cd19ea8060c5cc614485378c649310440 /docs/prototypes
parent	79daceb4bf82ab5bfc93512702807f3763de89ef (diff)
download	archsetup-96881fccae125c8803ac5c26b8ddb7ee77be363a.tar.gz archsetup-96881fccae125c8803ac5c26b8ddb7ee77be363a.zip