chore: Add transparent mode for macOS#3107
Conversation
…Shell, content, and webviews. Make body/shell transparent on macOS and paint main content instead; Sidebar uses transparent bg on darwin. Revert global transparent CSS injection.
WalkthroughAdds a macOS transparent-window feature: persisted flag Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant UI as Settings UI
participant Redux as Redux Store
participant Persist as Persister
participant AppMain as App Main
participant RootWin as rootWindow
User->>UI: toggle "transparent window"
UI->>Redux: dispatch SETTINGS_SET_IS_TRANSPARENT_WINDOW_ENABLED_CHANGED(payload)
Redux->>Persist: persist updated settings
Persist-->>Redux: confirm persisted
Redux->>AppMain: emit settings-change event
AppMain->>AppMain: trigger relaunch
AppMain->>RootWin: request window creation after restart
RootWin->>Persist: read persisted values
alt isTransparentWindowEnabled && platform == darwin
RootWin->>RootWin: set backgroundColor='transparent' & enable vibrancy
else
RootWin->>RootWin: use default background/options
end
RootWin-->>User: window rendered
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~35 minutes
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro Disabled knowledge base sources:
📒 Files selected for processing (4)
💤 Files with no reviewable changes (1)
✅ Files skipped from review due to trivial changes (2)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
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 |
…zation support - Introduced a new feature to enable a transparent window effect, enhancing the visual experience on macOS. - Updated the state management to include `isTransparentWindowEnabled`. - Added a new settings component for toggling the transparent window effect. - Implemented internationalization for the new feature in multiple languages (en, de, es, fr, hu, no, pt-BR, ru, sv). - Updated the root window creation logic to respect the transparent window setting.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/ui/components/TopBar/index.tsx (1)
19-19: Remove commented code or make it platform-conditional.Commented-out code should be either removed entirely or replaced with platform-conditional logic like in
SideBarandShellcomponents for consistency.If the background should be removed for all platforms:
- // bg='tint'Or if it should be platform-conditional:
- // bg='tint' + bg={process.platform === 'darwin' ? undefined : 'tint'}src/ui/components/SettingsView/features/TransparentWindow.tsx (1)
22-37: Well-implemented component with proper hooks usage.The component correctly uses Redux hooks with proper typing, and the
useCallbackoptimization is appropriate with the correct dependency array.Consider these minor idiomatic improvements:
- Simplify the selector (lines 23-25):
- const isTransparentWindowEnabled = useSelector( - ({ isTransparentWindowEnabled }: RootState) => isTransparentWindowEnabled - ); + const isTransparentWindowEnabled = useSelector( + (state: RootState) => state.isTransparentWindowEnabled + );
- Destructure props (line 22 and 42):
-export const TransparentWindow = (props: TransparentWindowProps) => { +export const TransparentWindow = ({ className }: TransparentWindowProps) => { // ... - <Field className={props.className}> + <Field className={className}>Based on coding guidelines.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (24)
src/app/PersistableValues.ts(2 hunks)src/app/main/app.ts(2 hunks)src/app/selectors.ts(1 hunks)src/i18n/de-DE.i18n.json(1 hunks)src/i18n/en.i18n.json(1 hunks)src/i18n/es.i18n.json(1 hunks)src/i18n/fr.i18n.json(1 hunks)src/i18n/hu.i18n.json(1 hunks)src/i18n/no.i18n.json(1 hunks)src/i18n/pt-BR.i18n.json(1 hunks)src/i18n/ru.i18n.json(1 hunks)src/i18n/sv.i18n.json(1 hunks)src/public/index.html(1 hunks)src/store/rootReducer.ts(2 hunks)src/ui/actions.ts(2 hunks)src/ui/components/SettingsView/GeneralTab.tsx(2 hunks)src/ui/components/SettingsView/SettingsView.tsx(1 hunks)src/ui/components/SettingsView/features/TransparentWindow.tsx(1 hunks)src/ui/components/Shell/index.tsx(2 hunks)src/ui/components/Shell/styles.tsx(2 hunks)src/ui/components/SideBar/index.tsx(1 hunks)src/ui/components/TopBar/index.tsx(1 hunks)src/ui/main/rootWindow.ts(2 hunks)src/ui/reducers/isTransparentWindowEnabled.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Follow existing TypeScript patterns with strict mode enabled
All new code must pass ESLint and TypeScript checks
Avoid unnecessary comments; only add comments for complex logic or non-obvious decisions
Files:
src/ui/components/SettingsView/SettingsView.tsxsrc/ui/components/SideBar/index.tsxsrc/app/PersistableValues.tssrc/ui/components/SettingsView/features/TransparentWindow.tsxsrc/app/selectors.tssrc/ui/components/Shell/index.tsxsrc/ui/components/TopBar/index.tsxsrc/ui/components/Shell/styles.tsxsrc/store/rootReducer.tssrc/ui/reducers/isTransparentWindowEnabled.tssrc/ui/main/rootWindow.tssrc/ui/components/SettingsView/GeneralTab.tsxsrc/ui/actions.tssrc/app/main/app.ts
src/ui/**/*.tsx
📄 CodeRabbit inference engine (CLAUDE.md)
src/ui/**/*.tsx: Implement React UI with functional components and hooks
Use Fuselage components (Box, Button, TextInput, Modal, etc.) and import from@rocket.chat/fuselageinstead of raw HTML elements
For Fuselage theming, validate tokens againstTheme.d.tsand only use documented values
Name React component files in PascalCase; non-component files should follow camelCase naming
Files:
src/ui/components/SettingsView/SettingsView.tsxsrc/ui/components/SideBar/index.tsxsrc/ui/components/SettingsView/features/TransparentWindow.tsxsrc/ui/components/Shell/index.tsxsrc/ui/components/TopBar/index.tsxsrc/ui/components/Shell/styles.tsxsrc/ui/components/SettingsView/GeneralTab.tsx
src/store/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Write Redux actions following the Flux Standard Action (FSA) convention
Files:
src/store/rootReducer.ts
🧠 Learnings (3)
📚 Learning: 2025-09-26T19:24:21.364Z
Learnt from: CR
Repo: RocketChat/Rocket.Chat.Electron PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-09-26T19:24:21.364Z
Learning: Applies to src/ui/**/*.tsx : Use Fuselage components (Box, Button, TextInput, Modal, etc.) and import from `rocket.chat/fuselage` instead of raw HTML elements
Applied to files:
src/ui/components/SettingsView/features/TransparentWindow.tsx
📚 Learning: 2025-09-26T19:24:21.364Z
Learnt from: CR
Repo: RocketChat/Rocket.Chat.Electron PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-09-26T19:24:21.364Z
Learning: Applies to src/ui/**/*.tsx : Implement React UI with functional components and hooks
Applied to files:
src/ui/components/SettingsView/features/TransparentWindow.tsx
📚 Learning: 2025-09-26T19:24:21.364Z
Learnt from: CR
Repo: RocketChat/Rocket.Chat.Electron PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-09-26T19:24:21.364Z
Learning: Applies to src/rootWindow.ts : Keep `src/rootWindow.ts` as the renderer entry for the main window UI
Applied to files:
src/app/selectors.tssrc/ui/main/rootWindow.tssrc/ui/components/SettingsView/GeneralTab.tsxsrc/app/main/app.ts
🧬 Code graph analysis (6)
src/ui/components/SettingsView/features/TransparentWindow.tsx (5)
src/ui/reducers/isTransparentWindowEnabled.ts (1)
isTransparentWindowEnabled(6-22)src/store/rootReducer.ts (1)
RootState(103-103)src/store/index.ts (1)
dispatch(38-40)src/store/actions.ts (1)
RootAction(44-46)src/ui/actions.ts (1)
SETTINGS_SET_IS_TRANSPARENT_WINDOW_ENABLED_CHANGED(107-108)
src/app/selectors.ts (2)
src/store/rootReducer.ts (1)
RootState(103-103)src/ui/reducers/isTransparentWindowEnabled.ts (1)
isTransparentWindowEnabled(6-22)
src/ui/reducers/isTransparentWindowEnabled.ts (2)
src/ui/actions.ts (1)
SETTINGS_SET_IS_TRANSPARENT_WINDOW_ENABLED_CHANGED(107-108)src/app/actions.ts (1)
APP_SETTINGS_LOADED(6-6)
src/ui/main/rootWindow.ts (1)
src/app/main/persistence.ts (1)
getPersistedValues(28-29)
src/ui/components/SettingsView/GeneralTab.tsx (1)
src/ui/components/SettingsView/features/TransparentWindow.tsx (1)
TransparentWindow(22-60)
src/app/main/app.ts (2)
src/store/index.ts (2)
listen(88-114)listen(144-157)src/ui/actions.ts (1)
SETTINGS_SET_IS_TRANSPARENT_WINDOW_ENABLED_CHANGED(107-108)
🔇 Additional comments (27)
src/public/index.html (1)
9-9: LGTM! Transparent background supports the vibrancy feature.The change to a transparent background is appropriate for enabling native macOS vibrancy effects.
src/ui/components/SideBar/index.tsx (1)
72-75: LGTM! Platform-specific background styling.The conditional background prop correctly applies platform-specific theming, with no background on macOS (darwin) to support transparency and 'tint' on other platforms.
src/i18n/hu.i18n.json (1)
267-271: LGTM! Localization keys added for transparent window feature.The Hungarian translation for the transparent window setting follows the correct structure and placement.
src/ui/components/Shell/index.tsx (2)
88-94: LGTM! Platform-specific outer container background.The outer Box correctly removes the background on macOS to enable transparency, while maintaining the 'light' background on other platforms.
98-104: LGTM! Platform-specific inner container background.The inner Box applies a 'light' background on macOS, creating the layered transparency effect, while other platforms have no background here.
src/ui/actions.ts (2)
107-108: LGTM! New action constant for transparent window setting.The action constant follows the existing naming convention and is properly exported.
244-244: LGTM! Action payload type correctly defined.The boolean payload type is appropriate for the transparent window toggle setting.
src/i18n/en.i18n.json (1)
277-280: LGTM! English localization for transparent window feature.The translation keys are properly structured and the description correctly informs users that a restart is required to apply the setting.
src/i18n/es.i18n.json (1)
268-271: LGTM! Spanish localization for transparent window feature.The Spanish translation follows the correct structure and includes the restart requirement notice.
src/i18n/ru.i18n.json (1)
242-249: Russian translation key for transparent window is correctly addedThe new
settings.options.transparentWindowtitle/description are well-formed, correctly nested, and match the paths used by the TransparentWindow component.src/i18n/sv.i18n.json (1)
273-280: Swedish translation for transparent window is consistent and correctly wired
settings.options.transparentWindowis added with valid JSON and wording aligned to the feature; the key path matches what the settings UI expects.src/ui/components/SettingsView/SettingsView.tsx (1)
36-44: Platform-aware background on SettingsView aligns with transparency behaviorConditionally omitting
bgon macOS while keeping'light'elsewhere should let the transparent/vibrant window show through on macOS without affecting other platforms.Please verify visually on macOS and at least one non-macOS platform to confirm the settings view background behaves as expected with and without transparency enabled.
src/ui/components/Shell/styles.tsx (1)
19-29: Shell backgrounds correctly switch to transparent on macOSUsing
process.platform === 'darwin'to makebodyandWrapperbackgrounds transparent while keeping#2f343delsewhere fits the vibrancy feature and preserves prior visuals on non-macOS.Please test on macOS with the transparent window setting both enabled and disabled to confirm the fallback dark background still looks correct when vibrancy is off.
Also applies to: 48-51
src/ui/components/SettingsView/GeneralTab.tsx (1)
13-15: macOS‑only TransparentWindow setting is correctly integratedImporting
TransparentWindowand gating it withprocess.platform === 'darwin'cleanly scopes the UI to macOS while preserving layout of the general settings.Please confirm via a non-macOS build that the transparent window toggle is hidden there and only rendered on macOS as intended.
Also applies to: 25-33
src/store/rootReducer.ts (1)
32-32: NewisTransparentWindowEnabledreducer is correctly wired into RootStateImporting and registering
isTransparentWindowEnabledinrootReducerfollows the existing pattern for UI feature flags and exposes the state for selectors and persistence.Please confirm that any selectors and persistence code (e.g.,
PersistableValuesandselectPersistableValues) use the exact same key name to avoid subtle state mismatches.Also applies to: 100-101
src/ui/reducers/isTransparentWindowEnabled.ts (1)
1-22: Reducer logic forisTransparentWindowEnabledis sound and matches existing patternsThe reducer correctly defaults to
false, updates from the settings action payload, and rehydrates fromAPP_SETTINGS_LOADEDusing a safe fallback to the current state.If you later tighten action typing (e.g., to a
RootActionunion), consider updating this reducer’s second generic parameter fromanyto keep TypeScript aligned with the actual action shapes.src/ui/main/rootWindow.ts (1)
13-14: Vibrancy enablement logic is correctly gated and resilientReading
isTransparentWindowEnabledviagetPersistedValuesand using it to conditionally apply transparent/vibrant BrowserWindow options (only on macOS) cleanly ties window behavior to the new setting while falling back safely on errors.Please exercise window creation on macOS (toggle on/off across restarts) and on Linux/Windows to ensure there are no regressions in background color, title bar style, or window visibility.
Also applies to: 58-69, 72-89
src/i18n/no.i18n.json (1)
277-280: LGTM!The Norwegian translations for the transparent window feature are properly structured and align with the translation keys used in other locales.
src/i18n/de-DE.i18n.json (1)
245-248: LGTM!The German translations for the transparent window feature are properly added. The structure aligns with other locales.
src/app/selectors.ts (1)
68-69: LGTM!The new selector for
isTransparentWindowEnabledfollows the established pattern used by other selectors in this file and correctly extracts the value fromRootState.src/i18n/pt-BR.i18n.json (1)
263-266: LGTM!The Brazilian Portuguese translations for the transparent window feature are properly structured and grammatically correct.
src/app/main/app.ts (1)
137-140: LGTM!The listener correctly triggers an app relaunch when the transparent window setting changes, following the same pattern as the hardware acceleration listener. This is appropriate since window transparency must be configured at window creation time.
src/i18n/fr.i18n.json (1)
243-246: LGTM!The French translations for the transparent window feature are properly structured and grammatically correct.
src/app/PersistableValues.ts (2)
90-97: LGTM!The new
PersistableValues_4_9_0type correctly extends the previous version withisTransparentWindowEnabled, and the export type is properly updated. The pattern is consistent with the existing versioned type approach.
166-169: Migration defaults tofalseappropriately.The migration correctly sets
isTransparentWindowEnabledtofalseby default, ensuring existing users won't have their window behavior changed unexpectedly. This is the right opt-in approach for a visual feature that requires an app restart.src/ui/components/SettingsView/features/TransparentWindow.tsx (2)
1-16: LGTM! Proper imports and adherence to guidelines.All imports are correctly sourced from Fuselage and standard React/Redux libraries. The component follows the coding guideline to use Fuselage components instead of raw HTML elements.
Based on coding guidelines.
39-59: Excellent accessibility and component structure.The JSX properly uses Fuselage components with correct semantic structure. The
useIdhook ensures unique IDs for proper label-input association, meeting accessibility requirements.Based on coding guidelines.
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (18)
src/app/PersistableValues.ts(2 hunks)src/app/main/app.ts(2 hunks)src/app/selectors.ts(1 hunks)src/i18n/de-DE.i18n.json(1 hunks)src/i18n/en.i18n.json(1 hunks)src/i18n/es.i18n.json(1 hunks)src/i18n/fr.i18n.json(1 hunks)src/i18n/hu.i18n.json(1 hunks)src/i18n/no.i18n.json(1 hunks)src/i18n/pt-BR.i18n.json(1 hunks)src/i18n/ru.i18n.json(1 hunks)src/i18n/sv.i18n.json(1 hunks)src/store/rootReducer.ts(2 hunks)src/ui/actions.ts(2 hunks)src/ui/components/SettingsView/GeneralTab.tsx(2 hunks)src/ui/components/Shell/index.tsx(2 hunks)src/ui/components/SideBar/index.tsx(1 hunks)src/ui/main/rootWindow.ts(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (8)
- src/app/selectors.ts
- src/i18n/hu.i18n.json
- src/ui/components/Shell/index.tsx
- src/i18n/sv.i18n.json
- src/app/PersistableValues.ts
- src/i18n/ru.i18n.json
- src/i18n/no.i18n.json
- src/i18n/fr.i18n.json
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Follow existing TypeScript patterns with strict mode enabled
All new code must pass ESLint and TypeScript checks
Avoid unnecessary comments; only add comments for complex logic or non-obvious decisions
Files:
src/ui/main/rootWindow.tssrc/store/rootReducer.tssrc/ui/components/SideBar/index.tsxsrc/app/main/app.tssrc/ui/components/SettingsView/GeneralTab.tsxsrc/ui/actions.ts
src/store/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Write Redux actions following the Flux Standard Action (FSA) convention
Files:
src/store/rootReducer.ts
src/ui/**/*.tsx
📄 CodeRabbit inference engine (CLAUDE.md)
src/ui/**/*.tsx: Implement React UI with functional components and hooks
Use Fuselage components (Box, Button, TextInput, Modal, etc.) and import from@rocket.chat/fuselageinstead of raw HTML elements
For Fuselage theming, validate tokens againstTheme.d.tsand only use documented values
Name React component files in PascalCase; non-component files should follow camelCase naming
Files:
src/ui/components/SideBar/index.tsxsrc/ui/components/SettingsView/GeneralTab.tsx
🧠 Learnings (1)
📚 Learning: 2025-09-26T19:24:21.364Z
Learnt from: CR
Repo: RocketChat/Rocket.Chat.Electron PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-09-26T19:24:21.364Z
Learning: Applies to src/rootWindow.ts : Keep `src/rootWindow.ts` as the renderer entry for the main window UI
Applied to files:
src/ui/main/rootWindow.tssrc/app/main/app.tssrc/ui/components/SettingsView/GeneralTab.tsx
🧬 Code graph analysis (3)
src/ui/main/rootWindow.ts (1)
src/app/main/persistence.ts (1)
getPersistedValues(28-29)
src/app/main/app.ts (2)
src/store/index.ts (2)
listen(88-114)listen(144-157)src/ui/actions.ts (1)
SETTINGS_SET_IS_TRANSPARENT_WINDOW_ENABLED_CHANGED(107-108)
src/ui/components/SettingsView/GeneralTab.tsx (1)
src/ui/components/SettingsView/features/TransparentWindow.tsx (1)
TransparentWindow(22-60)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: check (windows-latest)
🔇 Additional comments (9)
src/i18n/pt-BR.i18n.json (1)
280-283: Translation entry is correct and properly integrated.The
transparentWindowentry follows the established pattern and the Portuguese translations are clear and idiomatic. The translation keyssettings.options.transparentWindow.titleandsettings.options.transparentWindow.descriptionare correctly referenced in theTransparentWindow.tsxcomponent via the i18n function call.src/ui/components/SettingsView/GeneralTab.tsx (1)
14-14: LGTM! Clean platform-specific integration.The TransparentWindow component is properly imported and conditionally rendered for macOS only, following the established pattern used by other platform-specific features in this file.
Also applies to: 27-27
src/i18n/de-DE.i18n.json (1)
262-265: LGTM! Translation added for transparent window feature.The German translation for the transparent window setting has been added with both title and description. The description correctly mentions that a restart is required to apply the setting.
src/i18n/en.i18n.json (1)
294-297: LGTM! Clear and informative translation.The English translation for the transparent window setting is well-written and clearly communicates both the feature ("native vibrancy/transparency effect") and the requirement to restart the application.
src/app/main/app.ts (1)
19-19: LGTM! Consistent relaunch behavior.The listener for the transparent window setting change correctly triggers an app relaunch, following the same pattern as the hardware acceleration setting. This is necessary because window transparency options must be set at window creation time.
Also applies to: 189-191
src/store/rootReducer.ts (1)
34-34: LGTM! Standard Redux integration.The
isTransparentWindowEnabledreducer is properly imported and added to the root reducer, following the established pattern for other boolean settings in the application.Also applies to: 105-105
src/ui/main/rootWindow.ts (2)
66-77: LGTM! Defensive error handling for vibrancy check.The
getEnableVibrancyhelper safely reads the persisted value with proper error handling. The try-catch ensures the app doesn't crash if persisted values are unavailable, defaulting tofalsefor safety.
80-96: No MAS-specific check needed for vibrancy.Vibrancy is a public macOS API permitted in Mac App Store builds, unlike features explicitly gated in this codebase (e.g.,
internalVideoChatWindow, error reporting). The codebase'sprocess.maschecks target features with known MAS incompatibilities; vibrancy has no such restriction. The transparency and vibrancy properties in BrowserWindow are standard Electron APIs that function correctly in MAS builds when proper signing and entitlements are in place—concerns handled at build/signing time, not at feature-gate level.Likely an incorrect or invalid review comment.
src/ui/actions.ts (1)
107-108: LGTM! Action follows FSA convention.The new action type constant
SETTINGS_SET_IS_TRANSPARENT_WINDOW_ENABLED_CHANGEDand its boolean payload type mapping follow the Flux Standard Action (FSA) convention as specified in the coding guidelines, consistent with other settings actions in the file.Also applies to: 252-252
…yling updates - Added support for `isTransparentWindowEnabled` state in the Shell component to manage the transparent window effect. - Updated GlobalStyles to conditionally set the background color based on the transparency setting and platform. - Refactored the Wrapper component to apply the transparent background style when enabled. - Improved the reducer for `isTransparentWindowEnabled` to handle invalid payload types gracefully. - Introduced platform detection utility to streamline platform-specific logic across components.
…anguages - Introduced translations for the new transparent window effect feature in Arabic, Finnish, Italian, Japanese, Norwegian, Polish, Swedish, Turkish, Ukrainian, and Chinese (Simplified and Traditional). - Updated the settings structure in each language file to include titles and descriptions for the transparent window option, enhancing user experience across different locales.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (14)
src/i18n/ar.i18n.json(1 hunks)src/i18n/fi.i18n.json(1 hunks)src/i18n/it-IT.i18n.json(1 hunks)src/i18n/ja.i18n.json(1 hunks)src/i18n/nb-NO.i18n.json(1 hunks)src/i18n/nn.i18n.json(1 hunks)src/i18n/pl.i18n.json(1 hunks)src/i18n/se.i18n.json(1 hunks)src/i18n/tr-TR.i18n.json(1 hunks)src/i18n/uk-UA.i18n.json(1 hunks)src/i18n/zh-CN.i18n.json(1 hunks)src/i18n/zh-TW.i18n.json(1 hunks)src/i18n/zh.i18n.json(1 hunks)src/ui/components/SideBar/index.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Follow existing TypeScript patterns with strict mode enabled
All new code must pass ESLint and TypeScript checks
Avoid unnecessary comments; only add comments for complex logic or non-obvious decisions
Files:
src/ui/components/SideBar/index.tsx
src/ui/**/*.tsx
📄 CodeRabbit inference engine (CLAUDE.md)
src/ui/**/*.tsx: Implement React UI with functional components and hooks
Use Fuselage components (Box, Button, TextInput, Modal, etc.) and import from@rocket.chat/fuselageinstead of raw HTML elements
For Fuselage theming, validate tokens againstTheme.d.tsand only use documented values
Name React component files in PascalCase; non-component files should follow camelCase naming
Files:
src/ui/components/SideBar/index.tsx
🧬 Code graph analysis (1)
src/ui/components/SideBar/index.tsx (2)
src/ui/reducers/isTransparentWindowEnabled.ts (1)
isTransparentWindowEnabled(11-35)src/store/rootReducer.ts (1)
RootState(109-109)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: check (windows-latest)
- GitHub Check: check (macos-latest)
🔇 Additional comments (14)
src/i18n/zh-CN.i18n.json (1)
157-161: ✓ Localization entry is well-structured and correctly translated.The new
transparentWindowentry is properly placed in thesettings.optionsnamespace with an accurate Chinese translation that clearly communicates both the feature purpose and the restart requirement to users.src/i18n/it-IT.i18n.json (1)
2-9: Italian localization entries look good.The translation is grammatically correct and idiomatic. The key structure (
settings.options.transparentWindow) follows existing conventions, and the restart requirement is clearly communicated in the description.However, this review is limited to the localization file only. Please note that without access to other files referenced in the PR (Redux actions, UI components, platform detection helpers, window creation logic), I cannot verify the complete feature implementation or consistency across the codebase.
To ensure comprehensive coverage, please verify:
- Consistency across locales: Confirm that similar entries exist in other locale files (en-US, de-DE, es, fr, etc.) with consistent terminology and structure.
- UI component integration: Verify that the UI component correctly references
settings.options.transparentWindow.titleandsettings.options.transparentWindow.descriptionas mentioned in the AI summary.- Feature completeness: Ensure that the persisted flag (
isTransparentWindowEnabled), Redux action/reducer, and window creation logic with platform detection are properly implemented.src/i18n/zh.i18n.json (1)
2-9: Chinese translations for transparent window setting look good.The new
settings.options.transparentWindowblock is properly structured and aligns with the parallel i18n additions across other locales. The Chinese translations accurately convey the feature purpose and the restart requirement.src/i18n/nb-NO.i18n.json (1)
2-9: JSON structure and Norwegian translations look good.The new
settings.options.transparentWindowblock follows the existing i18n pattern and the Bokmål translations are clear and idiomatic:
- Title and description keys are present and appropriate
- Messaging accurately conveys the feature and restart requirement
Please verify that this translation block is being consistently added across all updated locale files in this PR (especially the primary
en.i18n.json), and that the key paths match the UI component usage mentioned in the enriched summary.src/i18n/uk-UA.i18n.json (1)
102-106: All locale files have been properly updated with thetransparentWindowtranslation.The Ukrainian translation is syntactically correct and correctly positioned within the settings hierarchy. Verification confirms that the
transparentWindowkey exists across all 22 locale files in the codebase (en, ar, de-DE, fi, es, fr, hu, it-IT, ja, nb-NO, nn, no, pl, pt-BR, ru, se, sv, tr-TR, uk-UA, zh, zh-CN, zh-TW), maintaining consistent structure and providing appropriate translations for each language.src/i18n/ja.i18n.json (1)
218-225: Localization is properly implemented across all supported locales.The Japanese translation is well-crafted and consistent with the feature intent. Verification confirms that all 23 supported locale files (including en.i18n.json, es.i18n.json, pt-BR.i18n.json, and all others) have been updated with the same
settings.options.transparentWindowstructure, ensuring consistent UI rendering across all language variants.src/i18n/nn.i18n.json (1)
2-9: Translation entry structure and content are correct and consistent.The Norwegian
transparentWindowtranslation block follows the established pattern across all 22 supported locales with title and description entries. The translations are accurate and clearly convey the feature intent, including the restart requirement. All i18n files are syntactically valid with consistent structure.src/i18n/pl.i18n.json (1)
133-136: No action needed—the transparentWindow entry is already present across all locale files.The new
transparentWindowentry in the Polish i18n file follows the established pattern for settings options (title + description), and the JSON structure is valid. Verification confirms that corresponding entries exist in all 23 locale files (en, de-DE, es, fr, ja, zh-CN, and others), ensuring consistency across the application. The localization is complete.Likely an incorrect or invalid review comment.
src/i18n/ar.i18n.json (1)
2-8: Structure and consistency verified across all locale files.The JSON structure is valid and follows the existing pattern (title + description). The Arabic text appropriately mentions the restart requirement, which aligns with the feature described in the PR.
Verification confirms that the
transparentWindowtranslation key is present in all 22 supported locale files, ensuring consistent feature exposure across all languages.src/i18n/zh-TW.i18n.json (1)
100-102: The i18n entry is correctly implemented. All 23 locale files contain thetransparentWindowkey with matchingtitleanddescriptionfields, and the UI componentTransparentWindow.tsxcorrectly referencessettings.options.transparentWindow.titleandsettings.options.transparentWindow.description. No runtime missing-key errors will occur.src/i18n/se.i18n.json (1)
2-9: Swedish translations are correctly structured and consistent across all i18n files.The transparentWindow feature follows the expected key path structure (
settings.options.transparentWindow.{title, description}) across English, Swedish, German, and other locale files. The Swedish translations use appropriate technical terminology aligned with other languages. No conflicts or inconsistencies detected.src/i18n/fi.i18n.json (1)
259-263: LGTM! Translation entry added correctly.The new
transparentWindowtranslation entry is properly structured and positioned within the Finnish locale file, consistent with the transparent window feature being introduced across multiple locales in this PR.src/ui/components/SideBar/index.tsx (2)
36-39: LGTM! Selector correctly retrieves transparency state.The
isTransparentWindowEnabledselector is properly typed and will be used to conditionally control the sidebar background appearance.
76-82: Excellent! This addresses the previous review concern.The conditional logic now correctly checks both the platform AND the transparency setting before removing the sidebar background. When transparency is disabled on macOS, the sidebar will maintain its 'tint' background, ensuring proper visual definition.
- Added Turkish translations for the transparent window effect feature, including title and description. - Removed the previous settings structure for the transparent window from the settings section, streamlining the localization file.
Fixed formatting issues in videoCallWindow files that were introduced in recent master commits. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
* testing * macOS: keep Sidebar transparent only; restore normal backgrounds for Shell, content, and webviews. Make body/shell transparent on macOS and paint main content instead; Sidebar uses transparent bg on darwin. Revert global transparent CSS injection. * transparent topbar * feat: Add transparent window feature with settings and internationalization support - Introduced a new feature to enable a transparent window effect, enhancing the visual experience on macOS. - Updated the state management to include `isTransparentWindowEnabled`. - Added a new settings component for toggling the transparent window effect. - Implemented internationalization for the new feature in multiple languages (en, de, es, fr, hu, no, pt-BR, ru, sv). - Updated the root window creation logic to respect the transparent window setting. * feat: Enhance transparent window feature with state management and styling updates - Added support for `isTransparentWindowEnabled` state in the Shell component to manage the transparent window effect. - Updated GlobalStyles to conditionally set the background color based on the transparency setting and platform. - Refactored the Wrapper component to apply the transparent background style when enabled. - Improved the reducer for `isTransparentWindowEnabled` to handle invalid payload types gracefully. - Introduced platform detection utility to streamline platform-specific logic across components. * feat(i18n): Add transparent window effect localization for multiple languages - Introduced translations for the new transparent window effect feature in Arabic, Finnish, Italian, Japanese, Norwegian, Polish, Swedish, Turkish, Ukrainian, and Chinese (Simplified and Traditional). - Updated the settings structure in each language file to include titles and descriptions for the transparent window option, enhancing user experience across different locales. * feat(i18n): Add transparent window effect localization in Turkish - Added Turkish translations for the transparent window effect feature, including title and description. - Removed the previous settings structure for the transparent window from the settings section, streamlining the localization file. * fix: Resolve lint errors from master merge Fixed formatting issues in videoCallWindow files that were introduced in recent master commits.
* testing * macOS: keep Sidebar transparent only; restore normal backgrounds for Shell, content, and webviews. Make body/shell transparent on macOS and paint main content instead; Sidebar uses transparent bg on darwin. Revert global transparent CSS injection. * transparent topbar * feat: Add transparent window feature with settings and internationalization support - Introduced a new feature to enable a transparent window effect, enhancing the visual experience on macOS. - Updated the state management to include `isTransparentWindowEnabled`. - Added a new settings component for toggling the transparent window effect. - Implemented internationalization for the new feature in multiple languages (en, de, es, fr, hu, no, pt-BR, ru, sv). - Updated the root window creation logic to respect the transparent window setting. * feat: Enhance transparent window feature with state management and styling updates - Added support for `isTransparentWindowEnabled` state in the Shell component to manage the transparent window effect. - Updated GlobalStyles to conditionally set the background color based on the transparency setting and platform. - Refactored the Wrapper component to apply the transparent background style when enabled. - Improved the reducer for `isTransparentWindowEnabled` to handle invalid payload types gracefully. - Introduced platform detection utility to streamline platform-specific logic across components. * feat(i18n): Add transparent window effect localization for multiple languages - Introduced translations for the new transparent window effect feature in Arabic, Finnish, Italian, Japanese, Norwegian, Polish, Swedish, Turkish, Ukrainian, and Chinese (Simplified and Traditional). - Updated the settings structure in each language file to include titles and descriptions for the transparent window option, enhancing user experience across different locales. * feat(i18n): Add transparent window effect localization in Turkish - Added Turkish translations for the transparent window effect feature, including title and description. - Removed the previous settings structure for the transparent window from the settings section, streamlining the localization file. * fix: Resolve lint errors from master merge Fixed formatting issues in videoCallWindow files that were introduced in recent master commits.
* testing * macOS: keep Sidebar transparent only; restore normal backgrounds for Shell, content, and webviews. Make body/shell transparent on macOS and paint main content instead; Sidebar uses transparent bg on darwin. Revert global transparent CSS injection. * transparent topbar * feat: Add transparent window feature with settings and internationalization support - Introduced a new feature to enable a transparent window effect, enhancing the visual experience on macOS. - Updated the state management to include `isTransparentWindowEnabled`. - Added a new settings component for toggling the transparent window effect. - Implemented internationalization for the new feature in multiple languages (en, de, es, fr, hu, no, pt-BR, ru, sv). - Updated the root window creation logic to respect the transparent window setting. * feat: Enhance transparent window feature with state management and styling updates - Added support for `isTransparentWindowEnabled` state in the Shell component to manage the transparent window effect. - Updated GlobalStyles to conditionally set the background color based on the transparency setting and platform. - Refactored the Wrapper component to apply the transparent background style when enabled. - Improved the reducer for `isTransparentWindowEnabled` to handle invalid payload types gracefully. - Introduced platform detection utility to streamline platform-specific logic across components. * feat(i18n): Add transparent window effect localization for multiple languages - Introduced translations for the new transparent window effect feature in Arabic, Finnish, Italian, Japanese, Norwegian, Polish, Swedish, Turkish, Ukrainian, and Chinese (Simplified and Traditional). - Updated the settings structure in each language file to include titles and descriptions for the transparent window option, enhancing user experience across different locales. * feat(i18n): Add transparent window effect localization in Turkish - Added Turkish translations for the transparent window effect feature, including title and description. - Removed the previous settings structure for the transparent window from the settings section, streamlining the localization file. * fix: Resolve lint errors from master merge Fixed formatting issues in videoCallWindow files that were introduced in recent master commits.
* testing * macOS: keep Sidebar transparent only; restore normal backgrounds for Shell, content, and webviews. Make body/shell transparent on macOS and paint main content instead; Sidebar uses transparent bg on darwin. Revert global transparent CSS injection. * transparent topbar * feat: Add transparent window feature with settings and internationalization support - Introduced a new feature to enable a transparent window effect, enhancing the visual experience on macOS. - Updated the state management to include `isTransparentWindowEnabled`. - Added a new settings component for toggling the transparent window effect. - Implemented internationalization for the new feature in multiple languages (en, de, es, fr, hu, no, pt-BR, ru, sv). - Updated the root window creation logic to respect the transparent window setting. * feat: Enhance transparent window feature with state management and styling updates - Added support for `isTransparentWindowEnabled` state in the Shell component to manage the transparent window effect. - Updated GlobalStyles to conditionally set the background color based on the transparency setting and platform. - Refactored the Wrapper component to apply the transparent background style when enabled. - Improved the reducer for `isTransparentWindowEnabled` to handle invalid payload types gracefully. - Introduced platform detection utility to streamline platform-specific logic across components. * feat(i18n): Add transparent window effect localization for multiple languages - Introduced translations for the new transparent window effect feature in Arabic, Finnish, Italian, Japanese, Norwegian, Polish, Swedish, Turkish, Ukrainian, and Chinese (Simplified and Traditional). - Updated the settings structure in each language file to include titles and descriptions for the transparent window option, enhancing user experience across different locales. * feat(i18n): Add transparent window effect localization in Turkish - Added Turkish translations for the transparent window effect feature, including title and description. - Removed the previous settings structure for the transparent window from the settings section, streamlining the localization file. * fix: Resolve lint errors from master merge Fixed formatting issues in videoCallWindow files that were introduced in recent master commits.
* testing * macOS: keep Sidebar transparent only; restore normal backgrounds for Shell, content, and webviews. Make body/shell transparent on macOS and paint main content instead; Sidebar uses transparent bg on darwin. Revert global transparent CSS injection. * transparent topbar * feat: Add transparent window feature with settings and internationalization support - Introduced a new feature to enable a transparent window effect, enhancing the visual experience on macOS. - Updated the state management to include `isTransparentWindowEnabled`. - Added a new settings component for toggling the transparent window effect. - Implemented internationalization for the new feature in multiple languages (en, de, es, fr, hu, no, pt-BR, ru, sv). - Updated the root window creation logic to respect the transparent window setting. * feat: Enhance transparent window feature with state management and styling updates - Added support for `isTransparentWindowEnabled` state in the Shell component to manage the transparent window effect. - Updated GlobalStyles to conditionally set the background color based on the transparency setting and platform. - Refactored the Wrapper component to apply the transparent background style when enabled. - Improved the reducer for `isTransparentWindowEnabled` to handle invalid payload types gracefully. - Introduced platform detection utility to streamline platform-specific logic across components. * feat(i18n): Add transparent window effect localization for multiple languages - Introduced translations for the new transparent window effect feature in Arabic, Finnish, Italian, Japanese, Norwegian, Polish, Swedish, Turkish, Ukrainian, and Chinese (Simplified and Traditional). - Updated the settings structure in each language file to include titles and descriptions for the transparent window option, enhancing user experience across different locales. * feat(i18n): Add transparent window effect localization in Turkish - Added Turkish translations for the transparent window effect feature, including title and description. - Removed the previous settings structure for the transparent window from the settings section, streamlining the localization file. * fix: Resolve lint errors from master merge Fixed formatting issues in videoCallWindow files that were introduced in recent master commits.
1 participant
Summary by CodeRabbit
New Features
Style
Chores
Localization
✏️ Tip: You can customize this high-level summary in your review settings.