feat: add arrow key navigation to file context menu & options panel

feat: close popover with Escape key and focus anchor element

fix: menu focus

fix: quick settings menu keyboard navigation

packages/web/src/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx

@@ -2,9 +2,9 @@ import { WebApplication } from '@/Application/Application'
 import { FunctionComponent, MouseEventHandler, useCallback, useMemo } from 'react'
 import Switch from '@/Components/Switch/Switch'
 import { isMobileScreen } from '@/Utils'
-import { classNames } from '@standardnotes/utils'
 import { TOGGLE_FOCUS_MODE_COMMAND } from '@standardnotes/ui-services'
 import { KeyboardShortcutIndicator } from '../KeyboardShortcutIndicator/KeyboardShortcutIndicator'
+import MenuItem from '../Menu/MenuItem'
 
 type Props = {
   application: WebApplication
@@ -36,20 +36,13 @@ const FocusModeSwitch: FunctionComponent<Props> = ({ application, onToggle, onCl
   }
 
   return (
-    <button
-      className={classNames(
-        'group flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left',
-        'text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none disabled:bg-default disabled:text-passive-2',
-        'text-mobile-menu-item md:text-tablet-menu-item lg:text-menu-item',
-      )}
-      onClick={toggle}
-    >
+    <MenuItem onClick={toggle}>
       <div className="flex items-center">Focus Mode</div>
-      <div className="flex">
+      <div className="ml-auto flex">
         {shortcut && <KeyboardShortcutIndicator className="mr-2" shortcut={shortcut} />}
         <Switch className="px-0" checked={isEnabled} />
       </div>
-    </button>
+    </MenuItem>
   )
 }