chore: move vault key options inside advanced options accordion

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

@@ -125,9 +125,7 @@ const Vaults = () => {
         <EditContactModal onCloseDialog={closeAddContactModal} />
       </ModalOverlay>
 
-      <ModalOverlay isOpen={isVaultModalOpen} close={closeVaultModal}>
+      <EditVaultModal isVaultModalOpen={isVaultModalOpen} closeVaultModal={closeVaultModal} />
-        <EditVaultModal onCloseDialog={closeVaultModal} />
-      </ModalOverlay>
 
       {invites.length > 0 && (
         <PreferencesGroup>

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

@@ -8,6 +8,7 @@ import Icon from '@/Components/Icon/Icon'
 import ModalOverlay from '@/Components/Modal/ModalOverlay'
 import ContactInviteModal from '../Invites/ContactInviteModal'
 import EditVaultModal from './VaultModal/EditVaultModal'
+
 type Props = {
   vault: VaultListingInterface
 }
@@ -134,9 +135,7 @@ const VaultItem = ({ vault }: Props) => {
         </ModalOverlay>
       )}
 
-      <ModalOverlay isOpen={isVaultModalOpen} close={closeVaultModal}>
+      <EditVaultModal vault={vault} isVaultModalOpen={isVaultModalOpen} closeVaultModal={closeVaultModal} />
-        <EditVaultModal existingVaultUuid={vault.uuid} onCloseDialog={closeVaultModal} />
-      </ModalOverlay>
 
       <div className="flex flex-row gap-3.5 rounded-lg border border-border px-3.5 py-2.5 shadow-sm">
         <Icon type={vault.iconString} size="custom" className="mt-2.5 h-5.5 w-5.5 flex-shrink-0" />

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

@@ -22,13 +22,13 @@ import Icon from '@/Components/Icon/Icon'
 import StyledTooltip from '@/Components/StyledTooltip/StyledTooltip'
 import Popover from '@/Components/Popover/Popover'
 import IconPicker from '@/Components/Icon/IconPicker'
+import ModalOverlay from '@/Components/Modal/ModalOverlay'
+import { Disclosure, DisclosureContent, useDisclosureStore } from '@ariakit/react'
 
-type Props = {
+const EditVaultModalContent: FunctionComponent<{
   existingVaultUuid?: string
   onCloseDialog: () => void
-}
+}> = ({ onCloseDialog, existingVaultUuid }) => {
-
-const EditVaultModal: FunctionComponent<Props> = ({ onCloseDialog, existingVaultUuid }) => {
   const application = useApplication()
 
   const existingVault = useItem<VaultListingInterface>(existingVaultUuid)
@@ -224,18 +224,21 @@ const EditVaultModal: FunctionComponent<Props> = ({ onCloseDialog, existingVault
   const canShowMembers =
     members.length > 0 && !members.every((member) => application.vaultUsers.isVaultUserOwner(member))
 
+  const advancedOptionsDisclosure = useDisclosureStore()
+  const isShowingAdvancedOptions = advancedOptionsDisclosure.useState('open')
+
   if (existingVault && application.vaultLocks.isVaultLocked(existingVault)) {
     return <div>Vault is locked.</div>
   }
 
   return (
     <Modal title={existingVault ? 'Edit Vault' : 'Create New Vault'} close={handleDialogClose} actions={modalActions}>
-      <div className="px-4.5 pb-1.5 pt-4 flex w-full flex-col">
+      <div className="flex w-full flex-col space-y-3.5 px-4.5 pb-3 pt-3">
-        <div className="mb-3">
+        <div>
           <div className="text-lg">Vault Info</div>
           <div className="mt-1">The vault name and description are end-to-end encrypted.</div>
 
-          <div className="flex items-center mt-4 gap-4">
+          <div className="mt-3.5 flex items-center gap-3">
             <StyledTooltip className="!z-modal" label="Choose icon">
               <Button className="!px-1.5" ref={iconPickerButtonRef} onClick={toggleIconPicker}>
                 <Icon type={iconString} />
@@ -276,7 +279,7 @@ const EditVaultModal: FunctionComponent<Props> = ({ onCloseDialog, existingVault
           </div>
 
           <DecoratedInput
-            className={{ container: 'mt-4' }}
+            className={{ container: 'mt-3' }}
             value={description}
             placeholder="Vault description"
             onChange={(value) => {
@@ -284,21 +287,46 @@ const EditVaultModal: FunctionComponent<Props> = ({ onCloseDialog, existingVault
             }}
           />
         </div>
-
         {existingVault && canShowMembers && (
           <VaultModalMembers vault={existingVault} members={members} onChange={reloadVaultInfo} isAdmin={isAdmin} />
         )}
-
         {existingVault && invites.length > 0 && (
           <VaultModalInvites invites={invites} onChange={reloadVaultInfo} isAdmin={isAdmin} />
         )}
-
+        <Disclosure
-        <PasswordTypePreference value={passwordType} onChange={setPasswordType} onCustomKeyChange={setCustomPassword} />
+          store={advancedOptionsDisclosure}
-
+          className="flex items-center justify-between focus:shadow-none focus:outline-none"
+        >
+          <div className="text-lg">Advanced options</div>
+          <Icon type={isShowingAdvancedOptions ? 'chevron-up' : 'chevron-down'} />
+        </Disclosure>
+        <DisclosureContent className="space-y-3.5 pb-3" store={advancedOptionsDisclosure}>
+          <PasswordTypePreference
+            value={passwordType}
+            onChange={setPasswordType}
+            onCustomKeyChange={setCustomPassword}
+          />
           <KeyStoragePreference value={keyStorageMode} onChange={setKeyStorageMode} />
+        </DisclosureContent>
       </div>
     </Modal>
   )
 }
 
+const EditVaultModal = ({
+  isVaultModalOpen,
+  closeVaultModal,
+  vault,
+}: {
+  isVaultModalOpen: boolean
+  closeVaultModal: () => void
+  vault?: VaultListingInterface
+}) => {
+  return (
+    <ModalOverlay className="md:max-h-[70vh]" isOpen={isVaultModalOpen} close={closeVaultModal}>
+      <EditVaultModalContent existingVaultUuid={vault?.uuid} onCloseDialog={closeVaultModal} />
+    </ModalOverlay>
+  )
+}
+
 export default EditVaultModal

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

@@ -36,7 +36,7 @@ export const KeyStoragePreference = ({
   onChange: (value: KeySystemRootKeyStorageMode) => void
 }) => {
   return (
-    <div className="mb-3">
+    <div>
       <div className="mb-3 text-lg">Vault Key Storage Mode</div>
       <div className="space-y-3">
         {options.map((option) => {
@@ -44,7 +44,7 @@ export const KeyStoragePreference = ({
           return (
             <label
               key={option.value}
-              className="grid grid-cols-[auto,1fr] text-base font-medium [column-gap:0.5rem] [row-gap:0.25rem] md:text-sm"
+              className="grid grid-cols-[auto,1fr] text-base font-medium [column-gap:0.65rem] [row-gap:0.25rem] md:text-sm"
             >
               <StyledRadioInput
                 className="col-start-1 col-end-2 place-self-center"

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

@@ -40,7 +40,7 @@ export const PasswordTypePreference = ({
   }
 
   return (
-    <div className="mb-3">
+    <div>
       <div className="mb-3 text-lg">Vault Key Type</div>
       <div className="mb-1 space-y-3">
         {options.map((option) => {
@@ -48,7 +48,7 @@ export const PasswordTypePreference = ({
           return (
             <label
               key={option.value}
-              className="grid grid-cols-[auto,1fr] text-base font-medium [column-gap:0.5rem] [row-gap:0.25rem] md:text-sm"
+              className="grid grid-cols-[auto,1fr] text-base font-medium [column-gap:0.65rem] [row-gap:0.25rem] md:text-sm"
             >
               <StyledRadioInput
                 className="col-start-1 col-end-2 place-self-center"