chore: vaults improvements

packages/web/src/javascripts/Components/ContentListView/ListItemVaultInfo.tsx

@@ -28,7 +28,7 @@ const ListItemVaultInfo: FunctionComponent<Props> = ({ item }) => {
   const sharedByContact = application.sharedVaults.getItemSharedBy(item)
 
   return (
-    <div className="mt-0.5 flex flex-wrap items-center gap-2">
+    <div className="mt-1 flex flex-wrap items-center gap-2">
       <VaultNameBadge vault={vault} />
 
       {sharedByContact && (

packages/web/src/javascripts/Components/Menu/MenuItem.tsx

@@ -21,7 +21,16 @@ type MenuItemProps = {
 
 const MenuItem = forwardRef(
   (
-    { children, className = '', icon, iconClassName, tabIndex, shortcut, disabled, ...props }: MenuItemProps,
+    {
+      children,
+      className = '',
+      icon,
+      iconClassName = 'w-6 h-6 md:w-5 md:h-5 text-neutral mr-2',
+      tabIndex,
+      shortcut,
+      disabled,
+      ...props
+    }: MenuItemProps,
     ref: Ref<HTMLButtonElement>,
   ) => {
     return (

packages/web/src/javascripts/Components/NoteView/CollaborationInfoHUD.tsx

@@ -3,6 +3,7 @@ import Icon from '../Icon/Icon'
 import { useApplication } from '../ApplicationProvider'
 import { DecryptedItemInterface } from '@standardnotes/snjs'
 import { featureTrunkVaultsEnabled } from '@/FeatureTrunk'
+import VaultNameBadge from '../Vaults/VaultNameBadge'
 
 type Props = {
   item: DecryptedItemInterface
@@ -28,13 +29,10 @@ const CollaborationInfoHUD: FunctionComponent<Props> = ({ item }) => {
 
   return (
     <div className="flex flex-wrap items-start gap-2">
-      <div title="Vault name" className={'flex rounded bg-success px-1.5 py-1 text-success-contrast'}>
-        <Icon ariaLabel="Shared in vault" type="safe-square" className="mr-1 text-info-contrast" size="medium" />
-        <span className="mr-auto overflow-hidden text-ellipsis text-xs">{vault.name}</span>
-      </div>
+      <VaultNameBadge vault={vault} />
 
       {lastEditedBy && (
-        <div title="Last edited by" className={'flex rounded bg-info px-1.5 py-1 text-info-contrast'}>
+        <div title="Last edited by" className="flex rounded bg-info px-1.5 py-1 text-info-contrast select-none">
           <Icon ariaLabel="Shared by" type="pencil" className="mr-1 text-info-contrast" size="medium" />
           <span className="mr-auto overflow-hidden text-ellipsis text-xs">{lastEditedBy?.name}</span>
         </div>

packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults.tsx

@@ -133,7 +133,7 @@ const Vaults = () => {
       <PreferencesGroup>
         <PreferencesSegment>
           <Title>Vaults</Title>
-          <div className="my-2 flex flex-col">
+          <div className="my-2 flex flex-col gap-3.5">
             {vaults.map((vault) => {
               return <VaultItem vault={vault} key={vault.uuid} />
             })}

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

@@ -6,6 +6,8 @@ import RadioButtonGroup from '@/Components/RadioButtonGroup/RadioButtonGroup'
 import ManyVaultSelectionMenu from './ManyVaultSelectionMenu'
 import SingleVaultSelectionMenu from './SingleVaultSelectionMenu'
 import { useApplication } from '../ApplicationProvider'
+import MenuItemSeparator from '../Menu/MenuItemSeparator'
+import MenuItem from '../Menu/MenuItem'
 
 type MenuProps = {
   controller: VaultSelectionMenuController
@@ -41,9 +43,17 @@ const VaultSelectionMenu: FunctionComponent<MenuProps> = () => {
         onChange={(value) => changeSelectionMode(value as SettingsMode)}
         className="m-3 mt-1"
       />
-
       {mode === 'many' && <ManyVaultSelectionMenu />}
       {mode === 'single' && <SingleVaultSelectionMenu />}
+      <MenuItemSeparator />
+      <MenuItem
+        icon="settings"
+        onClick={() => {
+          application.preferencesController.openPreferences('vaults')
+        }}
+      >
+        Open vault settings
+      </MenuItem>
     </Menu>
   )
 }

packages/web/src/javascripts/Components/Vaults/VaultNameBadge.tsx

@@ -8,11 +8,9 @@ type Props = {
 
 const VaultNameBadge: FunctionComponent<Props> = ({ vault }) => {
   return (
-    <div className={'rounded bg-success px-1.5 py-1 text-danger-contrast'}>
-      <span className="flex items-center" title="Vault name">
-        <Icon ariaLabel="Vault name" type="safe-square" className="mr-1 text-info-contrast" size="medium" />
-        <div className="text-center text-xs font-bold">{vault.name}</div>
-      </span>
+    <div title="Vault name" className="flex rounded bg-success px-1.5 py-1 text-success-contrast select-none">
+      <Icon ariaLabel="Shared in vault" type="safe-square" className="mr-1 text-info-contrast" size="medium" />
+      <span className="mr-auto overflow-hidden text-ellipsis text-xs">{vault.name}</span>
     </div>
   )
 }

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

@@ -29,7 +29,10 @@ export class PreferencesController extends AbstractViewController {
     this.currentPane = prefId
   }
 
-  openPreferences = (): void => {
+  openPreferences = (prefId?: PreferenceId): void => {
+    if (prefId) {
+      this.currentPane = prefId
+    }
     this._open = true
   }