privateboard 0.1.7 → 0.1.9

package/public/user-settings.css

@@ -69,33 +69,36 @@
 }
 .us-classification .right { color: var(--text-faint, #3A382F); letter-spacing: 0.12em; }
 
-.us-head {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  gap: 14px;
-  align-items: center;
-  padding: 14px 18px;
-  border-bottom: 0.5px dashed var(--line-bright, #2A2A26);
-  flex: 0 0 auto;
-}
-.us-head .us-title {
-  font-size: 14px;
-  font-weight: 700;
-  color: var(--text, #C8C5BE);
-  letter-spacing: -0.01em;
-}
-.us-head .us-title::before { content: "▸ "; color: var(--lime, #6FB572); }
-.us-head .us-close {
-  width: 28px; height: 28px;
+/* Close button · absolute-positioned in the modal's top-right
+   corner, pinned BELOW the classification strip so it doesn't
+   overlap "// LOCAL" at the right edge of that strip. The strip is
+   ~22-24px tall (6px + 9px font + 6px + 0.5px border). The button
+   sits at 48px from the modal top — roughly aligned with the
+   first pane's `padding-top: 18px` baseline, so it visually
+   anchors to the section content rather than crowding the strip
+   below. The previous header strip (`.us-head`) that hosted this
+   button has been retired — first the "Preference" title, then
+   the surrounding bar with its dashed divider. */
+.us-close {
+  position: absolute;
+  top: 38px;
+  right: 14px;
+  z-index: 1;
+  width: 24px; height: 24px;
   background: transparent;
   border: 0.5px solid var(--line-bright, #2A2A26);
   color: var(--text-dim, #5C5A52);
-  font-size: 14px;
+  font-size: 12px;
+  line-height: 1;
   cursor: pointer;
   font-family: var(--mono);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
   transition: all 0.12s;
 }
-.us-head .us-close:hover {
+.us-close:hover {
   border-color: var(--lime, #6FB572);
   color: var(--lime, #6FB572);
 }
@@ -261,50 +264,76 @@
   margin-top: 5px;
 }
 
-/* ─── Toggle row · pill button + supporting deck text ───
-   Matches the visual vocabulary of the day-picker pills (mono
-   uppercase, hairline border, lime accent when on) so the User pane
-   doesn't introduce a third button style for one toggle. */
+/* ─── Toggle row · proper switch + supporting deck text ───
+   Switch shape (track + sliding thumb) instead of the prior pill
+   button: the affordance reads "on/off state" at a glance, not
+   "press me to do something." Track is a 32×18 rounded rect, thumb
+   is a 14×14 disc that slides 14px between rest positions. Lime
+   fill when on; panel-3 fill + hairline border when off. */
 .us-toggle-row {
   display: flex;
   align-items: center;
   gap: 12px;
   flex-wrap: wrap;
 }
-.us-toggle-pill {
+.us-switch {
   appearance: none;
   background: transparent;
-  border: 0.5px solid var(--line-bright, #2A2A26);
-  color: var(--text-soft, #8E8B83);
-  font-family: var(--mono);
-  font-size: 10.5px;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  font-weight: 700;
-  padding: 6px 14px;
+  border: none;
+  padding: 0;
   display: inline-flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
   cursor: pointer;
-  transition: color 0.12s, border-color 0.12s, background 0.12s;
-}
-.us-toggle-pill:hover {
-  color: var(--text, #C8C5BE);
-  border-color: var(--text-faint, #3A382F);
+  font-family: var(--mono);
+  color: inherit;
 }
-.us-toggle-pill.on {
-  color: var(--lime, #6FB572);
-  border-color: var(--lime, #6FB572);
-  background: var(--panel-2, #1A1A18);
+.us-switch-track {
+  position: relative;
+  display: inline-block;
+  width: 32px;
+  height: 18px;
+  background: var(--panel-3, #21211E);
+  border: 0.5px solid var(--line-bright, #2A2A26);
+  border-radius: 9px;
+  flex-shrink: 0;
+  transition: background 0.18s, border-color 0.18s;
 }
-.us-toggle-dot {
-  width: 6px;
-  height: 6px;
+.us-switch-thumb {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: 14px;
+  height: 14px;
   border-radius: 50%;
   background: var(--text-faint, #3A382F);
-  transition: background 0.12s;
+  transition: transform 0.18s ease, background 0.18s;
+}
+.us-switch.on .us-switch-track {
+  background: var(--lime, #6FB572);
+  border-color: var(--lime, #6FB572);
+}
+.us-switch.on .us-switch-thumb {
+  transform: translateX(14px);
+  background: var(--bg, #0A0A0A);
+}
+.us-switch:hover .us-switch-track { border-color: var(--text-faint, #3A382F); }
+.us-switch.on:hover .us-switch-track { border-color: var(--lime, #6FB572); }
+.us-switch:focus-visible { outline: none; }
+.us-switch:focus-visible .us-switch-track {
+  outline: 1.5px solid var(--lime, #6FB572);
+  outline-offset: 2px;
+}
+.us-switch-label {
+  font-size: 10.5px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  font-weight: 700;
+  color: var(--text-soft, #8E8B83);
+  transition: color 0.12s;
 }
-.us-toggle-pill.on .us-toggle-dot { background: var(--lime, #6FB572); }
+.us-switch.on .us-switch-label { color: var(--lime, #6FB572); }
+
 .us-toggle-deck {
   font-size: 11px;
   color: var(--text-faint, #3A382F);
@@ -777,7 +806,6 @@
 
 @media (max-width: 600px) {
   .user-settings-overlay { padding: 12px; }
-  .us-head { padding-left: 14px; padding-right: 14px; }
   .us-pane { padding: 14px; }
   .us-foot { padding: 10px 14px; }
 }
@@ -895,9 +923,11 @@
   display: flex;
   align-items: flex-end;
   gap: 4px;
-  height: 96px;
+  height: 180px;
   /* The stack within each bar lives at the bottom (flex-end) so
-     bar height grows upward like a real chart axis. */
+     bar height grows upward like a real chart axis. Bumped from
+     96px → 180px so the chart reads as a real exhibit instead of
+     a squashed sparkline. */
 }
 .us-chart-bar {
   appearance: none;
@@ -915,27 +945,46 @@
   position: relative;
 }
 .us-chart-bar:hover .us-chart-stack { filter: brightness(1.15); }
-.us-chart-bar.empty .us-chart-stack {
-  height: 1px !important;
-  background: var(--line-bright, #2A2A26);
-}
-.us-chart-bar.today::before {
-  /* Outline marker for today's bar — a hairline ring around the
-     full bar slot (including the empty space above the stack)
-     so the present is locatable even on a zero-token day. */
-  content: "";
+/* Hover tooltip · two-line custom tip rendered via ::before from the
+   bar's data-tip-day / data-tip-num attributes. Floats above the
+   column so it doesn't overlap the stack or get clipped by the bar's
+   contents. Native browser title= is replaced by aria-label= on the
+   button to keep a11y without the 500ms native-tooltip delay.
+   Suppressed on `.empty` bars · zero-usage days show no tooltip
+   (the row is already empty; a tooltip saying "no usage" is noise). */
+.us-chart-bar:not(.empty)::before {
+  content: attr(data-tip-day) "\A" attr(data-tip-num);
+  white-space: pre;
+  text-align: center;
   position: absolute;
-  inset: 0 -1px 14px -1px;
-  border: 0.5px solid var(--text-faint, #3A382F);
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--bg, #0A0A0A);
+  border: 1px solid var(--line-bright, #2A2A26);
+  padding: 6px 10px;
+  font-family: var(--mono, "Inter", system-ui, sans-serif);
+  font-size: 10px;
+  line-height: 1.5;
+  letter-spacing: 0.04em;
+  color: var(--text, #C8C5BE);
+  opacity: 0;
   pointer-events: none;
+  transition: opacity 0.12s ease;
+  z-index: 10;
 }
-.us-chart-bar.active::before {
-  content: "";
-  position: absolute;
-  inset: 0 -1px 14px -1px;
-  border: 1px solid var(--lime, #6FB572);
-  pointer-events: none;
+.us-chart-bar:not(.empty):hover::before { opacity: 1; }
+.us-chart-bar.empty .us-chart-stack {
+  height: 1px !important;
+  background: var(--line-bright, #2A2A26);
 }
+/* Today / active markers carry only on the tick label below
+   (color shift) — no perimeter border around the bar slot.
+   Earlier the today/active states drew an outline ring via
+   `::before` which read as an ugly box around an otherwise
+   clean stacked-bar; the tick-colour change carries enough
+   signal. See `.us-chart-bar.today .us-chart-tick` and
+   `.us-chart-bar.active .us-chart-tick` below. */
 .us-chart-stack {
   display: flex;
   flex-direction: column-reverse; /* first segment at the bottom */

package/public/user-settings.js

@@ -226,18 +226,6 @@
           </div>
         </div>
 
-        <div class="us-row">
-          <div class="us-row-label">Typing sound</div>
-          <div class="us-row-field">
-            <div class="us-toggle-row">
-              <button type="button" class="us-toggle-pill" data-us-sfx-typing aria-pressed="false">
-                <span class="us-toggle-dot"></span>
-                <span class="us-toggle-label" data-us-sfx-typing-label>off</span>
-              </button>
-              <span class="us-toggle-deck">a soft keyboard click as directors stream their replies. Persists locally.</span>
-            </div>
-          </div>
-        </div>
       </div>
     `;
   }
@@ -268,6 +256,66 @@
     `;
   }
 
+  /* ── Other settings · misc per-user toggles that don't fit a
+        dedicated section. Currently just the typing-sound effect; a
+        natural home for future small ambient / UX preferences (sound
+        cues, animations, etc.) without growing the nav for each one. */
+  function otherSettingsSectionHTML() {
+    return `
+      <div class="us-pane-head">
+        <div class="us-pane-tag">▸ Other settings</div>
+        <div class="us-pane-deck">small UX preferences that don't fit elsewhere. All persisted locally.</div>
+      </div>
+
+      <div class="us-pane-body">
+        <div class="us-row">
+          <div class="us-row-label">Typing sound</div>
+          <div class="us-row-field">
+            <div class="us-toggle-row">
+              <button type="button" class="us-switch" data-us-sfx-typing role="switch" aria-checked="false">
+                <span class="us-switch-track" aria-hidden="true">
+                  <span class="us-switch-thumb"></span>
+                </span>
+                <span class="us-switch-label" data-us-sfx-typing-label>off</span>
+              </button>
+              <span class="us-toggle-deck">a soft keyboard click as directors stream their replies in chat. Brief generation stays silent regardless of this setting.</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  function wireOtherSettingsSection() {
+    if (!paneEl) return;
+    // Typing-sound toggle · the persistence + audio context lives in
+    // window.boardroomTypingSfx (typing-sfx.js); this row only mirrors
+    // the current state and proxies clicks. Reading inside wire-up
+    // (not at HTML build time) means the pill always reflects the
+    // LATEST stored state when the section re-mounts.
+    const sfxBtn = paneEl.querySelector("[data-us-sfx-typing]");
+    const sfxLabel = paneEl.querySelector("[data-us-sfx-typing-label]");
+    if (sfxBtn && sfxLabel && window.boardroomTypingSfx) {
+      const paint = () => {
+        const on = window.boardroomTypingSfx.isEnabled();
+        sfxBtn.classList.toggle("on", on);
+        // role="switch" wants `aria-checked`, not `aria-pressed`.
+        sfxBtn.setAttribute("aria-checked", on ? "true" : "false");
+        sfxLabel.textContent = on ? "on" : "off";
+      };
+      paint();
+      sfxBtn.addEventListener("click", () => {
+        const next = !window.boardroomTypingSfx.isEnabled();
+        window.boardroomTypingSfx.setEnabled(next);
+        paint();
+        // Audible confirmation when turning ON · the click that just
+        // toggled also serves as the gesture the AudioContext needs,
+        // so this tick is actually heard.
+        if (next) window.boardroomTypingSfx.tick();
+      });
+    }
+  }
+
   /* ── Usage section ────────────────────────────────────────── */
   // Provider → CSS-variable color slot. Lets each model bar/swatch
   // pick up the right accent from the active theme without baking
@@ -404,11 +452,20 @@
       if (isToday) cls.push("today");
       if (isSelected) cls.push("active");
       if (total === 0) cls.push("empty");
-      const tooltip = total > 0
-        ? `${fmtDayLong(d.day)} · ${fmtTokens(total)} tokens`
-        : `${fmtDayLong(d.day)} · no usage`;
+      // Custom hover tooltip · two lines (day + token count) rendered
+      // via CSS `::before` from `data-tip-day` / `data-tip-num`. We
+      // use `aria-label` (not `title`) so screen readers still get
+      // the info but the native browser tooltip with its ~500ms
+      // delay doesn't fight with the instant custom one.
+      const dayLabel = fmtDayLong(d.day);
+      const numLabel = total > 0 ? `${fmtTokens(total)} tokens` : "no usage";
+      const aria = `${dayLabel} · ${numLabel}`;
       return `
-        <button type="button" class="${cls.join(' ')}" data-usage-day="${escape(d.day)}" title="${escape(tooltip)}">
+        <button type="button" class="${cls.join(' ')}"
+          data-usage-day="${escape(d.day)}"
+          data-tip-day="${escape(dayLabel)}"
+          data-tip-num="${escape(numLabel)}"
+          aria-label="${escape(aria)}">
           <span class="us-chart-stack" style="height:${heightPct.toFixed(2)}%">${segHtml}</span>
           <span class="us-chart-tick">${escape(fmtDayLabel(d.day))}</span>
         </button>
@@ -931,10 +988,7 @@
             <span class="right">// local</span>
           </div>
 
-          <header class="us-head">
-            <div class="us-title">Preference</div>
-            <button type="button" class="us-close" aria-label="Close">✕</button>
-          </header>
+          <button type="button" class="us-close" aria-label="Close">✕</button>
 
           <div class="us-frame">
             <nav class="us-nav" role="tablist">
@@ -943,6 +997,7 @@
               <a href="#" class="us-nav-item"        data-section="usage"   role="tab" aria-selected="false">Usage</a>
               <a href="#" class="us-nav-item"        data-section="keys"    role="tab" aria-selected="false">API Key</a>
               <a href="#" class="us-nav-item"        data-section="default" role="tab" aria-selected="false">Default Model</a>
+              <a href="#" class="us-nav-item"        data-section="other"   role="tab" aria-selected="false">Other settings</a>
               <div class="us-nav-foot" data-us-version aria-label="App version">
                 <span class="us-nav-foot-label">version</span>
                 <span class="us-nav-foot-value" data-us-version-value>·</span>
@@ -975,12 +1030,14 @@
     else if (id === "usage")  paneEl.innerHTML = usageSectionHTML();
     else if (id === "keys")   paneEl.innerHTML = keysSectionHTML();
     else if (id === "default") paneEl.innerHTML = defaultModelSectionHTML();
+    else if (id === "other")  paneEl.innerHTML = otherSettingsSectionHTML();
 
     // Section-specific wiring
     if (id === "user")    wireUserSection();
     if (id === "keys")    wireKeysSection();
     if (id === "usage")   wireUsageSection();
     if (id === "default") wireDefaultModelSection();
+    if (id === "other")   wireOtherSettingsSection();
 
     // Active rail item
     modal.querySelectorAll(".us-nav-item").forEach((el) => {
@@ -1035,32 +1092,6 @@
     });
     introCount.textContent = introInput.value.length;
 
-    // Typing-sound toggle · the persistence + audio context lives in
-    // window.boardroomTypingSfx (typing-sfx.js), so this row only
-    // mirrors the current state and proxies clicks. Reading inside the
-    // wire-up call (not at HTML build time) means the pill always
-    // reflects the LATEST stored state when the User pane re-mounts.
-    const sfxBtn = paneEl.querySelector("[data-us-sfx-typing]");
-    const sfxLabel = paneEl.querySelector("[data-us-sfx-typing-label]");
-    if (sfxBtn && sfxLabel && window.boardroomTypingSfx) {
-      const paint = () => {
-        const on = window.boardroomTypingSfx.isEnabled();
-        sfxBtn.classList.toggle("on", on);
-        sfxBtn.setAttribute("aria-pressed", on ? "true" : "false");
-        sfxLabel.textContent = on ? "on" : "off";
-      };
-      paint();
-      sfxBtn.addEventListener("click", () => {
-        const next = !window.boardroomTypingSfx.isEnabled();
-        window.boardroomTypingSfx.setEnabled(next);
-        paint();
-        // Audible confirmation when turning ON · the click that just
-        // toggled also serves as the gesture the AudioContext needs,
-        // so this tick will actually be heard.
-        if (next) window.boardroomTypingSfx.tick();
-      });
-    }
-
     // Regenerate avatar · same pattern as agent-profile's
     // regenerateProfileAvatar: pull a fresh randomSeed, persist it to
     // the user prefs, repaint. No counter, no name/intro composition —