feat: Add "Appearance" pane to preferences (#816)

Co-authored-by: Mo <mo@standardnotes.com>

app/assets/javascripts/preferences/PreferencesMenu.ts

@@ -52,6 +52,7 @@ const PREFERENCES_MENU_ITEMS: PreferencesMenuItem[] = [
 const READY_PREFERENCES_MENU_ITEMS: PreferencesMenuItem[] = [
   { id: 'account', label: 'Account', icon: 'user' },
   { id: 'general', label: 'General', icon: 'settings' },
+  { id: 'appearance', label: 'Appearance', icon: 'themes' },
   { id: 'security', label: 'Security', icon: 'security' },
   { id: 'backups', label: 'Backups', icon: 'restore' },
   { id: 'listed', label: 'Listed', icon: 'listed' },

app/assets/javascripts/preferences/PreferencesView.tsx

@@ -18,6 +18,7 @@ import { AppState } from '@/ui_models/app_state';
 import { useEffect, useMemo } from 'preact/hooks';
 import { ExtensionPane } from './panes/ExtensionPane';
 import { Backups } from '@/preferences/panes/Backups';
+import { Appearance } from './panes/Appearance';
 
 interface PreferencesProps extends MfaProps {
   application: WebApplication;
@@ -42,7 +43,7 @@ const PaneSelector: FunctionComponent<
         <AccountPreferences application={application} appState={appState} />
       );
     case 'appearance':
-      return null;
+      return <Appearance application={application} />;
     case 'security':
       return (
         <Security

app/assets/javascripts/preferences/panes/Appearance.tsx

@@ -0,0 +1,196 @@
+import { Dropdown, DropdownItem } from '@/components/Dropdown';
+import { PremiumModalProvider, usePremiumModal } from '@/components/Premium';
+import { sortThemes } from '@/components/QuickSettingsMenu/QuickSettingsMenu';
+import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
+import { Switch } from '@/components/Switch';
+import { WebApplication } from '@/ui_models/application';
+import { Features } from '@standardnotes/features';
+import {
+  ContentType,
+  FeatureIdentifier,
+  FeatureStatus,
+  PrefKey,
+  SNTheme,
+} from '@standardnotes/snjs';
+import { observer } from 'mobx-react-lite';
+import { FunctionComponent } from 'preact';
+import { useEffect, useState } from 'preact/hooks';
+import {
+  PreferencesGroup,
+  PreferencesPane,
+  PreferencesSegment,
+  Subtitle,
+  Title,
+  Text,
+} from '../components';
+
+type Props = {
+  application: WebApplication;
+};
+
+const AppearancePane: FunctionComponent<Props> = observer(({ application }) => {
+  const premiumModal = usePremiumModal();
+  const isEntitledToMidnightTheme =
+    application.getFeatureStatus(FeatureIdentifier.MidnightTheme) ===
+    FeatureStatus.Entitled;
+
+  const [themeItems, setThemeItems] = useState<DropdownItem[]>([]);
+  const [autoLightTheme, setAutoLightTheme] = useState<string>(
+    () =>
+      application.getPreference(
+        PrefKey.AutoLightThemeIdentifier,
+        'Default'
+      ) as string
+  );
+  const [autoDarkTheme, setAutoDarkTheme] = useState<string>(
+    () =>
+      application.getPreference(
+        PrefKey.AutoDarkThemeIdentifier,
+        isEntitledToMidnightTheme ? FeatureIdentifier.MidnightTheme : 'Default'
+      ) as string
+  );
+  const [useDeviceSettings, setUseDeviceSettings] = useState(
+    () =>
+      application.getPreference(PrefKey.UseSystemColorScheme, false) as boolean
+  );
+
+  useEffect(() => {
+    const themesAsItems: DropdownItem[] = (
+      application.getDisplayableItems(ContentType.Theme) as SNTheme[]
+    )
+      .filter((theme) => !theme.isLayerable())
+      .sort(sortThemes)
+      .map((theme) => {
+        return {
+          label: theme.name,
+          value: theme.identifier as string,
+        };
+      });
+
+    Features.filter(
+      (feature) =>
+        feature.content_type === ContentType.Theme && !feature.layerable
+    ).forEach((theme) => {
+      if (
+        themesAsItems.findIndex((item) => item.value === theme.identifier) ===
+        -1
+      ) {
+        themesAsItems.push({
+          label: theme.name as string,
+          value: theme.identifier,
+          icon: 'premium-feature',
+        });
+      }
+    });
+
+    themesAsItems.unshift({
+      label: 'Default',
+      value: 'Default',
+    });
+
+    setThemeItems(themesAsItems);
+  }, [application]);
+
+  const toggleUseDeviceSettings = () => {
+    application.setPreference(PrefKey.UseSystemColorScheme, !useDeviceSettings);
+    if (!application.getPreference(PrefKey.AutoLightThemeIdentifier)) {
+      application.setPreference(
+        PrefKey.AutoLightThemeIdentifier,
+        autoLightTheme as FeatureIdentifier
+      );
+    }
+    if (!application.getPreference(PrefKey.AutoDarkThemeIdentifier)) {
+      application.setPreference(
+        PrefKey.AutoDarkThemeIdentifier,
+        autoDarkTheme as FeatureIdentifier
+      );
+    }
+    setUseDeviceSettings(!useDeviceSettings);
+  };
+
+  const changeAutoLightTheme = (value: string, item: DropdownItem) => {
+    if (item.icon === 'premium-feature') {
+      premiumModal.activate(`${item.label} theme`);
+    } else {
+      application.setPreference(
+        PrefKey.AutoLightThemeIdentifier,
+        value as FeatureIdentifier
+      );
+      setAutoLightTheme(value);
+    }
+  };
+
+  const changeAutoDarkTheme = (value: string, item: DropdownItem) => {
+    if (item.icon === 'premium-feature') {
+      premiumModal.activate(`${item.label} theme`);
+    } else {
+      application.setPreference(
+        PrefKey.AutoDarkThemeIdentifier,
+        value as FeatureIdentifier
+      );
+      setAutoDarkTheme(value);
+    }
+  };
+
+  return (
+    <PreferencesPane>
+      <PreferencesGroup>
+        <PreferencesSegment>
+          <Title>Themes</Title>
+          <div className="mt-2">
+            <div className="flex items-center justify-between">
+              <div className="flex flex-col">
+                <Subtitle>Use system color scheme</Subtitle>
+                <Text>
+                  Automatically change active theme based on your system settings.
+                </Text>
+              </div>
+              <Switch
+                onChange={toggleUseDeviceSettings}
+                checked={useDeviceSettings}
+              />
+            </div>
+            <HorizontalSeparator classes="mt-5 mb-3" />
+            <div>
+              <Subtitle>Automatic Light Theme</Subtitle>
+              <Text>Theme to be used for system light mode:</Text>
+              <div className="mt-2">
+                <Dropdown
+                  id="auto-light-theme-dropdown"
+                  label="Select the automatic light theme"
+                  items={themeItems}
+                  value={autoLightTheme}
+                  onChange={changeAutoLightTheme}
+                  disabled={!useDeviceSettings}
+                />
+              </div>
+            </div>
+            <HorizontalSeparator classes="mt-5 mb-3" />
+            <div>
+              <Subtitle>Automatic Dark Theme</Subtitle>
+              <Text>Theme to be used for system dark mode:</Text>
+              <div className="mt-2">
+                <Dropdown
+                  id="auto-dark-theme-dropdown"
+                  label="Select the automatic dark theme"
+                  items={themeItems}
+                  value={autoDarkTheme}
+                  onChange={changeAutoDarkTheme}
+                  disabled={!useDeviceSettings}
+                />
+              </div>
+            </div>
+          </div>
+        </PreferencesSegment>
+      </PreferencesGroup>
+    </PreferencesPane>
+  );
+});
+
+export const Appearance: FunctionComponent<Props> = observer(
+  ({ application }) => (
+    <PremiumModalProvider state={application.getAppState().features}>
+      <AppearancePane application={application} />
+    </PremiumModalProvider>
+  )
+);

app/assets/javascripts/preferences/panes/backups-segments/EmailBackups.tsx

@@ -157,7 +157,7 @@ export const EmailBackups = observer(({ application }: Props) => {
                 id="def-editor-dropdown"
                 label="Select email frequency"
                 items={emailFrequencyOptions}
-                defaultValue={emailFrequency}
+                value={emailFrequency}
                 onChange={(item) => {
                   updateEmailFrequency(item as EmailBackupFrequency);
                 }}

app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx

@@ -84,7 +84,7 @@ const getDefaultEditor = (application: WebApplication) => {
 
 export const Defaults: FunctionComponent<Props> = ({ application }) => {
   const [editorItems, setEditorItems] = useState<DropdownItem[]>([]);
-  const [defaultEditorValue] = useState(
+  const [defaultEditorValue, setDefaultEditorValue] = useState(
     () =>
       getDefaultEditor(application)?.package_info?.identifier || 'plain-editor'
   );
@@ -128,6 +128,7 @@ export const Defaults: FunctionComponent<Props> = ({ application }) => {
   }, [application]);
 
   const setDefaultEditor = (value: string) => {
+    setDefaultEditorValue(value as FeatureIdentifier);
     const editors = application.componentManager.componentsForArea(
       ComponentArea.Editor
     );
@@ -155,7 +156,7 @@ export const Defaults: FunctionComponent<Props> = ({ application }) => {
               id="def-editor-dropdown"
               label="Select the default editor"
               items={editorItems}
-              defaultValue={defaultEditorValue}
+              value={defaultEditorValue}
               onChange={setDefaultEditor}
             />
           </div>