refactor: use local state for quick settings menu

packages/web/src/javascripts/Application/Dependencies/WebDependencies.ts

@@ -22,7 +22,6 @@ import { DesktopManager } from '../Device/DesktopManager'
 import { MomentsService } from '@/Controllers/Moments/MomentsService'
 import { PersistenceService } from '@/Controllers/Abstract/PersistenceService'
 import { FilePreviewModalController } from '@/Controllers/FilePreviewModalController'
-import { QuickSettingsController } from '@/Controllers/QuickSettingsController'
 import { PaneController } from '@/Controllers/PaneController/PaneController'
 import { PreferencesController } from '@/Controllers/PreferencesController'
 import { FeaturesController } from '@/Controllers/FeaturesController'
@@ -172,10 +171,6 @@ export class WebDependencies extends DependencyContainer {
       return new FilePreviewModalController(application.items)
     })
 
-    this.bind(Web_TYPES.QuickSettingsController, () => {
-      return new QuickSettingsController(application.events)
-    })
-
     this.bind(Web_TYPES.PaneController, () => {
       return new PaneController(
         application.preferences,

packages/web/src/javascripts/Application/WebApplication.ts

@@ -71,7 +71,6 @@ import { HistoryModalController } from '@/Controllers/NoteHistory/HistoryModalCo
 import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 import { FilePreviewModalController } from '@/Controllers/FilePreviewModalController'
 import { OpenSubscriptionDashboard } from './UseCase/OpenSubscriptionDashboard'
-import { QuickSettingsController } from '@/Controllers/QuickSettingsController'
 import { ItemGroupController } from '@/Components/NoteView/Controller/ItemGroupController'
 import { NoAccountWarningController } from '@/Controllers/NoAccountWarningController'
 import { SearchOptionsController } from '@/Controllers/SearchOptionsController'
@@ -617,10 +616,6 @@ export class WebApplication extends SNApplication implements WebApplicationInter
     return this.deps.get<PurchaseFlowController>(Web_TYPES.PurchaseFlowController)
   }
 
-  get quickSettingsMenuController(): QuickSettingsController {
-    return this.deps.get<QuickSettingsController>(Web_TYPES.QuickSettingsController)
-  }
-
   get persistence(): PersistenceService {
     return this.deps.get<PersistenceService>(Web_TYPES.PersistenceService)
   }

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
+              <QuickSettingsButton application={this.application} />
-                isOpen={this.state.showQuickSettingsMenu}
-                toggleMenu={this.quickSettingsClickHandler}
-                application={this.application}
-                quickSettingsMenuController={this.application.quickSettingsMenuController}
-              />
             </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 />

packages/web/src/javascripts/Controllers/QuickSettingsController.ts

@@ -1,46 +0,0 @@
-import { InternalEventBusInterface } from '@standardnotes/snjs'
-import { action, makeObservable, observable } from 'mobx'
-import { AbstractViewController } from './Abstract/AbstractViewController'
-
-export class QuickSettingsController extends AbstractViewController {
-  open = false
-  shouldAnimateCloseMenu = false
-
-  constructor(eventBus: InternalEventBusInterface) {
-    super(eventBus)
-
-    makeObservable(this, {
-      open: observable,
-      shouldAnimateCloseMenu: observable,
-
-      setOpen: action,
-      setShouldAnimateCloseMenu: action,
-      toggle: action,
-      closeQuickSettingsMenu: action,
-    })
-  }
-
-  setOpen = (open: boolean): void => {
-    this.open = open
-  }
-
-  setShouldAnimateCloseMenu = (shouldAnimate: boolean): void => {
-    this.shouldAnimateCloseMenu = shouldAnimate
-  }
-
-  toggle = (): void => {
-    if (this.open) {
-      this.closeQuickSettingsMenu()
-    } else {
-      this.setOpen(true)
-    }
-  }
-
-  closeQuickSettingsMenu = (): void => {
-    this.setShouldAnimateCloseMenu(true)
-    setTimeout(() => {
-      this.setOpen(false)
-      this.setShouldAnimateCloseMenu(false)
-    }, 150)
-  }
-}