add notifications

src/pages/index.vue

@@ -4,11 +4,6 @@
       <UiDropdownLocale @select="setLocale" />
     </div>
     <div class="flex flex-col justify-center items-center gap-5 max-w-3xl">
-      <!-- <img
-        :src="convertFileSrc('/logo.svg', 'http')"
-        class="bg-primary p-3 size-16 rounded-full"
-        alt="HaexVault Logo"
-      /> -->
       <UiLogoHaexhub class="bg-primary p-3 size-16 rounded-full" />
       <span
         class="flex flex-wrap font-bold text-pretty text-xl gap-2 justify-center"
@@ -26,8 +21,6 @@
           v-model:open="passwordPromptOpen"
           :path="vaultPath"
         />
-
-        <UiButton @click="refresh">Refresh</UiButton>
       </div>
 
       <div
@@ -83,7 +76,6 @@
 
 <script setup lang="ts">
 import { UiLogoHaexhub } from '#components'
-import { convertFileSrc } from '@tauri-apps/api/core'
 import { openUrl } from '@tauri-apps/plugin-opener'
 
 const refresh = () => location.reload()

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

@@ -14,8 +14,10 @@ definePageMeta({
 })
 
 const extensionStore = useExtensionsStore()
+const { readNotificationsAsync } = useNotificationStore()
 
 onMounted(async () => {
   await extensionStore.loadExtensionsAsync()
+  await readNotificationsAsync()
 })
 </script>

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

@@ -26,6 +26,20 @@
         </template>
       </UiInput>
     </div>
+
+    <div class="p-2">{{ t('notifications.label') }}</div>
+    <div class="flex items-center">
+      <input
+        type="checkbox"
+        class="switch switch-primary"
+        :checked="isNotificationAllowed"
+        readonly
+      />
+      {{ isNotificationAllowed }}
+      <UiButton @click="requestNotificationPermissionAsync">
+        {{ t('notifications.requestPermission') }}
+      </UiButton>
+    </div>
   </div>
 </template>
 
@@ -71,6 +85,10 @@ const onSetVaultNameAsync = async () => {
     add({ text: t('vaultName.update.error'), type: 'error' })
   }
 }
+
+const { isNotificationAllowed } = storeToRefs(useNotificationStore())
+const { requestNotificationPermissionAsync } = useNotificationStore()
+//const { test } = useLastVaultStore()
 </script>
 
 <i18n lang="yaml">
@@ -78,6 +96,9 @@ de:
   language: Sprache
   design: Design
   save: Änderung speichern
+  notifications:
+    label: Benachrichtigungen
+    requestPermission: Benachrichtigung erlauben
   vaultName:
     label: Vaultname
     update:
@@ -87,6 +108,9 @@ en:
   language: Language
   design: Design
   save: save changes
+  notifications:
+    label: Notifications
+    requestPermission: Grant Permission
   vaultName:
     label: Vault Name
     update: