internal: incomplete vault systems behind feature flag (#2340)

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

@@ -21,6 +21,7 @@ import AccountMenuButton from './AccountMenuButton'
 import StyledTooltip from '../StyledTooltip/StyledTooltip'
 import UpgradeNow from './UpgradeNow'
 import PreferencesButton from './PreferencesButton'
+import VaultSelectionButton from './VaultSelectionButton'
 
 type Props = {
   application: WebApplication
@@ -37,6 +38,7 @@ type State = {
   newUpdateAvailable: boolean
   showAccountMenu: boolean
   showQuickSettingsMenu: boolean
+  showVaultSelectionMenu: boolean
   offline: boolean
   hasError: boolean
   arbitraryStatusMessage?: string
@@ -64,6 +66,7 @@ class Footer extends AbstractComponent<Props, State> {
       newUpdateAvailable: false,
       showAccountMenu: false,
       showQuickSettingsMenu: false,
+      showVaultSelectionMenu: false,
     }
 
     this.webEventListenerDestroyer = props.application.addWebEventObserver((event, data) => {
@@ -125,6 +128,7 @@ class Footer extends AbstractComponent<Props, State> {
         showBetaWarning: showBetaWarning,
         showAccountMenu: this.viewControllerManager.accountMenuController.show,
         showQuickSettingsMenu: this.viewControllerManager.quickSettingsMenuController.open,
+        showVaultSelectionMenu: this.viewControllerManager.vaultSelectionController.open,
       })
     })
   }
@@ -296,6 +300,10 @@ class Footer extends AbstractComponent<Props, State> {
     this.viewControllerManager.quickSettingsMenuController.toggle()
   }
 
+  vaultSelectionClickHandler = () => {
+    this.viewControllerManager.vaultSelectionController.toggle()
+  }
+
   syncResolutionClickHandler = () => {
     this.setState({
       showSyncResolution: !this.state.showSyncResolution,
@@ -367,9 +375,11 @@ class Footer extends AbstractComponent<Props, State> {
                 viewControllerManager={this.viewControllerManager}
               />
             </div>
+
             <div className="relative z-footer-bar-item select-none">
               <PreferencesButton openPreferences={this.openPreferences} />
             </div>
+
             <div className="relative z-footer-bar-item select-none">
               <QuickSettingsButton
                 isOpen={this.state.showQuickSettingsMenu}
@@ -378,6 +388,14 @@ class Footer extends AbstractComponent<Props, State> {
                 quickSettingsMenuController={this.viewControllerManager.quickSettingsMenuController}
               />
             </div>
+
+            <div className="relative z-footer-bar-item  ml-1.5 select-none">
+              <VaultSelectionButton
+                isOpen={this.state.showVaultSelectionMenu}
+                toggleMenu={this.vaultSelectionClickHandler}
+                controller={this.viewControllerManager.vaultSelectionController}
+              />
+            </div>
             <UpgradeNow
               application={this.application}
               featuresController={this.viewControllerManager.featuresController}

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

@@ -29,7 +29,7 @@ const QuickSettingsButton = ({ application, isOpen, toggleMenu, quickSettingsMen
           .getDisplayableComponents()
           .find((theme) => theme.package_info.identifier === FeatureIdentifier.DarkTheme) as SNTheme | undefined
         if (darkTheme) {
-          void application.mutator.toggleTheme(darkTheme)
+          void application.componentManager.toggleTheme(darkTheme.uuid)
         }
       },
     })

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

@@ -0,0 +1,62 @@
+import { classNames } from '@standardnotes/utils'
+import { useRef } 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 application = useApplication()
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const exclusivelyShownVault = application.vaultDisplayService.exclusivelyShownVault
+
+  if (!featureTrunkVaultsEnabled()) {
+    return null
+  }
+
+  return (
+    <>
+      <StyledTooltip label="Open vault selection menu">
+        <button onClick={toggleMenu} className="flex h-full cursor-pointer items-center justify-center" ref={buttonRef}>
+          <div className="flex items-center">
+            <Icon
+              type="safe-square"
+              className={classNames(
+                isOpen ? 'text-info' : exclusivelyShownVault ? 'text-success' : '',
+                'rounded hover:text-info',
+              )}
+            />
+            {exclusivelyShownVault && (
+              <div className={classNames('ml-1 text-xs font-bold', isOpen && 'text-info')}>
+                {exclusivelyShownVault.name}
+              </div>
+            )}
+          </div>
+        </button>
+      </StyledTooltip>
+      <Popover
+        title="Vault options"
+        togglePopover={toggleMenu}
+        anchorElement={buttonRef.current}
+        open={isOpen}
+        side="top"
+        align="start"
+        className="py-2"
+      >
+        <VaultSelectionMenu controller={controller} />
+      </Popover>
+    </>
+  )
+}
+
+export default observer(VaultSelectionButton)