feat: Always show quick settings menu (#765)

app/assets/javascripts/components/QuickSettingsMenu/QuickSettingsMenu.tsx

@@ -180,15 +180,16 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
       }
     };
 
-    const handleQuickSettingsKeyDown: JSXInternal.KeyboardEventHandler<HTMLDivElement> =
+    const handleQuickSettingsKeyDown: JSXInternal.KeyboardEventHandler<
-      (event) => {
+      HTMLDivElement
-        quickSettingsKeyDownHandler(
+    > = (event) => {
-          closeQuickSettingsMenu,
+      quickSettingsKeyDownHandler(
-          event,
+        closeQuickSettingsMenu,
-          quickSettingsMenuRef,
+        event,
-          themesMenuOpen
+        quickSettingsMenuRef,
-        );
+        themesMenuOpen
-      };
+      );
+    };
 
     const handlePanelKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (
       event
@@ -222,54 +223,56 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
           <div className="px-3 mt-1 mb-2 font-semibold color-text uppercase">
             Quick Settings
           </div>
-          <Disclosure open={themesMenuOpen} onChange={toggleThemesMenu}>
+          {themes && themes.length ? (
-            <DisclosureButton
+            <Disclosure open={themesMenuOpen} onChange={toggleThemesMenu}>
-              onKeyDown={handleBtnKeyDown}
+              <DisclosureButton
-              onBlur={closeOnBlur}
+                onKeyDown={handleBtnKeyDown}
-              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={defaultThemeButtonRef}
+                ref={themesButtonRef}
+                className="sn-dropdown-item justify-between focus:bg-info-backdrop focus:shadow-none"
               >
-                <div
+                <div className="flex items-center">
-                  className={`pseudo-radio-btn ${
+                  <Icon type="themes" className="color-neutral mr-2" />
-                    defaultThemeOn ? 'pseudo-radio-btn--checked' : ''
+                  Themes
-                  } mr-2`}
+                </div>
-                ></div>
+                <Icon type="chevron-right" className="color-neutral" />
-                Default
+              </DisclosureButton>
-              </button>
+              <DisclosurePanel
-              {themes.map((theme) => (
+                onBlur={closeOnBlur}
-                <ThemesMenuButton
+                ref={themesMenuRef}
-                  theme={theme}
+                onKeyDown={handlePanelKeyDown}
-                  application={application}
+                style={{
-                  key={theme.uuid}
+                  ...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={defaultThemeButtonRef}
-              ))}
+                >
-            </DisclosurePanel>
+                  <div
-          </Disclosure>
+                    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}
           {toggleableComponents.map((component) => (
             <Switch
               className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"

app/assets/javascripts/views/footer/footer_view.ts

@@ -8,7 +8,6 @@ import {
   SNTheme,
   ComponentArea,
   CollectionSort,
-  SNComponent,
 } from '@standardnotes/snjs';
 import template from './footer-view.pug';
 import { AppStateEvent, EventSource } from '@/ui_models/app_state';
@@ -43,8 +42,6 @@ class FooterViewCtrl extends PureViewCtrl<
   }
 > {
   private $rootScope: ng.IRootScopeService;
-  private themes: SNTheme[] = [];
-  private toggleableComponents: SNComponent[] = [];
   private showSyncResolution = false;
   private unregisterComponent: any;
   private rootScopeListener2: any;
@@ -76,8 +73,6 @@ class FooterViewCtrl extends PureViewCtrl<
   deinit() {
     for (const remove of this.observerRemovers) remove();
     this.observerRemovers.length = 0;
-    this.themes.length = 0;
-    this.toggleableComponents.length = 0;
     this.unregisterComponent();
     this.unregisterComponent = undefined;
     this.rootScopeListener2();
@@ -276,30 +271,6 @@ class FooterViewCtrl extends PureViewCtrl<
         return !theme.errorDecrypting;
       }
     );
-
-    this.observerRemovers.push(
-      this.application.streamItems(ContentType.Theme, async () => {
-        const themes = this.application.getDisplayableItems(
-          ContentType.Theme
-        ) as SNTheme[];
-        this.themes = themes;
-      })
-    );
-
-    this.observerRemovers.push(
-      this.application.streamItems(ContentType.Component, async () => {
-        const toggleableComponents = (
-          this.application.getDisplayableItems(
-            ContentType.Component
-          ) as SNComponent[]
-        ).filter((component) =>
-          [ComponentArea.EditorStack, ComponentArea.TagsList].includes(
-            component.area
-          )
-        );
-        this.toggleableComponents = toggleableComponents;
-      })
-    );
   }
 
   registerComponentHandler() {
@@ -400,11 +371,7 @@ class FooterViewCtrl extends PureViewCtrl<
 
   quickSettingsPressed() {
     this.appState.accountMenu.closeAccountMenu();
-    if (this.themes.length > 0 || this.toggleableComponents.length > 0) {
+    this.appState.quickSettingsMenu.toggle();
-      this.appState.quickSettingsMenu.toggle();
-    } else {
-      this.appState.preferences.openPreferences();
-    }
   }
 
   toggleSyncResolutionMenu() {