feat: New UI using Fuselage (#2927)

package.json

@@ -26,7 +26,8 @@
   },
   "main": "app/main.js",
   "scripts": {
-    "postinstall": "run-s install-app-deps clean",
+    "postinstall": "run-s install-app-deps clean patch-package",
+    "patch-package": "patch-package",
     "start": "run-s build:watch",
     "clean": "rimraf app dist",
     "build": "rollup -c",
@@ -38,7 +39,7 @@
     "build-assets-win": "ts-node -O \"{\\\"module\\\":\\\"commonjs\\\"}\" src/buildAssets.ts",
     "release": "yarn electron-builder --publish onTagOrDraft --x64",
     "install-app-deps": "electron-builder install-app-deps",
-    "test": "xvfb-maybe jest",
+    "test": "xvfb-maybe jest --forceExit --detectOpenHandles --maxWorkers=1",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "lint": "run-s .:lint:eslint .:lint:tsc",
     ".:lint:eslint": "eslint .",
@@ -54,10 +55,10 @@
     "@emotion/styled": "~11.11.0",
     "@ewsjs/xhr": "~2.0.2",
     "@rocket.chat/css-in-js": "~0.31.25",
-    "@rocket.chat/fuselage": "~0.54.2",
+    "@rocket.chat/fuselage": "0.58.0",
     "@rocket.chat/fuselage-hooks": "~0.33.1",
     "@rocket.chat/fuselage-polyfills": "~0.31.25",
-    "@rocket.chat/icons": "~0.36.0",
+    "@rocket.chat/icons": "0.37.0",
     "axios": "~1.6.4",
     "electron-dl": "3.5.2",
     "electron-store": "~8.1.0",
@@ -88,7 +89,7 @@
     "@babel/preset-typescript": "~7.23.3",
     "@fiahfy/icns-convert": "~0.0.12",
     "@fiahfy/ico-convert": "~0.0.12",
-    "@kayahr/jest-electron-runner": "~29.11.0",
+    "@kayahr/jest-electron-runner": "29.14.0",
     "@rocket.chat/eslint-config": "~0.7.0",
     "@rocket.chat/prettier-config": "~0.31.25",
     "@rollup/plugin-babel": "~6.0.4",
@@ -108,7 +109,7 @@
     "chokidar": "~3.5.3",
     "conventional-changelog-cli": "~4.1.0",
     "convert-svg-to-png": "~0.6.4",
-    "electron": "30.1.2",
+    "electron": "30.4.0",
     "electron-builder": "24.13.3",
     "electron-devtools-installer": "^3.2.0",
     "electron-notarize": "^1.2.2",
@@ -123,6 +124,7 @@
     "jest-environment-jsdom": "~29.7.0",
     "jimp": "~0.22.10",
     "npm-run-all": "~4.1.5",
+    "patch-package": "~8.0.0",
     "prettier": "~3.2.5",
     "puppeteer": "23.1.1",
     "rollup": "~4.9.6",

patches/@kayahr+jest-electron-runner+29.14.0.patch

@@ -0,0 +1,30 @@
+diff --git a/node_modules/@kayahr/jest-electron-runner/lib/main/electron/TestRunner.js b/node_modules/@kayahr/jest-electron-runner/lib/main/electron/TestRunner.js
+index 4485862..f34ba6a 100644
+--- a/node_modules/@kayahr/jest-electron-runner/lib/main/electron/TestRunner.js
++++ b/node_modules/@kayahr/jest-electron-runner/lib/main/electron/TestRunner.js
+@@ -66,14 +66,19 @@ async function startWorker(rootDir, target, config) {
+         DISPOSABLES.add(() => {
+             if (child.pid != null) {
+                 try {
+-                    // Kill whole process group with negative PID (See `man kill`)
+-                    process.kill(-child.pid, "SIGKILL");
+-                }
+-                catch {
+-                    // Ignored
++                    if (process.platform === 'win32') {
++                        // On Windows, use taskkill instead of process.kill
++                        require('child_process').execSync(`taskkill /pid ${child.pid} /T /F`);
++                    } else {
++                        // Kill whole process group with negative PID (See `man kill`)
++                        process.kill(-child.pid, 'SIGKILL');
++                    }
++                } catch (error) {
++                    console.error('Failed to kill process:', error);
+                 }
+             }
+-            child.kill("SIGKILL");
++            // Fallback kill (this can remain as it works for most platforms)
++            child.kill('SIGKILL');
+         });
+         return child;
+     });

src/.jest/setup.ts

@@ -12,13 +12,28 @@ expect.extend({
       promise: this.promise,
     };
 
+    const normalizedReceived = path.normalize(received);
+    const normalizedExpected = path.normalize(fullExpectedPath);
+
+    console.log('Normalized Received:', normalizedReceived);
+    console.log('Normalized Expected:', normalizedExpected);
+
     return {
-      pass: path.relative(received, fullExpectedPath) === '',
+      pass: normalizedReceived === normalizedExpected,
       message: () =>
-        `${ this.utils.matcherHint('toMatchAppPath', undefined, undefined, options)
-        }\n\n`
-          + `Expected: ${ this.utils.printExpected(fullExpectedPath) }\n`
-          + `Received: ${ this.utils.printReceived(received) }`,
+        `${this.utils.matcherHint('toMatchAppPath', undefined, undefined, options)}\n\n` +
+        `Expected: ${this.utils.printExpected(normalizedExpected)}\n` +
+        `Received: ${this.utils.printReceived(normalizedReceived)}`,
     };
   },
 });
+
+process.on('unhandledRejection', (reason, promise) => {
+  console.error('Unhandled Rejection at:', promise, 'reason:', reason);
+  process.exit(1);
+});
+
+process.on('uncaughtException', (error) => {
+  console.error('Uncaught Exception:', error);
+  process.exit(1);
+});

src/app/PersistableValues.ts

@@ -66,6 +66,11 @@ type PersistableValues_3_9_6 = PersistableValues_3_8_12 & {
   isNTLMCredentialsEnabled: boolean;
 };
 
+type PersistableValues_4_1_0 = PersistableValues_3_9_6 & {
+  mainWindowTitle: string;
+  machineTheme: string;
+};
+
 export type PersistableValues = Pick<
   PersistableValues_3_9_6,
   keyof PersistableValues_3_9_6
@@ -121,4 +126,9 @@ export const migrations = {
     allowedNTLMCredentialsDomains: null,
     lastSelectedServerUrl: '',
   }),
+  '>=4.1.0': (before: PersistableValues_3_9_6): PersistableValues_4_1_0 => ({
+    ...before,
+    mainWindowTitle: 'Rocket.Chat',
+    machineTheme: 'light',
+  }),
 };

src/app/actions.ts

@@ -6,11 +6,15 @@ export const APP_VERSION_SET = 'app/version-set';
 export const APP_SETTINGS_LOADED = 'app/settings-loaded';
 export const APP_ALLOWED_NTLM_CREDENTIALS_DOMAINS_SET =
   'app/allowed-ntlm-credentials-domains-set';
+export const APP_MAIN_WINDOW_TITLE_SET = 'app/main-window-title-set';
+export const APP_MACHINE_THEME_SET = 'app/machine-theme-set';
 
 export type AppActionTypeToPayloadMap = {
   [APP_ERROR_THROWN]: Error;
   [APP_PATH_SET]: string;
   [APP_VERSION_SET]: string;
   [APP_SETTINGS_LOADED]: Partial<PersistableValues>;
   [APP_ALLOWED_NTLM_CREDENTIALS_DOMAINS_SET]: string;
+  [APP_MAIN_WINDOW_TITLE_SET]: string;
+  [APP_MACHINE_THEME_SET]: string;
 };

src/app/main/app.ts

@@ -21,6 +21,7 @@ import { askForClearScreenCapturePermission } from '../../ui/main/dialogs';
 import { getRootWindow } from '../../ui/main/rootWindow';
 import {
   APP_ALLOWED_NTLM_CREDENTIALS_DOMAINS_SET,
+  APP_MAIN_WINDOW_TITLE_SET,
   APP_PATH_SET,
   APP_VERSION_SET,
 } from '../actions';
@@ -35,6 +36,19 @@ export const electronBuilderJsonInformation = {
   protocol: electronBuilderJson.protocols.schemes[0],
 };
 
+export const getPlatformName = (): string => {
+  switch (process.platform) {
+    case 'win32':
+      return 'Windows';
+    case 'linux':
+      return 'Linux';
+    case 'darwin':
+      return 'macOS';
+    default:
+      return 'Unknown';
+  }
+};
+
 export const relaunchApp = (...args: string[]): void => {
   const command = process.argv.slice(1, app.isPackaged ? 1 : 2);
   app.relaunch({ args: [...command, ...args] });
@@ -151,4 +165,5 @@ export const setupApp = (): void => {
 
   dispatch({ type: APP_PATH_SET, payload: app.getAppPath() });
   dispatch({ type: APP_VERSION_SET, payload: app.getVersion() });
+  dispatch({ type: APP_MAIN_WINDOW_TITLE_SET, payload: 'Rocket.Chat' });
 };

src/app/reducers/machineTheme.ts

@@ -0,0 +1,20 @@
+import type { Reducer } from 'redux';
+
+import type { ActionOf } from '../../store/actions';
+import { APP_MACHINE_THEME_SET } from '../actions';
+
+type MachineThemeAction = ActionOf<typeof APP_MACHINE_THEME_SET>;
+
+export const machineTheme: Reducer<string | null, MachineThemeAction> = (
+  state = 'light',
+  action
+) => {
+  switch (action.type) {
+    case APP_MACHINE_THEME_SET: {
+      return action.payload;
+    }
+
+    default:
+      return state;
+  }
+};

src/app/reducers/mainWindowTitle.ts

@@ -0,0 +1,19 @@
+import type { Reducer } from 'redux';
+
+import type { ActionOf } from '../../store/actions';
+import { APP_MAIN_WINDOW_TITLE_SET } from '../actions';
+
+type MainWindowTitleAction = ActionOf<typeof APP_MAIN_WINDOW_TITLE_SET>;
+
+export const mainWindowTitle: Reducer<string | null, MainWindowTitleAction> = (
+  state = null,
+  action
+) => {
+  switch (action.type) {
+    case APP_MAIN_WINDOW_TITLE_SET:
+      return action.payload;
+
+    default:
+      return state;
+  }
+};

src/app/selectors.ts

@@ -7,6 +7,7 @@ export const selectPersistableValues = createStructuredSelector({
   doCheckForUpdatesOnStartup: ({ doCheckForUpdatesOnStartup }: RootState) =>
     doCheckForUpdatesOnStartup,
   downloads: ({ downloads }: RootState) => downloads,
+  machineTheme: ({ machineTheme }: RootState) => machineTheme,
   isMenuBarEnabled: ({ isMenuBarEnabled }: RootState) => isMenuBarEnabled,
   isShowWindowOnUnreadChangedEnabled: ({
     isShowWindowOnUnreadChangedEnabled,

src/i18n/en.i18n.json

@@ -325,14 +325,22 @@
     "addNewServer": "Add new server",
     "downloads": "Downloads",
     "settings": "Settings",
+    "menuTitle": "Customize and control app",
     "item": {
-      "reload": "Reload server",
-      "remove": "Remove server",
+      "reload": "Reload",
+      "remove": "Remove",
       "openDevTools": "Open DevTools",
       "clearCache": "Clear Cache",
       "clearStorageData": "Clear Storage Data",
       "copyCurrentUrl": "Copy current URL",
       "reloadClearingCache": "Force reload"
+    },
+    "tooltips": {
+      "unreadMessage": "{{- count}} unread message",
+      "unreadMessages": "{{- count}} unread messages",
+      "userNotLoggedIn": "Not logged in",
+      "addWorkspace": "Add workspace ({{shortcut}}+N)",
+      "settingsMenu": "Customize and control app"
     }
   },
   "touchBar": {

src/i18n/pt-BR.i18n.json

@@ -310,14 +310,22 @@
     "addNewServer": "Adicionar novo servidor",
     "downloads": "Downloads",
     "settings": "Configurações",
+    "menuTitle": "Personalizar e controlar app",
     "item": {
-      "reload": "Recarregar servidor",
-      "remove": "Remover servidor",
+      "reload": "Recarregar",
+      "remove": "Remover",
       "openDevTools": "Abrir DevTools",
       "clearCache": "Limpar cache",
       "clearStorageData": "Limpar dados de armazenamento",
-      "copyCurrentUrl": "Copiar URL atual",
+      "copyCurrentUrl": "Copiar URL",
       "reloadClearingCache": "Forçar recarregamento"
+    },
+    "tooltips": {
+      "unreadMessage": "{{- count}} mensagem não lida",
+      "unreadMessages": "{{- count}} mensagens não lidas",
+      "userNotLoggedIn": "Não conectado",
+      "addWorkspace": "Adicionar workspace ({{shortcut}}+N)",
+      "settingsMenu": "Personalizar e controlar app"
     }
   },
   "touchBar": {

src/main.ts

@@ -29,6 +29,7 @@ import {
   createRootWindow,
   showRootWindow,
   exportLocalStorage,
+  watchMachineTheme,
 } from './ui/main/rootWindow';
 import { attachGuestWebContentsEvents } from './ui/main/serverView';
 import touchBar from './ui/main/touchBar';
@@ -71,7 +72,7 @@ const start = async (): Promise<void> => {
   // if (process.env.NODE_ENV === 'development') {
   //   installDevTools();
   // }
-
+  watchMachineTheme();
   setupNotifications();
   setupScreenSharing();
   startVideoCallWindowHandler();

src/servers/common.ts

@@ -4,6 +4,7 @@ import type { SupportedVersions } from './supportedVersions/types';
 export type Server = {
   url: string;
   title?: string;
+  pageTitle?: string;
   badge?: '•' | number;
   favicon?: string | null;
   style?: {

src/servers/reducers.ts

@@ -1,10 +1,13 @@
+/* eslint-disable complexity */
 import type { Reducer } from 'redux';
 
 import { APP_SETTINGS_LOADED } from '../app/actions';
 import { DEEP_LINKS_SERVER_ADDED } from '../deepLinks/actions';
 import { OUTLOOK_CALENDAR_SAVE_CREDENTIALS } from '../outlookCalendar/actions';
 import type { ActionOf } from '../store/actions';
+import type { SIDE_BAR_SERVER_REMOVE } from '../ui/actions';
 import {
+  WEBVIEW_PAGE_TITLE_CHANGED,
   ADD_SERVER_VIEW_SERVER_ADDED,
   SIDE_BAR_REMOVE_SERVER_CLICKED,
   SIDE_BAR_SERVERS_SORTED,
@@ -66,7 +69,9 @@ type ServersActionTypes =
   | ActionOf<typeof WEBVIEW_SERVER_VERSION_UPDATED>
   | ActionOf<typeof SUPPORTED_VERSION_DIALOG_DISMISS>
   | ActionOf<typeof SERVER_DOCUMENT_VIEWER_OPEN_URL>
-  | ActionOf<typeof WEBVIEW_USER_THEME_APPEARANCE_CHANGED>;
+  | ActionOf<typeof WEBVIEW_PAGE_TITLE_CHANGED>
+  | ActionOf<typeof WEBVIEW_USER_THEME_APPEARANCE_CHANGED>
+  | ActionOf<typeof SIDE_BAR_SERVER_REMOVE>;
 
 const upsert = (state: Server[], server: Server): Server[] => {
   const index = state.findIndex(({ url }) => url === server.url);
@@ -120,6 +125,11 @@ export const servers: Reducer<Server[], ServersActionTypes> = (
       return upsert(state, { url, title });
     }
 
+    case WEBVIEW_PAGE_TITLE_CHANGED: {
+      const { url, pageTitle } = action.payload;
+      return upsert(state, { url, pageTitle });
+    }
+
     case WEBVIEW_SERVER_SUPPORTED_VERSIONS_UPDATED: {
       const { url, supportedVersions, source } = action.payload;
       return upsert(state, {

src/store/rootReducer.ts

@@ -3,6 +3,8 @@ import { combineReducers } from 'redux';
 import { allowedNTLMCredentialsDomains } from '../app/reducers/allowedNTLMCredentialsDomains';
 import { appPath } from '../app/reducers/appPath';
 import { appVersion } from '../app/reducers/appVersion';
+import { machineTheme } from '../app/reducers/machineTheme';
+import { mainWindowTitle } from '../app/reducers/mainWindowTitle';
 import { downloads } from '../downloads/reducers/downloads';
 import { allowedJitsiServers } from '../jitsi/reducers';
 import {
@@ -60,6 +62,8 @@ export const rootReducer = combineReducers({
   isMinimizeOnCloseEnabled,
   isUpdatingAllowed,
   isUpdatingEnabled,
+  mainWindowTitle,
+  machineTheme,
   newUpdateVersion,
   openDialog,
   rootWindowIcon,