From fd6d83655c54c74ba9ac9eeddd6f9fc27a3baa3d Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.org>
Date: Wed, 27 Oct 2021 10:19:42 -0500
Subject: [PATCH] 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
---
 .../components/QuickSettingsMenu.tsx          | 55 +++++++++++++-
 .../preferences/PreferencesMenu.ts            | 75 ++++++++++++-------
 .../preferences/components/Content.tsx        |  4 +
 .../preferences/panes/Extensions.tsx          |  2 +-
 .../extensions-segments/ExtensionItem.tsx     | 27 +++----
 .../ui_models/app_state/preferences_state.ts  |  6 +-
 .../javascripts/views/footer/footer_view.ts   | 28 +++++--
 package.json                                  |  4 +-
 yarn.lock                                     |  8 +-
 9 files changed, 151 insertions(+), 58 deletions(-)

diff --git a/app/assets/javascripts/components/QuickSettingsMenu.tsx b/app/assets/javascripts/components/QuickSettingsMenu.tsx
index b13a355b9..cf2ba591a 100644
--- a/app/assets/javascripts/components/QuickSettingsMenu.tsx
+++ b/app/assets/javascripts/components/QuickSettingsMenu.tsx
@@ -5,12 +5,18 @@ import {
   DisclosureButton,
   DisclosurePanel,
 } from '@reach/disclosure';
-import { ContentType, SNTheme } from '@standardnotes/snjs';
+import {
+  ContentType,
+  SNTheme,
+  ComponentArea,
+  SNComponent,
+} from '@standardnotes/snjs';
 import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { JSXInternal } from 'preact/src/jsx';
 import { Icon } from './Icon';
+import { Switch } from './Switch';
 import { toDirective, useCloseOnBlur } from './utils';
 
 const MENU_CLASSNAME =
@@ -75,6 +81,9 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
     const { closeQuickSettingsMenu, shouldAnimateCloseMenu } =
       appState.quickSettingsMenu;
     const [themes, setThemes] = useState<SNTheme[]>([]);
+    const [toggleableComponents, setToggleableComponents] = useState<
+      SNComponent[]
+    >([]);
     const [themesMenuOpen, setThemesMenuOpen] = useState(false);
     const [themesMenuPosition, setThemesMenuPosition] = useState({});
     const [defaultThemeOn, setDefaultThemeOn] = useState(false);
@@ -113,10 +122,29 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
       });
     }, [application]);
 
+    const reloadToggleableComponents = useCallback(() => {
+      application.streamItems(ContentType.Component, () => {
+        const toggleableComponents = (
+          application.getDisplayableItems(
+            ContentType.Component
+          ) as SNComponent[]
+        ).filter((component) =>
+          [ComponentArea.EditorStack, ComponentArea.TagsList].includes(
+            component.area
+          )
+        );
+        setToggleableComponents(toggleableComponents);
+      });
+    }, [application]);
+
     useEffect(() => {
       reloadThemes();
     }, [reloadThemes]);
 
+    useEffect(() => {
+      reloadToggleableComponents();
+    }, [reloadToggleableComponents]);
+
     useEffect(() => {
       if (themesMenuOpen) {
         defaultThemeButtonRef.current!.focus();
@@ -127,7 +155,10 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
       prefsButtonRef.current!.focus();
     }, []);
 
-    const [closeOnBlur] = useCloseOnBlur(themesMenuRef as any, setThemesMenuOpen);
+    const [closeOnBlur] = useCloseOnBlur(
+      themesMenuRef as any,
+      setThemesMenuOpen
+    );
 
     const toggleThemesMenu = () => {
       if (!themesMenuOpen) {
@@ -149,6 +180,10 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
       appState.preferences.openPreferences();
     };
 
+    const toggleComponent = (component: SNComponent) => {
+      application.toggleComponent(component);
+    };
+
     const handleBtnKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = (
       event
     ) => {
@@ -296,6 +331,22 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
               ))}
             </DisclosurePanel>
           </Disclosure>
+
+          {toggleableComponents.map((component) => (
+            <Switch
+              className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
+              checked={component.active}
+              onChange={() => {
+                toggleComponent(component);
+              }}
+            >
+              <div className="flex items-center">
+                <Icon type="window" className="color-neutral mr-2" />
+                {component.name}
+              </div>
+            </Switch>
+          ))}
+
           <div className="h-1px my-2 bg-border"></div>
           <button
             class="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
diff --git a/app/assets/javascripts/preferences/PreferencesMenu.ts b/app/assets/javascripts/preferences/PreferencesMenu.ts
index 729dec93b..702ff08d0 100644
--- a/app/assets/javascripts/preferences/PreferencesMenu.ts
+++ b/app/assets/javascripts/preferences/PreferencesMenu.ts
@@ -58,33 +58,38 @@ export class PreferencesMenu {
   private _selectedPane: PreferenceId | FeatureIdentifier = 'account';
   private _extensionPanes: SNComponent[] = [];
   private _menu: PreferencesMenuItem[];
-  private _extensionLatestVersions: ExtensionsLatestVersions = new ExtensionsLatestVersions(new Map());
+  private _extensionLatestVersions: ExtensionsLatestVersions =
+    new ExtensionsLatestVersions(new Map());
 
   constructor(
     private application: WebApplication,
-    private readonly _enableUnfinishedFeatures: boolean,
+    private readonly _enableUnfinishedFeatures: boolean
   ) {
-    this._menu = this._enableUnfinishedFeatures ? PREFERENCES_MENU_ITEMS : READY_PREFERENCES_MENU_ITEMS;
+    this._menu = this._enableUnfinishedFeatures
+      ? PREFERENCES_MENU_ITEMS
+      : READY_PREFERENCES_MENU_ITEMS;
 
     this.loadExtensionsPanes();
     this.loadLatestVersions();
 
-    makeAutoObservable<PreferencesMenu,
-      '_selectedPane' | '_twoFactorAuth' | '_extensionPanes' | '_extensionLatestVersions' | 'loadLatestVersions'
-      >(
-      this,
-      {
-        _twoFactorAuth: observable,
-        _selectedPane: observable,
-        _extensionPanes: observable.ref,
-        _extensionLatestVersions: observable.ref,
-        loadLatestVersions: action,
-      }
-    );
+    makeAutoObservable<
+      PreferencesMenu,
+      | '_selectedPane'
+      | '_twoFactorAuth'
+      | '_extensionPanes'
+      | '_extensionLatestVersions'
+      | 'loadLatestVersions'
+    >(this, {
+      _twoFactorAuth: observable,
+      _selectedPane: observable,
+      _extensionPanes: observable.ref,
+      _extensionLatestVersions: observable.ref,
+      loadLatestVersions: action,
+    });
   }
 
   private loadLatestVersions(): void {
-    ExtensionsLatestVersions.load(this.application).then(versions => {
+    ExtensionsLatestVersions.load(this.application).then((versions) => {
       this._extensionLatestVersions = versions;
     });
   }
@@ -94,12 +99,22 @@ export class PreferencesMenu {
   }
 
   loadExtensionsPanes(): void {
-    this._extensionPanes = (this.application.getItems([
-      ContentType.ActionsExtension,
-      ContentType.Component,
-      ContentType.Theme,
-    ]) as SNComponent[])
-      .filter(extension => extension.area === ComponentArea.Modal && extension.package_info.identifier !== FeatureIdentifier.TwoFactorAuthManager);
+    const excludedComponents = [
+      FeatureIdentifier.TwoFactorAuthManager,
+      'org.standardnotes.batch-manager',
+      'org.standardnotes.extensions-manager',
+    ];
+    this._extensionPanes = (
+      this.application.getItems([
+        ContentType.ActionsExtension,
+        ContentType.Component,
+        ContentType.Theme,
+      ]) as SNComponent[]
+    ).filter(
+      (extension) =>
+        extension.area === ComponentArea.Modal &&
+        !excludedComponents.includes(extension.package_info.identifier)
+    );
   }
 
   get menuItems(): SelectableMenuItem[] {
@@ -107,15 +122,16 @@ export class PreferencesMenu {
       ...preference,
       selected: preference.id === this._selectedPane,
     }));
-    const extensionsMenuItems: SelectableMenuItem[] = this._extensionPanes
-      .map(extension => {
+    const extensionsMenuItems: SelectableMenuItem[] = this._extensionPanes.map(
+      (extension) => {
         return {
           icon: 'window',
           id: extension.package_info.identifier,
           label: extension.name,
-          selected: extension.package_info.identifier === this._selectedPane
-      };
-      });
+          selected: extension.package_info.identifier === this._selectedPane,
+        };
+      }
+    );
 
     return menuItems.concat(extensionsMenuItems);
   }
@@ -125,8 +141,9 @@ export class PreferencesMenu {
   }
 
   get selectedExtension(): SNComponent | undefined {
-    return this._extensionPanes.find((extension) =>
-      extension.package_info.identifier === this._selectedPane);
+    return this._extensionPanes.find(
+      (extension) => extension.package_info.identifier === this._selectedPane
+    );
   }
 
   get selectedPaneId(): PreferenceId | FeatureIdentifier {
diff --git a/app/assets/javascripts/preferences/components/Content.tsx b/app/assets/javascripts/preferences/components/Content.tsx
index a560ee799..1d7e2009b 100644
--- a/app/assets/javascripts/preferences/components/Content.tsx
+++ b/app/assets/javascripts/preferences/components/Content.tsx
@@ -8,6 +8,10 @@ export const Subtitle: FunctionComponent<{ className?: string }> = ({ children,
   <h4 className={`font-medium text-sm m-0 mb-1 ${className}`}>{children}</h4>
 );
 
+export const SubtitleLight: FunctionComponent<{ className?: string }> = ({ children, className = "" }) => (
+  <h4 className={`font-normal text-sm m-0 mb-1 ${className}`}>{children}</h4>
+);
+
 export const Text: FunctionComponent<{ className?: string }> = ({
   children,
   className = '',
diff --git a/app/assets/javascripts/preferences/panes/Extensions.tsx b/app/assets/javascripts/preferences/panes/Extensions.tsx
index 3e51b1d39..bbff6b5ea 100644
--- a/app/assets/javascripts/preferences/panes/Extensions.tsx
+++ b/app/assets/javascripts/preferences/panes/Extensions.tsx
@@ -17,7 +17,7 @@ const loadExtensions = (application: WebApplication) => application.getItems([
   ContentType.ActionsExtension,
   ContentType.Component,
   ContentType.Theme,
-]) as SNComponent[];
+], true) as SNComponent[];
 
 export const Extensions: FunctionComponent<{
   application: WebApplication
diff --git a/app/assets/javascripts/preferences/panes/extensions-segments/ExtensionItem.tsx b/app/assets/javascripts/preferences/panes/extensions-segments/ExtensionItem.tsx
index a3f0bd9fb..305e35b9a 100644
--- a/app/assets/javascripts/preferences/panes/extensions-segments/ExtensionItem.tsx
+++ b/app/assets/javascripts/preferences/panes/extensions-segments/ExtensionItem.tsx
@@ -1,10 +1,10 @@
 import { FunctionComponent } from "preact";
 import { SNComponent } from "@standardnotes/snjs";
-
-import { PreferencesSegment, Subtitle, Title } from "@/preferences/components";
+import { ComponentArea } from "@standardnotes/features";
+import { PreferencesSegment, SubtitleLight, Title } from "@/preferences/components";
 import { Switch } from "@/components/Switch";
 import { WebApplication } from "@/ui_models/application";
-import { useEffect, useRef, useState } from "preact/hooks";
+import { useState } from "preact/hooks";
 import { Button } from "@/components/Button";
 import { RenameExtension } from "./RenameExtension";
 
@@ -14,7 +14,7 @@ const ExtensionVersions: FunctionComponent<{
 }> = ({ installedVersion, latestVersion }) => {
   return (
     <>
-      <Subtitle>Installed version <b>{installedVersion}</b> {latestVersion && <>(latest is <b>{latestVersion}</b>)</>}</Subtitle>
+      <SubtitleLight>Installed version <b>{installedVersion}</b> {latestVersion && <>(latest is <b>{latestVersion}</b>)</>}</SubtitleLight>
     </>
   );
 };
@@ -24,7 +24,7 @@ const AutoUpdateLocal: FunctionComponent<{
   toggleAutoupdate: () => void
 }> = ({ autoupdateDisabled, toggleAutoupdate }) => (
   <div className="flex flex-row">
-    <Subtitle className="flex-grow">Autoupdate local installation</Subtitle>
+    <SubtitleLight className="flex-grow">Autoupdate local installation</SubtitleLight>
     <Switch onChange={toggleAutoupdate} checked={!autoupdateDisabled} />
   </div>
 );
@@ -33,7 +33,7 @@ const UseHosted: FunctionComponent<{
   offlineOnly: boolean, toggleOfllineOnly: () => void
 }> = ({ offlineOnly, toggleOfllineOnly }) => (
   <div className="flex flex-row">
-    <Subtitle className="flex-grow">Use hosted when local is unavailable</Subtitle>
+    <SubtitleLight className="flex-grow">Use hosted when local is unavailable</SubtitleLight>
     <Switch onChange={toggleOfllineOnly} checked={!offlineOnly} />
   </div>
 );
@@ -106,7 +106,7 @@ export const ExtensionItem: FunctionComponent<ExtensionItemProps> =
 
     const installedVersion = extension.package_info.version;
 
-    const isEditorOrTags = ['editor-stack', 'tags-list'].includes(extension.area);
+    const isToggleable = [ComponentArea.EditorStack, ComponentArea.TagsList].includes(extension.area);
 
     return (
       <PreferencesSegment>
@@ -123,16 +123,17 @@ export const ExtensionItem: FunctionComponent<ExtensionItemProps> =
         {localInstallable && <AutoUpdateLocal autoupdateDisabled={autoupdateDisabled} toggleAutoupdate={toggleAutoupdate} />}
         {localInstallable && <UseHosted offlineOnly={offlineOnly} toggleOfllineOnly={toggleOffllineOnly} />}
 
-        {isEditorOrTags || isExternal &&
+        {(isToggleable || isExternal) &&
           <>
             <div className="min-h-2" />
             <div className="flex flex-row">
-              {isEditorOrTags && toggleActivate != undefined && (
+              {isToggleable && (
                 <>
-                  {extension.active ?
-                    <Button className="min-w-20" type="normal" label="Deactivate" onClick={() => toggleActivate(extension)} /> :
-                    <Button className="min-w-20" type="normal" label="Activate" onClick={() => toggleActivate(extension)} />
-                  }
+                  {(extension.active ? (
+                    <Button className="min-w-20" type="normal" label="Deactivate" onClick={() => toggleActivate!(extension)} />
+                  ) : (
+                    <Button className="min-w-20" type="normal" label="Activate" onClick={() => toggleActivate!(extension)} />
+                  ))}
                   <div className="min-w-3" />
                 </>
               )}
diff --git a/app/assets/javascripts/ui_models/app_state/preferences_state.ts b/app/assets/javascripts/ui_models/app_state/preferences_state.ts
index 1c556254d..a749e1a25 100644
--- a/app/assets/javascripts/ui_models/app_state/preferences_state.ts
+++ b/app/assets/javascripts/ui_models/app_state/preferences_state.ts
@@ -1,9 +1,11 @@
 import { PreferenceId } from '@/preferences/PreferencesMenu';
 import { action, computed, makeObservable, observable } from 'mobx';
 
+const DEFAULT_PANE = 'account';
+
 export class PreferencesState {
   private _open = false;
-  currentPane: PreferenceId = 'account';
+  currentPane: PreferenceId = DEFAULT_PANE;
 
   constructor() {
     makeObservable<PreferencesState, '_open'>(this, {
@@ -26,7 +28,7 @@ export class PreferencesState {
 
   closePreferences = (): void => {
     this._open = false;
-    this.currentPane = 'account';
+    this.currentPane = DEFAULT_PANE;
   };
 
   get isOpen(): boolean {
diff --git a/app/assets/javascripts/views/footer/footer_view.ts b/app/assets/javascripts/views/footer/footer_view.ts
index f508e6485..1504e6515 100644
--- a/app/assets/javascripts/views/footer/footer_view.ts
+++ b/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();
diff --git a/package.json b/package.json
index 35b426f6b..f41b2ffb3 100644
--- a/package.json
+++ b/package.json
@@ -70,9 +70,9 @@
     "@reach/checkbox": "^0.16.0",
     "@reach/dialog": "^0.16.2",
     "@reach/listbox": "^0.16.2",
-    "@standardnotes/features": "1.7.3",
+    "@standardnotes/features": "1.8.0",
     "@standardnotes/sncrypto-web": "1.5.3",
-    "@standardnotes/snjs": "2.16.2",
+    "@standardnotes/snjs": "2.16.3",
     "mobx": "^6.3.5",
     "mobx-react-lite": "^3.2.1",
     "preact": "^10.5.15",
diff --git a/yarn.lock b/yarn.lock
index 84f98e265..24ed3414f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4006,10 +4006,10 @@ eslint-config-prettier@^8.3.0:
   resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz#f7471b20b6fe8a9a9254cc684454202886a2dd7a"
   integrity sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==
 
-eslint-plugin-react-hooks@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz#8c229c268d468956334c943bb45fc860280f5556"
-  integrity sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==
+eslint-plugin-react-hooks@^4.2.1-alpha-4298ddbc5-20211023:
+  version "4.2.1-alpha-4298ddbc5-20211023"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.1-alpha-4298ddbc5-20211023.tgz#b227d6f900b4c86772585ae8130f2df625f05703"
+  integrity sha512-JK7BG4+zc4vpIMMxAiwgLQXQVrvHHKzrHmSNDFDwRwy4zVvKyp7mL9m8AsWvgFRQdWgmCeAACcrA4XqeNsxZ+w==
 
 eslint-plugin-react@^7.26.1:
   version "7.26.1"