Panes: rest the controls, recede unfocused panes - #63
Merged
Conversation
Four additive changes. The row treatment is left alone - its colourless selection with the violet bar as a separate keyboard-focus signal is deliberate and documented in place. Project headers stick to the top of the scrolling list, so a long list scrolls under its header rather than past it and the visible rows always have an owner. The header carries the rail's own deep tone at 94% with a blur so rows do not ghost through it. The search field reads as a search field before it is focused: an inline magnifier sits at its left edge. Both the base and focus rules now set background-color rather than the background shorthand - the shorthand would have dropped the icon the moment the field took focus. Focus also picks up the soft accent ring the segmented control uses. Section labels (AGENTS, COVEN) run into a hairline across the remaining width, so sections separate without spending vertical space on gaps. The selected worktree gains the same 2px violet edge the active row uses, rather than being signalled only by a 6% wash. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Three buttons at 22px each spend a third of a 200px pane's header on controls you are not using. Span, maximise and close now rest at zero opacity and appear on hover, on keyboard focus inside the pane, and permanently on the focused pane - the one being driven. Opacity rather than display keeps the grid tracks reserved, so nothing reflows as they appear, and each forces itself visible on :focus-visible so a keyboard user can never tab to something invisible. Unfocused panes recede: their title takes the softer text tone and their glyph drops to 70%, so the focused pane reads instantly in a grid of them. This dims chrome, not content - the title stays legible and the terminal body is untouched. A hairline under the header gives terminal content an edge to scroll beneath rather than butting into. Additive to the existing six-track header; the span and maximise controls keep their behaviour. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
There was a problem hiding this comment.
Pull request overview
This PR updates pane and sidebar chrome styling in the macOS Tauri web UI to reduce visual weight when panes are unfocused and to keep pane header controls hidden until interaction (hover/focus/focused pane), while also adding a subtle header separator line.
Changes:
- Make pane header controls (span/maximise/close) rest hidden via opacity, revealing on hover, focus-within, or focused pane.
- Visually recede unfocused pane chrome (title tone + glyph opacity) to improve focus scanning.
- Add sidebar design tweaks (sticky group headers, search icon styling, subsection hairlines, selected worktree edge).
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+627
to
+630
| .session-search:focus { | ||
| background-color: var(--surface-3); | ||
| box-shadow: 0 0 0 3px rgba(var(--rgb-accent), 0.14); | ||
| } |
Comment on lines
+1434
to
+1449
| .terminal-pane-span, | ||
| .terminal-pane-max, | ||
| .terminal-pane-close { | ||
| opacity: 0; | ||
| transition: opacity var(--transition-fast), background var(--transition-fast), | ||
| color var(--transition-fast); | ||
| } | ||
| .terminal-pane:hover .terminal-pane-span, | ||
| .terminal-pane:hover .terminal-pane-max, | ||
| .terminal-pane:hover .terminal-pane-close, | ||
| .terminal-pane:focus-within .terminal-pane-span, | ||
| .terminal-pane:focus-within .terminal-pane-max, | ||
| .terminal-pane:focus-within .terminal-pane-close, | ||
| .terminal-pane.focused .terminal-pane-span, | ||
| .terminal-pane.focused .terminal-pane-max, | ||
| .terminal-pane.focused .terminal-pane-close { opacity: 1; } |
Comment on lines
+1451
to
+1457
| .terminal-pane-span:focus-visible, | ||
| .terminal-pane-max:focus-visible, | ||
| .terminal-pane-close:focus-visible { | ||
| opacity: 1; | ||
| outline: 2px solid var(--accent); | ||
| outline-offset: -2px; | ||
| } |
Comment on lines
+1466
to
+1470
| .terminal-pane-header { | ||
| box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28); | ||
| position: relative; | ||
| z-index: 1; | ||
| } |
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
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.
Stacked on #62 — based on that branch so the diff stays pane-only; retarget to
mainonce #62 merges. CSS only.The controls rest hidden
The header is a six-track grid ending in span · maximise · close. Three buttons at 22px each spend roughly a third of a 200px pane's header — the pane minimum — on controls you are not currently using.
They now rest at zero opacity and appear on:
:focus-within),.focusedpane — the one actually being driven.Opacity rather than
display, so the grid tracks stay reserved and nothing reflows as they fade in. Each control also forces itself visible on:focus-visible, so a keyboard user can never tab to something invisible — the failure mode this pattern usually ships with.Unfocused panes recede
Their title takes the softer text tone and their glyph drops to 70% opacity, so the focused pane reads instantly in a grid of them.
This deliberately dims chrome, not content: the title stays legible and the terminal body is untouched. The existing focused-pane treatment (accent border, tinted header) is left as it was.
A hairline under the header
Terminal content now scrolls beneath an edge instead of butting straight into the header.
Verification
npx vitest run— 1499 passed, 11 skipped, 3 failed.pnpm typecheck— clean.The 3 failures are the known environmental baseline on this machine (pnpm version pin; GNU
statshadowing BSDstat) in release-signing tests untouched here.Note for reviewers
This is additive to the span/maximise work that landed separately — those controls keep their behaviour and their tracks; only their resting visibility changes. Worth knowing that further pane-chrome work may be in flight in the same files, so this may want reconciling with it.
Not verified
Not seen — screenshots and window enumeration are blocked here, and
--verifyonly proves the process is alive. The specific thing to check: with controls hidden at rest, an unfocused pane's header should show only glyph, title, and status.🤖 Generated with Claude Code