feat: Implement user theme preference settings

[jeanfbrito]

• Introduced a new ThemeAppearance component to manage user theme preferences, allowing selection between 'auto', 'light', and 'dark' themes.
• Updated state management to include userThemePreference, replacing the previous themeAppearance handling.
• Removed deprecated theme appearance logic from various components and files, streamlining the codebase.
• Added internationalization support for theme appearance settings across multiple languages.
• Enhanced the UI to reflect user-selected theme preferences dynamically.

CORE-1554

Summary by CodeRabbit

• New Features

  • New Theme preference in Settings > General: Auto (follow system), Light, Dark.
  • Preference is saved globally and persists across sessions.
  • Theme selection localized in 20+ languages.

• Bug Fixes

  • Centralized theme handling to prevent inconsistent per-server theme behavior.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Implements a global user theme preference: adds persisted userThemePreference ('auto'|'light'|'dark'), new reducer and action, removes per-server theme fields and handling, updates UI components to use the global preference, and adds i18n strings for theme appearance across multiple locales.

Changes

Cohort / File(s)	Summary
Persisted State & Redux src/app/PersistableValues.ts, src/app/selectors.ts, src/ui/actions.ts, src/ui/reducers/userThemePreference.ts, src/store/rootReducer.ts	Add persisted version 4_10_0 with userThemePreference. New SETTINGS_USER_THEME_PREFERENCE_CHANGED action replaces WEBVIEW_USER_THEME_APPEARANCE_CHANGED. New reducer manages 'auto'
Internationalization (i18n) src/i18n/{ar,de-DE,en,es,fi,fr,hu,it-IT,ja,nb-NO,nn,no,pl,pt-BR,ru,se,sv,tr-TR,uk-UA,zh-CN,zh-TW,zh}.i18n.json	Add themeAppearance block under settings (title, description, auto, light, dark) across many locale files to provide localized UI strings for theme selection.
Theme Settings UI src/ui/components/SettingsView/GeneralTab.tsx, src/ui/components/SettingsView/features/ThemeAppearance.tsx	Introduce ThemeAppearance component rendering a Select for theme preference; reads userThemePreference from Redux and dispatches preference change action. Inserted into GeneralTab.
Shell & Theme Application src/ui/components/Shell/index.tsx, src/ui/components/TopBar/index.tsx	Shell now derives current theme from global userThemePreference (uses machine theme when 'auto'). TopBar uses new isTransparentWindowEnabled selector to compute background styling.
Server Components src/ui/components/ServersView/DocumentViewer.tsx, src/ui/components/ServersView/ServerPane.tsx, src/ui/components/ServersView/index.tsx	Remove themeAppearance prop and theme-dependent rendering from server view components; apply simplified/static styling instead.
Server Configuration & Reducers src/servers/common.ts, src/servers/preload/themeAppearance.ts, src/servers/reducers.ts	Remove themeAppearance from Server type, make setUserThemeAppearance a no-op, and remove WEBVIEW_USER_THEME_APPEARANCE_CHANGED action and reducer handling.
Initialization src/injected.ts	Remove reactive logic that applied per-server theme preferences during startup; theming now handled by global preference system.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Settings as Settings UI
    participant Redux as Redux Store
    participant Shell as Shell Component
    participant System as OS Theme

    User->>Settings: Choose theme (auto / light / dark)
    Settings->>Redux: Dispatch SETTINGS_USER_THEME_PREFERENCE_CHANGED
    Redux->>Redux: userThemePreference reducer updates state
    Redux-->>Shell: State change notification
    alt userThemePreference == "auto"
        Shell->>System: Query machineTheme
        System-->>Shell: machineTheme
        Shell->>Shell: currentTheme = machineTheme
    else
        Shell->>Shell: currentTheme = userThemePreference
    end
    Shell->>Shell: Apply currentTheme to UI
    Shell-->>User: Theme updated globally

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~30 minutes

Possibly related PRs

• chore: Add transparent mode for macOS #3107 — Modifies UI theming and persisted appearance settings; closely related changes to theme persistence and UI strings.

Poem

🐰 I twitch my nose at light and dark,

A tiny hop from server to heart,
One setting now guides every view,
Auto, light, or night so true,
Hop on—this theme is yours to start!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title clearly and concisely summarizes the main feature being implemented: user theme preference settings.
Linked Issues check	✅ Passed	The PR addresses theme preference management by adding a new component, updating state management, and removing deprecated logic, aligning with the theme sync objective.
Out of Scope Changes check	✅ Passed	All changes are directly related to implementing user theme preference settings, including UI components, state management, internationalization, and deprecating old theme handling.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch add-theme-selection

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (8)

src/ui/components/TopBar/index.tsx (1)

10-18: Transparent window background handling is correctly wired

Selector usage and the sidebarBg logic cleanly ensure the top bar only drops the tint when on macOS with transparency enabled; otherwise it falls back to 'tint', which is consistent with prior behavior.

If you want to improve readability slightly, you could introduce an isMacOS constant (e.g., const isMacOS = process.platform === 'darwin';) and reuse it in the sidebarBg expression.

Also applies to: 29-29

src/i18n/sv.i18n.json (1)

297-303: Swedish themeAppearance block looks consistent; phrasing nit is optional

Keys and structure match settings.options.themeAppearance.* usage, and translations are clear. If you want slightly more idiomatic wording, you could consider “Följ systemet” instead of “Följ system”, but this is purely stylistic.

src/ui/components/SettingsView/features/ThemeAppearance.tsx (1)

1-74: Component wiring is solid; consider tightening typing and styling

The overall setup (Redux selector, dispatch, i18n keys, Fuselage usage) looks good and matches the new state shape. Two small improvements you might consider:

1. Avoid broad casting of Key to the union
   Casting via String(value) as 'auto' | 'light' | 'dark' trusts the runtime entirely. Since the options are known, you can guard explicitly, which keeps TypeScript and runtime aligned:

-  const handleChangeTheme = useCallback(
-    (value: Key) => {
-      const stringValue = String(value) as 'auto' | 'light' | 'dark';
-      dispatch({
-        type: SETTINGS_USER_THEME_PREFERENCE_CHANGED,
-        payload: stringValue,
-      });
-    },
-    [dispatch]
-  );
+  const handleChangeTheme = useCallback(
+    (value: Key) => {
+      const stringValue = String(value);
+      if (stringValue === 'auto' || stringValue === 'light' || stringValue === 'dark') {
+        dispatch({
+          type: SETTINGS_USER_THEME_PREFERENCE_CHANGED,
+          payload: stringValue,
+        });
+      }
+    },
+    [dispatch]
+  );

2. Prefer theme tokens over raw inline styles where possible (optional)
   The style={{ paddingTop: '4px' }} on the surrounding Box could be replaced with a Fuselage spacing prop (e.g., pt='x4') to stay on theme tokens, if that matches the intended spacing.

src/ui/components/Shell/index.tsx (1)

29-31: Theme derivation from userThemePreference is correct; consider extracting a shared hook

Using userThemePreference === 'auto' ? machineTheme : userThemePreference to drive currentTheme aligns well with the new preference model, and the narrowing ensures auto never reaches PaletteStyleTag. To avoid duplicating this logic elsewhere (e.g., other components that need to know the effective theme), consider extracting a small hook like useCurrentTheme() that encapsulates this logic and returns a Themes value.

Also applies to: 40-46

src/i18n/nn.i18n.json (1)

7-13: Nynorsk themeAppearance translations are fine; spelling tweak is optional

The new themeAppearance block is correctly structured and matches the keys used in code. If you want to polish the phrasing, you might change “Vel fargtemaet for applikasjonen.” to “Vel fargetemaet for applikasjonen.”, but this is non-blocking.

src/app/PersistableValues.ts (1)

95-102: Persisted userThemePreference wiring looks correct; consider centralizing the union type

Defining PersistableValues_4_10_0 and the >=4.10.0 migration with userThemePreference: 'auto' | 'light' | 'dark' is consistent with the reducer and actions, and defaulting to 'auto' makes sense for upgrades.

Given this union is now repeated across actions, reducer, persistable type, and UI, it might be worth extracting a shared UserThemePreference type (and perhaps a DEFAULT_USER_THEME_PREFERENCE) to avoid drift if more values are added later.

Also applies to: 180-183

src/ui/actions.ts (1)

121-122: New SETTINGS_USER_THEME_PREFERENCE_CHANGED action is consistent; type reuse would help

The added action constant and its payload type 'auto' | 'light' | 'dark' fit cleanly into the existing UiActionTypeToPayloadMap pattern and line up with the reducer and UI.

Similar to the persistence layer, you might want to introduce a shared UserThemePreference type and reuse it here (and in the reducer/PersistableValues) instead of repeating the string union in multiple places.

Also applies to: 256-256

src/ui/reducers/userThemePreference.ts (1)

1-27: Reducer logic is correct; consider adding runtime validation like other settings reducers

The reducer correctly updates on SETTINGS_USER_THEME_PREFERENCE_CHANGED and initializes from APP_SETTINGS_LOADED, with a sensible default of 'auto'.

To harden against malformed persisted settings or incorrectly constructed actions (mirroring e.g. isTransparentWindowEnabled’s boolean guard), you could validate the payload before accepting it:

-    case SETTINGS_USER_THEME_PREFERENCE_CHANGED:
-      return action.payload;
+    case SETTINGS_USER_THEME_PREFERENCE_CHANGED: {
+      const value = action.payload;
+      if (value === 'auto' || value === 'light' || value === 'dark') {
+        return value;
+      }
+      console.warn(
+        `Invalid payload for ${SETTINGS_USER_THEME_PREFERENCE_CHANGED}:`,
+        value
+      );
+      return state;
+    }
@@
-    case APP_SETTINGS_LOADED: {
-      const { userThemePreference = state } = action.payload;
-      return userThemePreference;
-    }
+    case APP_SETTINGS_LOADED: {
+      const { userThemePreference = state } = action.payload;
+      if (
+        userThemePreference === 'auto' ||
+        userThemePreference === 'light' ||
+        userThemePreference === 'dark'
+      ) {
+        return userThemePreference;
+      }
+      console.warn('Invalid userThemePreference loaded from settings:', userThemePreference);
+      return state;
+    }

This keeps runtime behaviour robust even if persisted data is corrupted.

📜 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.

📥 Commits

Reviewing files that changed from the base of the PR and between 3b1c7c3 and 29a50ed.

📒 Files selected for processing (40)

• src/app/PersistableValues.ts (2 hunks)
• src/app/selectors.ts (1 hunks)
• src/i18n/ar.i18n.json (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/fi.i18n.json (1 hunks)
• src/i18n/fr.i18n.json (1 hunks)
• src/i18n/hu.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/no.i18n.json (1 hunks)
• src/i18n/pl.i18n.json (1 hunks)
• src/i18n/pt-BR.i18n.json (1 hunks)
• src/i18n/ru.i18n.json (1 hunks)
• src/i18n/se.i18n.json (1 hunks)
• src/i18n/sv.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/injected.ts (0 hunks)
• src/servers/common.ts (0 hunks)
• src/servers/preload/api.ts (0 hunks)
• src/servers/preload/themeAppearance.ts (0 hunks)
• src/servers/reducers.ts (0 hunks)
• src/store/rootReducer.ts (2 hunks)
• src/ui/actions.ts (2 hunks)
• src/ui/components/ServersView/DocumentViewer.tsx (1 hunks)
• src/ui/components/ServersView/ServerPane.tsx (0 hunks)
• src/ui/components/ServersView/index.tsx (0 hunks)
• src/ui/components/SettingsView/GeneralTab.tsx (2 hunks)
• src/ui/components/SettingsView/features/ThemeAppearance.tsx (1 hunks)
• src/ui/components/SettingsView/features/TransparentWindow.tsx (1 hunks)
• src/ui/components/Shell/index.tsx (1 hunks)
• src/ui/components/TopBar/index.tsx (2 hunks)
• src/ui/reducers/userThemePreference.ts (1 hunks)

💤 Files with no reviewable changes (7)

• src/servers/preload/themeAppearance.ts
• src/injected.ts
• src/ui/components/ServersView/ServerPane.tsx
• src/servers/common.ts
• src/ui/components/ServersView/index.tsx
• src/servers/reducers.ts
• src/servers/preload/api.ts

🧰 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/app/selectors.ts
• src/ui/components/SettingsView/features/ThemeAppearance.tsx
• src/ui/components/TopBar/index.tsx
• src/ui/components/SettingsView/features/TransparentWindow.tsx
• src/ui/reducers/userThemePreference.ts
• src/ui/components/ServersView/DocumentViewer.tsx
• src/store/rootReducer.ts
• src/ui/components/SettingsView/GeneralTab.tsx
• src/app/PersistableValues.ts
• src/ui/actions.ts
• src/ui/components/Shell/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/fuselage instead of raw HTML elements
For Fuselage theming, validate tokens against Theme.d.ts and only use documented values
Name React component files in PascalCase; non-component files should follow camelCase naming

Files:

• src/ui/components/SettingsView/features/ThemeAppearance.tsx
• src/ui/components/TopBar/index.tsx
• src/ui/components/SettingsView/features/TransparentWindow.tsx
• src/ui/components/ServersView/DocumentViewer.tsx
• src/ui/components/SettingsView/GeneralTab.tsx
• src/ui/components/Shell/index.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 (4)

📚 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 : For Fuselage theming, validate tokens against `Theme.d.ts` and only use documented values

Applied to files:

• src/app/selectors.ts
• src/ui/components/SettingsView/features/ThemeAppearance.tsx
• src/ui/reducers/userThemePreference.ts
• src/ui/components/ServersView/DocumentViewer.tsx
• src/ui/components/SettingsView/GeneralTab.tsx
• src/ui/actions.ts
• src/ui/components/Shell/index.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/ThemeAppearance.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 : 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/ThemeAppearance.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/ui/components/SettingsView/features/TransparentWindow.tsx

🧬 Code graph analysis (4)

src/ui/components/SettingsView/features/ThemeAppearance.tsx (5)

src/ui/reducers/userThemePreference.ts (1)

• userThemePreference (11-27)

src/store/rootReducer.ts (1)

• RootState (111-111)

src/store/index.ts (1)

• dispatch (38-40)

src/store/actions.ts (1)

• RootAction (44-46)

src/ui/actions.ts (1)

• SETTINGS_USER_THEME_PREFERENCE_CHANGED (121-122)

src/ui/components/TopBar/index.tsx (2)

src/ui/reducers/isTransparentWindowEnabled.ts (1)

• isTransparentWindowEnabled (11-35)

src/store/rootReducer.ts (1)

• RootState (111-111)

src/ui/reducers/userThemePreference.ts (3)

src/store/actions.ts (1)

• ActionOf (42-42)

src/ui/actions.ts (1)

• SETTINGS_USER_THEME_PREFERENCE_CHANGED (121-122)

src/app/actions.ts (1)

• APP_SETTINGS_LOADED (6-6)

src/ui/components/Shell/index.tsx (4)

src/ui/reducers/userThemePreference.ts (1)

• userThemePreference (11-27)

src/store/rootReducer.ts (1)

• RootState (111-111)

src/ui/reducers/isTransparentWindowEnabled.ts (1)

• isTransparentWindowEnabled (11-35)

src/app/reducers/machineTheme.ts (1)

• machineTheme (8-20)

⏰ 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 (macos-latest)

🔇 Additional comments (25)

src/i18n/zh.i18n.json (1)

8-14: LGTM!

The themeAppearance translations for simplified Chinese are correctly structured and align with the broader internationalization effort across all locales in this PR.

src/ui/components/SettingsView/features/TransparentWindow.tsx (1)

61-61: LGTM!

Minor formatting adjustment to add a trailing newline for consistency.

src/i18n/zh-TW.i18n.json (1)

104-110: LGTM!

The themeAppearance translations for Traditional Chinese are correctly added and consistent with the multilingual rollout of this feature.

src/i18n/uk-UA.i18n.json (1)

107-113: LGTM!

The Ukrainian translations for themeAppearance are correctly structured and align with the feature's internationalization requirements.

src/i18n/no.i18n.json (1)

298-304: LGTM!

The Norwegian translations for themeAppearance are properly added with the correct structure and placement within the settings configuration.

src/i18n/tr-TR.i18n.json (1)

125-131: LGTM!

The Turkish translations for themeAppearance are correctly implemented and consistent with the internationalization pattern used across all locales in this PR.

src/ui/components/SettingsView/GeneralTab.tsx (2)

14-14: LGTM!

The ThemeAppearance component import is correctly added.

---

34-34: LGTM!

The ThemeAppearance component is properly integrated into the GeneralTab settings. Rendering it unconditionally (without platform-specific logic) is appropriate since theme preferences should be available across all platforms.

src/i18n/ar.i18n.json (1)

8-14: LGTM!

The Arabic translations for themeAppearance are correctly structured and complete the internationalization coverage for this feature across all supported locales.

src/i18n/hu.i18n.json (1)

288-295: New themeAppearance translations look consistent and correctly wired

The new settings.options.themeAppearance block is structurally correct JSON, positioned consistently next to transparentWindow, and the Hungarian strings match the intended semantics for the theme selector.

src/app/selectors.ts (1)

74-75: Selector wiring for userThemePreference is correct and consistent

Adding userThemePreference to selectPersistableValues follows the existing pattern and will expose the new state field to persistence without altering selector behavior.

src/i18n/en.i18n.json (1)

297-304: English themeAppearance strings and placement look good

The themeAppearance block is added under settings.options with clear, consistent copy and valid JSON; keys match those expected by the new ThemeAppearance UI.

src/i18n/se.i18n.json (1)

7-13: Swedish themeAppearance localization matches the new setting

The new themeAppearance entry is correctly nested under settings.options and the Swedish strings accurately convey theme selection options.

src/i18n/ru.i18n.json (1)

266-272: Russian themeAppearance block is accurate and well-integrated

The added Russian translations for theme selection are clear, idiomatic, and correctly placed under settings.options alongside transparentWindow.

src/i18n/nb-NO.i18n.json (1)

7-13: Norwegian themeAppearance option is correctly added

The themeAppearance localization under settings.options has appropriate Bokmål phrasing and valid JSON, aligning with other locale implementations.

src/i18n/es.i18n.json (1)

288-294: Spanish themeAppearance strings are clear and consistent

The new themeAppearance section is properly nested and the Spanish copy cleanly communicates the theme options (auto, light, dark) in line with other locales.

src/i18n/fr.i18n.json (1)

263-269: French themeAppearance localization fits well with existing settings

The added themeAppearance block is structurally correct and the French translations accurately describe the theme preference options while matching the surrounding style.

src/i18n/it-IT.i18n.json (1)

7-13: Italian themeAppearance i18n entry looks good

The new themeAppearance block is well-structured, matches the existing options pattern, and the labels are clear for Italian users.

src/i18n/pl.i18n.json (1)

136-142: Polish themeAppearance translations are consistent

The themeAppearance entry mirrors the structure and semantics of other locales, and the Polish wording is clear and aligned with existing settings text.

src/i18n/ja.i18n.json (1)

221-229: Japanese themeAppearance block is well-formed

Keys and structure are correct, and the Japanese strings clearly describe the theme options (auto/light/dark) in line with other locales.

src/i18n/pt-BR.i18n.json (1)

280-289: pt-BR themeAppearance strings are clear and consistent

The new themeAppearance option is correctly placed under settings.options, and the labels/readings in pt-BR are natural and consistent with the rest of the file.

src/i18n/zh-CN.i18n.json (1)

158-167: zh-CN themeAppearance translations look correct

The themeAppearance block follows the existing options structure, and the Chinese strings accurately convey the theme choices (follow system/light/dark).

src/i18n/de-DE.i18n.json (1)

262-271: German themeAppearance option is properly localized

The themeAppearance entry is structurally correct and the German phrasing (“Design”, “Farbschema”, “System folgen”) is clear and consistent with the rest of the settings.

src/store/rootReducer.ts (1)

44-45: userThemePreference reducer integration into rootReducer is correct

Importing userThemePreference and adding it to combineReducers cleanly exposes the new slice on RootState, aligning with the rest of the UI reducers and supporting the new theme preference flow.

Also applies to: 87-87

src/i18n/fi.i18n.json (1)

264-270: ThemeAppearance i18n block is correctly structured and keyed.

The Finnish translation block is properly aligned with the ThemeAppearance.tsx component, which uses exactly these keys: auto, light, dark, title, and description. The Redux reducer and application constants confirm acceptance of these three theme options. All 25 language files follow the same structure consistently. The translations are semantically accurate.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/ui/components/SettingsView/features/ThemeAppearance.tsx (1)

70-70: Prefer Fuselage spacing props over inline styles.

The inline style={{ paddingTop: '4px' }} should use Fuselage's spacing props for consistency with the design system. Consider using paddingBlockStart='x4' or an appropriate Fuselage spacing token.

Apply this diff to use Fuselage spacing props:

-        <Box display='flex' alignItems='center' style={{ paddingTop: '4px' }}>
+        <Box display='flex' alignItems='center' paddingBlockStart='x4'>

Based on coding guidelines requiring validation of tokens against Theme.d.ts and using Fuselage components properly.

📜 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.

📥 Commits

Reviewing files that changed from the base of the PR and between 29a50ed and ab8b899.

📒 Files selected for processing (2)

• src/i18n/nn.i18n.json (1 hunks)
• src/ui/components/SettingsView/features/ThemeAppearance.tsx (1 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/SettingsView/features/ThemeAppearance.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/fuselage instead of raw HTML elements
For Fuselage theming, validate tokens against Theme.d.ts and only use documented values
Name React component files in PascalCase; non-component files should follow camelCase naming

Files:

• src/ui/components/SettingsView/features/ThemeAppearance.tsx

🧠 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 : For Fuselage theming, validate tokens against `Theme.d.ts` and only use documented values

Applied to files:

• src/ui/components/SettingsView/features/ThemeAppearance.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/ThemeAppearance.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 : 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/ThemeAppearance.tsx

🧬 Code graph analysis (1)

src/ui/components/SettingsView/features/ThemeAppearance.tsx (5)

src/ui/reducers/userThemePreference.ts (1)

• userThemePreference (11-27)

src/store/rootReducer.ts (1)

• RootState (111-111)

src/store/index.ts (1)

• dispatch (38-40)

src/store/actions.ts (1)

• RootAction (44-46)

src/ui/actions.ts (1)

• SETTINGS_USER_THEME_PREFERENCE_CHANGED (121-122)

⏰ 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)

• GitHub Check: check (macos-latest)
• GitHub Check: check (windows-latest)
• GitHub Check: check (ubuntu-latest)

🔇 Additional comments (5)

src/i18n/nn.i18n.json (1)

7-14: LGTM! Translations are properly structured.

The Norwegian Nynorsk translations for theme appearance settings are correctly formatted and include all required keys that the ThemeAppearance component expects.

src/ui/components/SettingsView/features/ThemeAppearance.tsx (4)

1-16: LGTM! Imports follow project conventions.

The imports correctly use Fuselage components from @rocket.chat/fuselage and follow the functional component with hooks pattern as specified in the coding guidelines.

---

29-45: Excellent input validation!

The validation logic in handleChangeTheme correctly guards against invalid values before dispatching the action. The type assertion on line 41 is safe because of the preceding validation checks.

---

47-54: LGTM! Options are properly memoized.

The options array is correctly generated using i18n translations and memoized with the appropriate dependency on the translation function.

---

22-27: LGTM! State management is correctly implemented.

The component properly uses Redux hooks with correct typing and state selection that aligns with the reducer structure defined in src/ui/reducers/userThemePreference.ts.

[coderabbitai]

Actionable comments posted: 3

🧹 Nitpick comments (2)

src/ui/components/SettingsView/features/ThemeAppearance.tsx (1)

58-76: Consider replacing inline style with Fuselage layout props or theme-aware spacing

The style={{ paddingTop: '4px' }} on the right‑hand Box is purely cosmetic but slightly diverges from Fuselage/theming conventions. You could instead use spacing/layout props (e.g., margin/padding props or a class backed by theme tokens) to keep styling consistent and theme-friendly.

src/ui/reducers/userThemePreference.ts (1)

11-22: Centralize the 'auto' | 'light' | 'dark' union into a shared type

The theme preference union is used here and in ThemeAppearance.tsx. To avoid drift and make future additions safer, consider extracting a shared type UserThemePreference = 'auto' | 'light' | 'dark'; (e.g., in a small ui/types or similar module) and using it in:

• This reducer’s state type and APP_SETTINGS_LOADED payload.
• The action payload type in ui/actions.ts.
• The ThemeAppearance component’s userThemePreference and dispatch payload.

This keeps all call sites in sync if you ever introduce more modes.

📜 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.

📥 Commits

Reviewing files that changed from the base of the PR and between b7af75c and 2bfc5af.

📒 Files selected for processing (3)

• src/ui/components/SettingsView/features/ThemeAppearance.tsx (1 hunks)
• src/ui/components/SettingsView/features/TransparentWindow.tsx (1 hunks)
• src/ui/reducers/userThemePreference.ts (1 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/SettingsView/features/ThemeAppearance.tsx
• src/ui/components/SettingsView/features/TransparentWindow.tsx
• src/ui/reducers/userThemePreference.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/fuselage instead of raw HTML elements
For Fuselage theming, validate tokens against Theme.d.ts and only use documented values
Name React component files in PascalCase; non-component files should follow camelCase naming

Files:

• src/ui/components/SettingsView/features/ThemeAppearance.tsx
• src/ui/components/SettingsView/features/TransparentWindow.tsx

🧠 Learnings (4)

📚 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 : For Fuselage theming, validate tokens against `Theme.d.ts` and only use documented values

Applied to files:

• src/ui/components/SettingsView/features/ThemeAppearance.tsx
• src/ui/reducers/userThemePreference.ts

📚 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/ThemeAppearance.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 : 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/ThemeAppearance.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/ui/components/SettingsView/features/TransparentWindow.tsx

🧬 Code graph analysis (2)

src/ui/components/SettingsView/features/ThemeAppearance.tsx (4)

src/ui/reducers/userThemePreference.ts (1)

• userThemePreference (11-27)

src/store/rootReducer.ts (1)

• RootState (111-111)

src/store/index.ts (1)

• dispatch (38-40)

src/ui/actions.ts (1)

• SETTINGS_USER_THEME_PREFERENCE_CHANGED (121-122)

src/ui/reducers/userThemePreference.ts (3)

src/store/actions.ts (1)

• ActionOf (42-42)

src/ui/actions.ts (1)

• SETTINGS_USER_THEME_PREFERENCE_CHANGED (121-122)

src/app/actions.ts (1)

• APP_SETTINGS_LOADED (6-6)

🪛 GitHub Check: check (ubuntu-latest)

src/ui/components/SettingsView/features/ThemeAppearance.tsx

[failure] 82-82:
Delete ⏎

src/ui/components/SettingsView/features/TransparentWindow.tsx

[failure] 61-61:
Delete ⏎⏎

src/ui/reducers/userThemePreference.ts

[failure] 28-28:
Delete ⏎

⏰ 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 (macos-latest)
• GitHub Check: check (windows-latest)

🔇 Additional comments (2)

src/ui/components/SettingsView/features/ThemeAppearance.tsx (1)

22-77: ThemeAppearance wiring and validation look solid

Nice use of Redux + hooks: selector/dispatch are correctly typed, handleChangeTheme defensively filters values to 'auto' | 'light' | 'dark', and options are memoized with i18n-backed labels. The Select wiring (options, value, onChange) matches the expected shape.

src/ui/reducers/userThemePreference.ts (1)

11-26: Reducer behavior and typing look correct

The reducer cleanly handles both the settings change action and initialization from APP_SETTINGS_LOADED, with a sensible 'auto' default and a fallback when userThemePreference is missing from older payloads. Typing via ActionOf<...> keeps the action union tight.

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/i18n/ja.i18n.json (1)

106-112: Duplicate "settings" key will cause parsing issues or data loss.

There are two "settings" keys in this JSON file: one here at lines 106-112 and another at lines 226-240. Most JSON parsers will silently use the last occurrence, causing this block to be ignored. Remove this duplicate block since the new one at lines 226-240 already contains both transparentWindow and themeAppearance.

🐛 Proposed fix: Remove the duplicate settings block

   }
   },
-  "settings": {
-    "options": {
-      "transparentWindow": {
-        "title": "透明ウィンドウ効果",
-        "description": "ウィンドウのネイティブなビブランシー/透明効果を有効にします。適用するには再起動が必要です。"
-      }
-    }
-  },
   "error": {