feat: Add transparent window feature with settings and internationalization support

jeanfbrito · jeanfbrito · commit 4920bf644e3c · 2025-12-02T13:51:11.000-03:00
- 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.
diff --git a/src/app/PersistableValues.ts b/src/app/PersistableValues.ts
@@ -87,9 +87,13 @@ type PersistableValues_4_7_2 = PersistableValues_4_5_0 & {
   isVideoCallDevtoolsAutoOpenEnabled: boolean;
 };
 
+type PersistableValues_4_9_0 = PersistableValues_4_7_2 & {
+  isTransparentWindowEnabled: boolean;
+};
+
 export type PersistableValues = Pick<
-  PersistableValues_4_7_2,
-  keyof PersistableValues_4_7_2
+  PersistableValues_4_9_0,
+  keyof PersistableValues_4_9_0
 >;
 
 export const migrations = {
@@ -159,4 +163,8 @@ export const migrations = {
     ...before,
     updateChannel: 'latest',
   }),
+  '>=4.9.0': (before: PersistableValues_4_7_2): PersistableValues_4_9_0 => ({
+    ...before,
+    isTransparentWindowEnabled: false,
+  }),
 };
diff --git a/src/app/main/app.ts b/src/app/main/app.ts
@@ -16,6 +16,7 @@ import {
   SETTINGS_CLEAR_PERMITTED_SCREEN_CAPTURE_PERMISSIONS,
   SETTINGS_NTLM_CREDENTIALS_CHANGED,
   SETTINGS_SET_HARDWARE_ACCELERATION_OPT_IN_CHANGED,
+  SETTINGS_SET_IS_TRANSPARENT_WINDOW_ENABLED_CHANGED,
 } from '../../ui/actions';
 import { askForClearScreenCapturePermission } from '../../ui/main/dialogs';
 import { getRootWindow } from '../../ui/main/rootWindow';
@@ -133,6 +134,10 @@ export const setupApp = (): void => {
     relaunchApp();
   });
 
+  listen(SETTINGS_SET_IS_TRANSPARENT_WINDOW_ENABLED_CHANGED, () => {
+    relaunchApp();
+  });
+
   listen(APP_ALLOWED_NTLM_CREDENTIALS_DOMAINS_SET, (action) => {
     if (action.payload.length > 0) {
       session.defaultSession.allowNTLMCredentialsForDomains(action.payload);
diff --git a/src/app/selectors.ts b/src/app/selectors.ts
@@ -65,5 +65,7 @@ export const selectPersistableValues = createStructuredSelector({
   isVideoCallDevtoolsAutoOpenEnabled: ({
     isVideoCallDevtoolsAutoOpenEnabled,
   }: RootState) => isVideoCallDevtoolsAutoOpenEnabled,
+  isTransparentWindowEnabled: ({ isTransparentWindowEnabled }: RootState) =>
+    isTransparentWindowEnabled,
   updateChannel: ({ updateChannel }: RootState) => updateChannel,
 });
diff --git a/src/i18n/de-DE.i18n.json b/src/i18n/de-DE.i18n.json
@@ -241,6 +241,10 @@
       "videoCallWindowPersistence": {
         "title": "Videoanruf-Fensterposition speichern",
         "description": "Position und Größe der Videoanruf-Fenster zwischen Sitzungen speichern und wiederherstellen"
+      },
+      "transparentWindow": {
+        "title": "Transparentes Fenstereffekt",
+        "description": "Natives Vibrancy-/Transparenzeffekt für das Fenster aktivieren. Erfordert Neustart zur Anwendung."
       }
     }
   },
diff --git a/src/i18n/en.i18n.json b/src/i18n/en.i18n.json
@@ -273,6 +273,10 @@
       "videoCallWindowPersistence": {
         "title": "Remember video call window position",
         "description": "Save and restore the position and size of video call windows between sessions"
+      },
+      "transparentWindow": {
+        "title": "Transparent window effect",
+        "description": "Enable native vibrancy/transparency effect for the window. Requires restart to apply."
       }
     }
   },
diff --git a/src/i18n/es.i18n.json b/src/i18n/es.i18n.json
@@ -264,6 +264,10 @@
       "videoCallWindowPersistence": {
         "title": "Recordar posición de la ventana de videollamada",
         "description": "Guardar y restaurar la posición y el tamaño de las ventanas de videollamada entre sesiones"
+      },
+      "transparentWindow": {
+        "title": "Efecto de ventana transparente",
+        "description": "Habilitar efecto nativo de vibración/transparencia para la ventana. Requiere reinicio para aplicar."
       }
     }
   },
diff --git a/src/i18n/fr.i18n.json b/src/i18n/fr.i18n.json
@@ -239,6 +239,10 @@
       "clearPermittedScreenCaptureServers": {
         "title": "Effacer les autorisations de capture d'écran",
         "description": "Effacez les autorisations de capture d'écran qui ont été sélectionnées pour ne plus demander lors des appels vidéo."
+      },
+      "transparentWindow": {
+        "title": "Effet de fenêtre transparente",
+        "description": "Activer l'effet natif de vibrance/transparence pour la fenêtre. Nécessite un redémarrage pour s'appliquer."
       }
     }
   },
diff --git a/src/i18n/hu.i18n.json b/src/i18n/hu.i18n.json
@@ -264,6 +264,10 @@
       "videoCallWindowPersistence": {
         "title": "Videohívás ablak pozíciójának megjegyzése",
         "description": "Videohívás ablakok pozíciójának és méretének mentése és visszaállítása a munkamenetek között"
+      },
+      "transparentWindow": {
+        "title": "Áttetsző ablak effektus",
+        "description": "Natív vibráció/áttetszőség effektus engedélyezése az ablakhoz. Újraindítás szükséges az alkalmazáshoz."
       }
     }
   },
diff --git a/src/i18n/no.i18n.json b/src/i18n/no.i18n.json
@@ -273,6 +273,10 @@
       "videoCallWindowPersistence": {
         "title": "Husk posisjonen til videosamtalevinduet",
         "description": "Lagre og gjenopprett posisjonen og størrelsen på videosamtalevinduer mellom økter"
+      },
+      "transparentWindow": {
+        "title": "Gjennomsiktig vinduseffekt",
+        "description": "Aktiver innfødt vibrans/gjennomsiktighetseffekt for vinduet. Krever omstart for å brukes."
       }
     }
   },
diff --git a/src/i18n/pt-BR.i18n.json b/src/i18n/pt-BR.i18n.json
@@ -259,6 +259,10 @@
       "videoCallWindowPersistence": {
         "title": "Lembrar posição da janela de videochamada",
         "description": "Salvar e restaurar a posição e o tamanho das janelas de videochamada entre as sessões"
+      },
+      "transparentWindow": {
+        "title": "Efeito de janela transparente",
+        "description": "Ativar efeito nativo de vibração/transparência para a janela. Requer reinicialização para aplicar."
       }
     }
   },
diff --git a/src/i18n/ru.i18n.json b/src/i18n/ru.i18n.json
@@ -242,6 +242,10 @@
       "videoCallWindowPersistence": {
         "title": "Запоминать положение окна видеозвонка",
         "description": "Сохранять и восстанавливать положение и размер окон видеозвонков между сеансами"
+      },
+      "transparentWindow": {
+        "title": "Эффект прозрачного окна",
+        "description": "Включить нативный эффект вибрации/прозрачности для окна. Требуется перезапуск для применения."
       }
     }
   },
diff --git a/src/i18n/sv.i18n.json b/src/i18n/sv.i18n.json
@@ -273,6 +273,10 @@
       "videoCallWindowPersistence": {
         "title": "Kom ihåg fönstrets position för videosamtal",
         "description": "Spara och återställ position och storlek för videosamtalsfönster mellan sessioner"
+      },
+      "transparentWindow": {
+        "title": "Transparent fönstereffekt",
+        "description": "Aktivera inbyggd vibrans/transparenseffekt för fönstret. Kräver omstart för att tillämpas."
       }
     }
   },
diff --git a/src/store/rootReducer.ts b/src/store/rootReducer.ts
@@ -29,6 +29,7 @@ import { isNTLMCredentialsEnabled } from '../ui/reducers/isNTLMCredentialsEnable
 import { isReportEnabled } from '../ui/reducers/isReportEnabled';
 import { isShowWindowOnUnreadChangedEnabled } from '../ui/reducers/isShowWindowOnUnreadChangedEnabled';
 import { isSideBarEnabled } from '../ui/reducers/isSideBarEnabled';
+import { isTransparentWindowEnabled } from '../ui/reducers/isTransparentWindowEnabled';
 import { isTrayIconEnabled } from '../ui/reducers/isTrayIconEnabled';
 import { isVideoCallDevtoolsAutoOpenEnabled } from '../ui/reducers/isVideoCallDevtoolsAutoOpenEnabled';
 import { isVideoCallWindowPersistenceEnabled } from '../ui/reducers/isVideoCallWindowPersistenceEnabled';
@@ -96,6 +97,7 @@ export const rootReducer = combineReducers({
   isDeveloperModeEnabled,
   updateChannel,
   isVideoCallDevtoolsAutoOpenEnabled,
+  isTransparentWindowEnabled,
 });
 
 export type RootState = ReturnType<typeof rootReducer>;
diff --git a/src/ui/actions.ts b/src/ui/actions.ts
@@ -104,6 +104,8 @@ export const SETTINGS_SET_IS_MENU_BAR_ENABLED_CHANGED =
   'settings/set-is-menu-bar-enabled-changed';
 export const SETTINGS_SET_IS_VIDEO_CALL_WINDOW_PERSISTENCE_ENABLED_CHANGED =
   'settings/set-is-video-call-window-persistence-enabled-changed';
+export const SETTINGS_SET_IS_TRANSPARENT_WINDOW_ENABLED_CHANGED =
+  'settings/set-is-transparent-window-enabled-changed';
 export const SETTINGS_SET_IS_DEVELOPER_MODE_ENABLED_CHANGED =
   'settings/set-is-developer-mode-enabled-changed';
 export const SETTINGS_SET_IS_VIDEO_CALL_DEVTOOLS_AUTO_OPEN_ENABLED_CHANGED =
@@ -239,6 +241,7 @@ export type UiActionTypeToPayloadMap = {
   [SETTINGS_SET_IS_SIDE_BAR_ENABLED_CHANGED]: boolean;
   [SETTINGS_SET_IS_MENU_BAR_ENABLED_CHANGED]: boolean;
   [SETTINGS_SET_IS_VIDEO_CALL_WINDOW_PERSISTENCE_ENABLED_CHANGED]: boolean;
+  [SETTINGS_SET_IS_TRANSPARENT_WINDOW_ENABLED_CHANGED]: boolean;
   [SETTINGS_SET_IS_DEVELOPER_MODE_ENABLED_CHANGED]: boolean;
   [SETTINGS_SET_IS_VIDEO_CALL_DEVTOOLS_AUTO_OPEN_ENABLED_CHANGED]: boolean;
   [SETTINGS_CLEAR_PERMITTED_SCREEN_CAPTURE_PERMISSIONS]: void;
diff --git a/src/ui/components/SettingsView/GeneralTab.tsx b/src/ui/components/SettingsView/GeneralTab.tsx
@@ -10,6 +10,7 @@ import { MinimizeOnClose } from './features/MinimizeOnClose';
 import { NTLMCredentials } from './features/NTLMCredentials';
 import { ReportErrors } from './features/ReportErrors';
 import { SideBar } from './features/SideBar';
+import { TransparentWindow } from './features/TransparentWindow';
 import { TrayIcon } from './features/TrayIcon';
 import { VideoCallWindowPersistence } from './features/VideoCallWindowPersistence';
 
@@ -21,6 +22,7 @@ export const GeneralTab = () => (
       <HardwareAcceleration />
       <InternalVideoChatWindow />
       <VideoCallWindowPersistence />
+      {process.platform === 'darwin' && <TransparentWindow />}
       <TrayIcon />
       {process.platform === 'win32' && <MinimizeOnClose />}
       <SideBar />
diff --git a/src/ui/components/SettingsView/features/TransparentWindow.tsx b/src/ui/components/SettingsView/features/TransparentWindow.tsx
@@ -0,0 +1,60 @@
+import {
+  ToggleSwitch,
+  Field,
+  FieldRow,
+  FieldLabel,
+  FieldHint,
+} from '@rocket.chat/fuselage';
+import type { ChangeEvent } from 'react';
+import { useCallback, useId } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+import type { Dispatch } from 'redux';
+
+import type { RootAction } from '../../../../store/actions';
+import type { RootState } from '../../../../store/rootReducer';
+import { SETTINGS_SET_IS_TRANSPARENT_WINDOW_ENABLED_CHANGED } from '../../../actions';
+
+type TransparentWindowProps = {
+  className?: string;
+};
+
+export const TransparentWindow = (props: TransparentWindowProps) => {
+  const isTransparentWindowEnabled = useSelector(
+    ({ isTransparentWindowEnabled }: RootState) => isTransparentWindowEnabled
+  );
+  const dispatch = useDispatch<Dispatch<RootAction>>();
+  const { t } = useTranslation();
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const isChecked = event.currentTarget.checked;
+      dispatch({
+        type: SETTINGS_SET_IS_TRANSPARENT_WINDOW_ENABLED_CHANGED,
+        payload: isChecked,
+      });
+    },
+    [dispatch]
+  );
+
+  const id = useId();
+
+  return (
+    <Field className={props.className}>
+      <FieldRow>
+        <FieldLabel htmlFor={id}>
+          {t('settings.options.transparentWindow.title')}
+        </FieldLabel>
+        <ToggleSwitch
+          id={id}
+          checked={isTransparentWindowEnabled}
+          onChange={handleChange}
+        />
+      </FieldRow>
+      <FieldRow>
+        <FieldHint>
+          {t('settings.options.transparentWindow.description')}
+        </FieldHint>
+      </FieldRow>
+    </Field>
+  );
+};
diff --git a/src/ui/main/rootWindow.ts b/src/ui/main/rootWindow.ts
@@ -10,6 +10,7 @@ import {
   APP_MAIN_WINDOW_TITLE_SET,
 } from '../../app/actions';
 import { setupRootWindowReload } from '../../app/main/dev';
+import { getPersistedValues } from '../../app/main/persistence';
 import { select, watch, listen, dispatchLocal, dispatch } from '../../store';
 import type { RootState } from '../../store/rootReducer';
 import { ROOT_WINDOW_STATE_CHANGED, WEBVIEW_FOCUS_REQUESTED } from '../actions';
@@ -55,9 +56,20 @@ const platformTitleBarStyle =
   process.platform === 'darwin' ? 'hidden' : 'default';
 
 const isMac = process.platform === 'darwin';
-const enableVibrancy = isMac;
+const getEnableVibrancy = (): boolean => {
+  if (!isMac) {
+    return false;
+  }
+  try {
+    const persistedValues = getPersistedValues();
+    return persistedValues.isTransparentWindowEnabled === true;
+  } catch (error) {
+    return false;
+  }
+};
 
 export const createRootWindow = (): void => {
+  const enableVibrancy = getEnableVibrancy();
   _rootWindow = new BrowserWindow({
     width: 1000,
     height: 600,
diff --git a/src/ui/reducers/isTransparentWindowEnabled.ts b/src/ui/reducers/isTransparentWindowEnabled.ts
@@ -0,0 +1,22 @@
+import type { Reducer } from 'redux';
+
+import { APP_SETTINGS_LOADED } from '../../app/actions';
+import { SETTINGS_SET_IS_TRANSPARENT_WINDOW_ENABLED_CHANGED } from '../actions';
+
+export const isTransparentWindowEnabled: Reducer<boolean, any> = (
+  state = false,
+  action
+) => {
+  switch (action.type) {
+    case SETTINGS_SET_IS_TRANSPARENT_WINDOW_ENABLED_CHANGED:
+      return action.payload;
+
+    case APP_SETTINGS_LOADED: {
+      const { isTransparentWindowEnabled = state } = action.payload;
+      return isTransparentWindowEnabled;
+    }
+
+    default:
+      return state;
+  }
+};

Original file line number	Diff line number	Diff line change
`@@ -241,6 +241,10 @@`
`241`	`241`	`"videoCallWindowPersistence": {`
`242`	`242`	`"title": "Videoanruf-Fensterposition speichern",`
`243`	`243`	`"description": "Position und Größe der Videoanruf-Fenster zwischen Sitzungen speichern und wiederherstellen"`
	`244`	`+ },`
	`245`	`+ "transparentWindow": {`
	`246`	`+ "title": "Transparentes Fenstereffekt",`
	`247`	`+ "description": "Natives Vibrancy-/Transparenzeffekt für das Fenster aktivieren. Erfordert Neustart zur Anwendung."`
`244`	`248`	`}`
`245`	`249`	`}`
`246`	`250`	`},`
Original file line number	Diff line number	Diff line change
`@@ -273,6 +273,10 @@`
`273`	`273`	`"videoCallWindowPersistence": {`
`274`	`274`	`"title": "Remember video call window position",`
`275`	`275`	`"description": "Save and restore the position and size of video call windows between sessions"`
	`276`	`+ },`
	`277`	`+ "transparentWindow": {`
	`278`	`+ "title": "Transparent window effect",`
	`279`	`+ "description": "Enable native vibrancy/transparency effect for the window. Requires restart to apply."`
`276`	`280`	`}`
`277`	`281`	`}`
`278`	`282`	`},`
Original file line number	Diff line number	Diff line change
`@@ -264,6 +264,10 @@`
`264`	`264`	`"videoCallWindowPersistence": {`
`265`	`265`	`"title": "Recordar posición de la ventana de videollamada",`
`266`	`266`	`"description": "Guardar y restaurar la posición y el tamaño de las ventanas de videollamada entre sesiones"`
	`267`	`+ },`
	`268`	`+ "transparentWindow": {`
	`269`	`+ "title": "Efecto de ventana transparente",`
	`270`	`+ "description": "Habilitar efecto nativo de vibración/transparencia para la ventana. Requiere reinicio para aplicar."`
`267`	`271`	`}`
`268`	`272`	`}`
`269`	`273`	`},`
Original file line number	Diff line number	Diff line change
`@@ -239,6 +239,10 @@`
`239`	`239`	`"clearPermittedScreenCaptureServers": {`
`240`	`240`	`"title": "Effacer les autorisations de capture d'écran",`
`241`	`241`	`"description": "Effacez les autorisations de capture d'écran qui ont été sélectionnées pour ne plus demander lors des appels vidéo."`
	`242`	`+ },`
	`243`	`+ "transparentWindow": {`
	`244`	`+ "title": "Effet de fenêtre transparente",`
	`245`	`+ "description": "Activer l'effet natif de vibrance/transparence pour la fenêtre. Nécessite un redémarrage pour s'appliquer."`
`242`	`246`	`}`
`243`	`247`	`}`
`244`	`248`	`},`
Original file line number	Diff line number	Diff line change
`@@ -259,6 +259,10 @@`
`259`	`259`	`"videoCallWindowPersistence": {`
`260`	`260`	`"title": "Lembrar posição da janela de videochamada",`
`261`	`261`	`"description": "Salvar e restaurar a posição e o tamanho das janelas de videochamada entre as sessões"`
	`262`	`+ },`
	`263`	`+ "transparentWindow": {`
	`264`	`+ "title": "Efeito de janela transparente",`
	`265`	`+ "description": "Ativar efeito nativo de vibração/transparência para a janela. Requer reinicialização para aplicar."`
`262`	`266`	`}`
`263`	`267`	`}`
`264`	`268`	`},`