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

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

@@ -0,0 +1,52 @@
+import { FunctionComponent, useCallback } 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 { observer } from 'mobx-react-lite'
+
+const ManyVaultSelectionMenu: FunctionComponent = () => {
+  const application = useApplication()
+  const vaults = application.vaults.getVaults()
+
+  const isVaultVisible = useCallback(
+    (vault: VaultListingInterface) => {
+      return !application.vaultDisplayService.isVaultDisabledOrLocked(vault)
+    },
+    [application],
+  )
+
+  const toggleVault = useCallback(
+    (vault: VaultListingInterface) => {
+      if (isVaultVisible(vault)) {
+        application.vaultDisplayService.hideVault(vault)
+      } else {
+        application.vaultDisplayService.unhideVault(vault)
+      }
+    },
+    [isVaultVisible, application],
+  )
+
+  return (
+    <Menu a11yLabel="Vault selection menu" isOpen>
+      {vaults.map((vault) => (
+        <MenuSwitchButtonItem
+          onChange={() => {
+            toggleVault(vault)
+          }}
+          checked={isVaultVisible(vault)}
+          key={vault.uuid}
+        >
+          <Icon type="safe-square" className="mr-2 text-neutral" />
+          <div className="flex w-full items-center gap-1">
+            {vault.name}
+            {application.vaults.isVaultLocked(vault) && <Icon className="ml-1" type="lock" size={'small'} />}
+          </div>
+        </MenuSwitchButtonItem>
+      ))}
+    </Menu>
+  )
+}
+
+export default observer(ManyVaultSelectionMenu)

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

@@ -0,0 +1,41 @@
+import { FunctionComponent, useCallback } from 'react'
+import Menu from '../Menu/Menu'
+import { useApplication } from '../ApplicationProvider'
+import { 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 isVaultVisible = useCallback(
+    (vault: VaultListingInterface) => {
+      return application.vaultDisplayService.isVaultExclusivelyShown(vault)
+    },
+    [application],
+  )
+
+  const selectVault = useCallback(
+    (vault: VaultListingInterface) => {
+      application.vaultDisplayService.showOnlyVault(vault)
+    },
+    [application],
+  )
+
+  return (
+    <Menu a11yLabel="Vault selection menu" isOpen>
+      {vaults.map((vault) => (
+        <MenuRadioButtonItem key={vault.uuid} checked={isVaultVisible(vault)} onClick={() => selectVault(vault)}>
+          <div className="flex w-full items-center gap-1">
+            {vault.name}
+            {application.vaults.isVaultLocked(vault) && <Icon className="ml-1" type="lock" size={'small'} />}
+          </div>
+        </MenuRadioButtonItem>
+      ))}
+    </Menu>
+  )
+}
+
+export default observer(SingleVaultSelectionMenu)

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

@@ -0,0 +1,51 @@
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent, 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'
+import { useApplication } from '../ApplicationProvider'
+
+type MenuProps = {
+  controller: VaultSelectionMenuController
+}
+
+type SettingsMode = 'many' | 'single'
+
+const VaultSelectionMenu: FunctionComponent<MenuProps> = () => {
+  const application = useApplication()
+
+  const [mode, setMode] = useState<SettingsMode>(
+    application.vaultDisplayService.isInExclusiveDisplayMode() ? 'single' : 'many',
+  )
+
+  const changeSelectionMode = (mode: SettingsMode) => {
+    setMode(mode)
+
+    if (mode === 'many') {
+      if (application.vaultDisplayService.exclusivelyShownVault) {
+        application.vaultDisplayService.changeToMultipleVaultDisplayMode()
+      }
+    }
+  }
+
+  return (
+    <Menu a11yLabel="Vault selection menu" isOpen>
+      <RadioButtonGroup
+        items={[
+          { label: 'Multiple', value: 'many' },
+          { label: 'One', value: 'single' },
+        ]}
+        value={mode}
+        onChange={(value) => changeSelectionMode(value as SettingsMode)}
+        className="m-3 mt-1"
+      />
+
+      {mode === 'many' && <ManyVaultSelectionMenu />}
+      {mode === 'single' && <SingleVaultSelectionMenu />}
+    </Menu>
+  )
+}
+
+export default observer(VaultSelectionMenu)