privateboard 0.1.6 → 0.1.7

package/public/user-settings.css

@@ -162,6 +162,43 @@
 .us-nav-item.danger { color: var(--text-faint, #3A382F); }
 .us-nav-item.danger:hover { color: var(--red, #B5706A); }
 
+/* ─── Sidebar foot · app version stamp ───
+   Pinned to the bottom of the column flex via `margin-top: auto` so
+   it sits below every nav item even when the section list is short.
+   Tiny mono kicker · matches the section-tag typography elsewhere in
+   the overlay so it reads as quiet metadata, not a sixth nav item. */
+.us-nav-foot {
+  margin-top: auto;
+  padding: 12px 12px 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  align-items: flex-start;
+  border-top: 0.5px solid var(--line-bright, #2A2A26);
+  font-family: var(--mono);
+}
+.us-nav-foot-label {
+  font-size: 8.5px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--text-faint, #3A382F);
+  font-weight: 600;
+}
+.us-nav-foot-value {
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  color: var(--text-soft, #8E8B83);
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+@media (max-width: 600px) {
+  /* On the horizontal-row mobile nav layout, the foot would steal a
+     slot in the scrollable tab strip — hide it there. The version
+     still surfaces via the running server's /api/version endpoint
+     for anyone who needs it. */
+  .us-nav-foot { display: none; }
+}
+
 /* Right pane (scrollable section content) */
 .us-pane {
   padding: 18px 22px 18px;
@@ -224,6 +261,59 @@
   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. */
+.us-toggle-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.us-toggle-pill {
+  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;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  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);
+}
+.us-toggle-pill.on {
+  color: var(--lime, #6FB572);
+  border-color: var(--lime, #6FB572);
+  background: var(--panel-2, #1A1A18);
+}
+.us-toggle-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--text-faint, #3A382F);
+  transition: background 0.12s;
+}
+.us-toggle-pill.on .us-toggle-dot { background: var(--lime, #6FB572); }
+.us-toggle-deck {
+  font-size: 11px;
+  color: var(--text-faint, #3A382F);
+  letter-spacing: 0.02em;
+  line-height: 1.5;
+  flex: 1 1 220px;
+  min-width: 0;
+}
+
 /* User avatar block */
 .us-avatar-row {
   display: flex;

package/public/user-settings.js

@@ -225,6 +225,19 @@
             <div class="us-row-meta"><span data-us-intro-count>0</span> / 320 chars</div>
           </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>
     `;
   }
@@ -930,6 +943,10 @@
               <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>
+              <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>
+              </div>
             </nav>
 
             <div class="us-pane" data-us-pane></div>
@@ -1018,6 +1035,32 @@
     });
     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 —
@@ -1219,6 +1262,34 @@
     overlay.classList.add("open");
     overlay.setAttribute("aria-hidden", "false");
     document.body.style.overflow = "hidden";
+    // Lazy-fetch the version string on each open. Cheap (one tiny
+    // request, no DB hit) and the user expects the foot to reflect
+    // the running server, not a baked-in client constant — if they
+    // upgrade the npm package and a tab is still open, the next
+    // overlay open shows the new version.
+    fetchAppVersion();
+  }
+
+  let _versionCache = null;
+  async function fetchAppVersion() {
+    const slot = overlay && overlay.querySelector("[data-us-version-value]");
+    if (!slot) return;
+    // Use cache if we already have it · the version doesn't change
+    // mid-process. First open does the network round-trip; subsequent
+    // opens repaint from cache instantly.
+    if (_versionCache) {
+      slot.textContent = _versionCache;
+      return;
+    }
+    try {
+      const r = await fetch("/api/version");
+      if (!r.ok) return;
+      const j = await r.json();
+      if (j && typeof j.version === "string") {
+        _versionCache = `v${j.version}`;
+        slot.textContent = _versionCache;
+      }
+    } catch { /* swallow · the foot just stays at "·" if offline */ }
   }
   function close() {
     if (!overlay) return;