diff --git a/app/assets/javascripts/components/AccountMenu/GeneralAccountMenu.tsx b/app/assets/javascripts/components/AccountMenu/GeneralAccountMenu.tsx index c1ed8da9735..f2f6d017100 100644 --- a/app/assets/javascripts/components/AccountMenu/GeneralAccountMenu.tsx +++ b/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 = 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 = observer( const user = application.getUser(); - const accountMenuRef = useRef(); - - const handleKeyDown: JSXInternal.KeyboardEventHandler = ( - 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 ( -
+ <>
Account
@@ -147,74 +105,72 @@ export const GeneralAccountMenu: FunctionComponent = observer( )}
- {user ? ( - - ) : ( - <> - - - - )} - - {user ? ( - <> -
- - - ) : null} -
+
+ + Help & feedback +
+ v{AppVersion} + + {user ? ( + <> + + { + appState.accountMenu.setSigningOut(true); + }} + > + + Sign out and clear local data + + + ) : null} + + ); } ); diff --git a/yarn.lock b/yarn.lock index 0a80bb76f5a..ef5b966ee8f 100644 --- a/yarn.lock +++ b/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"