From 139853a491c30dd2190d1e23950fc3b308d4bc11 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Tue, 8 Feb 2022 20:25:12 +0530
Subject: [PATCH] feat: show all themes and premium icon if not entitled (#854)

---
 .../components/ApplicationView.tsx            | 105 +++---
 .../javascripts/components/Navigation.tsx     |  63 ++--
 .../NotesOptions/ChangeEditorOption.tsx       |  19 +-
 .../QuickSettingsMenu/FocusModeSwitch.tsx     |  15 +-
 .../QuickSettingsMenu/QuickSettingsMenu.tsx   | 155 +++++----
 .../QuickSettingsMenu/ThemesMenuButton.tsx    |  76 +++--
 .../preferences/panes/Appearance.tsx          | 312 +++++++++---------
 7 files changed, 405 insertions(+), 340 deletions(-)

diff --git a/app/assets/javascripts/components/ApplicationView.tsx b/app/assets/javascripts/components/ApplicationView.tsx
index 74fa60157..95c955501 100644
--- a/app/assets/javascripts/components/ApplicationView.tsx
+++ b/app/assets/javascripts/components/ApplicationView.tsx
@@ -23,6 +23,7 @@ import { NotesContextMenu } from '@/components/NotesContextMenu';
 import { PurchaseFlowWrapper } from '@/purchaseFlow/PurchaseFlowWrapper';
 import { render } from 'preact';
 import { PermissionsModal } from './PermissionsModal';
+import { PremiumModalProvider } from './Premium';
 
 type Props = {
   application: WebApplication;
@@ -196,63 +197,65 @@ export class ApplicationView extends PureComponent<Props, State> {
 
   render() {
     return (
-      <div className={this.platformString + ' main-ui-view sn-component'}>
-        {!this.state.needsUnlock && this.state.launched && (
-          <div
-            id="app"
-            className={this.state.appClass + ' app app-column-container'}
-          >
-            <Navigation application={this.application} />
+      <PremiumModalProvider state={this.appState.features}>
+        <div className={this.platformString + ' main-ui-view sn-component'}>
+          {!this.state.needsUnlock && this.state.launched && (
+            <div
+              id="app"
+              className={this.state.appClass + ' app app-column-container'}
+            >
+              <Navigation application={this.application} />
 
-            <NotesView
-              application={this.application}
-              appState={this.appState}
-            />
-
-            <NoteGroupView application={this.application} />
-          </div>
-        )}
-
-        {!this.state.needsUnlock && this.state.launched && (
-          <Footer
-            application={this.application}
-            applicationGroup={this.props.mainApplicationGroup}
-          />
-        )}
-
-        <SessionsModal
-          application={this.application}
-          appState={this.appState}
-        />
-
-        <PreferencesViewWrapper
-          appState={this.appState}
-          application={this.application}
-        />
-
-        {this.state.challenges.map((challenge) => {
-          return (
-            <div className="sk-modal">
-              <ChallengeModal
-                key={challenge.id}
+              <NotesView
                 application={this.application}
-                challenge={challenge}
-                onDismiss={this.removeChallenge}
+                appState={this.appState}
               />
+
+              <NoteGroupView application={this.application} />
             </div>
-          );
-        })}
+          )}
 
-        <NotesContextMenu
-          application={this.application}
-          appState={this.appState}
-        />
+          {!this.state.needsUnlock && this.state.launched && (
+            <Footer
+              application={this.application}
+              applicationGroup={this.props.mainApplicationGroup}
+            />
+          )}
 
-        <PurchaseFlowWrapper
-          application={this.application}
-          appState={this.appState}
-        />
-      </div>
+          <SessionsModal
+            application={this.application}
+            appState={this.appState}
+          />
+
+          <PreferencesViewWrapper
+            appState={this.appState}
+            application={this.application}
+          />
+
+          {this.state.challenges.map((challenge) => {
+            return (
+              <div className="sk-modal">
+                <ChallengeModal
+                  key={challenge.id}
+                  application={this.application}
+                  challenge={challenge}
+                  onDismiss={this.removeChallenge}
+                />
+              </div>
+            );
+          })}
+
+          <NotesContextMenu
+            application={this.application}
+            appState={this.appState}
+          />
+
+          <PurchaseFlowWrapper
+            application={this.application}
+            appState={this.appState}
+          />
+        </div>
+      </PremiumModalProvider>
     );
   }
 }
diff --git a/app/assets/javascripts/components/Navigation.tsx b/app/assets/javascripts/components/Navigation.tsx
index c97c790cc..71f0e29f1 100644
--- a/app/assets/javascripts/components/Navigation.tsx
+++ b/app/assets/javascripts/components/Navigation.tsx
@@ -6,7 +6,6 @@ import { ApplicationEvent, PrefKey } from '@standardnotes/snjs';
 import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';
 import { useCallback, useEffect, useMemo, useState } from 'preact/hooks';
-import { PremiumModalProvider } from './Premium';
 import {
   PanelSide,
   ResizeFinishCallback,
@@ -51,42 +50,40 @@ export const Navigation: FunctionComponent<Props> = observer(
     }, [appState]);
 
     return (
-      <PremiumModalProvider state={appState.features}>
-        <div
-          id="navigation"
-          className="sn-component section app-column app-column-first"
-          data-aria-label="Navigation"
-          ref={setRef}
-        >
-          <div id="navigation-content" className="content">
-            <div className="section-title-bar">
-              <div className="section-title-bar-header">
-                <div className="sk-h3 title">
-                  <span className="sk-bold">Views</span>
-                </div>
+      <div
+        id="navigation"
+        className="sn-component section app-column app-column-first"
+        data-aria-label="Navigation"
+        ref={setRef}
+      >
+        <div id="navigation-content" className="content">
+          <div className="section-title-bar">
+            <div className="section-title-bar-header">
+              <div className="sk-h3 title">
+                <span className="sk-bold">Views</span>
               </div>
             </div>
-            <div className="scrollable">
-              <SmartTagsSection appState={appState} />
-              <TagsSection appState={appState} />
-            </div>
           </div>
-          {ref && (
-            <PanelResizer
-              collapsable={true}
-              defaultWidth={150}
-              panel={ref}
-              hoverable={true}
-              side={PanelSide.Right}
-              type={PanelResizeType.WidthOnly}
-              resizeFinishCallback={panelResizeFinishCallback}
-              widthEventCallback={panelWidthEventCallback}
-              width={panelWidth}
-              left={0}
-            />
-          )}
+          <div className="scrollable">
+            <SmartTagsSection appState={appState} />
+            <TagsSection appState={appState} />
+          </div>
         </div>
-      </PremiumModalProvider>
+        {ref && (
+          <PanelResizer
+            collapsable={true}
+            defaultWidth={150}
+            panel={ref}
+            hoverable={true}
+            side={PanelSide.Right}
+            type={PanelResizeType.WidthOnly}
+            resizeFinishCallback={panelResizeFinishCallback}
+            widthEventCallback={panelWidthEventCallback}
+            width={panelWidth}
+            left={0}
+          />
+        )}
+      </div>
     );
   }
 );
diff --git a/app/assets/javascripts/components/NotesOptions/ChangeEditorOption.tsx b/app/assets/javascripts/components/NotesOptions/ChangeEditorOption.tsx
index 5b0f01b55..d95ffa3ca 100644
--- a/app/assets/javascripts/components/NotesOptions/ChangeEditorOption.tsx
+++ b/app/assets/javascripts/components/NotesOptions/ChangeEditorOption.tsx
@@ -29,7 +29,6 @@ import {
 import { FunctionComponent } from 'preact';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { Icon } from '../Icon';
-import { PremiumModalProvider } from '../Premium';
 import { createEditorMenuGroups } from './changeEditor/createEditorMenuGroups';
 import { EditorAccordionMenu } from './changeEditor/EditorAccordionMenu';
 
@@ -273,16 +272,14 @@ export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
         }}
         className="sn-dropdown flex flex-col max-h-120 min-w-68 fixed overflow-y-auto"
       >
-        <PremiumModalProvider state={appState.features}>
-          <EditorAccordionMenu
-            application={application}
-            closeOnBlur={closeOnBlur}
-            currentEditor={selectedEditor}
-            groups={editorMenuGroups}
-            isOpen={changeEditorMenuOpen}
-            selectComponent={selectComponent}
-          />
-        </PremiumModalProvider>
+        <EditorAccordionMenu
+          application={application}
+          closeOnBlur={closeOnBlur}
+          currentEditor={selectedEditor}
+          groups={editorMenuGroups}
+          isOpen={changeEditorMenuOpen}
+          selectComponent={selectComponent}
+        />
       </DisclosurePanel>
     </Disclosure>
   );
diff --git a/app/assets/javascripts/components/QuickSettingsMenu/FocusModeSwitch.tsx b/app/assets/javascripts/components/QuickSettingsMenu/FocusModeSwitch.tsx
index cfb696a9f..102e07776 100644
--- a/app/assets/javascripts/components/QuickSettingsMenu/FocusModeSwitch.tsx
+++ b/app/assets/javascripts/components/QuickSettingsMenu/FocusModeSwitch.tsx
@@ -1,10 +1,10 @@
 import { WebApplication } from '@/ui_models/application';
 import { FeatureStatus, FeatureIdentifier } from '@standardnotes/snjs';
 import { FunctionComponent } from 'preact';
-import { useCallback, useState } from 'preact/hooks';
+import { useCallback } from 'preact/hooks';
 import { JSXInternal } from 'preact/src/jsx';
 import { Icon } from '../Icon';
-import { PremiumFeaturesModal } from '../PremiumFeaturesModal';
+import { usePremiumModal } from '../Premium';
 import { Switch } from '../Switch';
 
 type Props = {
@@ -20,7 +20,7 @@ export const FocusModeSwitch: FunctionComponent<Props> = ({
   onClose,
   isEnabled,
 }) => {
-  const [showUpgradeModal, setShowUpgradeModal] = useState(false);
+  const premiumModal = usePremiumModal();
   const isEntitled =
     application.getFeatureStatus(FeatureIdentifier.FocusMode) ===
     FeatureStatus.Entitled;
@@ -33,10 +33,10 @@ export const FocusModeSwitch: FunctionComponent<Props> = ({
         onToggle(!isEnabled);
         onClose();
       } else {
-        setShowUpgradeModal(true);
+        premiumModal.activate('Focused Writing');
       }
     },
-    [isEntitled, isEnabled, onToggle, setShowUpgradeModal, onClose]
+    [isEntitled, onToggle, isEnabled, onClose, premiumModal]
   );
 
   return (
@@ -57,11 +57,6 @@ export const FocusModeSwitch: FunctionComponent<Props> = ({
           </div>
         )}
       </button>
-      <PremiumFeaturesModal
-        showModal={showUpgradeModal}
-        featureName="Focus Mode"
-        onClose={() => setShowUpgradeModal(false)}
-      />
     </>
   );
 };
diff --git a/app/assets/javascripts/components/QuickSettingsMenu/QuickSettingsMenu.tsx b/app/assets/javascripts/components/QuickSettingsMenu/QuickSettingsMenu.tsx
index 4dcbe02ef..bd6692741 100644
--- a/app/assets/javascripts/components/QuickSettingsMenu/QuickSettingsMenu.tsx
+++ b/app/assets/javascripts/components/QuickSettingsMenu/QuickSettingsMenu.tsx
@@ -9,6 +9,7 @@ import {
   ComponentArea,
   ContentType,
   FeatureIdentifier,
+  Features,
   SNComponent,
   SNTheme,
 } from '@standardnotes/snjs';
@@ -31,6 +32,12 @@ const focusModeAnimationDuration = 1255;
 const MENU_CLASSNAME =
   'sn-menu-border sn-dropdown min-w-80 max-h-120 max-w-xs flex flex-col py-2 overflow-y-auto';
 
+export type ThemeItem = {
+  name: string;
+  identifier: FeatureIdentifier;
+  component?: SNTheme;
+};
+
 type MenuProps = {
   appState: AppState;
   application: WebApplication;
@@ -72,7 +79,7 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
       focusModeEnabled,
       setFocusModeEnabled,
     } = appState.quickSettingsMenu;
-    const [themes, setThemes] = useState<SNTheme[]>([]);
+    const [themes, setThemes] = useState<ThemeItem[]>([]);
     const [toggleableComponents, setToggleableComponents] = useState<
       SNComponent[]
     >([]);
@@ -96,12 +103,39 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
     }, [focusModeEnabled]);
 
     const reloadThemes = useCallback(() => {
-      const themes = application.getDisplayableItems(
-        ContentType.Theme
-      ) as SNTheme[];
-      setThemes(themes.sort(sortThemes));
+      const themes = (
+        application.getDisplayableItems(ContentType.Theme) as SNTheme[]
+      )
+        .sort(sortThemes)
+        .map((item) => {
+          return {
+            name: item.name,
+            identifier: item.identifier,
+            component: item,
+          };
+        }) as ThemeItem[];
+
+      Features.filter(
+        (feature) =>
+          feature.content_type === ContentType.Theme && !feature.layerable
+      ).forEach((theme) => {
+        if (
+          themes.findIndex((item) => item.identifier === theme.identifier) ===
+          -1
+        ) {
+          themes.push({
+            name: theme.name as string,
+            identifier: theme.identifier,
+          });
+        }
+      });
+
+      setThemes(themes);
+
       setDefaultThemeOn(
-        !themes.find((theme) => theme.active && !theme.isLayerable())
+        !themes
+          .map((item) => item?.component)
+          .find((theme) => theme?.active && !theme.isLayerable())
       );
     }, [application]);
 
@@ -117,6 +151,12 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
       setToggleableComponents(toggleableComponents);
     }, [application]);
 
+    useEffect(() => {
+      if (!themes.length) {
+        reloadThemes();
+      }
+    }, [reloadThemes, themes.length]);
+
     useEffect(() => {
       const cleanupItemStream = application.streamItems(
         ContentType.Theme,
@@ -153,10 +193,7 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
       prefsButtonRef.current?.focus();
     }, []);
 
-    const [closeOnBlur] = useCloseOnBlur(
-      themesMenuRef as any,
-      setThemesMenuOpen
-    );
+    const [closeOnBlur] = useCloseOnBlur(themesMenuRef, setThemesMenuOpen);
 
     const toggleThemesMenu = () => {
       if (!themesMenuOpen && themesButtonRef.current) {
@@ -224,9 +261,9 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
     };
 
     const toggleDefaultTheme = () => {
-      const activeTheme = themes.find(
-        (theme) => theme.active && !theme.isLayerable()
-      );
+      const activeTheme = themes
+        .map((item) => item.component)
+        .find((theme) => theme?.active && !theme.isLayerable());
       if (activeTheme) application.toggleTheme(activeTheme);
     };
 
@@ -244,56 +281,54 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
           <div className="px-3 mt-1 mb-2 font-semibold color-text uppercase">
             Quick Settings
           </div>
-          {themes && themes.length ? (
-            <Disclosure open={themesMenuOpen} onChange={toggleThemesMenu}>
-              <DisclosureButton
-                onKeyDown={handleBtnKeyDown}
+          <Disclosure open={themesMenuOpen} onChange={toggleThemesMenu}>
+            <DisclosureButton
+              onKeyDown={handleBtnKeyDown}
+              onBlur={closeOnBlur}
+              ref={themesButtonRef}
+              className="sn-dropdown-item justify-between focus:bg-info-backdrop focus:shadow-none"
+            >
+              <div className="flex items-center">
+                <Icon type="themes" className="color-neutral mr-2" />
+                Themes
+              </div>
+              <Icon type="chevron-right" className="color-neutral" />
+            </DisclosureButton>
+            <DisclosurePanel
+              onBlur={closeOnBlur}
+              ref={themesMenuRef}
+              onKeyDown={handlePanelKeyDown}
+              style={{
+                ...themesMenuPosition,
+              }}
+              className={`${MENU_CLASSNAME} fixed sn-dropdown--animated`}
+            >
+              <div className="px-3 my-1 font-semibold color-text uppercase">
+                Themes
+              </div>
+              <button
+                className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
+                onClick={toggleDefaultTheme}
                 onBlur={closeOnBlur}
-                ref={themesButtonRef}
-                className="sn-dropdown-item justify-between focus:bg-info-backdrop focus:shadow-none"
+                ref={defaultThemeButtonRef}
               >
-                <div className="flex items-center">
-                  <Icon type="themes" className="color-neutral mr-2" />
-                  Themes
-                </div>
-                <Icon type="chevron-right" className="color-neutral" />
-              </DisclosureButton>
-              <DisclosurePanel
-                onBlur={closeOnBlur}
-                ref={themesMenuRef}
-                onKeyDown={handlePanelKeyDown}
-                style={{
-                  ...themesMenuPosition,
-                }}
-                className={`${MENU_CLASSNAME} fixed sn-dropdown--animated`}
-              >
-                <div className="px-3 my-1 font-semibold color-text uppercase">
-                  Themes
-                </div>
-                <button
-                  className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
-                  onClick={toggleDefaultTheme}
+                <div
+                  className={`pseudo-radio-btn ${
+                    defaultThemeOn ? 'pseudo-radio-btn--checked' : ''
+                  } mr-2`}
+                ></div>
+                Default
+              </button>
+              {themes.map((theme) => (
+                <ThemesMenuButton
+                  item={theme}
+                  application={application}
+                  key={theme.component?.uuid ?? theme.identifier}
                   onBlur={closeOnBlur}
-                  ref={defaultThemeButtonRef}
-                >
-                  <div
-                    className={`pseudo-radio-btn ${
-                      defaultThemeOn ? 'pseudo-radio-btn--checked' : ''
-                    } mr-2`}
-                  ></div>
-                  Default
-                </button>
-                {themes.map((theme) => (
-                  <ThemesMenuButton
-                    theme={theme}
-                    application={application}
-                    key={theme.uuid}
-                    onBlur={closeOnBlur}
-                  />
-                ))}
-              </DisclosurePanel>
-            </Disclosure>
-          ) : null}
+                />
+              ))}
+            </DisclosurePanel>
+          </Disclosure>
           {toggleableComponents.map((component) => (
             <button
               className="sn-dropdown-item justify-between focus:bg-info-backdrop focus:shadow-none"
diff --git a/app/assets/javascripts/components/QuickSettingsMenu/ThemesMenuButton.tsx b/app/assets/javascripts/components/QuickSettingsMenu/ThemesMenuButton.tsx
index 949307fbf..b874aa1b2 100644
--- a/app/assets/javascripts/components/QuickSettingsMenu/ThemesMenuButton.tsx
+++ b/app/assets/javascripts/components/QuickSettingsMenu/ThemesMenuButton.tsx
@@ -1,58 +1,94 @@
 import { WebApplication } from '@/ui_models/application';
-import { SNTheme } from '@standardnotes/snjs';
+import { FeatureStatus } from '@standardnotes/snjs';
 import { FunctionComponent } from 'preact';
+import { useMemo } from 'preact/hooks';
 import { JSXInternal } from 'preact/src/jsx';
+import { Icon } from '../Icon';
+import { usePremiumModal } from '../Premium';
 import { Switch } from '../Switch';
+import { ThemeItem } from './QuickSettingsMenu';
 
 type Props = {
-  theme: SNTheme;
+  item: ThemeItem;
   application: WebApplication;
   onBlur: (event: { relatedTarget: EventTarget | null }) => void;
 };
 
 export const ThemesMenuButton: FunctionComponent<Props> = ({
   application,
-  theme,
+  item,
   onBlur,
 }) => {
+  const premiumModal = usePremiumModal();
+
+  const isThirdPartyTheme = useMemo(
+    () => application.isThirdPartyFeature(item.identifier),
+    [application, item.identifier]
+  );
+  const isEntitledToTheme = useMemo(
+    () =>
+      application.getFeatureStatus(item.identifier) === FeatureStatus.Entitled,
+    [application, item.identifier]
+  );
+  const canActivateTheme = useMemo(
+    () => isEntitledToTheme || isThirdPartyTheme,
+    [isEntitledToTheme, isThirdPartyTheme]
+  );
+
   const toggleTheme: JSXInternal.MouseEventHandler<HTMLButtonElement> = (e) => {
     e.preventDefault();
-    if (theme.isLayerable() || !theme.active) {
-      application.toggleTheme(theme);
+
+    if (item.component && canActivateTheme) {
+      const themeIsLayerableOrNotActive =
+        item.component.isLayerable() || !item.component.active;
+
+      if (themeIsLayerableOrNotActive) {
+        application.toggleTheme(item.component);
+      }
+    } else {
+      premiumModal.activate(`${item.name} theme`);
     }
   };
 
   return (
     <button
-      className={`sn-dropdown-item focus:bg-info-backdrop focus:shadow-none ${
-        theme.isLayerable() ? `justify-start` : `justify-between`
-      }`}
+      className={`sn-dropdown-item focus:bg-info-backdrop focus:shadow-none justify-between`}
       onClick={toggleTheme}
       onBlur={onBlur}
     >
-      {theme.isLayerable() ? (
+      {item.component?.isLayerable() ? (
         <>
-          <Switch className="px-0 mr-2" checked={theme.active} />
-          {theme.package_info.name}
+          <div className="flex items-center">
+            <Switch className="px-0 mr-2" checked={item.component?.active} />
+            {item.name}
+          </div>
+          {!canActivateTheme && <Icon type="premium-feature" />}
         </>
       ) : (
         <>
           <div className="flex items-center">
             <div
               className={`pseudo-radio-btn ${
-                theme.active ? 'pseudo-radio-btn--checked' : ''
+                item.component?.active ? 'pseudo-radio-btn--checked' : ''
               } mr-2`}
             ></div>
-            <span className={theme.active ? 'font-semibold' : undefined}>
-              {theme.package_info.name}
+            <span
+              className={item.component?.active ? 'font-semibold' : undefined}
+            >
+              {item.name}
             </span>
           </div>
-          <div
-            className="w-5 h-5 rounded-full"
-            style={{
-              backgroundColor: theme.package_info?.dock_icon?.background_color,
-            }}
-          ></div>
+          {item.component && canActivateTheme ? (
+            <div
+              className="w-5 h-5 rounded-full"
+              style={{
+                backgroundColor:
+                  item.component.package_info?.dock_icon?.background_color,
+              }}
+            ></div>
+          ) : (
+            <Icon type="premium-feature" />
+          )}
         </>
       )}
     </button>
diff --git a/app/assets/javascripts/preferences/panes/Appearance.tsx b/app/assets/javascripts/preferences/panes/Appearance.tsx
index 7ab72acd7..ce09c4db9 100644
--- a/app/assets/javascripts/preferences/panes/Appearance.tsx
+++ b/app/assets/javascripts/preferences/panes/Appearance.tsx
@@ -1,5 +1,5 @@
 import { Dropdown, DropdownItem } from '@/components/Dropdown';
-import { PremiumModalProvider, usePremiumModal } from '@/components/Premium';
+import { usePremiumModal } from '@/components/Premium';
 import { sortThemes } from '@/components/QuickSettingsMenu/QuickSettingsMenu';
 import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
 import { Switch } from '@/components/Switch';
@@ -28,170 +28,172 @@ type Props = {
   application: WebApplication;
 };
 
-const AppearancePane: FunctionComponent<Props> = observer(({ application }) => {
-  const premiumModal = usePremiumModal();
-  const isEntitledToMidnightTheme =
-    application.getFeatureStatus(FeatureIdentifier.MidnightTheme) ===
-    FeatureStatus.Entitled;
+export const Appearance: 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
-  );
+    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,
-        };
+    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',
+          });
+        }
       });
 
-    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);
+    };
 
-    themesAsItems.unshift({
-      label: 'Default',
-      value: 'Default',
-    });
+    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);
+      }
+    };
 
-    setThemeItems(themesAsItems);
-  }, [application]);
+    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);
+      }
+    };
 
-  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}
+    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>
-            </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}
-                />
+              <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>
-          </div>
-        </PreferencesSegment>
-      </PreferencesGroup>
-    </PreferencesPane>
-  );
-});
-
-export const Appearance: FunctionComponent<Props> = observer(
-  ({ application }) => (
-    <PremiumModalProvider state={application.getAppState().features}>
-      <AppearancePane application={application} />
-    </PremiumModalProvider>
-  )
+          </PreferencesSegment>
+        </PreferencesGroup>
+      </PreferencesPane>
+    );
+  }
 );