feat(ui): unify Windows/Linux shell chrome and menu bar - #3450
Conversation
Hide the native menu bar by default on Windows and Linux (Alt reveals it; Settings or View → Menu bar pins it always-on). Give Linux the same client window chrome as Windows — embedded min/max/close, no DE title bar — with a soft outer corner radius. Drop the obsolete menu-bar/layout safety coupling now that the meatball menu is always available.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📜 Recent review details⏰ Context from checks skipped due to timeout. (3)
WalkthroughThe PR changes menu-bar defaults and persistence across platforms, removes menu-bar dependencies from workspace navigation, adds non-macOS menu controls, and updates Linux windows to use client-side chrome with rounded rendering and window controls. ChangesMenu bar and client chrome
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant App
participant Persistence
participant MenuBar
App->>Persistence: Read menuBarDefaultRevision
Persistence-->>App: Return persisted revision
App->>Persistence: Store current revision when stale
App->>MenuBar: Apply platform-specific visibility
MenuBar-->>App: Keep menu attached and update visibility
Possibly related PRs
Suggested labels: 🚥 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. 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
src/ui/components/Shell/index.tsx (1)
92-95: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winReplace the hard-coded Linux edge shadow with a theme-aware token.
At
src/ui/components/Shell/index.tsx:95,'0 0 0 1px rgba(0, 0, 0, 0.14)'makes the rounded Linux silhouette ignore dark-mode theme changes. Use the active theme color/token instead.🤖 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/Shell/index.tsx` around lines 92 - 95, Update the non-expanded boxShadow value in the Shell component to use the active theme’s color or shadow token instead of the hard-coded rgba value, while preserving the undefined behavior when isWindowExpanded is true.Source: Coding guidelines
🤖 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.
Inline comments:
In `@README.md`:
- Line 226: Correct the isMenuBarEnabled documentation row in README.md so true
indicates the menu bar remains always visible on Windows/Linux, while false
enables auto-hide with Alt showing it temporarily; retain the macOS caveat.
In `@src/app/main/data.ts`:
- Around line 11-18: Resolve the static-check formatting issues: in
src/app/main/data.ts (lines 11-18), move the ../PersistableValues import before
../actions; format the getPersistedMeta call at lines 177-180 per the formatter.
Apply the same import ordering change in src/app/main/data.spec.ts (lines 3-9)
and format the mockReturnValue call at line 176 according to formatter output.
In `@src/ui/main/rootWindow.ts`:
- Around line 80-86: Update the Linux branch of the Shell Tabs rendering around
TabBar to provide a window drag region, either by rendering WindowDragBar
alongside TabBar or by applying the equivalent draggable styling to TabBar.
Preserve the existing macOS-specific handling and ensure Linux windows remain
movable with the hidden title bar.
---
Nitpick comments:
In `@src/ui/components/Shell/index.tsx`:
- Around line 92-95: Update the non-expanded boxShadow value in the Shell
component to use the active theme’s color or shadow token instead of the
hard-coded rgba value, while preserving the undefined behavior when
isWindowExpanded is true.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: e1615aec-ac7d-4e44-a1e8-c00029dbb079
📒 Files selected for processing (21)
README.mddocs/silent-installation.mdsrc/app/PersistableValues.tssrc/app/__tests__/PersistableValues.spec.tssrc/app/main/data.spec.tssrc/app/main/data.tssrc/app/main/persistence.tssrc/i18n/en.i18n.jsonsrc/ui/components/SettingsView/GeneralTab.tsxsrc/ui/components/SettingsView/features/MenuBar.tsxsrc/ui/components/SettingsView/features/NavigationLayout.spec.tsxsrc/ui/components/SettingsView/features/NavigationLayout.tsxsrc/ui/components/Shell/index.spec.tsxsrc/ui/components/Shell/index.tsxsrc/ui/components/Shell/styles.tsxsrc/ui/components/TabBar/MeatballMenuButton.spec.tsxsrc/ui/components/TabBar/MeatballMenuButton.tsxsrc/ui/main/menuBar.tssrc/ui/main/rootWindow.tssrc/ui/reducers/isMenuBarEnabled.spec.tssrc/ui/reducers/isMenuBarEnabled.ts
📜 Review details
⏰ Context from checks skipped due to timeout. (2)
- GitHub Check: check (windows-latest)
- GitHub Check: check (macos-latest)
🧰 Additional context used
📓 Path-based instructions (7)
**/*.{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/SettingsView/GeneralTab.tsxsrc/ui/reducers/isMenuBarEnabled.tssrc/app/__tests__/PersistableValues.spec.tssrc/ui/components/SettingsView/features/NavigationLayout.tsxsrc/ui/reducers/isMenuBarEnabled.spec.tssrc/ui/components/TabBar/MeatballMenuButton.tsxsrc/ui/main/rootWindow.tssrc/app/main/persistence.tssrc/ui/components/SettingsView/features/MenuBar.tsxsrc/app/main/data.spec.tssrc/ui/components/Shell/styles.tsxsrc/ui/components/Shell/index.tsxsrc/ui/components/TabBar/MeatballMenuButton.spec.tsxsrc/app/PersistableValues.tssrc/app/main/data.tssrc/ui/components/Shell/index.spec.tsxsrc/ui/main/menuBar.tssrc/ui/components/SettingsView/features/NavigationLayout.spec.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use React functional components with hooks.
Files:
src/ui/components/SettingsView/GeneralTab.tsxsrc/ui/components/SettingsView/features/NavigationLayout.tsxsrc/ui/components/TabBar/MeatballMenuButton.tsxsrc/ui/components/SettingsView/features/MenuBar.tsxsrc/ui/components/Shell/styles.tsxsrc/ui/components/Shell/index.tsxsrc/ui/components/TabBar/MeatballMenuButton.spec.tsxsrc/ui/components/Shell/index.spec.tsxsrc/ui/components/SettingsView/features/NavigationLayout.spec.tsx
**/*.spec.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Renderer specs use
*.spec.ts/*.spec.tsx.
Files:
src/app/__tests__/PersistableValues.spec.tssrc/ui/reducers/isMenuBarEnabled.spec.tssrc/app/main/data.spec.tssrc/ui/components/TabBar/MeatballMenuButton.spec.tsxsrc/ui/components/Shell/index.spec.tsxsrc/ui/components/SettingsView/features/NavigationLayout.spec.tsx
src/*/*/*.spec.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Renderer specs must live in a Jest-matched nested path, such as
src/<module>/<subdir>/*.spec.ts(x); flatsrc/<module>/*.spec.tsfiles are not discovered by the currenttestMatch.
Files:
src/app/__tests__/PersistableValues.spec.tssrc/ui/reducers/isMenuBarEnabled.spec.tssrc/app/main/data.spec.ts
**/*.spec.ts
📄 CodeRabbit inference engine (CLAUDE.md)
Use
*.spec.tsfor renderer process tests.
Files:
src/app/__tests__/PersistableValues.spec.tssrc/ui/reducers/isMenuBarEnabled.spec.tssrc/app/main/data.spec.ts
src/**/*.{spec.ts,spec.tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Renderer test files should be placed in nested module paths such as
src/<module>/<subdir>/*.spec.ts(x)so Jest discovers them.
Files:
src/app/__tests__/PersistableValues.spec.tssrc/ui/reducers/isMenuBarEnabled.spec.tssrc/app/main/data.spec.tssrc/ui/components/TabBar/MeatballMenuButton.spec.tsxsrc/ui/components/Shell/index.spec.tsxsrc/ui/components/SettingsView/features/NavigationLayout.spec.tsx
**/*.{md,mdx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{md,mdx}: Avoid subjective descriptors and use measurable descriptions.
Never invent metrics; use only numbers from actual logs, error messages, or documented sources.
PR descriptions should use straightforward language and focus on what changed and why.
Files:
docs/silent-installation.mdREADME.md
🧠 Learnings (5)
📚 Learning: 2026-05-19T20:49:24.859Z
Learnt from: nazabucciarelli
Repo: RocketChat/Rocket.Chat.Electron PR: 3329
File: src/ui/reducers/e2ePdfPreviewSizeLimit.ts:14-16
Timestamp: 2026-05-19T20:49:24.859Z
Learning: In Rocket.Chat.Electron’s reducer files under src/ui/reducers/, reducers should not re-implement validation for action payloads. Assume the caller (UI component or dispatch site) has already validated the action payload and type/shape; reducers should trust the payload and update state directly. If validation is needed, add it at the dispatch site/caller rather than inside the reducer.
Applied to files:
src/ui/reducers/isMenuBarEnabled.tssrc/ui/reducers/isMenuBarEnabled.spec.ts
📚 Learning: 2026-05-19T20:49:24.859Z
Learnt from: nazabucciarelli
Repo: RocketChat/Rocket.Chat.Electron PR: 3329
File: src/ui/reducers/e2ePdfPreviewSizeLimit.ts:14-16
Timestamp: 2026-05-19T20:49:24.859Z
Learning: In the Rocket.Chat.Electron UI reducers under src/ui/reducers/, do not add/repeat input validation for action payloads inside reducers. Follow the existing codebase pattern: validate the action payload in the caller (e.g., the UI component or dispatch site) before dispatching. Reducers should trust the incoming payload and apply it directly to state. If adding/updating a reducer, ensure the corresponding caller performs the necessary validation (e.g., check numeric constraints like !isNaN(value) && value > 0 before dispatching the action).
Applied to files:
src/ui/reducers/isMenuBarEnabled.tssrc/ui/reducers/isMenuBarEnabled.spec.ts
📚 Learning: 2026-06-26T18:14:11.817Z
Learnt from: jeanfbrito
Repo: RocketChat/Rocket.Chat.Electron PR: 3358
File: src/ui/components/SettingsView/features/E2ePdfPreviewSizeLimit.tsx:47-55
Timestamp: 2026-06-26T18:14:11.817Z
Learning: In the Rocket.Chat Electron App SettingsView features under `src/ui/components/SettingsView/features/`, treat full-width selects/inputs (including full-width numeric inputs) as intentional for the stacked label/description layout. Per the UXDQA Figma spec (and macOS 1:1 verification), reviews should not flag these as layout regressions as long as they match the expected form-column stretching behavior.
Applied to files:
src/ui/components/SettingsView/features/NavigationLayout.tsxsrc/ui/components/SettingsView/features/MenuBar.tsxsrc/ui/components/SettingsView/features/NavigationLayout.spec.tsx
📚 Learning: 2026-06-26T18:14:13.838Z
Learnt from: jeanfbrito
Repo: RocketChat/Rocket.Chat.Electron PR: 3358
File: src/ui/components/SettingsView/features/ToggleField.tsx:1-8
Timestamp: 2026-06-26T18:14:13.838Z
Learning: In Rocket.Chat Electron App settings field UIs that use the Fuselage three-tier pattern, keep the `FieldLabel` / `FieldDescription` / `FieldHint` structure separate. Use `FieldDescription` for the regular secondary body text, and reserve `FieldHint` for the smaller, dimmer subline content (e.g., restart caveats). Do not collapse `FieldDescription` and `FieldHint` into a single hint tier, as this violates the intended UXDQA spec.
Applied to files:
src/ui/components/SettingsView/features/NavigationLayout.tsxsrc/ui/components/SettingsView/features/MenuBar.tsxsrc/ui/components/SettingsView/features/NavigationLayout.spec.tsx
📚 Learning: 2026-06-26T18:14:15.295Z
Learnt from: jeanfbrito
Repo: RocketChat/Rocket.Chat.Electron PR: 3358
File: src/i18n/it-IT.i18n.json:39-42
Timestamp: 2026-06-26T18:14:15.295Z
Learning: In the i18n JSON files, the translation key `minimizeOnClose.disabledHint` is intentionally displayed when `isTrayIconEnabled` is true and the minimize-on-close toggle is disabled. The hint text should therefore instruct the user to disable the tray icon to make the setting available. During reviews, don’t “correct” this translation for seeming mismatches with the toggle state—first confirm it matches the component’s intended behavior; only update the wording if the underlying product logic/UX requirement changes.
Applied to files:
src/i18n/en.i18n.json
🪛 GitHub Check: check (ubuntu-latest)
src/app/main/data.spec.ts
[failure] 3-3:
../PersistableValues import should occur before import of ../actions
[failure] 176-176:
Replace MENU_BAR_DEFAULT_REVISION with ⏎········MENU_BAR_DEFAULT_REVISION⏎······
src/app/main/data.ts
[failure] 11-11:
../PersistableValues import should occur before import of ../actions
[failure] 177-177:
Replace ⏎····'menuBarDefaultRevision',⏎····0⏎·· with 'menuBarDefaultRevision',·0
🔇 Additional comments (16)
src/app/PersistableValues.ts (1)
129-145: LGTM!Also applies to: 265-280
src/app/main/persistence.ts (1)
31-44: LGTM!src/app/main/data.ts (1)
181-188: LGTM!src/app/main/data.spec.ts (1)
30-32: LGTM!Also applies to: 61-61, 84-130, 143-168, 170-175, 177-191
src/app/__tests__/PersistableValues.spec.ts (1)
341-393: LGTM!src/ui/components/SettingsView/features/NavigationLayout.spec.tsx (1)
14-14: LGTM!Also applies to: 90-102
src/i18n/en.i18n.json (1)
298-298: LGTM!Also applies to: 310-310
docs/silent-installation.md (1)
527-527: LGTM!src/ui/reducers/isMenuBarEnabled.ts (1)
15-21: LGTM!src/ui/reducers/isMenuBarEnabled.spec.ts (1)
10-13: LGTM!src/ui/main/menuBar.ts (1)
443-449: LGTM!Also applies to: 471-476, 490-498, 512-520, 1269-1282
src/ui/components/TabBar/MeatballMenuButton.tsx (1)
36-42: LGTM!src/ui/components/TabBar/MeatballMenuButton.spec.tsx (1)
58-137: LGTM!src/ui/components/SettingsView/GeneralTab.tsx (1)
34-34: LGTM!src/ui/components/SettingsView/features/MenuBar.tsx (1)
35-43: LGTM!src/ui/components/SettingsView/features/NavigationLayout.tsx (1)
49-87: LGTM!
Use an inset hairline and clamp html/body/#root overflow so the outer corner radius no longer extends the document and shows a bottom scrollbar.
Correct isMenuBarEnabled true/false wording in README and silent-install docs, and fix import order/formatting in data load helpers so CI lint passes.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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.
Inline comments:
In `@src/ui/components/Shell/index.tsx`:
- Line 99: Replace the hardcoded rgba color in the Shell component’s inset
box-shadow with a valid Fuselage color token or theme variable, preserving the
existing hairline styling while allowing it to adapt to the active theme.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 2eee97b5-50d7-457d-bda3-024966db0a6b
📒 Files selected for processing (2)
src/ui/components/Shell/index.tsxsrc/ui/components/Shell/styles.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- src/ui/components/Shell/styles.tsx
📜 Review details
⏰ Context from checks skipped due to timeout. (3)
- GitHub Check: check (ubuntu-latest)
- GitHub Check: check (windows-latest)
- GitHub Check: check (macos-latest)
🧰 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/Shell/index.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use React functional components with hooks.
Files:
src/ui/components/Shell/index.tsx
🔇 Additional comments (1)
src/ui/components/Shell/index.tsx (1)
29-35: LGTM!Also applies to: 45-48, 81-98, 104-159
Replace the hardcoded rgba(0, 0, 0, 0.14) inset box-shadow with Fuselage's shadow-elevation-border token so the outer hairline adapts to the active theme instead of staying fixed for dark mode.
1 participant
Summary
Ctrl+Shift+M) pins it always visible. One-shot config revision migrates existing installs that storedtruewhile the bar was forced hidden on Windows / always-on on Linux.Test plan
Shell/index.spec.tsx, menu bar data/PersistableValues/reducer specsVerified on lab VMs: Ubuntu 22.04 (GNOME X11), Manjaro (KDE Wayland/XWayland), openSUSE (KDE X11).
Summary by CodeRabbit
New Features
Improvements