feat: Use Menu component in the general account menu (#698)

app/assets/javascripts/components/AccountMenu/GeneralAccountMenu.tsx

@@ -5,11 +5,12 @@ import { Icon } from '../Icon';
 import { formatLastSyncDate } from '@/preferences/panes/account/Sync';
 import { SyncQueueStrategy } from '@standardnotes/snjs';
 import { STRING_GENERIC_SYNC_ERROR } from '@/strings';
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { useState } from 'preact/hooks';
 import { AccountMenuPane } from '.';
 import { FunctionComponent } from 'preact';
-import { JSXInternal } from 'preact/src/jsx';
 import { AppVersion } from '@/version';
+import { Menu } from '../menu/Menu';
+import { MenuItem, MenuItemSeparator, MenuItemType } from '../menu/MenuItem';
 
 type Props = {
   appState: AppState;
@@ -26,9 +27,6 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
     const [lastSyncDate, setLastSyncDate] = useState(
       formatLastSyncDate(application.getLastSyncDate() as Date)
     );
-    const [currentFocusedIndex, setCurrentFocusedIndex] = useState(0);
-
-    const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);
 
     const doSynchronization = async () => {
       setIsSyncingInProgress(true);
@@ -57,48 +55,8 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
 
     const user = application.getUser();
 
-    const accountMenuRef = useRef<HTMLDivElement>();
-
-    const handleKeyDown: JSXInternal.KeyboardEventHandler<HTMLDivElement> = (
-      event
-    ) => {
-      switch (event.key) {
-        case 'ArrowDown':
-          setCurrentFocusedIndex((index) => {
-            console.log(index, buttonRefs.current.length);
-            if (index + 1 < buttonRefs.current.length) {
-              return index + 1;
-            } else {
-              return 0;
-            }
-          });
-          break;
-        case 'ArrowUp':
-          setCurrentFocusedIndex((index) => {
-            if (index - 1 > -1) {
-              return index - 1;
-            } else {
-              return buttonRefs.current.length - 1;
-            }
-          });
-          break;
-      }
-    };
-
-    useEffect(() => {
-      if (buttonRefs.current[currentFocusedIndex]) {
-        buttonRefs.current[currentFocusedIndex]?.focus();
-      }
-    }, [currentFocusedIndex]);
-
-    const pushRefToArray = (ref: HTMLButtonElement | null) => {
-      if (ref && !buttonRefs.current.includes(ref)) {
-        buttonRefs.current.push(ref);
-      }
-    };
-
     return (
-      <div ref={accountMenuRef} onKeyDown={handleKeyDown}>
+      <>
         <div className="flex items-center justify-between px-3 mt-1 mb-3">
           <div className="sn-account-menu-headline">Account</div>
           <div className="flex cursor-pointer" onClick={closeMenu}>
@@ -147,74 +105,72 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
           </>
         )}
         <div className="h-1px my-2 bg-border"></div>
-        {user ? (
-          <button
-            className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
-            ref={pushRefToArray}
-            onClick={() => {
-              appState.accountMenu.closeAccountMenu();
-              appState.preferences.setCurrentPane('account');
-              appState.preferences.openPreferences();
-            }}
-          >
-            <Icon type="user" className={iconClassName} />
-            Account settings
-          </button>
-        ) : (
-          <>
-            <button
-              className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
-              ref={pushRefToArray}
+        <Menu a11yLabel="General account menu" closeMenu={closeMenu}>
+          {user ? (
+            <MenuItem
+              type={MenuItemType.IconButton}
               onClick={() => {
-                setMenuPane(AccountMenuPane.Register);
+                appState.accountMenu.closeAccountMenu();
+                appState.preferences.setCurrentPane('account');
+                appState.preferences.openPreferences();
               }}
             >
               <Icon type="user" className={iconClassName} />
-              Create free account
-            </button>
-            <button
-              className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
-              ref={pushRefToArray}
-              onClick={() => {
-                setMenuPane(AccountMenuPane.SignIn);
-              }}
-            >
-              <Icon type="signIn" className={iconClassName} />
-              Sign in
-            </button>
-          </>
-        )}
-        <button
-          className="sn-dropdown-item justify-between focus:bg-info-backdrop focus:shadow-none"
-          ref={pushRefToArray}
-          onClick={() => {
-            appState.accountMenu.closeAccountMenu();
-            appState.preferences.setCurrentPane('help-feedback');
-            appState.preferences.openPreferences();
-          }}
-        >
-          <div className="flex items-center">
-            <Icon type="help" className={iconClassName} />
-            Help &amp; feedback
-          </div>
-          <span className="color-neutral">v{AppVersion}</span>
-        </button>
-        {user ? (
-          <>
-            <div className="h-1px my-2 bg-border"></div>
-            <button
-              className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
-              ref={pushRefToArray}
-              onClick={() => {
-                appState.accountMenu.setSigningOut(true);
-              }}
-            >
-              <Icon type="signOut" className={iconClassName} />
-              Sign out and clear local data
-            </button>
-          </>
-        ) : null}
-      </div>
+              Account settings
+            </MenuItem>
+          ) : (
+            <>
+              <MenuItem
+                type={MenuItemType.IconButton}
+                onClick={() => {
+                  setMenuPane(AccountMenuPane.Register);
+                }}
+              >
+                <Icon type="user" className={iconClassName} />
+                Create free account
+              </MenuItem>
+              <MenuItem
+                type={MenuItemType.IconButton}
+                onClick={() => {
+                  setMenuPane(AccountMenuPane.SignIn);
+                }}
+              >
+                <Icon type="signIn" className={iconClassName} />
+                Sign in
+              </MenuItem>
+            </>
+          )}
+          <MenuItem
+            className="justify-between"
+            type={MenuItemType.IconButton}
+            onClick={() => {
+              appState.accountMenu.closeAccountMenu();
+              appState.preferences.setCurrentPane('help-feedback');
+              appState.preferences.openPreferences();
+            }}
+          >
+            <div className="flex items-center">
+              <Icon type="help" className={iconClassName} />
+              Help &amp; feedback
+            </div>
+            <span className="color-neutral">v{AppVersion}</span>
+          </MenuItem>
+          {user ? (
+            <>
+              <MenuItemSeparator />
+              <MenuItem
+                type={MenuItemType.IconButton}
+                onClick={() => {
+                  appState.accountMenu.setSigningOut(true);
+                }}
+              >
+                <Icon type="signOut" className={iconClassName} />
+                Sign out and clear local data
+              </MenuItem>
+            </>
+          ) : null}
+        </Menu>
+      </>
     );
   }
 );

yarn.lock

@@ -2142,10 +2142,10 @@
     "@standardnotes/sncrypto-common" "^1.5.2"
     libsodium-wrappers "^0.7.8"
 
-"@standardnotes/snjs@2.15.2":
-  version "2.15.2"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.15.2.tgz#4502a02333529434d2c8c00830652cce31c57d25"
-  integrity sha512-n0R6wSJfwYoBVtChPbBssvvPQEyYufP7AD+IEibjjbmZImFQky/7x45hsoEsFti0EL5FheAHHKFCC//4jD4fiA==
+"@standardnotes/snjs@2.16.0":
+  version "2.16.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.16.0.tgz#af1e427d8ed7f71b5019f7c8cca349422a885b02"
+  integrity sha512-dAvFFRu9PuIbW4fF1hZEfh/DwADO2bZP1s24biYY1bfMOr9Z0131n2xIN/yUsA7zw0Sch6m1Nof8OCEZntX5xQ==
   dependencies:
     "@standardnotes/auth" "3.7.2"
     "@standardnotes/common" "1.2.0"