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
2021-10-27 10:19:42 -05:00
parent 53ec0d4742
commit fd6d83655c
9 changed files with 151 additions and 58 deletions
--- 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"
--- 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 {
--- 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 = '',
--- 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
--- 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" />
                </>
              )}
--- 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 {
--- 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();
--- 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",
--- 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"