(workflowbar-autohide) Autohide the workflow bar with retro slide + phosphor#244
Merged
Conversation
…hosphor Default-on autohide: the workflow bar slides out of flow and overlays the top of the layout host (Lightroom module-row style), so the workspace reclaims the height and FlexLayout never re-layouts as it shows/hides. It returns on a step change, a top-edge hover-zone, or keyboard focus; an open dropdown, focus-within, or the pointer resting on it pause the hide timer. Timer logic lives in a headless hook (useWorkflowBarAutoHide); the slide and accent phosphor pulse are CSS-only using existing theme tokens and are neutralised under prefers-reduced-motion. A new independent preference (workspace.workflowBarAutoHide, default true) offers the always-visible opt-out, separate from showWorkflowBar.
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
The autohide bar and its hover-zone overlay the layout host at z 6-7, but the StartupLanding welcome card fills that host at --z-sticky (200) with default pointer-events, so on the first-run / empty workspace it painted over the row and swallowed its clicks — leaving a mouse user no way to reach the bar. Raise the overlay + hover-zone to --z-sticky + 100 (still below --z-modal so modals win). Update the StartupLanding comment to describe the new ordering.
…eveal on focus The hidden row was translateY(-100%) + aria-hidden, but its buttons stayed in the tab order (focusable-inside-aria-hidden antipattern) and onFocus only paused the timer without revealing. Replace aria-hidden with `inert` while hidden — the whole row leaves the tab order and a11y tree and cannot take focus or clicks; the catch-strip and Cmd+1..5 step changes remain the ways back in. onFocus now also reveals, so a Tab into a still-visible, just-idle row surfaces it before it slides away. Tests cover both: inert toggles with hidden state and the hover-zone restores it, and focus reveals + pauses the hide timer.
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
Owner-requested follow-up: the workflow bar auto-hides to reclaim screen real estate, Lightroom-style.
prefers-reduced-motiongets a motion-free opacity variant. No new theme keys.Testing
npm test: 91 files / 881 tests passed (new: 7 hook tests for the timer/pause logic, 3 bar autohide tests); rebased onto dev incl. (workspace-morph) File queue as a companion tab behind the image viewer in Review #243npm run build:workspace: OK