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/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" />
                </>
              )}