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/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>
+    );
+  });