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>

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;
   }
 }