privateboard 0.1.13 → 0.1.16

package/public/voice-replay.css

@@ -17,14 +17,13 @@
 .voice-replay-overlay {
   position: fixed;
   right: 24px;
-  /* The adjourned-bar (where Voice Replay is launched from) is
-     `min-height: 44px` and pinned to the bottom of the room view.
-     `bottom: 24px` would overlap it; lift the panel to clear the
-     bar with a small gap so the user always reads the bar's
-     [Export / Voice Replay / Convene Follow-up] actions even while
-     the player is open. Same offset for expanded + collapsed so
-     the title bar sits flush above the bottom bar when shrunk. */
-  bottom: 56px;
+  /* Voice Replay is launched from the floating `.input-bar` in
+     adjourned rooms (left-cluster Replay icon). The input-bar's
+     standard footprint is ~100px tall plus 14px bottom margin.
+     `bottom: 130px` lifts the panel clear of the bar so the user
+     keeps access to the input + the action icons while the player
+     is open. */
+  bottom: 130px;
   z-index: 9300;
   width: 380px;
   max-width: calc(100vw - 32px);
@@ -52,7 +51,7 @@
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  font-size: 9.5px;
+  font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.18em;
   text-transform: uppercase;
@@ -95,34 +94,31 @@
 /* Collapsed posture · the entire floating panel hides, freeing
    the chat / round-table stage of any overlap. The user re-opens
    by clicking the inline `.vr-inline-expand` pill that gets
-   slotted into the adjourned-bar's action group right next to the
-   Voice Replay button. Audio keeps playing in the background. */
+   slotted into the input-bar's left cluster right next to the
+   Voice Replay icon. Audio keeps playing in the background. */
 .voice-replay-overlay.is-collapsed {
   display: none;
 }
 
-/* Inline replay control group · three buttons (Next / Pause /
-   Expand) mounted into the adjourned-bar's action group right
-   after Voice Replay when the floating panel is collapsed. Each
-   button inherits `.ghost-btn`'s panel + hairline chrome so the
-   group reads as a sibling of Export / Voice Replay / Convene
-   Follow-up. The Expand button carries a small lime pulsing dot
-   so the user can locate "what's still active" at a glance. */
+/* Inline replay control group · four buttons (Next / Pause /
+   Stop / Expand) mounted into the input-bar's left cluster right
+   after the Voice Replay icon when the floating panel collapses
+   into playback mode. Each button reuses `.ib-action` so the group
+   reads as a true sibling of Export / Voice Replay / Convene
+   Follow-up — same 32×32 frame, same hover-circle, same tooltip
+   register. The Expand button carries a small lime pulsing dot so
+   the user can locate "what's still active" at a glance. */
 .vr-inline-group {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: 4px;
 }
-/* Icon-only ghost-btns · all the visual chrome (panel bg, hairline
-   border, mono font, uppercase, hover lime) comes from `.ghost-btn`
-   in index.html. We don't override font-size / color / padding so
-   the inline group reads as a true sibling of Export / Voice
-   Replay / Convene Follow-up — just with bracket-wrapped glyphs
-   instead of trailing labels. The Expand button gets a small lime
-   pulsing dot tagged on the end so the user can locate "what's
-   still active" at a glance. */
+/* The inline child SVG centres inside the `.ib-action` 32×32 frame
+   via the parent's `display: inline-flex; align-items: center;
+   justify-content: center;`. Drop the inline baseline gap so the
+   icon snaps to the geometric centre. */
 .vr-inline-btn .vib-icon {
-  display: block; /* drop the inline baseline gap so the SVG centres */
+  display: block;
 }
 .vr-inline-expand {
   display: inline-flex;
@@ -177,7 +173,7 @@
 .vr-spinner-dots .vr-spinner-dot:nth-child(3) { animation-delay: 0.4s; }
 .vr-spinner-text {
   font-family: var(--mono);
-  font-size: 10.5px;
+  font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.18em;
   color: var(--text-soft);
@@ -228,7 +224,7 @@
 }
 .vr-speaker-name {
   font-family: var(--font-human, var(--mono));
-  font-size: 12.5px;
+  font-size: 12px;
   font-weight: 700;
   letter-spacing: -0.005em;
   color: var(--text);
@@ -241,7 +237,7 @@
   font-weight: 500;
 }
 .vr-speaker-kind {
-  font-size: 8.5px;
+  font-size: 8px;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: var(--text-faint);
@@ -250,7 +246,7 @@
 /* ─── Message preview · 2-line clamp ─── */
 .vr-preview {
   font-family: var(--font-human, var(--mono));
-  font-size: 11.5px;
+  font-size: 12px;
   line-height: 1.4;
   color: var(--text-soft);
   letter-spacing: -0.003em;
@@ -311,7 +307,7 @@
   border: 0.5px solid var(--line-bright);
   color: var(--text);
   font-family: var(--mono);
-  font-size: 9.5px;
+  font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
@@ -338,9 +334,6 @@
   color: var(--text-soft);
   cursor: pointer;
 }
-.vr-toggle input[type="checkbox"] {
-  accent-color: var(--lime, #6FB572);
-}
 
 /* ─── Key prompt / empty / done ─── */
 .vr-key-prompt {
@@ -379,7 +372,7 @@
 }
 .vr-key-deck {
   font-family: var(--font-human, var(--mono));
-  font-size: 11.5px;
+  font-size: 12px;
   line-height: 1.45;
   color: var(--text-soft);
   letter-spacing: -0.003em;
@@ -602,7 +595,7 @@
   background: var(--bg, #0A0A0A);
   border: 0.5px solid var(--lime, #6FB572);
   font-family: var(--mono);
-  font-size: 8.5px;
+  font-size: 8px;
   font-weight: 700;
   letter-spacing: 0.18em;
   text-transform: uppercase;

package/public/voice-replay.js

@@ -207,7 +207,7 @@
       STATE.overlay = null;
     }
     clearActiveHighlight();
-    removeInlineExpand(); // any inline pill in the adjourned-bar drops too
+    removeInlineExpand(); // any inline pill in the input-bar drops too
     STATE.playlist = [];
     STATE.prefetched = new Map();
     setActive(null); // round-table stage clears its replay seat / subtitle
@@ -281,8 +281,9 @@
   }
 
   /** Doc-level handler for the inline replay control group in the
-   *  adjourned-bar — those buttons are mounted OUTSIDE the overlay
-   *  so the overlay-scoped click delegate above can't see them.
+   *  input-bar's left cluster — those buttons are mounted OUTSIDE
+   *  the overlay so the overlay-scoped click delegate above can't
+   *  see them.
    *  Bound once per page lifetime; safe even when no replay is
    *  active (the buttons simply aren't in the DOM until
    *  toggleCollapsed mounts them). */
@@ -316,8 +317,8 @@
   }
 
   /** Collapse the player by hiding the floating overlay entirely +
-   *  surfacing the inline replay control group in the adjourned-bar
-   *  right after where the Voice Replay button used to be. Audio
+   *  surfacing the inline replay control group in the input-bar's
+   *  left cluster, right after the Voice Replay icon. Audio
    *  keeps playing in the background; the user's content is no
    *  longer blocked.
    *
@@ -343,7 +344,7 @@
    *  a no-op when the group is already present. */
   function mountInlineExpand() {
     if (document.querySelector("[data-vr-inline-group]")) return;
-    const replayBtn = document.querySelector(".adjourned-bar [data-room-replay]");
+    const replayBtn = document.querySelector("[data-room-replay]");
     if (!replayBtn) return;
     const group = document.createElement("span");
     group.className = "vr-inline-group";
@@ -391,10 +392,10 @@
       </svg>
     `;
     group.innerHTML = `
-      <button type="button" class="ghost-btn vr-inline-btn" data-vr-inline-next aria-label="Next message" title="Next message">${NEXT_SVG}</button>
-      <button type="button" class="ghost-btn vr-inline-btn" data-vr-inline-pause aria-label="Pause" title="Pause"><span data-vib-pause-mark>${PAUSE_SVG}</span></button>
-      <button type="button" class="ghost-btn vr-inline-btn" data-vr-inline-stop aria-label="Stop replay" title="Stop replay">${STOP_SVG}</button>
-      <button type="button" class="ghost-btn vr-inline-btn vr-inline-expand" data-vr-inline-expand aria-label="Expand voice replay" title="Expand voice replay">${EXPAND_SVG}<span class="vie-pulse" aria-hidden="true"></span></button>
+      <button type="button" class="ib-action vr-inline-btn" data-vr-inline-next aria-label="Next message" title="Next message">${NEXT_SVG}</button>
+      <button type="button" class="ib-action vr-inline-btn" data-vr-inline-pause aria-label="Pause" title="Pause"><span data-vib-pause-mark>${PAUSE_SVG}</span></button>
+      <button type="button" class="ib-action vr-inline-btn" data-vr-inline-stop aria-label="Stop replay" title="Stop replay">${STOP_SVG}</button>
+      <button type="button" class="ib-action vr-inline-btn vr-inline-expand" data-vr-inline-expand aria-label="Expand voice replay" title="Expand voice replay">${EXPAND_SVG}<span class="vie-pulse" aria-hidden="true"></span></button>
     `;
     replayBtn.insertAdjacentElement("afterend", group);
     // Hide the original Voice Replay anchor while the inline group
@@ -413,7 +414,7 @@
     // so the user can re-trigger the player. We stashed the prior
     // inline display when we hid it; restore it (empty string ==
     // CSS default).
-    const replayBtn = document.querySelector(".adjourned-bar [data-room-replay]");
+    const replayBtn = document.querySelector("[data-room-replay]");
     if (replayBtn) {
       const prev = replayBtn.dataset.vrPrevDisplay;
       replayBtn.style.display = (prev === undefined || prev === null) ? "" : prev;