From 262931ae38284290032807d183b70e1316a66b68 Mon Sep 17 00:00:00 2001 From: Mark Boas Date: Wed, 29 Jul 2026 08:52:23 +0200 Subject: [PATCH 1/5] Restyle the captions/transcript view buttons as a segmented switch MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The two navbar buttons that swap between transcript and captions view marked the ACTIVE view by disabling its button — but greyed-out reads as "unavailable", not "you are here". Replace the pair with a segmented switch: a recessed track (base-300) with a raised thumb that slides under the active segment, distinct from the filled primary action buttons beside it. Active state is conveyed by the thumb + aria-pressed; both segments stay clickable and clicking the active one is a no-op, which preserves the behavior the transcription engines rely on when they force transcript view via #transcript-editor-btn.click(). Track/thumb colors use oklch(var(--b3))/oklch(var(--b1)) — daisyUI 4 theme vars are OKLCH channels. The stylesheet cache-buster is bumped so deployed users pick up the new CSS. Tooltips renamed from "Edit captions"/"Edit transcript" to "Captions view"/"Transcript view" since they switch views rather than perform edits. --- css/hyperaudio-lite-editor.css | 47 +++++++++++++++++++++++++ index.html | 21 +++++++---- js/editor-core.js | 27 ++++++++++---- js/hyperaudio-lite-editor-assemblyai.js | 4 +-- js/hyperaudio-lite-editor-deepgram.js | 2 +- js/hyperaudio-lite-editor-whisper.js | 2 +- 6 files changed, 85 insertions(+), 18 deletions(-) diff --git a/css/hyperaudio-lite-editor.css b/css/hyperaudio-lite-editor.css index 46395f5..1b0ba03 100644 --- a/css/hyperaudio-lite-editor.css +++ b/css/hyperaudio-lite-editor.css @@ -867,3 +867,50 @@ label[data-a11y-wired]:focus-visible { margin-top: 27px; } } + +/* Transcript/captions view switch: a recessed track with a raised thumb that + slides under the active segment, so the current view reads as a position in + a switch — distinct from the filled action buttons beside it. Colors come + from the daisyUI theme vars (base-200 track, base-100 thumb). */ +#view-switch { + position: relative; + display: inline-flex; + padding: 4px; + border-radius: 0.5rem; + background-color: oklch(var(--b3)); + margin-right: 16px; +} +#view-switch::before { + content: ""; + position: absolute; + top: 4px; + left: 4px; + width: 44px; + height: 40px; + border-radius: 0.375rem; + background-color: oklch(var(--b1)); + box-shadow: 0 1px 3px oklch(var(--bc) / 0.25); + transition: transform 0.15s ease-out; +} +#view-switch.captions-active::before { + transform: translateX(44px); +} +@media (prefers-reduced-motion: reduce) { + #view-switch::before { transition: none; } +} +#view-switch .btn { + position: relative; /* sits above the sliding thumb */ + width: 44px; + height: 40px; + min-height: 0; + border: none; + background: transparent; + color: oklch(var(--bc) / 0.4); +} +#view-switch .btn:hover { + background: transparent; + color: oklch(var(--bc) / 0.75); +} +#view-switch .btn[aria-pressed="true"] { + color: oklch(var(--bc)); +} diff --git a/index.html b/index.html index ad9c39e..c8f40ec 100644 --- a/index.html +++ b/index.html @@ -108,7 +108,7 @@ } - + @@ -487,12 +487,19 @@

Topics

- - + +
+ + +
diff --git a/js/editor-core.js b/js/editor-core.js index ce2fdd3..80c737a 100644 --- a/js/editor-core.js +++ b/js/editor-core.js @@ -175,25 +175,38 @@ // edits otherwise persist; localStorage load manages its own cache. window.document.addEventListener('hyperaudioInit', () => { captionCache = null; }, false); - document.querySelector('#caption-editor-btn').addEventListener('click', (e) => { + // Segmented view switch (transcript/captions): both segments stay clickable + // and the active one is marked by the track's thumb + aria-pressed rather + // than disabled. + // Clicking the active segment is a no-op — the transcription engines rely on + // that when they force transcript view by clicking #transcript-editor-btn. + const transcriptViewBtn = document.querySelector('#transcript-editor-btn'); + const captionViewBtn = document.querySelector('#caption-editor-btn'); + + function reflectViewSwitch() { + document.querySelector('#view-switch').classList.toggle('captions-active', captionMode === true); + captionViewBtn.setAttribute('aria-pressed', String(captionMode === true)); + transcriptViewBtn.setAttribute('aria-pressed', String(captionMode !== true)); + } + + captionViewBtn.addEventListener('click', () => { + if (captionMode === true) return; let holder = document.querySelector('.transcript-holder'); transcriptCache = holder.cloneNode(true); captionMode = true; hyperaudioGenerateCaptionsFromTranscript(); - document.querySelector('#caption-editor-btn').disabled = true; - document.querySelector('#transcript-editor-btn').disabled = false; + reflectViewSwitch(); }); - document.querySelector('#transcript-editor-btn').addEventListener('click', (e) => { + transcriptViewBtn.addEventListener('click', () => { + if (captionMode !== true) return; restoreTranscript(); captionMode = false; if (transcriptRequiresInit === true) { hyperaudio(); transcriptRequiresInit = false; } - - document.querySelector('#caption-editor-btn').disabled = false; - document.querySelector('#transcript-editor-btn').disabled = true; + reflectViewSwitch(); }); diff --git a/js/hyperaudio-lite-editor-assemblyai.js b/js/hyperaudio-lite-editor-assemblyai.js index c9a1344..c9e265f 100644 --- a/js/hyperaudio-lite-editor-assemblyai.js +++ b/js/hyperaudio-lite-editor-assemblyai.js @@ -71,8 +71,8 @@ class AssemblyAIService extends HTMLElement { getData() { // If in caption mode, switch back to transcript view so the loader shows and - // the result lands in the right place (#transcript-editor-btn no-ops when - // already in transcript mode). + // the result lands in the right place (#transcript-editor-btn's handler + // no-ops when already in transcript mode). document.querySelector('#transcript-editor-btn')?.click(); document.querySelector('#hypertranscript').innerHTML = '
Transcribing….

transcribing
'; diff --git a/js/hyperaudio-lite-editor-deepgram.js b/js/hyperaudio-lite-editor-deepgram.js index e8c3a49..c59ad0e 100644 --- a/js/hyperaudio-lite-editor-deepgram.js +++ b/js/hyperaudio-lite-editor-deepgram.js @@ -125,7 +125,7 @@ class DeepgramService extends HTMLElement { getData(event) { // If the user is in caption mode, switch back to transcript view so the // transcribing loader is visible and the result lands in the right place. - // #transcript-editor-btn is disabled in transcript mode, so this no-ops. + // #transcript-editor-btn's handler no-ops when already in transcript mode. document.querySelector('#transcript-editor-btn')?.click(); document.querySelector('#hypertranscript').innerHTML = '
Transcribing....

transcribing
'; if (typeof setTranscriptBusy === 'function') { diff --git a/js/hyperaudio-lite-editor-whisper.js b/js/hyperaudio-lite-editor-whisper.js index c474fee..2c94a99 100644 --- a/js/hyperaudio-lite-editor-whisper.js +++ b/js/hyperaudio-lite-editor-whisper.js @@ -250,7 +250,7 @@ function loadWhisperClient(modal, workerBaseUrl) { // If the user is in caption mode, switch back to transcript view so the // transcribing loader is visible and the result lands in the right place. - // #transcript-editor-btn is disabled in transcript mode, so this no-ops. + // #transcript-editor-btn's handler no-ops when already in transcript mode. document.querySelector('#transcript-editor-btn')?.click(); const size = modelNameSelectionInput.value; From 6acaca59d641cd728725631845fe5322b474b3c2 Mon Sep 17 00:00:00 2001 From: Mark Boas Date: Wed, 29 Jul 2026 13:03:50 +0200 Subject: [PATCH 2/5] Soften the navbar outline buttons to match the view switch daisyUI's .btn-outline draws a near-black border and inverts to a black fill on hover, which read heavier than the recessed view switch and the filled primary actions beside them. Scope a quieter treatment to the navbar: base-300 borders, slightly muted icons, and a gray tint hover. --- css/hyperaudio-lite-editor.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/css/hyperaudio-lite-editor.css b/css/hyperaudio-lite-editor.css index 1b0ba03..d4392f5 100644 --- a/css/hyperaudio-lite-editor.css +++ b/css/hyperaudio-lite-editor.css @@ -914,3 +914,18 @@ label[data-a11y-wired]:focus-visible { #view-switch .btn[aria-pressed="true"] { color: oklch(var(--bc)); } + +/* Soften the navbar's outline buttons to sit in the same family as the view + switch: quiet base-300 borders and a tint hover, instead of daisyUI's + near-black border + black-fill hover inversion, which read heavier than + everything around them. */ +.navbar .btn-outline { + border-color: oklch(var(--b3)); + color: oklch(var(--bc) / 0.75); + background-color: oklch(var(--b1)); +} +.navbar .btn-outline:hover { + border-color: oklch(var(--bc) / 0.3); + background-color: oklch(var(--b2)); + color: oklch(var(--bc)); +} From b0064dfb2a88697176257d95eedbdf1886ea0da9 Mon Sep 17 00:00:00 2001 From: Mark Boas Date: Wed, 29 Jul 2026 13:15:54 +0200 Subject: [PATCH 3/5] Make the sidebar toggle a ghost button and expose its state MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The sidebar toggle rearranges the workspace rather than acting on the content, so it now matches the app's other chrome controls (find & replace, transcription info, mute) as a quiet ghost button instead of sharing the outlined weight of the editing actions beside it. Since the button is stateful, it now carries aria-pressed: the desktop collapse handler syncs it, and on the small-screen layout — where the same button opens the Recents drawer instead — responsive.js keeps it tracking the drawer, restoring the desktop value when the layout returns past the 948px breakpoint. Bump the ?v= cache-busters for editor-core.js and responsive.js so deployed users pick up the changed files (this was also why the change didn't appear when first tested locally). --- index.html | 6 +++--- js/editor-core.js | 13 ++++++++++++- js/responsive.js | 21 +++++++++++++++++---- 3 files changed, 32 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index c8f40ec..4dab78f 100644 --- a/index.html +++ b/index.html @@ -386,7 +386,7 @@

Recents

- @@ -970,7 +970,7 @@

Caption Regeneration

- + @@ -1058,7 +1058,7 @@

Load from Local Storage

- + diff --git a/js/editor-core.js b/js/editor-core.js index 80c737a..738c181 100644 --- a/js/editor-core.js +++ b/js/editor-core.js @@ -779,6 +779,8 @@ sidebarOpen = true; } + document.querySelector('#sidebar-toggle').setAttribute('aria-pressed', String(sidebarOpen)); + if( document.pictureInPictureEnabled && !videoElement.disablePictureInPicture) { @@ -793,7 +795,16 @@ } } }); - + + // On small screens the same button opens the Recents drawer instead + // (responsive.js intercepts the click), so when the layout returns to + // desktop restore aria-pressed to the desktop sidebar state. + window.matchMedia('(max-width: 948px)').addEventListener('change', (ev) => { + if (!ev.matches) { + document.querySelector('#sidebar-toggle').setAttribute('aria-pressed', String(sidebarOpen)); + } + }); + let showSpeakers = document.querySelector('#show-speakers'); showSpeakers.addEventListener('change', function(e) { diff --git a/js/responsive.js b/js/responsive.js index 9105f88..49dc73e 100644 --- a/js/responsive.js +++ b/js/responsive.js @@ -18,8 +18,18 @@ const mobile = window.matchMedia('(max-width: 948px)'); // --- Recents drawer -------------------------------------------------------- - const openDrawer = () => body.classList.add('drawer-open'); - const closeDrawer = () => body.classList.remove('drawer-open'); + // Keep #sidebar-toggle's aria-pressed tracking the drawer while in the + // small-screen layout (editor-core.js owns it on desktop, where the same + // button collapses the sidebar instead). + const syncTogglePressed = () => { + const toggle = document.getElementById('sidebar-toggle'); + if (toggle !== null && mobile.matches) { + toggle.setAttribute('aria-pressed', String(body.classList.contains('drawer-open'))); + } + }; + + const openDrawer = () => { body.classList.add('drawer-open'); syncTogglePressed(); }; + const closeDrawer = () => { body.classList.remove('drawer-open'); syncTogglePressed(); }; // Intercept #sidebar-toggle at the document capture phase so the desktop // sidebar-collapse handler (in editor-core.js) does not also fire on mobile. @@ -29,6 +39,7 @@ event.stopImmediatePropagation(); event.preventDefault(); body.classList.toggle('drawer-open'); + syncTogglePressed(); } }, true); @@ -43,6 +54,8 @@ filePicker.addEventListener('click', () => { if (mobile.matches) closeDrawer(); }); } - // Leaving the small-screen layout clears any drawer state. - mobile.addEventListener('change', (ev) => { if (!ev.matches) closeDrawer(); }); + // Leaving the small-screen layout clears any drawer state; entering it + // starts with the drawer closed. + mobile.addEventListener('change', (ev) => { if (!ev.matches) closeDrawer(); else syncTogglePressed(); }); + syncTogglePressed(); })(); From 472eba990af980aee20164ac0b2a43d1d798db39 Mon Sep 17 00:00:00 2001 From: Mark Boas Date: Wed, 29 Jul 2026 13:33:27 +0200 Subject: [PATCH 4/5] Align the navbar's leading edge with the transcript card MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The sidebar toggle sat 8-9px right of the transcript card's left edge (the daisyUI navbar's own padding), in both sidebar states. Zero the navbar's leading padding while the sidebar is open — the card sits flush with .main-panel — and switch to a 16px pad when collapsed to match the card's floating gutter, transitioned to track the card's 0.5s slide. The toggle handler flags the state via body.sidebar-collapsed. Desktop two-pane only; the small-screen layout keeps the default padding. The .main-panel prefix is needed to beat daisyUI's single-class .navbar padding, since tailwind-min.css loads after the editor stylesheet. --- css/hyperaudio-lite-editor.css | 17 +++++++++++++++++ js/editor-core.js | 3 +++ 2 files changed, 20 insertions(+) diff --git a/css/hyperaudio-lite-editor.css b/css/hyperaudio-lite-editor.css index d4392f5..5bb45f8 100644 --- a/css/hyperaudio-lite-editor.css +++ b/css/hyperaudio-lite-editor.css @@ -929,3 +929,20 @@ label[data-a11y-wired]:focus-visible { background-color: oklch(var(--b2)); color: oklch(var(--bc)); } + +/* Align the navbar's left edge with the transcript card: the card sits flush + with .main-panel while the sidebar is open (left offset 0) and floats with a + 16px gutter when collapsed, so the navbar's leading padding follows suit — + animated to track the card's 0.5s slide. Desktop two-pane only; the + small-screen layout keeps the default navbar padding. The .main-panel + prefix beats DaisyUI's single-class .navbar padding (tailwind-min.css + loads after this file). */ +@media screen and (min-width: 949px) { + .main-panel .navbar { + padding-left: 0; + transition: padding-left 0.5s ease; + } + body.sidebar-collapsed .main-panel .navbar { + padding-left: 16px; + } +} diff --git a/js/editor-core.js b/js/editor-core.js index 738c181..778af5f 100644 --- a/js/editor-core.js +++ b/js/editor-core.js @@ -780,6 +780,9 @@ } document.querySelector('#sidebar-toggle').setAttribute('aria-pressed', String(sidebarOpen)); + // lets the CSS align the navbar's leading edge with the transcript card, + // whose left gutter differs between the open and collapsed layouts + document.body.classList.toggle('sidebar-collapsed', sidebarOpen === false); if( document.pictureInPictureEnabled && From 3e051943a3c809df2993880764260eabda483eec Mon Sep 17 00:00:00 2001 From: Mark Boas Date: Wed, 29 Jul 2026 13:42:40 +0200 Subject: [PATCH 5/5] Optically centre the navbar buttons in the band above the transcript card The buttons were geometrically centred in the 70px navbar, but the borderless bar reads as one space running to the card's top edge at 78px (including the 8px floating-card gap), leaving them 4px high to the eye: 11px above vs 19px below. Nudge the bar down 4px so the buttons sit 15px/15px in the band; the card is absolutely positioned, so nothing else moves. Desktop two-pane only. --- css/hyperaudio-lite-editor.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/css/hyperaudio-lite-editor.css b/css/hyperaudio-lite-editor.css index 5bb45f8..edfca73 100644 --- a/css/hyperaudio-lite-editor.css +++ b/css/hyperaudio-lite-editor.css @@ -940,6 +940,13 @@ label[data-a11y-wired]:focus-visible { @media screen and (min-width: 949px) { .main-panel .navbar { padding-left: 0; + /* Optically centre the buttons in the full band between the screen top + and the transcript card's top (78px): the borderless navbar reads as + one space with the 8px floating-card gap below it, so geometric + centring in the 70px navbar alone left them sitting 4px high. The + margin shifts the whole centred bar; the card is absolutely + positioned, so nothing else moves. */ + margin-top: 4px; transition: padding-left 0.5s ease; } body.sidebar-collapsed .main-panel .navbar {