feat(preferences): extension modals into extension panes (#683)

* feat(preferences): show inline extensions in extensions pane * wip * wip * refactor: convert ComponentView to React component * refactor: convert ComponentView to React component * chore: fix merge conflicts * feat: don't show features whose `area` is "room", update modal items' icons in Preferences menu * chore: fix TS error * feat: don't show 2FA Manager in modal-based component * feat: remove `ExtendedDataReloadComplete` event, since Extensions Manger is being removed from the app * chore: avoid hardcoded values in svg image, optimize `if` condition * chore: remove remnant comment * fix: fix typescript errors Co-authored-by: vardanhakobyan <vardan_live@live.com>
2021-10-25 10:45:36 +02:00
parent 82fc103a3e
commit 31222e1236
29 changed files with 993 additions and 625 deletions
--- a/app/assets/javascripts/preferences/PreferencesMenu.ts
+++ b/app/assets/javascripts/preferences/PreferencesMenu.ts
@@ -1,5 +1,10 @@
 import { IconType } from '@/components/Icon';
-import { makeAutoObservable, observable } from 'mobx';
+import { action, makeAutoObservable, observable } from 'mobx';
+import { ExtensionsLatestVersions } from '@/preferences/panes/extensions-segments';
+import { ContentType, SNComponent } from '@node_modules/@standardnotes/snjs';
+import { WebApplication } from '@/ui_models/application';
+import { FeatureIdentifier } from '@node_modules/@standardnotes/features/dist/Domain/Feature/FeatureIdentifier';
+import { ComponentArea } from '@standardnotes/snjs';

 const PREFERENCE_IDS = [
  'general',
@@ -16,11 +21,15 @@ const PREFERENCE_IDS = [

 export type PreferenceId = typeof PREFERENCE_IDS[number];
 interface PreferencesMenuItem {
-  readonly id: PreferenceId;
+  readonly id: PreferenceId | FeatureIdentifier;
  readonly icon: IconType;
  readonly label: string;
 }

+interface SelectableMenuItem extends PreferencesMenuItem {
+  selected: boolean;
+}
+
 /**
 * Items are in order of appearance
 */
@@ -46,38 +55,93 @@ const READY_PREFERENCES_MENU_ITEMS: PreferencesMenuItem[] = [
 ];

 export class PreferencesMenu {
-  private _selectedPane: PreferenceId = 'account';
+  private _selectedPane: PreferenceId | FeatureIdentifier = 'account';
+  private _extensionPanes: SNComponent[] = [];
  private _menu: PreferencesMenuItem[];
+  private _extensionLatestVersions: ExtensionsLatestVersions = new ExtensionsLatestVersions(new Map());

  constructor(
+    private application: WebApplication,
    private readonly _enableUnfinishedFeatures: boolean,
  ) {
    this._menu = this._enableUnfinishedFeatures ? PREFERENCES_MENU_ITEMS : READY_PREFERENCES_MENU_ITEMS;
-    makeAutoObservable<PreferencesMenu, '_selectedPane' | '_twoFactorAuth'>(
+
+    this.loadExtensionsPanes();
+    this.loadLatestVersions();
+
+    makeAutoObservable<PreferencesMenu,
+      '_selectedPane' | '_twoFactorAuth' | '_extensionPanes' | '_extensionLatestVersions' | 'loadLatestVersions'
+      >(
      this,
      {
        _twoFactorAuth: observable,
        _selectedPane: observable,
+        _extensionPanes: observable.ref,
+        _extensionLatestVersions: observable.ref,
+        loadLatestVersions: action,
      }
    );
  }

-  get menuItems(): (PreferencesMenuItem & {
-    selected: boolean;
-  })[] {
-    return this._menu.map((p) => ({
-      ...p,
-      selected: p.id === this._selectedPane,
+  private loadLatestVersions(): void {
+    ExtensionsLatestVersions.load(this.application).then(versions => {
+      this._extensionLatestVersions = versions;
+    });
+  }
+
+  get extensionsLatestVersions(): ExtensionsLatestVersions {
+    return this._extensionLatestVersions;
+  }
+
+  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);
+  }
+
+  get menuItems(): SelectableMenuItem[] {
+    const menuItems = this._menu.map((preference) => ({
+      ...preference,
+      selected: preference.id === this._selectedPane,
    }));
+    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
+      };
+      });
+
+    return menuItems.concat(extensionsMenuItems);
  }

-  get selectedPaneId(): PreferenceId {
-    return (
-      this._menu.find((item) => item.id === this._selectedPane)?.id ?? 'account'
-    );
+  get selectedMenuItem(): PreferencesMenuItem | undefined {
+    return this._menu.find((item) => item.id === this._selectedPane);
  }

-  selectPane(key: PreferenceId): void {
+  get selectedExtension(): SNComponent | undefined {
+    return this._extensionPanes.find((extension) =>
+      extension.package_info.identifier === this._selectedPane);
+  }
+
+  get selectedPaneId(): PreferenceId | FeatureIdentifier {
+    if (this.selectedMenuItem != undefined) {
+      return this.selectedMenuItem.id;
+    }
+
+    if (this.selectedExtension != undefined) {
+      return this.selectedExtension.package_info.identifier;
+    }
+
+    return 'account';
+  }
+
+  selectPane(key: PreferenceId | FeatureIdentifier): void {
    this._selectedPane = key;
  }
 }
--- a/app/assets/javascripts/preferences/PreferencesView.tsx
+++ b/app/assets/javascripts/preferences/PreferencesView.tsx
@@ -9,6 +9,7 @@ import {
  Security,
 } from './panes';
 import { observer } from 'mobx-react-lite';
+
 import { PreferencesMenu } from './PreferencesMenu';
 import { PreferencesMenuView } from './PreferencesMenuView';
 import { WebApplication } from '@/ui_models/application';
@@ -16,6 +17,7 @@ import { MfaProps } from './panes/two-factor-auth/MfaProps';
 import { AppState } from '@/ui_models/app_state';
 import { useEffect, useMemo } from 'preact/hooks';
 import { Extensions } from './panes/Extensions';
+import { ExtensionPane } from './panes/ExtensionPane';

 interface PreferencesProps extends MfaProps {
  application: WebApplication;
@@ -25,44 +27,64 @@ interface PreferencesProps extends MfaProps {

 const PaneSelector: FunctionComponent<
  PreferencesProps & { menu: PreferencesMenu }
-> = observer((props) => {
-  switch (props.menu.selectedPaneId) {
-    case 'general':
-      return (
-        <General appState={props.appState} application={props.application} />
-      );
-    case 'account':
-      return (
-        <AccountPreferences
-          application={props.application}
-          appState={props.appState}
-        />
-      );
-    case 'appearance':
-      return null;
-    case 'security':
-      return (
-        <Security
-          mfaProvider={props.mfaProvider}
-          userProvider={props.userProvider}
-          appState={props.appState}
-          application={props.application}
-        />
-      );
-    case 'extensions':
-      return <Extensions application={props.application} />;
-    case 'listed':
-      return <Listed application={props.application} />;
-    case 'shortcuts':
-      return null;
-    case 'accessibility':
-      return null;
-    case 'get-free-month':
-      return null;
-    case 'help-feedback':
-      return <HelpAndFeedback />;
-  }
-});
+> = observer(
+  ({
+     menu,
+     appState,
+     application,
+     mfaProvider,
+     userProvider
+   }) => {
+    switch (menu.selectedPaneId) {
+      case 'general':
+        return (
+          <General appState={appState} application={application} />
+        );
+      case 'account':
+        return (
+          <AccountPreferences
+            application={application}
+            appState={appState}
+          />
+        );
+      case 'appearance':
+        return null;
+      case 'security':
+        return (
+          <Security
+            mfaProvider={mfaProvider}
+            userProvider={userProvider}
+            appState={appState}
+            application={application}
+          />
+        );
+      case 'extensions':
+        return <Extensions application={application} extensionsLatestVersions={menu.extensionsLatestVersions} />;
+      case 'listed':
+        return <Listed application={application} />;
+      case 'shortcuts':
+        return null;
+      case 'accessibility':
+        return null;
+      case 'get-free-month':
+        return null;
+      case 'help-feedback':
+        return <HelpAndFeedback />;
+      default:
+        if (menu.selectedExtension != undefined) {
+          return (
+            <ExtensionPane
+              application={application}
+              appState={appState}
+              extension={menu.selectedExtension}
+              preferencesMenu={menu}
+            />
+          );
+        } else {
+          return <General appState={appState} application={application} />;
+        }
+    }
+  });

 const PreferencesCanvas: FunctionComponent<
  PreferencesProps & { menu: PreferencesMenu }
@@ -75,9 +97,9 @@ const PreferencesCanvas: FunctionComponent<

 export const PreferencesView: FunctionComponent<PreferencesProps> = observer(
  (props) => {
-    const menu = useMemo(() => new PreferencesMenu(props.appState.enableUnfinishedFeatures), [
-      props.appState.enableUnfinishedFeatures
-    ]);
+    const menu = useMemo(
+      () => new PreferencesMenu(props.application, props.appState.enableUnfinishedFeatures),
+      [props.appState.enableUnfinishedFeatures, props.application]);

    useEffect(() => {
      menu.selectPane(props.appState.preferences.currentPane);
--- a/app/assets/javascripts/preferences/panes/ExtensionPane.tsx
+++ b/app/assets/javascripts/preferences/panes/ExtensionPane.tsx
@@ -0,0 +1,47 @@
+import { PreferencesGroup, PreferencesSegment } from "@/preferences/components";
+import { WebApplication } from "@/ui_models/application";
+import { SNComponent } from "@standardnotes/snjs/dist/@types";
+import { observer } from "mobx-react-lite";
+import { FunctionComponent } from "preact";
+import { ExtensionItem } from "./extensions-segments";
+import { ComponentView } from '@/components/ComponentView';
+import { AppState } from '@/ui_models/app_state';
+import { PreferencesMenu } from '@/preferences/PreferencesMenu';
+
+interface IProps {
+  application: WebApplication;
+  appState: AppState;
+  extension: SNComponent;
+  preferencesMenu: PreferencesMenu;
+}
+
+export const ExtensionPane: FunctionComponent<IProps> = observer(
+  ({ extension, application, appState, preferencesMenu }) => {
+    const latestVersion = preferencesMenu.extensionsLatestVersions.getVersion(extension);
+
+    return (
+      <div className="preferences-extension-pane color-foreground flex-grow flex flex-row overflow-y-auto min-h-0">
+        <div className="flex-grow flex flex-col py-6 items-center">
+          <div className="w-200 max-w-200 flex flex-col">
+            <PreferencesGroup>
+              <ExtensionItem
+                application={application}
+                extension={extension}
+                first={false}
+                uninstall={() => application.deleteItem(extension).then(() => preferencesMenu.loadExtensionsPanes())}
+                toggleActivate={() => application.toggleComponent(extension).then(() => preferencesMenu.loadExtensionsPanes())}
+                latestVersion={latestVersion}
+              />
+              <PreferencesSegment>
+                <ComponentView
+                  application={application}
+                  appState={appState}
+                  componentUuid={extension.uuid}
+                />
+              </PreferencesSegment>
+            </PreferencesGroup>
+          </div>
+        </div>
+      </div>
+    );
+  });
--- a/app/assets/javascripts/preferences/panes/Extensions.tsx
+++ b/app/assets/javascripts/preferences/panes/Extensions.tsx
@@ -9,9 +9,9 @@ import {
  PreferencesPane,
  PreferencesSegment,
 } from '../components';
-import { ConfirmCustomExtension, ExtensionItem } from './extensions-segments';
+import { ConfirmCustomExtension, ExtensionItem, ExtensionsLatestVersions } from './extensions-segments';
 import { useEffect, useRef, useState } from 'preact/hooks';
-import { FeatureDescription } from '@standardnotes/features';
+import { observer } from 'mobx-react-lite';

 const loadExtensions = (application: WebApplication) => application.getItems([
  ContentType.ActionsExtension,
@@ -19,30 +19,14 @@ const loadExtensions = (application: WebApplication) => application.getItems([
  ContentType.Theme,
 ]) as SNComponent[];

-function collectFeatures(features: FeatureDescription[] | undefined, versionMap: Map<string, string>) {
-  if (features == undefined) return;
-  for (const feature of features) {
-    versionMap.set(feature.identifier, feature.version);
-  }
-}
-
-const loadLatestVersions = (application: WebApplication) => application.getAvailableSubscriptions()
-  .then(subscriptions => {
-    const versionMap: Map<string, string> = new Map();
-    collectFeatures(subscriptions?.CORE_PLAN?.features, versionMap);
-    collectFeatures(subscriptions?.PLUS_PLAN?.features, versionMap);
-    collectFeatures(subscriptions?.PRO_PLAN?.features, versionMap);
-    return versionMap;
-  });
-
 export const Extensions: FunctionComponent<{
  application: WebApplication
-}> = ({ application }) => {
+  extensionsLatestVersions: ExtensionsLatestVersions,
+}> = observer(({ application, extensionsLatestVersions }) => {

  const [customUrl, setCustomUrl] = useState('');
  const [confirmableExtension, setConfirmableExtension] = useState<SNComponent | undefined>(undefined);
  const [extensions, setExtensions] = useState(loadExtensions(application));
-  const [latestVersions, setLatestVersions] = useState<Map<string, string> | undefined>(undefined);

  const confirmableEnd = useRef<HTMLDivElement>(null);

@@ -52,12 +36,6 @@ export const Extensions: FunctionComponent<{
    }
  }, [confirmableExtension, confirmableEnd]);

-  useEffect(() => {
-    if (!latestVersions) {
-      loadLatestVersions(application).then(versions => setLatestVersions(versions));
-    }
-  }, [latestVersions, application]);
-
  const uninstallExtension = async (extension: SNComponent) => {
    await application.deleteItem(extension);
    setExtensions(loadExtensions(application));
@@ -94,12 +72,13 @@ export const Extensions: FunctionComponent<{
        <PreferencesGroup>
          {
            extensions
+              .filter(extension => !['modal', 'rooms'].includes(extension.area))
              .sort((e1, e2) => e1.name.toLowerCase().localeCompare(e2.name.toLowerCase()))
              .map((extension, i) => (
                <ExtensionItem
                  application={application}
                  extension={extension}
-                  latestVersion={latestVersions?.get(extension.package_info.identifier)}
+                  latestVersion={extensionsLatestVersions.getVersion(extension)}
                  first={i === 0}
                  uninstall={uninstallExtension}
                  toggleActivate={toggleActivateExtension} />
@@ -140,4 +119,4 @@ export const Extensions: FunctionComponent<{
      </PreferencesGroup>
    </PreferencesPane>
  );
-};
+});
--- a/app/assets/javascripts/preferences/panes/extensions-segments/ExtensionItem.tsx
+++ b/app/assets/javascripts/preferences/panes/extensions-segments/ExtensionItem.tsx
@@ -6,6 +6,7 @@ import { Switch } from "@/components/Switch";
 import { WebApplication } from "@/ui_models/application";
 import { useEffect, useRef, useState } from "preact/hooks";
 import { Button } from "@/components/Button";
+import { RenameExtension } from "./RenameExtension";

 const ExtensionVersions: FunctionComponent<{
  installedVersion: string,
@@ -37,161 +38,108 @@ const UseHosted: FunctionComponent<{
  </div>
 );

-const RenameExtension: FunctionComponent<{
-  extensionName: string, changeName: (newName: string) => void
-}> = ({ extensionName, changeName }) => {
-  const [isRenaming, setIsRenaming] = useState(false);
-  const [newExtensionName, setNewExtensionName] = useState<string>(extensionName);
-
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (isRenaming) {
-      inputRef.current!.focus();
-    }
-  }, [inputRef, isRenaming]);
-
-  const startRenaming = () => {
-    setNewExtensionName(extensionName);
-    setIsRenaming(true);
-  };
-
-  const cancelRename = () => {
-    setNewExtensionName(extensionName);
-    setIsRenaming(false);
-  };
-
-  const confirmRename = () => {
-    if (newExtensionName == undefined || newExtensionName === '') {
-      return;
-    }
-    changeName(newExtensionName);
-    setIsRenaming(false);
-  };
-
-  return (
-    <div className="flex flex-row mr-3 items-center">
-      <input
-        ref={inputRef}
-        disabled={!isRenaming}
-        autocomplete='off'
-        className="flex-grow text-base font-bold no-border bg-default px-0 color-text"
-        type="text"
-        value={newExtensionName}
-        onChange={({ target: input }) => setNewExtensionName((input as HTMLInputElement)?.value)}
-      />
-      <div className="min-w-3" />
-      {isRenaming ?
-        <>
-          <a className="pt-1 cursor-pointer" onClick={confirmRename}>Confirm</a>
-          <div className="min-w-3" />
-          <a className="pt-1 cursor-pointer" onClick={cancelRename}>Cancel</a>
-        </> :
-        <a className="pt-1 cursor-pointer" onClick={startRenaming}>Rename</a>
-      }
-    </div>
-  );
-};
-
-export const ExtensionItem: FunctionComponent<{
+export interface ExtensionItemProps {
  application: WebApplication,
  extension: SNComponent,
  first: boolean,
  latestVersion: string | undefined,
  uninstall: (extension: SNComponent) => void,
-  toggleActivate: (extension: SNComponent) => void,
-}> = ({ application, extension, first, uninstall, toggleActivate, latestVersion }) => {
+  toggleActivate?: (extension: SNComponent) => void,
+}
+
+export const ExtensionItem: FunctionComponent<ExtensionItemProps> =
+  ({ application, extension, first, uninstall, toggleActivate, latestVersion }) => {
  const [autoupdateDisabled, setAutoupdateDisabled] = useState(extension.autoupdateDisabled ?? false);
  const [offlineOnly, setOfflineOnly] = useState(extension.offlineOnly ?? false);
  const [extensionName, setExtensionName] = useState(extension.name);

-  const toggleAutoupdate = () => {
-    const newAutoupdateValue = !autoupdateDisabled;
-    setAutoupdateDisabled(newAutoupdateValue);
-    application
-      .changeAndSaveItem(extension.uuid, (m: any) => {
-        if (m.content == undefined) m.content = {};
-        m.content.autoupdateDisabled = newAutoupdateValue;
-      })
-      .then((item) => {
-        const component = (item as SNComponent);
-        setAutoupdateDisabled(component.autoupdateDisabled);
-      })
-      .catch(e => {
-        console.error(e);
-      });
+    const toggleAutoupdate = () => {
+      const newAutoupdateValue = !autoupdateDisabled;
+      setAutoupdateDisabled(newAutoupdateValue);
+      application
+        .changeAndSaveItem(extension.uuid, (m: any) => {
+          if (m.content == undefined) m.content = {};
+          m.content.autoupdateDisabled = newAutoupdateValue;
+        })
+        .then((item) => {
+          const component = (item as SNComponent);
+          setAutoupdateDisabled(component.autoupdateDisabled);
+        })
+        .catch(e => {
+          console.error(e);
+        });
+    };
+
+    const toggleOffllineOnly = () => {
+      const newOfflineOnly = !offlineOnly;
+      setOfflineOnly(newOfflineOnly);
+      application
+        .changeAndSaveItem(extension.uuid, (m: any) => {
+          if (m.content == undefined) m.content = {};
+          m.content.offlineOnly = newOfflineOnly;
+        })
+        .then((item) => {
+          const component = (item as SNComponent);
+          setOfflineOnly(component.offlineOnly);
+        })
+        .catch(e => {
+          console.error(e);
+        });
+    };
+
+    const changeExtensionName = (newName: string) => {
+      setExtensionName(newName);
+      application
+        .changeAndSaveItem(extension.uuid, (m: any) => {
+          if (m.content == undefined) m.content = {};
+          m.content.name = newName;
+        })
+        .then((item) => {
+          const component = (item as SNComponent);
+          setExtensionName(component.name);
+        });
+    };
+
+    const localInstallable = extension.package_info.download_url;
+
+    const isExternal = !extension.package_info.identifier.startsWith('org.standardnotes.');
+
+    const installedVersion = extension.package_info.version;
+
+    const isEditorOrTags = ['editor-stack', 'tags-list'].includes(extension.area);
+
+    return (
+      <PreferencesSegment>
+        {first && <>
+          <Title>Extensions</Title>
+          <div className="w-full min-h-3" />
+        </>}
+
+        <RenameExtension extensionName={extensionName} changeName={changeExtensionName} />
+        <div className="min-h-2" />
+
+        <ExtensionVersions installedVersion={installedVersion} latestVersion={latestVersion} />
+
+        {localInstallable && <AutoUpdateLocal autoupdateDisabled={autoupdateDisabled} toggleAutoupdate={toggleAutoupdate} />}
+        {localInstallable && <UseHosted offlineOnly={offlineOnly} toggleOfllineOnly={toggleOffllineOnly} />}
+
+        {isEditorOrTags || isExternal &&
+          <>
+            <div className="min-h-2" />
+            <div className="flex flex-row">
+              {isEditorOrTags && toggleActivate != undefined && (
+                <>
+                  {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" />
+                </>
+              )}
+              {isExternal && <Button className="min-w-20" type="normal" label="Uninstall" onClick={() => uninstall(extension)} />}
+            </div>
+          </>
+        }
+      </PreferencesSegment >
+    );
  };
-
-  const toggleOffllineOnly = () => {
-    const newOfflineOnly = !offlineOnly;
-    setOfflineOnly(newOfflineOnly);
-    application
-      .changeAndSaveItem(extension.uuid, (m: any) => {
-        if (m.content == undefined) m.content = {};
-        m.content.offlineOnly = newOfflineOnly;
-      })
-      .then((item) => {
-        const component = (item as SNComponent);
-        setOfflineOnly(component.offlineOnly);
-      })
-      .catch(e => {
-        console.error(e);
-      });
-  };
-
-  const changeExtensionName = (newName: string) => {
-    setExtensionName(newName);
-    application
-      .changeAndSaveItem(extension.uuid, (m: any) => {
-        if (m.content == undefined) m.content = {};
-        m.content.name = newName;
-      })
-      .then((item) => {
-        const component = (item as SNComponent);
-        setExtensionName(component.name);
-      });
-  };
-
-  const localInstallable = extension.package_info.download_url;
-
-  const isExternal = !extension.package_info.identifier.startsWith('org.standardnotes.');
-
-  const installedVersion = extension.package_info.version;
-
-  const isEditorOrTags = ['editor-stack', 'tags-list'].includes(extension.area);
-
-  return (
-    <PreferencesSegment>
-      {first && <>
-        <Title>Extensions</Title>
-        <div className="w-full min-h-3" />
-      </>}
-
-      <RenameExtension extensionName={extensionName} changeName={changeExtensionName} />
-      <div className="min-h-2" />
-
-      <ExtensionVersions installedVersion={installedVersion} latestVersion={latestVersion} />
-
-      {localInstallable && <AutoUpdateLocal autoupdateDisabled={autoupdateDisabled} toggleAutoupdate={toggleAutoupdate} />}
-      {localInstallable && <UseHosted offlineOnly={offlineOnly} toggleOfllineOnly={toggleOffllineOnly} />}
-
-      {isEditorOrTags || isExternal &&
-        <>
-          <div className="min-h-2" />
-          <div className="flex flex-row">
-            {isEditorOrTags && (
-              <>
-                {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" />
-              </>
-            )}
-            {isExternal && <Button className="min-w-20" type="normal" label="Uninstall" onClick={() => uninstall(extension)} />}
-          </div>
-        </>
-      }
-    </PreferencesSegment >
-  );
-};
--- a/app/assets/javascripts/preferences/panes/extensions-segments/ExtensionsLatestVersions.ts
+++ b/app/assets/javascripts/preferences/panes/extensions-segments/ExtensionsLatestVersions.ts
@@ -0,0 +1,35 @@
+import { WebApplication } from "@/ui_models/application";
+import { FeatureDescription } from "@standardnotes/features";
+import { SNComponent } from "@standardnotes/snjs/dist/@types";
+import { makeAutoObservable, observable } from "mobx";
+
+export class ExtensionsLatestVersions {
+  static async load(application: WebApplication): Promise<ExtensionsLatestVersions> {
+    const map = await application.getAvailableSubscriptions()
+      .then(subscriptions => {
+        const versionMap: Map<string, string> = new Map();
+        collectFeatures(subscriptions?.CORE_PLAN?.features as FeatureDescription[], versionMap);
+        collectFeatures(subscriptions?.PLUS_PLAN?.features as FeatureDescription[], versionMap);
+        collectFeatures(subscriptions?.PRO_PLAN?.features as FeatureDescription[], versionMap);
+        return versionMap;
+      });
+    return new ExtensionsLatestVersions(map);
+  }
+
+  constructor(private readonly latestVersionsMap: Map<string, string>) {
+    makeAutoObservable<ExtensionsLatestVersions, 'latestVersionsMap'>(
+      this, { latestVersionsMap: observable.ref });
+  }
+
+  getVersion(extension: SNComponent): string | undefined {
+    return this.latestVersionsMap.get(extension.package_info.identifier);
+  }
+
+}
+
+function collectFeatures(features: FeatureDescription[] | undefined, versionMap: Map<string, string>) {
+  if (features == undefined) return;
+  for (const feature of features) {
+    versionMap.set(feature.identifier, feature.version);
+  }
+}
--- a/app/assets/javascripts/preferences/panes/extensions-segments/RenameExtension.tsx
+++ b/app/assets/javascripts/preferences/panes/extensions-segments/RenameExtension.tsx
@@ -0,0 +1,58 @@
+import { FunctionComponent } from "preact";
+import { useState, useRef, useEffect } from "preact/hooks";
+
+export const RenameExtension: FunctionComponent<{
+  extensionName: string, changeName: (newName: string) => void
+}> = ({ extensionName, changeName }) => {
+  const [isRenaming, setIsRenaming] = useState(false);
+  const [newExtensionName, setNewExtensionName] = useState<string>(extensionName);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isRenaming) {
+      inputRef.current!.focus();
+    }
+  }, [inputRef, isRenaming]);
+
+  const startRenaming = () => {
+    setNewExtensionName(extensionName);
+    setIsRenaming(true);
+  };
+
+  const cancelRename = () => {
+    setNewExtensionName(extensionName);
+    setIsRenaming(false);
+  };
+
+  const confirmRename = () => {
+    if (!newExtensionName) {
+      return;
+    }
+    changeName(newExtensionName);
+    setIsRenaming(false);
+  };
+
+  return (
+    <div className="flex flex-row mr-3 items-center">
+      <input
+        ref={inputRef}
+        disabled={!isRenaming}
+        autocomplete='off'
+        className="flex-grow text-base font-bold no-border bg-default px-0 color-text"
+        type="text"
+        value={newExtensionName}
+        onChange={({ target: input }) => setNewExtensionName((input as HTMLInputElement)?.value)}
+      />
+      <div className="min-w-3" />
+      {isRenaming ?
+        <>
+          <a className="pt-1 cursor-pointer" onClick={confirmRename}>Confirm</a>
+          <div className="min-w-3" />
+          <a className="pt-1 cursor-pointer" onClick={cancelRename}>Cancel</a>
+        </> :
+        <a className="pt-1 cursor-pointer" onClick={startRenaming}>Rename</a>
+      }
+    </div>
+  );
+};
--- a/app/assets/javascripts/preferences/panes/extensions-segments/index.ts
+++ b/app/assets/javascripts/preferences/panes/extensions-segments/index.ts
@@ -1,2 +1,3 @@
 export * from './ConfirmCustomExtension';
 export * from './ExtensionItem';
+export * from './ExtensionsLatestVersions';