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,10 +105,10 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
           </>
         )}
         <div className="h-1px my-2 bg-border"></div>
+        <Menu a11yLabel="General account menu" closeMenu={closeMenu}>
           {user ? (
-          <button
+            <MenuItem
-            className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
+              type={MenuItemType.IconButton}
-            ref={pushRefToArray}
               onClick={() => {
                 appState.accountMenu.closeAccountMenu();
                 appState.preferences.setCurrentPane('account');
@@ -159,34 +117,32 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
             >
               <Icon type="user" className={iconClassName} />
               Account settings
-          </button>
+            </MenuItem>
           ) : (
             <>
-            <button
+              <MenuItem
-              className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
+                type={MenuItemType.IconButton}
-              ref={pushRefToArray}
                 onClick={() => {
                   setMenuPane(AccountMenuPane.Register);
                 }}
               >
                 <Icon type="user" className={iconClassName} />
                 Create free account
-            </button>
+              </MenuItem>
-            <button
+              <MenuItem
-              className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
+                type={MenuItemType.IconButton}
-              ref={pushRefToArray}
                 onClick={() => {
                   setMenuPane(AccountMenuPane.SignIn);
                 }}
               >
                 <Icon type="signIn" className={iconClassName} />
                 Sign in
-            </button>
+              </MenuItem>
             </>
           )}
-        <button
+          <MenuItem
-          className="sn-dropdown-item justify-between focus:bg-info-backdrop focus:shadow-none"
+            className="justify-between"
-          ref={pushRefToArray}
+            type={MenuItemType.IconButton}
             onClick={() => {
               appState.accountMenu.closeAccountMenu();
               appState.preferences.setCurrentPane('help-feedback');
@@ -198,23 +154,23 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
               Help &amp; feedback
             </div>
             <span className="color-neutral">v{AppVersion}</span>
-        </button>
+          </MenuItem>
           {user ? (
             <>
-            <div className="h-1px my-2 bg-border"></div>
+              <MenuItemSeparator />
-            <button
+              <MenuItem
-              className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
+                type={MenuItemType.IconButton}
-              ref={pushRefToArray}
                 onClick={() => {
                   appState.accountMenu.setSigningOut(true);
                 }}
               >
                 <Icon type="signOut" className={iconClassName} />
                 Sign out and clear local data
-            </button>
+              </MenuItem>
             </>
           ) : null}
-      </div>
+        </Menu>
+      </>
     );
   }
 );

yarn.lock

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