Navbar design pass: segmented view switch, softened buttons, alignment - #432
Merged
Conversation
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.
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.
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).
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.
…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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
A design pass over the navbar, centred on the captions/transcript view control.
aria-pressed; both segments stay clickable, and clicking the active one is a no-op (preserving the behavior the transcription engines rely on when forcing transcript view via#transcript-editor-btn.click()). Tooltips renamed to "Transcript view" / "Captions view"..btn-outlinenear-black border and black-fill hover inversion read heavier than everything around them; the navbar's outline buttons now use quiet base-300 borders and a gray tint hover.aria-pressedin both the desktop (sidebar) and small-screen (Recents drawer) layouts.Notes
oklch(var(--b3))etc.?v=cache-busters bumped to 0.8.11 forhyperaudio-lite-editor.css,editor-core.js, andresponsive.js. The@versionheaders inside the JS files are left for the release process.tailwind-min.css.Testing
aria-pressedtracking, alignment in both sidebar states.