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/components/Navigation.tsx

@@ -1,57 +1,63 @@
 import { ComponentView } from '@/components/ComponentView';
-import { PanelResizer } from '@/components/PanelResizer';
 import { SmartTagsSection } from '@/components/Tags/SmartTagsSection';
 import { TagsSection } from '@/components/Tags/TagsSection';
-import { toDirective } from '@/components/utils';
+import { WebApplication } from '@/ui_models/application';
+import { PANEL_NAME_NAVIGATION } from '@/views/constants';
+import { ApplicationEvent, PrefKey } from '@standardnotes/snjs';
+import { observer } from 'mobx-react-lite';
+import { FunctionComponent } from 'preact';
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'preact/hooks';
+import { PremiumModalProvider } from './Premium';
 import {
   PanelSide,
   ResizeFinishCallback,
-} from '@/directives/views/panelResizer';
-import { WebApplication } from '@/ui_models/application';
-import { PANEL_NAME_NAVIGATION } from '@/views/constants';
-import { PrefKey } from '@standardnotes/snjs';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { useCallback, useMemo, useState } from 'preact/hooks';
-import { PremiumModalProvider } from './Premium';
+  PanelResizer,
+  PanelResizeType,
+} from './PanelResizer';
 
 type Props = {
   application: WebApplication;
 };
 
-const NAVIGATION_SELECTOR = 'navigation';
-
-const useNavigationPanelRef = (): [HTMLDivElement | null, () => void] => {
-  const [panelRef, setPanelRefInternal] = useState<HTMLDivElement | null>(null);
-
-  const setPanelRefPublic = useCallback(() => {
-    const elem = document.querySelector(
-      NAVIGATION_SELECTOR
-    ) as HTMLDivElement | null;
-    setPanelRefInternal(elem);
-  }, [setPanelRefInternal]);
-
-  return [panelRef, setPanelRefPublic];
-};
-
 export const Navigation: FunctionComponent<Props> = observer(
   ({ application }) => {
     const appState = useMemo(() => application.getAppState(), [application]);
     const componentViewer = appState.foldersComponentViewer;
     const enableNativeSmartTagsFeature =
       appState.features.enableNativeSmartTagsFeature;
-    const [panelRef, setPanelRef] = useNavigationPanelRef();
+    const [ref, setRef] = useState<HTMLDivElement | null>();
+    const [panelWidth, setPanelWidth] = useState<number>(0);
+
+    useEffect(() => {
+      const removeObserver = application.addEventObserver(async () => {
+        const width = application.getPreference(PrefKey.TagsPanelWidth);
+        if (width) {
+          setPanelWidth(width);
+        }
+      }, ApplicationEvent.PreferencesChanged);
+
+      return () => {
+        removeObserver();
+      };
+    }, [application]);
 
     const onCreateNewTag = useCallback(() => {
       appState.tags.createNewTemplate();
     }, [appState]);
 
     const panelResizeFinishCallback: ResizeFinishCallback = useCallback(
-      (_lastWidth, _lastLeft, _isMaxWidth, isCollapsed) => {
+      (width, _lastLeft, _isMaxWidth, isCollapsed) => {
+        application.setPreference(PrefKey.TagsPanelWidth, width);
         appState.noteTags.reloadTagsContainerMaxWidth();
         appState.panelDidResize(PANEL_NAME_NAVIGATION, isCollapsed);
       },
-      [appState]
+      [application, appState]
     );
 
     const panelWidthEventCallback = useCallback(() => {
@@ -62,9 +68,9 @@ export const Navigation: FunctionComponent<Props> = observer(
       <PremiumModalProvider state={appState.features}>
         <div
           id="navigation"
-          className="sn-component section"
+          className="sn-component section app-column app-column-first"
           data-aria-label="Navigation"
-          ref={setPanelRef}
+          ref={setRef}
         >
           {componentViewer ? (
             <div className="component-view-container">
@@ -102,16 +108,18 @@ export const Navigation: FunctionComponent<Props> = observer(
               </div>
             </div>
           )}
-          {panelRef && (
+          {ref && (
             <PanelResizer
-              application={application}
               collapsable={true}
               defaultWidth={150}
-              panel={panelRef}
-              prefKey={PrefKey.TagsPanelWidth}
+              panel={ref}
+              hoverable={true}
               side={PanelSide.Right}
+              type={PanelResizeType.WidthOnly}
               resizeFinishCallback={panelResizeFinishCallback}
               widthEventCallback={panelWidthEventCallback}
+              width={panelWidth}
+              left={0}
             />
           )}
         </div>
@@ -119,5 +127,3 @@ export const Navigation: FunctionComponent<Props> = observer(
     );
   }
 );
-
-export const NavigationDirective = toDirective<Props>(Navigation);