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
standardnotes · Oct 27, 2021 · fd6d836 · fd6d836
1 parent 53ec0d4
commit fd6d836
Show file tree

Hide file tree

Showing 9 changed files with 151 additions and 58 deletions.
diff --git 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
@@ -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,28 +99,39 @@ 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[] {
     const menuItems = this._menu.map((preference) => ({
       ...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
@@ -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
@@ -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
@@ -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
@@ -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 {