chore: Improve settings panel (#2510)

* chore: Add settings to the settings panel

* make minimize on close dependent of tray icon setting

* add pt-BR translations

src/i18n/en.i18n.json

@@ -192,6 +192,18 @@
       "minimizeOnClose": {
         "title": "Minimize on close",
         "description": "When closed the app will be minimized, otherwise it will quit the application. Tray Icon need to be disabled to this take effect."
+      },
+      "menubar":  {
+        "title": "Menu bar",
+        "description": "Show menu bar on the top of the window."
+      },
+      "sidebar": {
+        "title": "Sidebar",
+        "description": "Show sidebar on the left of the window with the Server List, Downloads and Settings."
+      },
+      "trayIcon": {
+        "title": "Tray Icon",
+        "description": "Show tray icon on the system tray. If tray icon is active the app will be hidden to tray on close. Otherwise it will quit the application."
       }
     }
   },
@@ -303,4 +315,4 @@
     "unreadMention": "Unread mentions",
     "noUnreadMessage": "No unread messages"
   }
-}
+}

src/i18n/pt-BR.i18n.json

@@ -187,6 +187,18 @@
       "minimizeOnClose": {
         "title": "Minimizar ao fechar",
         "description": "Quando fechado o aplicativo será minimizado para a barra de tarefas, senão será fechado. Ícone da bandeja precisa estar desativado para que isto funcione."
+      },
+      "menubar" : {
+        "title": "Barra de menus",
+        "description": "Mostra a barra de menus no topo da aplicação"
+      },
+      "sidebar" : {
+        "title": "Barra lateral",
+        "description": "Mostra a barra na lateral da janela com a lista de servidores, downloads e configurações."
+      },
+      "trayIcon": {
+        "title": "Ícone da bandeja",
+        "description": "Mostra um ícone na bandeja do sistema para acessar rapidamente a aplicação. Se o ícone da bandeja estiver ativado, a aplicação será minimizada para a barra de tarefas ao ser fechada. Por outro lado se o ícone da bandeja estiver desativado, a aplicação será finalizada ao ser fechada."
       }
     }
   },
@@ -298,4 +310,4 @@
     "unreadMention": "Menções não lidas",
     "noUnreadMessage": "Nenhuma mensagem"
   }
-}
+}

src/servers/preload/serverAllowedRedirects.ts

@@ -6,7 +6,6 @@ import { getServerUrl } from './urls';
 export const setServerAllowedRedirects = (
   allowedRedirects: Server['allowedRedirects']
 ): void => {
-  console.log('setServerAllowedRedirects', allowedRedirects);
   dispatch({
     type: WEBVIEW_ALLOWED_REDIRECTS_CHANGED,
     payload: {

src/ui/actions.ts

@@ -74,6 +74,12 @@ export const SETTINGS_SET_INTERNALVIDEOCHATWINDOW_OPT_IN_CHANGED =
   'settings/set-internalvideochatwindow-opt-in-changed';
 export const SETTINGS_SET_MINIMIZE_ON_CLOSE_OPT_IN_CHANGED =
   'settings/set-minimize-on-close-opt-in-changed';
+export const SETTINGS_SET_IS_TRAY_ICON_ENABLED_CHANGED =
+  'settings/set-is-tray-icon-enabled-changed';
+export const SETTINGS_SET_IS_SIDE_BAR_ENABLED_CHANGED =
+  'settings/set-is-side-bar-enabled-changed';
+export const SETTINGS_SET_IS_MENU_BAR_ENABLED_CHANGED =
+  'settings/set-is-menu-bar-enabled-changed';
 
 export type UiActionTypeToPayloadMap = {
   [ABOUT_DIALOG_DISMISSED]: void;
@@ -97,11 +103,11 @@ export type UiActionTypeToPayloadMap = {
   [SIDE_BAR_SERVER_SELECTED]: Server['url'];
   [SIDE_BAR_SERVERS_SORTED]: Server['url'][];
   [TOUCH_BAR_FORMAT_BUTTON_TOUCHED]:
-    | 'bold'
-    | 'italic'
-    | 'strike'
-    | 'inline_code'
-    | 'multi_line';
+  | 'bold'
+  | 'italic'
+  | 'strike'
+  | 'inline_code'
+  | 'multi_line';
   [TOUCH_BAR_SELECT_SERVER_TOUCHED]: string;
   [UPDATE_DIALOG_DISMISSED]: void;
   [UPDATE_DIALOG_INSTALL_BUTTON_CLICKED]: void;
@@ -141,4 +147,7 @@ export type UiActionTypeToPayloadMap = {
   [SETTINGS_SET_HARDWARE_ACCELERATION_OPT_IN_CHANGED]: boolean;
   [SETTINGS_SET_INTERNALVIDEOCHATWINDOW_OPT_IN_CHANGED]: boolean;
   [SETTINGS_SET_MINIMIZE_ON_CLOSE_OPT_IN_CHANGED]: boolean;
+  [SETTINGS_SET_IS_TRAY_ICON_ENABLED_CHANGED]: boolean;
+  [SETTINGS_SET_IS_SIDE_BAR_ENABLED_CHANGED]: boolean;
+  [SETTINGS_SET_IS_MENU_BAR_ENABLED_CHANGED]: boolean;
 };

src/ui/components/SettingsView/GeneralTab.tsx

@@ -4,8 +4,11 @@ import React, { FC } from 'react';
 import { FlashFrame } from './features/FlashFrame';
 import { HardwareAcceleration } from './features/HardwareAcceleration';
 import { InternalVideoChatWindow } from './features/InternalVideoChatWindow';
+import { MenuBar } from './features/MenuBar';
 import { MinimizeOnClose } from './features/MinimizeOnClose';
 import { ReportErrors } from './features/ReportErrors';
+import { SideBar } from './features/SideBar';
+import { TrayIcon } from './features/TrayIcon';
 
 export const GeneralTab: FC = () => (
   <Box is='form' margin={24} maxWidth={960} flexGrow={1} flexShrink={1}>
@@ -14,7 +17,10 @@ export const GeneralTab: FC = () => (
       <FlashFrame />
       <HardwareAcceleration />
       <InternalVideoChatWindow />
+      <TrayIcon />
       {process.platform === 'win32' && <MinimizeOnClose />}
+      <SideBar />
+      {process.platform !== 'darwin' && <MenuBar />}
     </FieldGroup>
   </Box>
 );

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

@@ -0,0 +1,44 @@
+import { ToggleSwitch, Field } from '@rocket.chat/fuselage';
+import React, { ChangeEvent, Dispatch, FC, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { RootAction } from '../../../../store/actions';
+import { RootState } from '../../../../store/rootReducer';
+import { SETTINGS_SET_IS_MENU_BAR_ENABLED_CHANGED } from '../../../actions';
+
+type Props = {
+  className?: string;
+};
+
+export const MenuBar: FC<Props> = (props) => {
+  const isMenuBarEnabled = useSelector(
+    ({ isMenuBarEnabled }: RootState) => isMenuBarEnabled
+  );
+  const dispatch = useDispatch<Dispatch<RootAction>>();
+  const { t } = useTranslation();
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const isChecked = event.currentTarget.checked;
+      dispatch({
+        type: SETTINGS_SET_IS_MENU_BAR_ENABLED_CHANGED,
+        payload: isChecked,
+      });
+    },
+    [dispatch]
+  );
+
+  return (
+    <Field className={props.className}>
+      <Field.Row>
+        <ToggleSwitch onChange={handleChange} checked={isMenuBarEnabled} />
+        <Field.Label htmlFor='toggle-switch'>
+          {t('settings.options.menubar.title')}
+        </Field.Label>
+      </Field.Row>
+      <Field.Row>
+        <Field.Hint>{t('settings.options.menubar.description')}</Field.Hint>
+      </Field.Row>
+    </Field>
+  );
+};

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

@@ -15,6 +15,9 @@ export const MinimizeOnClose: FC<Props> = (props) => {
   const isMinimizeOnCloseEnabled = useSelector(
     ({ isMinimizeOnCloseEnabled }: RootState) => isMinimizeOnCloseEnabled
   );
+  const isTrayIconEnabled = useSelector(
+    ({ isTrayIconEnabled }: RootState) => isTrayIconEnabled
+  );
   const dispatch = useDispatch<Dispatch<RootAction>>();
   const { t } = useTranslation();
   const handleChange = useCallback(
@@ -32,6 +35,7 @@ export const MinimizeOnClose: FC<Props> = (props) => {
     <Field className={props.className}>
       <Field.Row>
         <ToggleSwitch
+          disabled={isTrayIconEnabled}
           onChange={handleChange}
           checked={isMinimizeOnCloseEnabled}
         />

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

@@ -0,0 +1,44 @@
+import { ToggleSwitch, Field } from '@rocket.chat/fuselage';
+import React, { ChangeEvent, Dispatch, FC, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { RootAction } from '../../../../store/actions';
+import { RootState } from '../../../../store/rootReducer';
+import { SETTINGS_SET_IS_SIDE_BAR_ENABLED_CHANGED } from '../../../actions';
+
+type Props = {
+  className?: string;
+};
+
+export const SideBar: FC<Props> = (props) => {
+  const isSideBarEnabled = useSelector(
+    ({ isSideBarEnabled }: RootState) => isSideBarEnabled
+  );
+  const dispatch = useDispatch<Dispatch<RootAction>>();
+  const { t } = useTranslation();
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const isChecked = event.currentTarget.checked;
+      dispatch({
+        type: SETTINGS_SET_IS_SIDE_BAR_ENABLED_CHANGED,
+        payload: isChecked,
+      });
+    },
+    [dispatch]
+  );
+
+  return (
+    <Field className={props.className}>
+      <Field.Row>
+        <ToggleSwitch onChange={handleChange} checked={isSideBarEnabled} />
+        <Field.Label htmlFor='toggle-switch'>
+          {t('settings.options.sidebar.title')}
+        </Field.Label>
+      </Field.Row>
+      <Field.Row>
+        <Field.Hint>{t('settings.options.sidebar.description')}</Field.Hint>
+      </Field.Row>
+    </Field>
+  );
+};

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

@@ -0,0 +1,44 @@
+import { ToggleSwitch, Field } from '@rocket.chat/fuselage';
+import React, { ChangeEvent, Dispatch, FC, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { RootAction } from '../../../../store/actions';
+import { RootState } from '../../../../store/rootReducer';
+import { SETTINGS_SET_IS_TRAY_ICON_ENABLED_CHANGED } from '../../../actions';
+
+type Props = {
+  className?: string;
+};
+
+export const TrayIcon: FC<Props> = (props) => {
+  const isTrayIconEnabled = useSelector(
+    ({ isTrayIconEnabled }: RootState) => isTrayIconEnabled
+  );
+  const dispatch = useDispatch<Dispatch<RootAction>>();
+  const { t } = useTranslation();
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const isChecked = event.currentTarget.checked;
+      dispatch({
+        type: SETTINGS_SET_IS_TRAY_ICON_ENABLED_CHANGED,
+        payload: isChecked,
+      });
+    },
+    [dispatch]
+  );
+
+  return (
+    <Field className={props.className}>
+      <Field.Row>
+        <ToggleSwitch onChange={handleChange} checked={isTrayIconEnabled} />
+        <Field.Label htmlFor='toggle-switch'>
+          {t('settings.options.trayIcon.title')}
+        </Field.Label>
+      </Field.Row>
+      <Field.Row>
+        <Field.Hint>{t('settings.options.trayIcon.description')}</Field.Hint>
+      </Field.Row>
+    </Field>
+  );
+};

src/ui/reducers/isMenuBarEnabled.ts

@@ -2,20 +2,24 @@ import { Reducer } from 'redux';
 
 import { APP_SETTINGS_LOADED } from '../../app/actions';
 import { ActionOf } from '../../store/actions';
-import { MENU_BAR_TOGGLE_IS_MENU_BAR_ENABLED_CLICKED } from '../actions';
+import {
+  MENU_BAR_TOGGLE_IS_MENU_BAR_ENABLED_CLICKED,
+  SETTINGS_SET_IS_MENU_BAR_ENABLED_CHANGED,
+} from '../actions';
 
 type IsMenuBarEnabledAction =
   | ActionOf<typeof MENU_BAR_TOGGLE_IS_MENU_BAR_ENABLED_CLICKED>
+  | ActionOf<typeof SETTINGS_SET_IS_MENU_BAR_ENABLED_CHANGED>
   | ActionOf<typeof APP_SETTINGS_LOADED>;
 
 export const isMenuBarEnabled: Reducer<boolean, IsMenuBarEnabledAction> = (
   state = true,
   action
 ) => {
   switch (action.type) {
-    case MENU_BAR_TOGGLE_IS_MENU_BAR_ENABLED_CLICKED: {
+    case SETTINGS_SET_IS_MENU_BAR_ENABLED_CHANGED:
+    case MENU_BAR_TOGGLE_IS_MENU_BAR_ENABLED_CLICKED:
       return action.payload;
-    }
 
     case APP_SETTINGS_LOADED: {
       const { isMenuBarEnabled = state } = action.payload;

src/ui/reducers/isSideBarEnabled.ts

@@ -2,17 +2,22 @@ import { Reducer } from 'redux';
 
 import { APP_SETTINGS_LOADED } from '../../app/actions';
 import { ActionOf } from '../../store/actions';
-import { MENU_BAR_TOGGLE_IS_SIDE_BAR_ENABLED_CLICKED } from '../actions';
+import {
+  MENU_BAR_TOGGLE_IS_SIDE_BAR_ENABLED_CLICKED,
+  SETTINGS_SET_IS_SIDE_BAR_ENABLED_CHANGED,
+} from '../actions';
 
 type IsSideBarEnabledAction =
   | ActionOf<typeof MENU_BAR_TOGGLE_IS_SIDE_BAR_ENABLED_CLICKED>
+  | ActionOf<typeof SETTINGS_SET_IS_SIDE_BAR_ENABLED_CHANGED>
   | ActionOf<typeof APP_SETTINGS_LOADED>;
 
 export const isSideBarEnabled: Reducer<boolean, IsSideBarEnabledAction> = (
   state = true,
   action
 ) => {
   switch (action.type) {
+    case SETTINGS_SET_IS_SIDE_BAR_ENABLED_CHANGED:
     case MENU_BAR_TOGGLE_IS_SIDE_BAR_ENABLED_CLICKED:
       return action.payload;
 

src/ui/reducers/isTrayIconEnabled.ts

@@ -2,20 +2,24 @@ import { Reducer } from 'redux';
 
 import { APP_SETTINGS_LOADED } from '../../app/actions';
 import { ActionOf } from '../../store/actions';
-import { MENU_BAR_TOGGLE_IS_TRAY_ICON_ENABLED_CLICKED } from '../actions';
+import {
+  MENU_BAR_TOGGLE_IS_TRAY_ICON_ENABLED_CLICKED,
+  SETTINGS_SET_IS_TRAY_ICON_ENABLED_CHANGED,
+} from '../actions';
 
 type IsTrayIconEnabledAction =
   | ActionOf<typeof MENU_BAR_TOGGLE_IS_TRAY_ICON_ENABLED_CLICKED>
+  | ActionOf<typeof SETTINGS_SET_IS_TRAY_ICON_ENABLED_CHANGED>
   | ActionOf<typeof APP_SETTINGS_LOADED>;
 
 export const isTrayIconEnabled: Reducer<boolean, IsTrayIconEnabledAction> = (
   state = process.platform !== 'linux',
   action
 ) => {
   switch (action.type) {
-    case MENU_BAR_TOGGLE_IS_TRAY_ICON_ENABLED_CLICKED: {
+    case SETTINGS_SET_IS_TRAY_ICON_ENABLED_CHANGED:
+    case MENU_BAR_TOGGLE_IS_TRAY_ICON_ENABLED_CLICKED:
       return action.payload;
-    }
 
     case APP_SETTINGS_LOADED: {
       const { isTrayIconEnabled = state } = action.payload;