refactor: use local state for vault selection menu

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

@@ -38,7 +38,6 @@ type State = {
   newUpdateAvailable: boolean
   showAccountMenu: boolean
   showQuickSettingsMenu: boolean
-  showVaultSelectionMenu: boolean
   offline: boolean
   hasError: boolean
   arbitraryStatusMessage?: string
@@ -66,7 +65,6 @@ class Footer extends AbstractComponent<Props, State> {
       newUpdateAvailable: false,
       showAccountMenu: false,
       showQuickSettingsMenu: false,
-      showVaultSelectionMenu: false,
     }
 
     this.webEventListenerDestroyer = props.application.addWebEventObserver((event, data) => {
@@ -128,7 +126,6 @@ class Footer extends AbstractComponent<Props, State> {
       this.setState({
         showAccountMenu: this.application.accountMenuController.show,
         showQuickSettingsMenu: this.application.quickSettingsMenuController.open,
-        showVaultSelectionMenu: this.application.vaultSelectionController.open,
       })
     })
   }
@@ -300,10 +297,6 @@ class Footer extends AbstractComponent<Props, State> {
     this.application.quickSettingsMenuController.toggle()
   }
 
-  vaultSelectionClickHandler = () => {
-    this.application.vaultSelectionController.toggle()
-  }
-
   syncResolutionClickHandler = () => {
     this.setState({
       showSyncResolution: !this.state.showSyncResolution,
@@ -388,11 +381,7 @@ class Footer extends AbstractComponent<Props, State> {
             </div>
 
             <div className="relative z-footer-bar-item  ml-1.5 select-none">
-              <VaultSelectionButton
-                isOpen={this.state.showVaultSelectionMenu}
-                toggleMenu={this.vaultSelectionClickHandler}
-                controller={this.application.vaultSelectionController}
-              />
+              <VaultSelectionButton />
             </div>
             <UpgradeNow
               application={this.application}

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

@@ -1,25 +1,20 @@
 import { classNames } from '@standardnotes/utils'
-import { useRef } from 'react'
+import { useRef, useState } from 'react'
 import Icon from '../Icon/Icon'
 import Popover from '../Popover/Popover'
 import StyledTooltip from '../StyledTooltip/StyledTooltip'
-import { VaultSelectionMenuController } from '@/Controllers/VaultSelectionMenuController'
 import VaultSelectionMenu from '../VaultSelectionMenu/VaultSelectionMenu'
 import { useApplication } from '../ApplicationProvider'
-import { observer } from 'mobx-react-lite'
 import { featureTrunkVaultsEnabled } from '@/FeatureTrunk'
 
-type Props = {
-  isOpen: boolean
-  toggleMenu: () => void
-  controller: VaultSelectionMenuController
-}
-
-const VaultSelectionButton = ({ isOpen, toggleMenu, controller }: Props) => {
+const VaultSelectionButton = () => {
   const application = useApplication()
   const buttonRef = useRef<HTMLButtonElement>(null)
   const exclusivelyShownVault = application.vaultDisplayService.exclusivelyShownVault
 
+  const [isOpen, setIsOpen] = useState(false)
+  const toggleMenu = () => setIsOpen(!isOpen)
+
   if (!featureTrunkVaultsEnabled()) {
     return null
   }
@@ -53,10 +48,10 @@ const VaultSelectionButton = ({ isOpen, toggleMenu, controller }: Props) => {
         align="start"
         className="py-2"
       >
-        <VaultSelectionMenu controller={controller} />
+        <VaultSelectionMenu />
       </Popover>
     </>
   )
 }
 
-export default observer(VaultSelectionButton)
+export default VaultSelectionButton

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

@@ -1,7 +1,6 @@
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent, useState } from 'react'
+import { useState } from 'react'
 import Menu from '../Menu/Menu'
-import { VaultSelectionMenuController } from '@/Controllers/VaultSelectionMenuController'
 import RadioButtonGroup from '@/Components/RadioButtonGroup/RadioButtonGroup'
 import ManyVaultSelectionMenu from './ManyVaultSelectionMenu'
 import SingleVaultSelectionMenu from './SingleVaultSelectionMenu'
@@ -9,13 +8,9 @@ import { useApplication } from '../ApplicationProvider'
 import MenuItemSeparator from '../Menu/MenuItemSeparator'
 import MenuItem from '../Menu/MenuItem'
 
-type MenuProps = {
-  controller: VaultSelectionMenuController
-}
-
 type SettingsMode = 'many' | 'single'
 
-const VaultSelectionMenu: FunctionComponent<MenuProps> = () => {
+const VaultSelectionMenu = () => {
   const application = useApplication()
 
   const [mode, setMode] = useState<SettingsMode>(