feat: flatten quick settings menu and add separate prefs button (#1631)

packages/web/src/javascripts/Components/Footer/AccountMenuButton.tsx

@@ -3,6 +3,7 @@ import { useRef } from 'react'
 import AccountMenu, { AccountMenuProps } from '../AccountMenu/AccountMenu'
 import Icon from '../Icon/Icon'
 import Popover from '../Popover/Popover'
+import StyledTooltip from '../StyledTooltip/StyledTooltip'
 
 type Props = AccountMenuProps & {
   isOpen: boolean
@@ -25,18 +26,20 @@ const AccountMenuButton = ({
 
   return (
     <>
-      <button
-        ref={buttonRef}
-        onClick={toggleMenu}
-        className={classNames(
-          isOpen ? 'bg-border' : '',
-          'flex h-full w-8 cursor-pointer items-center justify-center rounded-full',
-        )}
-      >
-        <div className={hasError ? 'text-danger' : user ? 'text-info' : 'text-neutral'}>
-          <Icon type="account-circle" className="h-5 w-5 hover:text-info" />
-        </div>
-      </button>
+      <StyledTooltip label="Open account menu">
+        <button
+          ref={buttonRef}
+          onClick={toggleMenu}
+          className={classNames(
+            isOpen ? 'bg-border' : '',
+            'flex h-full w-8 cursor-pointer items-center justify-center rounded-full',
+          )}
+        >
+          <div className={hasError ? 'text-danger' : user ? 'text-info' : 'text-neutral'}>
+            <Icon type="account-circle" className="h-5 w-5 hover:text-info" />
+          </div>
+        </button>
+      </StyledTooltip>
       <Popover anchorElement={buttonRef.current} open={isOpen} togglePopover={toggleMenu} side="top" className="py-2">
         <AccountMenu
           onClickOutside={onClickOutside}

packages/web/src/javascripts/Components/Footer/Footer.tsx

@@ -18,6 +18,7 @@ import { AccountMenuPane } from '../AccountMenu/AccountMenuPane'
 import { EditorEventSource } from '@/Types/EditorEventSource'
 import QuickSettingsButton from './QuickSettingsButton'
 import AccountMenuButton from './AccountMenuButton'
+import StyledTooltip from '../StyledTooltip/StyledTooltip'
 
 type Props = {
   application: WebApplication
@@ -336,6 +337,11 @@ class Footer extends PureComponent<Props, State> {
     this.viewControllerManager.quickSettingsMenuController.closeQuickSettingsMenu()
   }
 
+  openPreferences = () => {
+    this.clickOutsideQuickSettingsMenu()
+    this.viewControllerManager.preferencesController.openPreferences()
+  }
+
   override render() {
     return (
       <div className="sn-component">
@@ -361,10 +367,21 @@ class Footer extends PureComponent<Props, State> {
                 isOpen={this.state.showQuickSettingsMenu}
                 toggleMenu={this.quickSettingsClickHandler}
                 application={this.application}
-                preferencesController={this.viewControllerManager.preferencesController}
                 quickSettingsMenuController={this.viewControllerManager.quickSettingsMenuController}
               />
             </div>
+            <div className="relative z-footer-bar-item select-none">
+              <StyledTooltip label="Open preferences">
+                <button
+                  onClick={this.openPreferences}
+                  className="flex h-full w-8 cursor-pointer items-center justify-center"
+                >
+                  <div className="h-5">
+                    <Icon type="tune" className="rounded hover:text-info" />
+                  </div>
+                </button>
+              </StyledTooltip>
+            </div>
             {this.state.showBetaWarning && (
               <Fragment>
                 <div className="relative z-footer-bar-item ml-3 flex select-none items-center border-l border-solid border-border pl-3">
@@ -417,14 +434,16 @@ class Footer extends PureComponent<Props, State> {
               </div>
             )}
             {this.state.hasPasscode && (
-              <div
-                id="lock-item"
-                onClick={this.lockClickHandler}
-                title="Locks application and wipes unencrypted data from memory."
-                className="relative z-footer-bar-item ml-3 flex cursor-pointer select-none items-center border-l border-solid border-border pl-2 hover:text-info"
-              >
-                <Icon type="lock-filled" size="custom" className="h-4.5 w-4.5" />
-              </div>
+              <StyledTooltip label="Lock application">
+                <div
+                  id="lock-item"
+                  onClick={this.lockClickHandler}
+                  title="Locks application and wipes unencrypted data from memory."
+                  className="relative z-footer-bar-item ml-3 flex cursor-pointer select-none items-center border-l border-solid border-border pl-2 hover:text-info"
+                >
+                  <Icon type="lock-filled" size="custom" className="h-4.5 w-4.5" />
+                </div>
+              </StyledTooltip>
             )}
           </div>
         </footer>

packages/web/src/javascripts/Components/Footer/QuickSettingsButton.tsx

@@ -1,40 +1,35 @@
 import { WebApplication } from '@/Application/Application'
-import { PreferencesController } from '@/Controllers/PreferencesController'
 import { QuickSettingsController } from '@/Controllers/QuickSettingsController'
 import { classNames } from '@/Utils/ConcatenateClassNames'
 import { useRef } from 'react'
 import Icon from '../Icon/Icon'
 import Popover from '../Popover/Popover'
 import QuickSettingsMenu from '../QuickSettingsMenu/QuickSettingsMenu'
+import StyledTooltip from '../StyledTooltip/StyledTooltip'
 
 type Props = {
   isOpen: boolean
   toggleMenu: () => void
   application: WebApplication
-  preferencesController: PreferencesController
   quickSettingsMenuController: QuickSettingsController
 }
 
-const QuickSettingsButton = ({
-  application,
-  isOpen,
-  toggleMenu,
-  preferencesController,
-  quickSettingsMenuController,
-}: Props) => {
+const QuickSettingsButton = ({ application, isOpen, toggleMenu, quickSettingsMenuController }: Props) => {
   const buttonRef = useRef<HTMLButtonElement>(null)
 
   return (
     <>
-      <button
-        onClick={toggleMenu}
-        className="flex h-full w-8 cursor-pointer items-center justify-center"
-        ref={buttonRef}
-      >
-        <div className="h-5">
-          <Icon type="tune" className={classNames(isOpen && 'text-info', 'rounded hover:text-info')} />
-        </div>
-      </button>
+      <StyledTooltip label="Open quick settings menu">
+        <button
+          onClick={toggleMenu}
+          className="flex h-full w-8 cursor-pointer items-center justify-center"
+          ref={buttonRef}
+        >
+          <div className="h-5">
+            <Icon type="themes" className={classNames(isOpen && 'text-info', 'rounded hover:text-info')} />
+          </div>
+        </button>
+      </StyledTooltip>
       <Popover
         togglePopover={toggleMenu}
         anchorElement={buttonRef.current}
@@ -43,11 +38,7 @@ const QuickSettingsButton = ({
         align="start"
         className="py-2"
       >
-        <QuickSettingsMenu
-          preferencesController={preferencesController}
-          quickSettingsMenuController={quickSettingsMenuController}
-          application={application}
-        />
+        <QuickSettingsMenu quickSettingsMenuController={quickSettingsMenuController} application={application} />
       </Popover>
     </>
   )

packages/web/src/javascripts/Components/QuickSettingsMenu/EventHandlers.ts

@@ -1,70 +0,0 @@
-import { Dispatch, RefObject, SetStateAction } from 'react'
-
-export const quickSettingsKeyDownHandler = (
-  closeQuickSettingsMenu: () => void,
-  event: React.KeyboardEvent,
-  quickSettingsMenuRef: RefObject<HTMLDivElement>,
-  themesMenuOpen: boolean,
-) => {
-  if (quickSettingsMenuRef?.current) {
-    const items: NodeListOf<HTMLButtonElement> = quickSettingsMenuRef.current.querySelectorAll(':scope > button')
-    const currentFocusedIndex = Array.from(items).findIndex((btn) => btn === document.activeElement)
-
-    if (!themesMenuOpen) {
-      switch (event.key) {
-        case 'Escape':
-          closeQuickSettingsMenu()
-          break
-        case 'ArrowDown':
-          if (items[currentFocusedIndex + 1]) {
-            items[currentFocusedIndex + 1].focus()
-          } else {
-            items[0].focus()
-          }
-          break
-        case 'ArrowUp':
-          if (items[currentFocusedIndex - 1]) {
-            items[currentFocusedIndex - 1].focus()
-          } else {
-            items[items.length - 1].focus()
-          }
-          break
-      }
-    }
-  }
-}
-
-export const themesMenuKeyDownHandler = (
-  event: React.KeyboardEvent<HTMLDivElement>,
-  themesMenuRef: RefObject<HTMLDivElement>,
-  setThemesMenuOpen: Dispatch<SetStateAction<boolean>>,
-  themesButtonRef: RefObject<HTMLButtonElement>,
-) => {
-  if (themesMenuRef?.current) {
-    const themes = themesMenuRef.current.querySelectorAll('button')
-    const currentFocusedIndex = Array.from(themes).findIndex((themeBtn) => themeBtn === document.activeElement)
-
-    switch (event.key) {
-      case 'Escape':
-      case 'ArrowLeft':
-        event.stopPropagation()
-        setThemesMenuOpen(false)
-        themesButtonRef.current?.focus()
-        break
-      case 'ArrowDown':
-        if (themes[currentFocusedIndex + 1]) {
-          themes[currentFocusedIndex + 1].focus()
-        } else {
-          themes[0].focus()
-        }
-        break
-      case 'ArrowUp':
-        if (themes[currentFocusedIndex - 1]) {
-          themes[currentFocusedIndex - 1].focus()
-        } else {
-          themes[themes.length - 1].focus()
-        }
-        break
-    }
-  }
-}

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

@@ -1,24 +1,20 @@
 import { WebApplication } from '@/Application/Application'
 import { ComponentArea, ContentType, FeatureIdentifier, GetFeatures, SNComponent } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent, KeyboardEventHandler, useCallback, useEffect, useRef, useState } from 'react'
+import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import Switch from '@/Components/Switch/Switch'
-import { quickSettingsKeyDownHandler } from './EventHandlers'
 import FocusModeSwitch from './FocusModeSwitch'
 import ThemesMenuButton from './ThemesMenuButton'
 import { ThemeItem } from './ThemeItem'
 import { sortThemes } from '@/Utils/SortThemes'
 import RadioIndicator from '../RadioIndicator/RadioIndicator'
 import HorizontalSeparator from '../Shared/HorizontalSeparator'
-import Popover from '../Popover/Popover'
-import { PreferencesController } from '@/Controllers/PreferencesController'
 import { QuickSettingsController } from '@/Controllers/QuickSettingsController'
 
 const focusModeAnimationDuration = 1255
 
 type MenuProps = {
-  preferencesController: PreferencesController
   quickSettingsMenuController: QuickSettingsController
   application: WebApplication
 }
@@ -37,20 +33,13 @@ const toggleFocusMode = (enabled: boolean) => {
   }
 }
 
-const QuickSettingsMenu: FunctionComponent<MenuProps> = ({
-  application,
-  preferencesController,
-  quickSettingsMenuController,
-}) => {
+const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, quickSettingsMenuController }) => {
   const { closeQuickSettingsMenu, focusModeEnabled, setFocusModeEnabled } = quickSettingsMenuController
   const [themes, setThemes] = useState<ThemeItem[]>([])
   const [toggleableComponents, setToggleableComponents] = useState<SNComponent[]>([])
-  const [themesMenuOpen, setThemesMenuOpen] = useState(false)
   const [defaultThemeOn, setDefaultThemeOn] = useState(false)
 
-  const themesButtonRef = useRef<HTMLButtonElement>(null)
   const prefsButtonRef = useRef<HTMLButtonElement>(null)
-  const quickSettingsMenuRef = useRef<HTMLDivElement>(null)
   const defaultThemeButtonRef = useRef<HTMLButtonElement>(null)
 
   const mainRef = useRef<HTMLDivElement>(null)
@@ -126,25 +115,10 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({
     }
   }, [application, reloadToggleableComponents])
 
-  useEffect(() => {
-    if (themesMenuOpen) {
-      defaultThemeButtonRef.current?.focus()
-    }
-  }, [themesMenuOpen])
-
   useEffect(() => {
     prefsButtonRef.current?.focus()
   }, [])
 
-  const toggleThemesMenu = useCallback(() => {
-    setThemesMenuOpen((isOpen) => !isOpen)
-  }, [])
-
-  const openPreferences = useCallback(() => {
-    closeQuickSettingsMenu()
-    preferencesController.openPreferences()
-  }, [closeQuickSettingsMenu, preferencesController])
-
   const toggleComponent = useCallback(
     (component: SNComponent) => {
       if (component.isTheme()) {
@@ -156,29 +130,6 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({
     [application],
   )
 
-  const handleBtnKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = useCallback(
-    (event) => {
-      switch (event.key) {
-        case 'Escape':
-          setThemesMenuOpen(false)
-          themesButtonRef.current?.focus()
-          break
-        case 'ArrowRight':
-          if (!themesMenuOpen) {
-            toggleThemesMenu()
-          }
-      }
-    },
-    [themesMenuOpen, toggleThemesMenu],
-  )
-
-  const handleQuickSettingsKeyDown: KeyboardEventHandler<HTMLDivElement> = useCallback(
-    (event) => {
-      quickSettingsKeyDownHandler(closeQuickSettingsMenu, event, quickSettingsMenuRef, themesMenuOpen)
-    },
-    [closeQuickSettingsMenu, themesMenuOpen],
-  )
-
   const toggleDefaultTheme = useCallback(() => {
     const activeTheme = themes.map((item) => item.component).find((theme) => theme?.active && !theme.isLayerable())
     if (activeTheme) {
@@ -187,41 +138,21 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({
   }, [application, themes])
 
   return (
-    <div ref={mainRef} onKeyDown={handleQuickSettingsKeyDown}>
-      <div className="mt-1 mb-2 px-3 text-sm font-semibold uppercase text-text">Quick Settings</div>
+    <div ref={mainRef}>
+      <div className="my-1 px-3 text-sm font-semibold uppercase text-text">Themes</div>
       <button
-        onClick={toggleThemesMenu}
-        onKeyDown={handleBtnKeyDown}
-        ref={themesButtonRef}
-        className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+        className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+        onClick={toggleDefaultTheme}
+        ref={defaultThemeButtonRef}
       >
-        <div className="flex items-center">
-          <Icon type="themes" className="mr-2 text-neutral" />
-          Themes
-        </div>
-        <Icon type="chevron-right" className="text-neutral" />
+        <RadioIndicator checked={defaultThemeOn} className="mr-2" />
+        Default
       </button>
-      <Popover
-        togglePopover={toggleThemesMenu}
-        anchorElement={themesButtonRef.current}
-        open={themesMenuOpen}
-        side="right"
-        align="end"
-        className="py-2"
-      >
-        <div className="my-1 px-3 text-sm font-semibold uppercase text-text">Themes</div>
-        <button
-          className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
-          onClick={toggleDefaultTheme}
-          ref={defaultThemeButtonRef}
-        >
-          <RadioIndicator checked={defaultThemeOn} className="mr-2" />
-          Default
-        </button>
-        {themes.map((theme) => (
-          <ThemesMenuButton item={theme} application={application} key={theme.component?.uuid ?? theme.identifier} />
-        ))}
-      </Popover>
+      {themes.map((theme) => (
+        <ThemesMenuButton item={theme} application={application} key={theme.component?.uuid ?? theme.identifier} />
+      ))}
+      <HorizontalSeparator classes="my-2" />
+      <div className="my-1 px-3 text-sm font-semibold uppercase text-text">Tools</div>
       {toggleableComponents.map((component) => (
         <button
           className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
@@ -243,15 +174,6 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({
         onClose={closeQuickSettingsMenu}
         isEnabled={focusModeEnabled}
       />
-      <HorizontalSeparator classes="my-2" />
-      <button
-        className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
-        onClick={openPreferences}
-        ref={prefsButtonRef}
-      >
-        <Icon type="more" className="mr-2 text-neutral" />
-        Open Preferences
-      </button>
     </div>
   )
 }

packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx

@@ -0,0 +1,14 @@
+import Tooltip from '@reach/tooltip'
+import styled from 'styled-components'
+
+export default styled(Tooltip)`
+  &[data-reach-tooltip] {
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+    padding: 0.375rem 0.75rem;
+    background-color: var(--sn-stylekit-contrast-background-color);
+    color: var(--sn-stylekit-foreground-color);
+    border-color: var(--sn-stylekit-border-color);
+    z-index: var(--z-index-tooltip);
+  }
+`

packages/web/src/stylesheets/_main.scss

@@ -13,6 +13,7 @@
   --z-index-lock-screen: 10000;
   --z-index-modal: 10000;
   --z-index-toast: 11000;
+  --z-index-tooltip: 12000;
 
   --sn-stylekit-base-font-size: 0.813rem;
   --sn-stylekit-simplified-chinese-font: 'Microsoft Yahei', '微软雅黑体';

packages/web/tailwind.config.js

@@ -73,6 +73,7 @@ module.exports = {
         'lock-screen': 'var(--z-index-lock-screen)',
         modal: 'var(--z-index-modal)',
         toast: 'var(--z-index-toast)',
+        tooltip: 'var(--z-index-tooltip)',
       },
       boxShadow: {
         inner: