chore: fix vault selection menu not auto-updating on vault changes

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

@@ -1,14 +1,20 @@
-import { FunctionComponent, useCallback } from 'react'
+import { FunctionComponent, useCallback, useEffect, useState } from 'react'
 import Menu from '../Menu/Menu'
 import { useApplication } from '../ApplicationProvider'
 import MenuSwitchButtonItem from '../Menu/MenuSwitchButtonItem'
 import Icon from '../Icon/Icon'
-import { VaultListingInterface } from '@standardnotes/snjs'
+import { ContentType, VaultListingInterface } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 
 const ManyVaultSelectionMenu: FunctionComponent = () => {
   const application = useApplication()
-  const vaults = application.vaults.getVaults()
+
+  const [vaults, setVaults] = useState(() => application.vaults.getVaults())
+  useEffect(() => {
+    return application.items.streamItems(ContentType.TYPES.VaultListing, () => {
+      setVaults(application.vaults.getVaults())
+    })
+  }, [application.items, application.vaults])
 
   const isVaultVisible = useCallback(
     (vault: VaultListingInterface) => {
@@ -30,7 +36,7 @@ const ManyVaultSelectionMenu: FunctionComponent = () => {
 
   return (
     <Menu a11yLabel="Vault selection menu" isOpen>
-      {!vaults.length && <div className="text-center py-1">No vaults found</div>}
+      {!vaults.length && <div className="py-1 text-center">No vaults found</div>}
       {vaults.map((vault) => (
         <MenuSwitchButtonItem
           onChange={() => {

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

@@ -1,14 +1,20 @@
-import { FunctionComponent, useCallback } from 'react'
+import { FunctionComponent, useCallback, useEffect, useState } from 'react'
 import Menu from '../Menu/Menu'
 import { useApplication } from '../ApplicationProvider'
-import { VaultListingInterface } from '@standardnotes/snjs'
+import { ContentType, VaultListingInterface } from '@standardnotes/snjs'
 import MenuRadioButtonItem from '../Menu/MenuRadioButtonItem'
 import { observer } from 'mobx-react-lite'
 import Icon from '../Icon/Icon'
 
 const SingleVaultSelectionMenu: FunctionComponent = () => {
   const application = useApplication()
-  const vaults = application.vaults.getVaults()
+
+  const [vaults, setVaults] = useState(() => application.vaults.getVaults())
+  useEffect(() => {
+    return application.items.streamItems(ContentType.TYPES.VaultListing, () => {
+      setVaults(application.vaults.getVaults())
+    })
+  }, [application.items, application.vaults])
 
   const isVaultVisible = useCallback(
     (vault: VaultListingInterface) => {
@@ -26,7 +32,7 @@ const SingleVaultSelectionMenu: FunctionComponent = () => {
 
   return (
     <Menu a11yLabel="Vault selection menu" isOpen>
-      {!vaults.length && <div className="text-center py-1">No vaults found</div>}
+      {!vaults.length && <div className="py-1 text-center">No vaults found</div>}
       {vaults.map((vault) => (
         <MenuRadioButtonItem key={vault.uuid} checked={isVaultVisible(vault)} onClick={() => selectVault(vault)}>
           <div className="flex w-full items-center gap-1">