adjust for mobile

src/assets/css/main.css

@@ -16,5 +16,5 @@
 }
 
 :root {
-  --ui-header-height: 48px; /* oder was auch immer deine Header-Höhe ist */
+  --ui-header-height: 74px;
 }

src/components/haex/menu/applications.vue

@@ -4,6 +4,8 @@
       icon="material-symbols:apps"
       color="neutral"
       variant="outline"
+      v-bind="$attrs"
+      size="xl"
     />
 
     <template #content>

src/components/haex/pass/group/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <UCard v-if="group">
+  <UCard
+    v-if="group"
+    :ui="{ root: [''] }"
+  >
     <template #header>
       <div class="flex items-center gap-2">
         <Icon

src/components/haex/pass/mobile/menu/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="menuItems?.length"
-    class="flex-1"
+    class="flex-1 h-full"
   >
     <ul
       ref="listRef"
@@ -43,7 +43,7 @@
   </div>
   <div
     v-else
-    class="flex justify-center items-center px-20 flex-1 my-auto"
+    class="flex justify-center items-center flex-1"
   >
     <UiIconNoData class="text-primary size-24 shrink-0" />
   </div>

src/components/haex/vault/create.vue

@@ -53,33 +53,23 @@
 </template>
 
 <script setup lang="ts">
-import { save } from '@tauri-apps/plugin-dialog'
-import { BaseDirectory, readFile, writeFile } from '@tauri-apps/plugin-fs'
-import { resolveResource } from '@tauri-apps/api/path'
-
 import { vaultSchema } from './schema'
-//import type { FormSubmitEvent } from '@nuxt/ui'
 
 const { t } = useI18n()
 
-//type Schema = z.output<typeof vaultSchema>
-
 const vault = reactive<{
   name: string
   password: string
-  path: string | null
   type: 'password' | 'text'
 }>({
   name: 'HaexVault',
   password: '',
-  path: '',
   type: 'password',
 })
 
 const initVault = () => {
   vault.name = 'HaexVault'
   vault.password = ''
-  vault.path = ''
   vault.type = 'password'
 }
 
@@ -95,34 +85,16 @@ const onCreateAsync = async () => {
   const nameCheck = vaultSchema.name.safeParse(vault.name)
   const passwordCheck = vaultSchema.password.safeParse(vault.password)
 
-  console.log('checks', vault.name, nameCheck, vault.password, passwordCheck)
   if (!nameCheck.success || !passwordCheck.success) return
 
   open.value = false
   try {
-    const template_vault_path = await resolveResource('database/vault.db')
-
-    const template_vault = await readFile(template_vault_path)
-
-    vault.path = await save({
-      defaultPath: vault.name.endsWith('.db') ? vault.name : `${vault.name}.db`,
-    })
-
-    if (!vault.path) return
-
-    await writeFile('temp_vault.db', template_vault, {
-      baseDir: BaseDirectory.AppLocalData,
-    })
-
-    console.log('data', vault)
-
-    if (vault.path && vault.password) {
+    if (vault.name && vault.password) {
       const vaultId = await createAsync({
-        path: vault.path,
+        vaultName: vault.name,
         password: vault.password,
       })
 
-      console.log('vaultId', vaultId)
       if (vaultId) {
         initVault()
         await navigateTo(
@@ -132,7 +104,7 @@ const onCreateAsync = async () => {
     }
   } catch (error) {
     console.error(error)
-    add({ color: 'error', description: `${error}` })
+    add({ color: 'error', description: JSON.stringify(error) })
   }
 }
 </script>

src/components/haex/vault/open.vue

@@ -5,7 +5,7 @@
     :description="vault.path || path"
     @confirm="onOpenDatabase"
   >
-    <UiButton
+    <!-- <UiButton
       :label="t('vault.open')"
       :ui="{
         base: 'px-3 py-2',
@@ -15,7 +15,7 @@
       variant="outline"
       block
       @click.stop="onLoadDatabase"
-    />
+    /> -->
 
     <template #title>
       <i18n-t
@@ -51,9 +51,14 @@
 </template>
 
 <script setup lang="ts">
-import { open as openVault } from '@tauri-apps/plugin-dialog'
+/* import { open as openVault } from '@tauri-apps/plugin-dialog' */
 import { vaultSchema } from './schema'
 
+const open = defineModel<boolean>('open', { default: false })
+const props = defineProps<{
+  path?: string
+}>()
+
 const { t } = useI18n()
 
 const vault = reactive<{
@@ -68,11 +73,7 @@ const vault = reactive<{
   type: 'password',
 })
 
-const open = defineModel('open', { type: Boolean })
-
-const { add } = useToast()
-
-const onLoadDatabase = async () => {
+/* const onLoadDatabase = async () => {
   try {
     vault.path = await openVault({
       multiple: false,
@@ -97,15 +98,11 @@ const onLoadDatabase = async () => {
     console.error('handleError', error, typeof error)
     add({ color: 'error', description: `${error}` })
   }
-}
+} */
 
 const { syncLocaleAsync, syncThemeAsync, syncVaultNameAsync } =
   useVaultSettingsStore()
 
-const props = defineProps<{
-  path: string
-}>()
-
 const check = ref(false)
 
 const initVault = () => {
@@ -120,13 +117,17 @@ const onAbort = () => {
   open.value = false
 }
 
+const { add } = useToast()
+
 const onOpenDatabase = async () => {
   try {
+    if (!props.path) return
+
     const { openAsync } = useVaultStore()
     const localePath = useLocalePath()
 
     check.value = true
-    const path = vault.path || props.path
+    const path = props.path
     const pathCheck = vaultSchema.path.safeParse(path)
     const passwordCheck = vaultSchema.password.safeParse(vault.password)
 

src/components/ui/button/index.vue

@@ -3,7 +3,11 @@
     <UTooltip :text="buttonProps?.tooltip">
       <UButton
         class="pointer-events-auto"
-        v-bind="{ ...buttonProps, ...$attrs }"
+        v-bind="{
+          ...{ size: isSmallScreen ? 'lg' : 'md' },
+          ...buttonProps,
+          ...$attrs,
+        }"
         @click="(e) => $emit('click', e)"
       >
         <template
@@ -28,4 +32,6 @@ interface IButtonProps extends /* @vue-ignore */ ButtonProps {
 }
 const buttonProps = defineProps<IButtonProps>()
 defineEmits<{ click: [Event] }>()
+
+const { isSmallScreen } = storeToRefs(useUiStore())
 </script>

src/components/ui/dialog/confirm.vue

@@ -3,8 +3,6 @@
     v-model:open="open"
     :title
     :description
-    :fullscreen="isSmallScreen"
-    :ui="{ header: 'pt-10 sm:pt-0', footer: 'mb-10 sm:mb-0' }"
   >
     <slot>
       <!-- <UiButton
@@ -49,8 +47,6 @@
 </template>
 
 <script setup lang="ts">
-import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
-
 defineProps<{
   abortIcon?: string
   abortLabel?: string
@@ -64,11 +60,6 @@ const open = defineModel<boolean>('open', { default: false })
 
 const { t } = useI18n()
 defineEmits(['confirm'])
-
-const breakpoints = useBreakpoints(breakpointsTailwind)
-
-// "smAndDown" gilt für sm, xs usw.
-const isSmallScreen = breakpoints.smaller('sm')
 </script>
 
 <i18n lang="yaml">

src/components/ui/dropdown/locale.vue

@@ -3,6 +3,7 @@
     arrow
     :items
     :ui="{}"
+    :size="isSmallScreen ? 'lg' : 'md'"
   >
     <UButton
       :icon="items.find((item) => item.label === locale)?.icon"
@@ -35,4 +36,6 @@ const items = computed<DropdownMenuItem[]>(() =>
     },
   })),
 )
+
+const { isSmallScreen } = storeToRefs(useUiStore())
 </script>

src/components/ui/dropdown/vault.vue

@@ -4,6 +4,8 @@
       icon="mdi:menu"
       color="neutral"
       variant="outline"
+      v-bind="$attrs"
+      size="xl"
     />
   </UDropdownMenu>
 </template>

src/components/ui/input/index.vue

@@ -5,6 +5,7 @@
     :readonly="props.readOnly"
     :leading-icon="props.leadingIcon"
     :ui="{ base: 'peer' }"
+    :size="isSmallScreen ? 'lg' : 'md'"
     @change="(e) => $emit('change', e)"
     @blur="(e) => $emit('blur', e)"
     @keyup="(e: KeyboardEvent) => $emit('keyup', e)"
@@ -48,7 +49,8 @@
 </template>
 
 <script setup lang="ts">
-import type { AcceptableValue, InputProps } from '@nuxt/ui'
+import type { InputProps } from '@nuxt/ui'
+import type { AcceptableValue } from '@nuxt/ui/runtime/types/utils.js'
 
 const value = defineModel<AcceptableValue | undefined>()
 
@@ -83,6 +85,8 @@ const filteredSlots = computed(() => {
 })
 
 watchImmediate(props, () => console.log('props', props))
+
+const { isSmallScreen } = storeToRefs(useUiStore())
 </script>
 
 <i18n lang="yaml">

src/components/ui/input/password.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script setup lang="ts">
-import type { AcceptableValue } from '@nuxt/ui'
+import type { AcceptableValue } from '@nuxt/ui/runtime/types/utils.js'
 
 defineProps<{
   label?: string

src/layouts/app.vue

@@ -1,15 +1,21 @@
 <template>
-  <div class="min-h-screen flex flex-col">
-    <header
-      class="bg-default/90 backdrop-blur border-b border-accented h-(--ui-header-height) sticky top-0 z-50 flex"
+  <div class="">
+    <!-- class="" -->
+    <UPageHeader
+      as="header"
+      :ui="{
+        root: [
+          'bg-default border-b border-accented sticky top-0 z-50 py-0 px-8',
+        ],
+        wrapper: [
+          'pt-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4',
+        ],
+      }"
     >
-      <div class="px-2 bg-primary rounded-br-xs">
-        <UiLogoHaexhub class="p-2 size-12 shrink-0" />
-      </div>
-      <div
-        class="w-full max-w-(--ui-container) px-4 sm:px-6 lg:px-8 mx-auto flex items-center justify-between gap-3 h-full"
-      >
-        <div class="lg:flex-1 flex items-center gap-1.5 min-w-0">
+      <template #title>
+        <div class="flex items-center">
+          <UiLogoHaexhub class="size-12 shrink-0" />
+
           <NuxtLinkLocale
             class="link text-base-content link-neutral text-xl font-semibold no-underline flex items-center"
             :to="{ name: 'vaultOverview' }"
@@ -19,48 +25,24 @@
             </UiTextGradient>
           </NuxtLinkLocale>
         </div>
+      </template>
 
-        <div class="hidden lg:flex"></div>
+      <template #links>
+        <HaexMenuApplications :block="isSmallScreen" />
+        <UiDropdownVault :block="isSmallScreen" />
+      </template>
+    </UPageHeader>
 
-        <div class="flex items-center justify-end lg:flex-1 gap-1.5">
-          <HaexMenuApplications />
-          <UiDropdownVault />
-        </div>
-      </div>
-    </header>
-
-    <div class="flex flex-1">
-      <!-- <aside
-        id="sidebar"
-        class="border-r border-accented transition-all shrink-0 sticky top-(--ui-header-height) h-[calc(100vh-var(--ui-header-height))]"
-        :class="[!isVisible ? 'w-0' : 'w-16']"
-        role="dialog"
-        tabindex="-1"
-      >
-        <ul class="p-0 h-full flex flex-col gap-2">
-          <UiSidebarLink
-            v-for="item in menu"
-            v-bind="item"
-            :key="item.id"
-          />
-          <UiSidebarLink
-            v-for="item in extensionLinks"
-            :key="item.id"
-            v-bind="item"
-            icon-type="svg"
-          />
-        </ul>
-      </aside> -->
-
-      <main class="flex-1 bg-elevated">
-        <NuxtPage />
-      </main>
-    </div>
+    <main class="overflow-scroll flex bg-elevated">
+      <NuxtPage />
+    </main>
   </div>
 </template>
 
 <script setup lang="ts">
 const { currentVaultName } = storeToRefs(useVaultStore())
+
+const { isSmallScreen } = storeToRefs(useUiStore())
 </script>
 
 <i18n lang="yaml">

src/layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-default isolate h-dvh py-4 sm:py-0">
+  <div class="bg-default isolate h-dvh">
     <slot />
   </div>
 </template>

src/pages/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="items-center justify-center flex w-full h-full relative">
-    <div class="absolute top-2 right-4">
+    <div class="absolute top-8 right-8 sm:top-4 sm:right-4">
       <UiDropdownLocale @select="onSelectLocale" />
     </div>
 
@@ -16,11 +16,11 @@
       </span>
 
       <div class="flex flex-col md:flex-row gap-4 w-full h-24 md:h-auto">
-        <VaultButtonCreate />
+        <HaexVaultCreate />
 
-        <VaultButtonOpen
+        <HaexVaultOpen
           v-model:open="passwordPromptOpen"
-          :path="vaultPath"
+          :path="selectedVault?.path"
         />
       </div>
 
@@ -37,7 +37,7 @@
         >
           <div
             v-for="vault in lastVaults"
-            :key="vault.path"
+            :key="vault.name"
             class="flex items-center justify-between group overflow-x-scroll"
           >
             <UButton
@@ -47,16 +47,13 @@
               @click="
                 () => {
                   passwordPromptOpen = true
-                  vaultPath = vault.path
+                  selectedVault = vault
                 }
               "
             >
-              <span class="block md:hidden">
+              <span class="block">
                 {{ vault.name }}
               </span>
-              <span class="hidden md:block">
-                {{ vault.path }}
-              </span>
             </UButton>
             <UButton
               color="error"
@@ -65,7 +62,7 @@
             >
               <Icon
                 name="mdi:trash-can-outline"
-                @click="removeVaultAsync(vault.path)"
+                @click="removeVaultAsync(vault.name)"
               />
             </UButton>
           </div>
@@ -90,19 +87,21 @@
 <script setup lang="ts">
 import { openUrl } from '@tauri-apps/plugin-opener'
 import type { Locale } from 'vue-i18n'
+
 definePageMeta({
   name: 'vaultOpen',
 })
+const { t, setLocale } = useI18n()
 
 const passwordPromptOpen = ref(false)
-const vaultPath = ref('')
-
-const { t, setLocale } = useI18n()
+const selectedVault = ref<IVaultInfo>()
 
 const { syncLastVaultsAsync, removeVaultAsync } = useLastVaultStore()
 const { lastVaults } = storeToRefs(useLastVaultStore())
 
-await syncLastVaultsAsync()
+onMounted(async () => {
+  await syncLastVaultsAsync()
+})
 
 const onSelectLocale = async (locale: Locale) => {
   await setLocale(locale)

src/pages/vault.vue

@@ -1,17 +1,22 @@
 <template>
-  <div class="h-full">
+  <UPage
+    :ui="{
+      root: ['h-full w-full bg-elevated'],
+      center: ['h-full w-full'],
+    }"
+  >
     <NuxtLayout name="app">
       <NuxtPage />
     </NuxtLayout>
 
     <div class="hidden">
       <UiDialogConfirm
+        v-model:open="showNewDeviceDialog"
         :confirm-label="t('newDevice.save')"
         :title="t('newDevice.title')"
+        confirm-icon="mdi:content-save-outline"
         @abort="showNewDeviceDialog = false"
         @confirm="onSetDeviceNameAsync"
-        confirm-icon="mdi:content-save-outline"
-        v-model:open="showNewDeviceDialog"
       >
         <template #body>
           <div class="flex flex-col gap-4">
@@ -29,7 +34,7 @@
         </template>
       </UiDialogConfirm>
     </div>
-  </div>
+  </UPage>
 </template>
 
 <script setup lang="ts">
@@ -76,6 +81,7 @@ const onSetDeviceNameAsync = async () => {
     showNewDeviceDialog.value = false
     add({ color: 'success', description: t('newDevice.success') })
   } catch (error) {
+    console.error(error)
     add({ color: 'error', description: t('newDevice.error') })
   }
 }

src/pages/vault/[vaultId]/index.vue

@@ -1,13 +1,12 @@
 <template>
-  <div class="text-base-content flex flex-col">
-    <div class="h-screen bg-amber-300">
-      aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
+  <UPage>
+    <div class="h-screen bg-amber-300 flex-1 flex-wrap">
+      aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
     </div>
-    <div class="h-screen bg-teal-300">
-      abbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
-      availableThemes:{{ uiStore.availableThemes }}
+    <div class="h-screen bg-teal-300 flex-1">
+      abbbbbbbbbbbbbbbbbbbbb availableThemes:{{ uiStore.availableThemes }}
     </div>
-  </div>
+  </UPage>
 </template>
 
 <script setup lang="ts">

src/pages/vault/[vaultId]/passwords.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex-1 p-2 relative h-full">
+  <div class="flex-1 p-2">
     <NuxtPage />
   </div>
 </template>

src/pages/vault/[vaultId]/passwords/[[groupId]]/create.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="">
     <HaexPassGroup
       v-model="group"
       mode="create"

src/pages/vault/[vaultId]/passwords/[[groupId]]/index.vue

@@ -1,21 +1,22 @@
 <template>
-  <div class="flex-1 h-full">
-    <div class="h-full flex flex-col">
+  <div class="flex flex-1">
+    <!-- <div class="h-screen bg-accented">aaa</div> -->
+    <div class="flex flex-col flex-1">
       <HaexPassGroupBreadcrumbs
         v-show="breadCrumbs.length"
         :items="breadCrumbs"
         class="px-2 sticky -top-2 z-10"
       />
-      <div class="flex-1 py-1 flex">
-        <HaexPassMobileMenu
-          ref="listRef"
-          v-model:selected-items="selectedItems"
-          :menu-items="groupItems"
-        />
-      </div>
+      <!-- <div class="flex-1 py-1 flex"> -->
+      <HaexPassMobileMenu
+        ref="listRef"
+        v-model:selected-items="selectedItems"
+        :menu-items="groupItems"
+      />
+      <!--  </div> -->
 
       <div
-        class="fixed bottom-4 flex justify-between transition-all w-full sm:items-center items-end px-8"
+        class="fixed bottom-16 flex justify-between transition-all w-full sm:items-center items-end px-8 z-40"
       >
         <div class="w-full" />
 
@@ -26,7 +27,7 @@
           <UButton
             icon="mdi:plus"
             :ui="{
-              base: 'rotate-45 ',
+              base: 'rotate-45 z-40',
               leadingIcon: [open ? 'rotate-0' : 'rotate-45', 'transition-all'],
             }"
             size="xl"

src/stores/ui/index.ts

@@ -1,4 +1,5 @@
 //import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+import { breakpointsTailwind } from '@vueuse/core'
 import de from './de.json'
 import en from './en.json'
 
@@ -15,6 +16,11 @@ export const useUiStore = defineStore('uiStore', () => {
     breakpoints.active().value.length > 0 ? breakpoints.active().value : 'xs',
   ) */
 
+  const breakpoints = useBreakpoints(breakpointsTailwind)
+
+  // "smAndDown" gilt für sm, xs usw.
+  const isSmallScreen = breakpoints.smaller('sm')
+
   const { $i18n } = useNuxtApp()
 
   $i18n.setLocaleMessage('de', {
@@ -70,5 +76,6 @@ export const useUiStore = defineStore('uiStore', () => {
     currentTheme,
     currentThemeName,
     defaultTheme,
+    isSmallScreen,
   }
 })

src/stores/vault/index.ts

@@ -40,21 +40,19 @@ export const useVaultStore = defineStore('vaultStore', () => {
     password: string
   }) => {
     try {
-      const result = await invoke<string>('open_encrypted_database', {
-        path,
+      await invoke<string>('open_encrypted_database', {
+        vaultPath: path,
         key: password,
       })
 
-      if (result !== 'success') throw new Error(result)
-
       const vaultId = await getVaultIdAsync(path)
 
-      const fileName = getFileName(path)
+      const fileName = getFileName(path) ?? path
 
       openVaults.value = {
         ...openVaults.value,
         [vaultId]: {
-          name: fileName ?? path,
+          name: fileName,
           drizzle: drizzle<typeof schema>(
             async (sql, params: unknown[], method) => {
               let rows: any[] = []
@@ -92,8 +90,6 @@ export const useVaultStore = defineStore('vaultStore', () => {
         },
       }
 
-      const { addVaultAsync } = useLastVaultStore()
-      await addVaultAsync({ path })
       return vaultId
     } catch (error) {
       console.error('Error openAsync ', error)
@@ -102,17 +98,17 @@ export const useVaultStore = defineStore('vaultStore', () => {
   }
 
   const createAsync = async ({
-    path,
+    vaultName,
     password,
   }: {
-    path: string
+    vaultName: string
     password: string
   }) => {
-    await invoke('create_encrypted_database', {
-      path,
+    const vaultPath = await invoke<string>('create_encrypted_database', {
+      vaultName,
       key: password,
     })
-    return await openAsync({ path, password })
+    return await openAsync({ path: vaultPath, password })
   }
 
   const closeAsync = async () => {
@@ -147,17 +143,3 @@ const isSelectQuery = (sql: string) => {
   const selectRegex = /^\s*SELECT\b/i
   return selectRegex.test(sql)
 }
-
-/* const trackAllHaexTablesAsync = async (vaultId: string) => {
-  const { openVaults } = useVaultStore()
-  const promises = Object.values(schema)
-    .filter(isTable)
-    .map((table) => {
-      const stmt = `SELECT crsql_as_crr('${getTableConfig(table).name}');`
-      console.log('track table', getTableConfig(table).name)
-
-      return openVaults?.[vaultId]?.drizzle.run(sql`${stmt}`.getSQL())
-    })
-
-  await Promise.allSettled(promises)
-} */

src/stores/vault/lastVaults.ts

@@ -1,9 +1,16 @@
+import { invoke } from '@tauri-apps/api/core'
 import { load } from '@tauri-apps/plugin-store'
 
-interface ILastVault {
+/* interface ILastVault {
   lastUsed: Date
   name: string
   path: string
+} */
+
+export interface IVaultInfo {
+  name: string
+  path: string
+  lastAccess: Date
 }
 
 export const useLastVaultStore = defineStore('lastVaultStore', () => {
@@ -11,7 +18,7 @@ export const useLastVaultStore = defineStore('lastVaultStore', () => {
     public: { haexVault },
   } = useRuntimeConfig()
 
-  const lastVaults = ref<ILastVault[]>([])
+  const lastVaults = ref<IVaultInfo[]>([])
 
   const keyName = 'lastVaults'
 
@@ -20,15 +27,19 @@ export const useLastVaultStore = defineStore('lastVaultStore', () => {
   }
 
   const syncLastVaultsAsync = async () => {
-    const store = await getStoreAsync()
     lastVaults.value =
-      (await store.get<ILastVault[]>(keyName))?.sort(
-        (a, b) => +new Date(b.lastUsed) - +new Date(a.lastUsed),
+      (await listVaultsAsync()).sort(
+        (a, b) => +new Date(b.lastAccess) - +new Date(a.lastAccess),
       ) ?? []
 
     return lastVaults.value
   }
 
+  const listVaultsAsync = async () => {
+    lastVaults.value = await invoke<IVaultInfo[]>('list_vaults')
+    return lastVaults.value
+  }
+
   const addVaultAsync = async ({
     name,
     path,
@@ -40,7 +51,7 @@ export const useLastVaultStore = defineStore('lastVaultStore', () => {
 
     const saveName = name || getFileNameFromPath(path)
     lastVaults.value = lastVaults.value.filter((vault) => vault.path !== path)
-    lastVaults.value.push({ lastUsed: new Date(), name: saveName, path })
+    lastVaults.value.push({ lastAccess: new Date(), name: saveName, path })
     await saveLastVaultsAsync()
   }