fix: theme-aware tab strip, tooltip address line, and divider polish - #3422
fix: theme-aware tab strip, tooltip address line, and divider polish#3422rodrigok wants to merge 2 commits into
Conversation
- Follow the resolved theme for the shell palette when the window is transparent (opaque stays dark), via a shared useShellTheme hook, so tab text stays legible over a light desktop - Centralize the tab/divider/hover fill into a single --tab-chrome-fill CSS variable that inverts with the palette under transparency - Match the add button hover to the tab fill when transparency is enabled - Render each tab's divider as a trailing sibling so one sits before the add button automatically; drive divider visibility (leading edge, selected and hovered flanks) purely in CSS - Animate tab hover background and divider opacity - Show the server address on its own tooltip line, stripped from the title when the title already embeds it - Update tab max-width test to 230px to match the strip metrics Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
WalkthroughShell theme resolution now reflects transparency and theme preferences. Tab-bar chrome uses the resolved palette with updated sizing, gradients, dividers, labels, and add-button styling. Workspace tabs improve server tooltips and displayed labels. ChangesShell theme and tab bar UI
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant ReduxState
participant useShellTheme
participant Shell
participant PaletteStyleTag
participant TabBar
participant Strip
ReduxState->>useShellTheme: read transparency and theme preferences
useShellTheme->>Shell: return shellTheme
Shell->>PaletteStyleTag: set data-theme
useShellTheme->>TabBar: return paletteTheme
TabBar->>Strip: pass paletteTheme and transparency state
Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration. Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (2)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
macOS installer download |
- Hide the divider before the add button when the button is hovered - Round tab corners and align the add button radius - Dim idle dividers to 50% opacity Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/ui/components/TabBar/styles.tsx (1)
133-133: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueSimplify redundant padding logic.
The ternary operator evaluates to
'0 6px'in both conditions, making theisCompactcheck redundant. If the padding is intentionally identical for both compact and non-compact modes, this expression can be simplified.If
isCompactis no longer utilized elsewhere in this styled component, you may also consider removing it fromTabPropsto clean up unused properties.♻️ Proposed fix
- padding: ${({ isCompact }) => (isCompact ? '0 6px' : '0 6px')}; + padding: 0 6px;🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/ui/components/TabBar/styles.tsx` at line 133, In the styled component’s padding declaration, replace the redundant isCompact ternary with the shared constant value '0 6px'. Remove isCompact from TabProps only if it is unused elsewhere in the component, preserving the prop when other styles still depend on it.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@src/ui/components/TabBar/styles.tsx`:
- Line 133: In the styled component’s padding declaration, replace the redundant
isCompact ternary with the shared constant value '0 6px'. Remove isCompact from
TabProps only if it is unused elsewhere in the component, preserving the prop
when other styles still depend on it.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 74d132b5-222a-40ee-8a25-723d0d31b4f5
📒 Files selected for processing (1)
src/ui/components/TabBar/styles.tsx
📜 Review details
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: Use TypeScript for new code unless explicitly told otherwise.
Use Fuselage components from@rocket.chat/fuselagefor UI work unless the design requires something Fuselage does not provide.
CheckTheme.d.tsfor valid color tokens before using Fuselage colors.
Verify library props, APIs, and tokens against official docs or local.d.tsfiles instead of assuming.
Use React functional components with hooks.
Redux actions follow FSA shape.
Use camelCase for file names and PascalCase for components.
Prefer clear names over unnecessary comments.
Prefer editing existing files over creating new abstractions unless the new abstraction removes real complexity or matches an existing pattern.
**/*.{ts,tsx}: Use TypeScript for all new code unless explicitly told otherwise.
Use Fuselage components for all UI work; create custom components only when Fuselage lacks the required functionality.
Import Fuselage components from@rocket.chat/fuselage.
Use only valid color tokens documented byTheme.d.ts.
Use optional chaining with fallbacks for platform-specific APIs, especially Linux-only process APIs such asprocess.getuid(),getgid(),geteuid(), andgetegid().
Use TypeScript strict mode.
Redux actions must follow the Flux Standard Action pattern.
Use camelCase for file names and PascalCase for component names.
Avoid unnecessary comments; prefer self-documenting code through clear naming.
Do not commit or push without explicit user permission.
Verify library APIs, props, tokens, and types against official documentation and.d.tsfiles instead of assuming they are valid.
Files:
src/ui/components/TabBar/styles.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use React functional components with hooks.
Files:
src/ui/components/TabBar/styles.tsx
1 participant
What changed
Polish for the workspace tab strip, focused on transparent-window legibility and small UX fixes.
Theming
autotracks the OS) when the window is transparent; opaque windows stay pinned to dark. Extracted into a shareduseShellThemehook used by bothShellandTabBar.--tab-chrome-fillCSS variable set onStrip. Over a transparent window it becomes a translucent overlay that inverts with the palette (subtle darkening in light mode, subtle brightening in dark mode); opaque uses the solid sidebar surface.Add button
Dividers
aria-selected/role="tab"sibling selectors, replacing the previous JSisDividerVisiblecomputation.Tooltip
Test
max-widthassertion from 180px to 230px to match the current strip metrics.Verification
tsc --noEmit: passyarn lint: passyarn test: 156 suites / 1674 tests passing, 0 failed (2 skipped)🤖 Generated with Claude Code
Images
Not transparent, Dark (Before / After)
Not transparent, Light (Before / After)
Transparent, Dark (Before / After)
Transparent, Light (Before / After)
Hover before
Hover after
Summary by CodeRabbit
Summary by CodeRabbit
New Features
UI Improvements
Tests