feat: Component toggleability and add toggleable components to quick settings menu (#707)

* feat: toggleable extensions

* fix: return all themes for quick settings

* chore: bump snjs deps

* feat: Use Switch component for toggle in Quick Settings Menu

* feat: Add toggleableComponents to footer_view

* refactor: Change "components" to "toggleableComponents"

* feat: Add checked state to component toggle in quick settings menu

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

@@ -8,6 +8,7 @@ import {
   SNTheme,
   ComponentArea,
   CollectionSort,
+  SNComponent,
 } from '@standardnotes/snjs';
 import template from './footer-view.pug';
 import { AppStateEvent, EventSource } from '@/ui_models/app_state';
@@ -42,7 +43,8 @@ class FooterViewCtrl extends PureViewCtrl<
   }
 > {
   private $rootScope: ng.IRootScopeService;
-  private themesWithIcons: SNTheme[] = [];
+  private themes: SNTheme[] = [];
+  private toggleableComponents: SNComponent[] = [];
   private showSyncResolution = false;
   private unregisterComponent: any;
   private rootScopeListener2: any;
@@ -74,7 +76,8 @@ class FooterViewCtrl extends PureViewCtrl<
   deinit() {
     for (const remove of this.observerRemovers) remove();
     this.observerRemovers.length = 0;
-    this.themesWithIcons.length = 0;
+    this.themes.length = 0;
+    this.toggleableComponents.length = 0;
     this.unregisterComponent();
     this.unregisterComponent = undefined;
     this.rootScopeListener2();
@@ -270,7 +273,7 @@ class FooterViewCtrl extends PureViewCtrl<
       CollectionSort.Title,
       'asc',
       (theme: SNTheme) => {
-        return theme.package_info && theme.package_info.dock_icon != undefined;
+        return !theme.errorDecrypting;
       }
     );
 
@@ -279,7 +282,22 @@ class FooterViewCtrl extends PureViewCtrl<
         const themes = this.application.getDisplayableItems(
           ContentType.Theme
         ) as SNTheme[];
-        this.themesWithIcons = themes;
+        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;
       })
     );
   }
@@ -382,7 +400,7 @@ class FooterViewCtrl extends PureViewCtrl<
 
   quickSettingsPressed() {
     this.appState.accountMenu.closeAccountMenu();
-    if (this.themesWithIcons.length > 0) {
+    if (this.themes.length > 0 || this.toggleableComponents.length > 0) {
       this.appState.quickSettingsMenu.toggle();
     } else {
       this.appState.preferences.openPreferences();