add notifications

src/components/haex/menu/main.vue

@@ -1,36 +1,42 @@
 <template>
-  <UiDropdown activator-class="btn btn-text btn-circle " dropdown-class="[--offset:20]">
+  <UiDropdown offset="[--offset:20]">
     <template #activator>
-      <div class="size-9.5 rounded-full items-center justify-center text-base-content text-base">
-        <Icon name="mdi:format-list-bulleted" class="size-full p-2" />
+      <div
+        class="size-9.5 rounded-full items-center justify-center text-base-content text-base"
+      >
+        <Icon
+          name="mdi:format-list-bulleted"
+          class="size-full p-2"
+        />
       </div>
     </template>
 
-
     <!-- <ul class="dropdown-menu dropdown-open:opacity-100 hidden min-w-60" role="menu" aria-orientation="vertical"
       aria-labelledby="dropdown-avatar"> -->
 
     <template #items>
-
       <li>
-        <NuxtLinkLocale class="dropdown-item" :to="{ name: 'haexSettings' }">
-          <span class="icon-[tabler--settings]"/>
+        <NuxtLinkLocale
+          class="dropdown-item"
+          :to="{ name: 'haexSettings' }"
+        >
+          <span class="icon-[tabler--settings]" />
           {{ t('settings') }}
         </NuxtLinkLocale>
       </li>
 
-
-
       <li class="dropdown-footer gap-2">
-        <button class="btn btn-error btn-soft btn-block" @click="onVaultCloseAsync">
-          <span class="icon-[tabler--logout]"/>
+        <button
+          class="btn btn-error btn-soft btn-block"
+          @click="onVaultCloseAsync"
+        >
+          <span class="icon-[tabler--logout]" />
           {{ t('vault.close') }}
         </button>
       </li>
     </template>
     <!-- 
     </ul> -->
-
   </UiDropdown>
 </template>
 

src/components/ui/dropdown/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="dropdown relative inline-flex">
+  <div
+    class="dropdown relative inline-flex"
+    :class="offset"
+  >
     <button
       :id
       class="dropdown-toggle"
@@ -42,13 +45,12 @@
 </template>
 
 <script setup lang="ts" generic="T">
-import type { HSDropdown } from 'flyonui/flyonui'
-
-const { itemIs = 'li' } = defineProps<{
+const { itemIs = 'li', offset = '[--offset:0]' } = defineProps<{
   label?: string
   items?: T[]
   itemIs?: string
   activatorClass?: string
+  offset?: string
 }>()
 
 defineOptions({
@@ -58,4 +60,6 @@ defineOptions({
 defineEmits<{ select: [T] }>()
 
 const id = useId()
+
+//const offset = '[--offset:30]'
 </script>

src/components/vault/button/open.vue

@@ -18,7 +18,7 @@
           <UiTextGradient>HaexVault</UiTextGradient>
         </template>
       </i18n-t>
-      <p class="text-sm">{{ path }}</p>
+      <p class="text-sm">{{ database.path }}</p>
     </template>
 
     <template #trigger>
@@ -63,6 +63,11 @@ const database = reactive<{
   type: 'password',
 })
 
+watch(
+  () => props.path,
+  () => (database.path = props.path),
+)
+
 const initDatabase = () => {
   database.name = ''
   database.password = ''