refactor: use local state for quick settings menu

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

@@ -37,7 +37,6 @@ type State = {
   showSyncResolution: boolean
   newUpdateAvailable: boolean
   showAccountMenu: boolean
-  showQuickSettingsMenu: boolean
   offline: boolean
   hasError: boolean
   arbitraryStatusMessage?: string
@@ -64,7 +63,6 @@ class Footer extends AbstractComponent<Props, State> {
       showSyncResolution: false,
       newUpdateAvailable: false,
       showAccountMenu: false,
-      showQuickSettingsMenu: false,
     }
 
     this.webEventListenerDestroyer = props.application.addWebEventObserver((event, data) => {
@@ -125,7 +123,6 @@ class Footer extends AbstractComponent<Props, State> {
     this.autorun(() => {
       this.setState({
         showAccountMenu: this.application.accountMenuController.show,
-        showQuickSettingsMenu: this.application.quickSettingsMenuController.open,
       })
     })
   }
@@ -293,10 +290,6 @@ class Footer extends AbstractComponent<Props, State> {
     this.application.accountMenuController.toggleShow()
   }
 
-  quickSettingsClickHandler = () => {
-    this.application.quickSettingsMenuController.toggle()
-  }
-
   syncResolutionClickHandler = () => {
     this.setState({
       showSyncResolution: !this.state.showSyncResolution,
@@ -336,12 +329,7 @@ class Footer extends AbstractComponent<Props, State> {
     this.application.accountMenuController.closeAccountMenu()
   }
 
-  clickOutsideQuickSettingsMenu = () => {
-    this.application.quickSettingsMenuController.closeQuickSettingsMenu()
-  }
-
   openPreferences = (openWhatsNew: boolean) => {
-    this.clickOutsideQuickSettingsMenu()
     if (openWhatsNew) {
       this.application.preferencesController.setCurrentPane('whats-new')
     }
@@ -372,12 +360,7 @@ class Footer extends AbstractComponent<Props, State> {
             </div>
 
             <div className="relative z-footer-bar-item select-none">
-              <QuickSettingsButton
-                isOpen={this.state.showQuickSettingsMenu}
-                toggleMenu={this.quickSettingsClickHandler}
-                application={this.application}
-                quickSettingsMenuController={this.application.quickSettingsMenuController}
-              />
+              <QuickSettingsButton application={this.application} />
             </div>
 
             <div className="relative z-footer-bar-item  ml-1.5 select-none">

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

@@ -1,9 +1,8 @@
 import { WebApplication } from '@/Application/WebApplication'
-import { QuickSettingsController } from '@/Controllers/QuickSettingsController'
 import { UIFeature, GetDarkThemeFeature } from '@standardnotes/snjs'
 import { TOGGLE_DARK_MODE_COMMAND } from '@standardnotes/ui-services'
 import { classNames } from '@standardnotes/utils'
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useCommandService } from '../CommandProvider'
 import Icon from '../Icon/Icon'
 import Popover from '../Popover/Popover'
@@ -11,16 +10,16 @@ import QuickSettingsMenu from '../QuickSettingsMenu/QuickSettingsMenu'
 import StyledTooltip from '../StyledTooltip/StyledTooltip'
 
 type Props = {
-  isOpen: boolean
-  toggleMenu: () => void
   application: WebApplication
-  quickSettingsMenuController: QuickSettingsController
 }
 
-const QuickSettingsButton = ({ application, isOpen, toggleMenu, quickSettingsMenuController }: Props) => {
+const QuickSettingsButton = ({ application }: Props) => {
   const buttonRef = useRef<HTMLButtonElement>(null)
   const commandService = useCommandService()
 
+  const [isOpen, setIsOpen] = useState(false)
+  const toggleMenu = () => setIsOpen(!isOpen)
+
   useEffect(() => {
     return commandService.addCommandHandler({
       command: TOGGLE_DARK_MODE_COMMAND,
@@ -52,7 +51,7 @@ const QuickSettingsButton = ({ application, isOpen, toggleMenu, quickSettingsMen
         align="start"
         className="py-2"
       >
-        <QuickSettingsMenu quickSettingsMenuController={quickSettingsMenuController} />
+        <QuickSettingsMenu closeMenu={toggleMenu} />
       </Popover>
     </>
   )

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

@@ -13,7 +13,6 @@ import Icon from '@/Components/Icon/Icon'
 import FocusModeSwitch from './FocusModeSwitch'
 import ThemesMenuButton from './ThemesMenuButton'
 import { sortThemes } from '@/Utils/SortThemes'
-import { QuickSettingsController } from '@/Controllers/QuickSettingsController'
 import PanelSettingsSection from './PanelSettingsSection'
 import Menu from '../Menu/Menu'
 import MenuSwitchButtonItem from '../Menu/MenuSwitchButtonItem'
@@ -23,14 +22,13 @@ import { GetAllThemesUseCase } from '@standardnotes/ui-services'
 import MenuItemSeparator from '../Menu/MenuItemSeparator'
 
 type MenuProps = {
-  quickSettingsMenuController: QuickSettingsController
+  closeMenu: () => void
 }
 
-const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ quickSettingsMenuController }) => {
+const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ closeMenu }) => {
   const application = useApplication()
 
   const { focusModeEnabled, setFocusModeEnabled } = application.paneController
-  const { closeQuickSettingsMenu } = quickSettingsMenuController
   const [themes, setThemes] = useState<UIFeature<ThemeFeatureDescription>[]>([])
   const [editorStackComponents, setEditorStackComponents] = useState<ComponentInterface[]>([])
 
@@ -147,7 +145,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ quickSettingsMenuCont
       <FocusModeSwitch
         application={application}
         onToggle={setFocusModeEnabled}
-        onClose={closeQuickSettingsMenu}
+        onClose={closeMenu}
         isEnabled={focusModeEnabled}
       />
       <PanelSettingsSection />