Move interface settings to new settings view

5 files changed, 246 insertions, 7 deletions

diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index 5b866bb799..ddc0ba22ce 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -573,11 +573,11 @@ export default class AppRenderer {
     loadTranslations(relayLocations, translations.locale, translations.relayLocations);
   }
 
-  public getPreferredLocaleDisplayName(localeCode: string): string {
+  public getPreferredLocaleDisplayName = (localeCode: string): string => {
     const preferredLocale = this.getPreferredLocaleList().find((item) => item.code === localeCode);
 
     return preferredLocale ? preferredLocale.name : '';
-  }
+  };
 
   public setDisplayedChangelog = (): void => {
     IpcRendererEventChannel.currentVersion.displayedChangelog();
diff --git a/gui/src/renderer/components/AppRouter.tsx b/gui/src/renderer/components/AppRouter.tsx
index 509cc03c33..186bf069b9 100644
--- a/gui/src/renderer/components/AppRouter.tsx
+++ b/gui/src/renderer/components/AppRouter.tsx
@@ -6,7 +6,6 @@ import AccountPage from '../containers/AccountPage';
 import AdvancedSettingsPage from '../containers/AdvancedSettingsPage';
 import LoginPage from '../containers/LoginPage';
 import OpenVPNSettingsPage from '../containers/OpenVPNSettingsPage';
-import PreferencesPage from '../containers/PreferencesPage';
 import ProblemReportPage from '../containers/ProblemReportPage';
 import SelectLanguagePage from '../containers/SelectLanguagePage';
 import SelectLocationPage from '../containers/SelectLocationPage';
@@ -24,6 +23,7 @@ import {
 } from './ExpiredAccountAddTime';
 import Filter from './Filter';
 import Focus, { IFocusHandle } from './Focus';
+import InterfaceSettings from './InterfaceSettings';
 import Launch from './Launch';
 import MainView from './MainView';
 import SplitTunnelingSettings from './SplitTunnelingSettings';
@@ -90,7 +90,7 @@ class AppRouter extends React.Component<IHistoryProps & IAppContext, IAppRoutesS
               <Route exact path={RoutePath.settings} component={SettingsPage} />
               <Route exact path={RoutePath.selectLanguage} component={SelectLanguagePage} />
               <Route exact path={RoutePath.accountSettings} component={AccountPage} />
-              <Route exact path={RoutePath.preferences} component={PreferencesPage} />
+              <Route exact path={RoutePath.interfaceSettings} component={InterfaceSettings} />
               <Route exact path={RoutePath.advancedSettings} component={AdvancedSettingsPage} />
               <Route exact path={RoutePath.wireguardSettings} component={WireguardSettingsPage} />
               <Route exact path={RoutePath.openVpnSettings} component={OpenVPNSettingsPage} />
diff --git a/gui/src/renderer/components/InterfaceSettings.tsx b/gui/src/renderer/components/InterfaceSettings.tsx
new file mode 100644
index 0000000000..bc7f823e7c
--- /dev/null
+++ b/gui/src/renderer/components/InterfaceSettings.tsx
@@ -0,0 +1,240 @@
+import { useCallback } from 'react';
+import styled from 'styled-components';
+
+import { colors } from '../../config.json';
+import { messages } from '../../shared/gettext';
+import { useAppContext } from '../context';
+import { useHistory } from '../lib/history';
+import { RoutePath } from '../lib/routes';
+import { useSelector } from '../redux/store';
+import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from './AriaGroup';
+import * as Cell from './cell';
+import { BackAction } from './KeyboardNavigation';
+import { Container, Layout } from './Layout';
+import {
+  NavigationBar,
+  NavigationContainer,
+  NavigationItems,
+  NavigationScrollbars,
+  TitleBarItem,
+} from './NavigationBar';
+import SettingsHeader, { HeaderTitle } from './SettingsHeader';
+
+const StyledContainer = styled(Container)({
+  backgroundColor: colors.darkBlue,
+});
+
+const StyledContent = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  marginBottom: '2px',
+});
+
+const StyledCellIcon = styled(Cell.UntintedIcon)({
+  marginRight: '8px',
+});
+
+export default function InterfaceSettings() {
+  const { pop } = useHistory();
+  const unpinnedWindow = useSelector((state) => state.settings.guiSettings.unpinnedWindow);
+
+  return (
+    <BackAction action={pop}>
+      <Layout>
+        <StyledContainer>
+          <NavigationContainer>
+            <NavigationBar>
+              <NavigationItems>
+                <TitleBarItem>
+                  {
+                    // TRANSLATORS: Title label in navigation bar
+                    messages.pgettext('interface-settings-view', 'Interface settings')
+                  }
+                </TitleBarItem>
+              </NavigationItems>
+            </NavigationBar>
+
+            <NavigationScrollbars>
+              <SettingsHeader>
+                <HeaderTitle>
+                  {messages.pgettext('interface-settings-view', 'Interface settings')}
+                </HeaderTitle>
+              </SettingsHeader>
+
+              <StyledContent>
+                <Cell.Group>
+                  <NotificationsSetting />
+                </Cell.Group>
+                <Cell.Group>
+                  <MonochromaticTrayIconSetting />
+                </Cell.Group>
+
+                <Cell.Group>
+                  <LanguageButton />
+                </Cell.Group>
+
+                {(window.env.platform === 'win32' ||
+                  (window.env.platform === 'darwin' && window.env.development)) && (
+                  <Cell.Group>
+                    <UnpinnedWindowSetting />
+                  </Cell.Group>
+                )}
+
+                {unpinnedWindow && (
+                  <Cell.Group>
+                    <StartMinimizedSetting />
+                  </Cell.Group>
+                )}
+              </StyledContent>
+            </NavigationScrollbars>
+          </NavigationContainer>
+        </StyledContainer>
+      </Layout>
+    </BackAction>
+  );
+}
+
+function NotificationsSetting() {
+  const enableSystemNotifications = useSelector(
+    (state) => state.settings.guiSettings.enableSystemNotifications,
+  );
+  const { setEnableSystemNotifications } = useAppContext();
+
+  return (
+    <AriaInputGroup>
+      <Cell.Container>
+        <AriaLabel>
+          <Cell.InputLabel>
+            {messages.pgettext('interface-settings-view', 'Notifications')}
+          </Cell.InputLabel>
+        </AriaLabel>
+        <AriaInput>
+          <Cell.Switch isOn={enableSystemNotifications} onChange={setEnableSystemNotifications} />
+        </AriaInput>
+      </Cell.Container>
+      <Cell.Footer>
+        <AriaDescription>
+          <Cell.FooterText>
+            {messages.pgettext(
+              'interface-settings-view',
+              'Enable or disable system notifications. The critical notifications will always be displayed.',
+            )}
+          </Cell.FooterText>
+        </AriaDescription>
+      </Cell.Footer>
+    </AriaInputGroup>
+  );
+}
+
+function MonochromaticTrayIconSetting() {
+  const monochromaticIcon = useSelector((state) => state.settings.guiSettings.monochromaticIcon);
+  const { setMonochromaticIcon } = useAppContext();
+
+  return (
+    <AriaInputGroup>
+      <Cell.Container>
+        <AriaLabel>
+          <Cell.InputLabel>
+            {messages.pgettext('interface-settings-view', 'Monochromatic tray icon')}
+          </Cell.InputLabel>
+        </AriaLabel>
+        <AriaInput>
+          <Cell.Switch isOn={monochromaticIcon} onChange={setMonochromaticIcon} />
+        </AriaInput>
+      </Cell.Container>
+      <Cell.Footer>
+        <AriaDescription>
+          <Cell.FooterText>
+            {messages.pgettext(
+              'interface-settings-view',
+              'Use a monochromatic tray icon instead of a colored one.',
+            )}
+          </Cell.FooterText>
+        </AriaDescription>
+      </Cell.Footer>
+    </AriaInputGroup>
+  );
+}
+
+function UnpinnedWindowSetting() {
+  const unpinnedWindow = useSelector((state) => state.settings.guiSettings.unpinnedWindow);
+  const { setUnpinnedWindow } = useAppContext();
+
+  return (
+    <AriaInputGroup>
+      <Cell.Container>
+        <AriaLabel>
+          <Cell.InputLabel>
+            {messages.pgettext('interface-settings-view', 'Unpin app from taskbar')}
+          </Cell.InputLabel>
+        </AriaLabel>
+        <AriaInput>
+          <Cell.Switch isOn={unpinnedWindow} onChange={setUnpinnedWindow} />
+        </AriaInput>
+      </Cell.Container>
+      <Cell.Footer>
+        <AriaDescription>
+          <Cell.FooterText>
+            {messages.pgettext(
+              'interface-settings-view',
+              'Enable to move the app around as a free-standing window.',
+            )}
+          </Cell.FooterText>
+        </AriaDescription>
+      </Cell.Footer>
+    </AriaInputGroup>
+  );
+}
+
+function StartMinimizedSetting() {
+  const startMinimized = useSelector((state) => state.settings.guiSettings.startMinimized);
+  const { setStartMinimized } = useAppContext();
+
+  return (
+    <AriaInputGroup>
+      <Cell.Container>
+        <AriaLabel>
+          <Cell.InputLabel>
+            {messages.pgettext('interface-settings-view', 'Start minimized')}
+          </Cell.InputLabel>
+        </AriaLabel>
+        <AriaInput>
+          <Cell.Switch isOn={startMinimized} onChange={setStartMinimized} />
+        </AriaInput>
+      </Cell.Container>
+      <Cell.Footer>
+        <AriaDescription>
+          <Cell.FooterText>
+            {messages.pgettext(
+              'interface-settings-view',
+              'Show only the tray icon when the app starts.',
+            )}
+          </Cell.FooterText>
+        </AriaDescription>
+      </Cell.Footer>
+    </AriaInputGroup>
+  );
+}
+
+function LanguageButton() {
+  const history = useHistory();
+  const { getPreferredLocaleDisplayName } = useAppContext();
+  const preferredLocale = useSelector((state) => state.settings.guiSettings.preferredLocale);
+  const localeDisplayName = getPreferredLocaleDisplayName(preferredLocale);
+
+  const navigate = useCallback(() => history.push(RoutePath.selectLanguage), [history]);
+
+  return (
+    <Cell.CellNavigationButton onClick={navigate}>
+      <StyledCellIcon width={24} height={24} source="icon-language" />
+      <Cell.Label>
+        {
+          // TRANSLATORS: Navigation button to the 'Language' settings view
+          messages.pgettext('interface-settings-view', 'Language')
+        }
+      </Cell.Label>
+      <Cell.SubText>{localeDisplayName}</Cell.SubText>
+    </Cell.CellNavigationButton>
+  );
+}
diff --git a/gui/src/renderer/lib/routes.ts b/gui/src/renderer/lib/routes.ts
index 66d831b781..43c3c9b4fb 100644
--- a/gui/src/renderer/lib/routes.ts
+++ b/gui/src/renderer/lib/routes.ts
@@ -15,7 +15,7 @@ export enum RoutePath {
   settings = '/settings',
   selectLanguage = '/settings/language',
   accountSettings = '/settings/account',
-  preferences = '/settings/preferences',
+  interfaceSettings = '/settings/interface',
   advancedSettings = '/settings/advanced',
   wireguardSettings = '/settings/advanced/wireguard',
   openVpnSettings = '/settings/advanced/openvpn',
diff --git a/gui/src/shared/localization-contexts.ts b/gui/src/shared/localization-contexts.ts
index e03c679b61..336c0c9fe1 100644
--- a/gui/src/shared/localization-contexts.ts
+++ b/gui/src/shared/localization-contexts.ts
@@ -22,8 +22,7 @@ export type LocalizationContexts =
   | 'account-view'
   | 'redeem-voucher-view'
   | 'redeem-voucher-alert'
-  | 'preferences-view'
-  | 'preferences-nav'
+  | 'interface-settings-view'
   | 'advanced-settings-view'
   | 'advanced-settings-nav'
   | 'wireguard-settings-view'