refactor: use local state for vault selection menu

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

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

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

@@ -72,7 +72,6 @@ import { NavigationController } from '@/Controllers/Navigation/NavigationControl
 import { FilePreviewModalController } from '@/Controllers/FilePreviewModalController'
 import { OpenSubscriptionDashboard } from './UseCase/OpenSubscriptionDashboard'
 import { QuickSettingsController } from '@/Controllers/QuickSettingsController'
-import { VaultSelectionMenuController } from '@/Controllers/VaultSelectionMenuController'
 import { ItemGroupController } from '@/Components/NoteView/Controller/ItemGroupController'
 import { NoAccountWarningController } from '@/Controllers/NoAccountWarningController'
 import { SearchOptionsController } from '@/Controllers/SearchOptionsController'
@@ -638,10 +637,6 @@ export class WebApplication extends SNApplication implements WebApplicationInter
     return this.deps.get<SearchOptionsController>(Web_TYPES.SearchOptionsController)
   }
 
-  get vaultSelectionController(): VaultSelectionMenuController {
-    return this.deps.get<VaultSelectionMenuController>(Web_TYPES.VaultSelectionMenuController)
-  }
-
   get openSubscriptionDashboard(): OpenSubscriptionDashboard {
     return this.deps.get<OpenSubscriptionDashboard>(Web_TYPES.OpenSubscriptionDashboard)
   }

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
+              <VaultSelectionButton />
-                isOpen={this.state.showVaultSelectionMenu}
-                toggleMenu={this.vaultSelectionClickHandler}
-                controller={this.application.vaultSelectionController}
-              />
             </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 = {
+const VaultSelectionButton = () => {
-  isOpen: boolean
-  toggleMenu: () => void
-  controller: VaultSelectionMenuController
-}
-
-const VaultSelectionButton = ({ isOpen, toggleMenu, controller }: Props) => {
   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>(

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

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