refactor: migrate remaining angular components to react (#833)

* refactor: menuRow directive to MenuRow component

* refactor: migrate footer to react

* refactor: migrate actions menu to react

* refactor: migrate history menu to react

* fix: click outside handler use capture to trigger event before re-render occurs which would otherwise cause node.contains to return incorrect result (specifically for the account menu)

* refactor: migrate revision preview modal to react

* refactor: migrate permissions modal to react

* refactor: migrate password wizard to react

* refactor: remove unused input modal directive

* refactor: remove unused delay hide component

* refactor: remove unused filechange directive

* refactor: remove unused elemReady directive

* refactor: remove unused sn-enter directive

* refactor: remove unused lowercase directive

* refactor: remove unused autofocus directive

* refactor(wip): note view to react

* refactor: use mutation observer to deinit textarea listeners

* refactor: migrate challenge modal to react

* refactor: migrate note group view to react

* refactor(wip): migrate remaining classes

* fix: navigation parent ref

* refactor: fully remove angular assets

* fix: account switcher

* fix: application view state

* refactor: remove unused password wizard type

* fix: revision preview and permissions modal

* fix: remove angular comment

* refactor: react panel resizers for editor

* feat: simple panel resizer

* fix: use simple panel resizer everywhere

* fix: simplify panel resizer state

* chore: rename simple panel resizer to panel resizer

* refactor: simplify column layout

* fix: editor mount safety check

* fix: use inline onLoad callback for iframe, as setting onload after it loads will never call it

* chore: fix note view test

* chore(deps): upgrade snjs

app/assets/javascripts/preferences/panes/extensions-segments/ExtensionItem.tsx

@@ -1,86 +1,113 @@
-import { FunctionComponent } from "preact";
-import { SNComponent } from "@standardnotes/snjs";
-import { PreferencesSegment, SubtitleLight, Title } from "@/preferences/components";
-import { Switch } from "@/components/Switch";
-import { WebApplication } from "@/ui_models/application";
-import { useState } from "preact/hooks";
-import { Button } from "@/components/Button";
-import { RenameExtension } from "./RenameExtension";
+import { FunctionComponent } from 'preact';
+import { SNComponent } from '@standardnotes/snjs';
+import {
+  PreferencesSegment,
+  SubtitleLight,
+  Title,
+} from '@/preferences/components';
+import { Switch } from '@/components/Switch';
+import { WebApplication } from '@/ui_models/application';
+import { useState } from 'preact/hooks';
+import { Button } from '@/components/Button';
+import { RenameExtension } from './RenameExtension';
 
 const UseHosted: FunctionComponent<{
-  offlineOnly: boolean, toggleOfllineOnly: () => void
+  offlineOnly: boolean;
+  toggleOfllineOnly: () => void;
 }> = ({ offlineOnly, toggleOfllineOnly }) => (
   <div className="flex flex-row">
-    <SubtitleLight className="flex-grow">Use hosted when local is unavailable</SubtitleLight>
+    <SubtitleLight className="flex-grow">
+      Use hosted when local is unavailable
+    </SubtitleLight>
     <Switch onChange={toggleOfllineOnly} checked={!offlineOnly} />
   </div>
 );
 
 export interface ExtensionItemProps {
-  application: WebApplication,
-  extension: SNComponent,
-  first: boolean,
-  latestVersion: string | undefined,
-  uninstall: (extension: SNComponent) => void,
-  toggleActivate?: (extension: SNComponent) => void,
+  application: WebApplication;
+  extension: SNComponent;
+  first: boolean;
+  latestVersion: string | undefined;
+  uninstall: (extension: SNComponent) => void;
+  toggleActivate?: (extension: SNComponent) => void;
 }
 
-export const ExtensionItem: FunctionComponent<ExtensionItemProps> =
-  ({ application, extension, first, uninstall}) => {
-    const [offlineOnly, setOfflineOnly] = useState(extension.offlineOnly ?? false);
-    const [extensionName, setExtensionName] = useState(extension.name);
+export const ExtensionItem: FunctionComponent<ExtensionItemProps> = ({
+  application,
+  extension,
+  first,
+  uninstall,
+}) => {
+  const [offlineOnly, setOfflineOnly] = useState(
+    extension.offlineOnly ?? false
+  );
+  const [extensionName, setExtensionName] = useState(extension.name);
 
-    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 isThirParty = application.isThirdPartyFeature(extension.identifier);
-
-    return (
-      <PreferencesSegment classes={'mb-5'}>
-        {first && <>
-          <Title>Extensions</Title>
-          <div className="w-full min-h-3" />
-        </>}
-
-        <RenameExtension extensionName={extensionName} changeName={changeExtensionName} />
-        <div className="min-h-2" />
-
-        {isThirParty && localInstallable && <UseHosted offlineOnly={offlineOnly} toggleOfllineOnly={toggleOffllineOnly} />}
-
-        <>
-          <div className="min-h-2" />
-          <div className="flex flex-row">
-            <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 isThirParty = application.isThirdPartyFeature(extension.identifier);
+
+  return (
+    <PreferencesSegment classes={'mb-5'}>
+      {first && (
+        <>
+          <Title>Extensions</Title>
+        </>
+      )}
+
+      <RenameExtension
+        extensionName={extensionName}
+        changeName={changeExtensionName}
+      />
+      <div className="min-h-2" />
+
+      {isThirParty && localInstallable && (
+        <UseHosted
+          offlineOnly={offlineOnly}
+          toggleOfllineOnly={toggleOffllineOnly}
+        />
+      )}
+
+      <>
+        <div className="min-h-2" />
+        <div className="flex flex-row">
+          <Button
+            className="min-w-20"
+            type="normal"
+            label="Uninstall"
+            onClick={() => uninstall(extension)}
+          />
+        </div>
+      </>
+    </PreferencesSegment>
+  );
+};