zwischenstand

nuxt.config.ts

@@ -1,32 +1,38 @@
-import tailwindcss from "@tailwindcss/vite";
+import tailwindcss from '@tailwindcss/vite'
-
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  extends: [
+  extends: ['github:haexhub/haex-base-ui', { install: true }],
-    "github:haexhub/haex-base-ui"
-  ],
-
-  compatibilityDate: "2024-11-01",
 
+  compatibilityDate: '2024-11-01',
 
   imports: {
-    dirs: ["composables/**", "stores/**", "components/**", "pages/**", "types/**"],
+    dirs: [
+      'composables/**',
+      'stores/**',
+      'components/**',
+      'pages/**',
+      'types/**',
+    ],
   },
 
+  css: ['./assets/css/tailwind.css'],
+
   icon: {
     provider: 'server',
-    mode: "svg",
+    mode: 'svg',
     clientBundle: {
-      icons: ["solar:global-outline", "gg:extension", "hugeicons:corporate"],
+      icons: ['solar:global-outline', 'gg:extension', 'hugeicons:corporate'],
       scan: true,
       includeCustomCollections: true,
     },
-    serverBundle: { collections: ["mdi", "line-md", "solar", "gg", "emojione"] },
+    serverBundle: {
+      collections: ['mdi', 'line-md', 'solar', 'gg', 'emojione'],
+    },
 
     customCollections: [
       {
         prefix: 'my-icon',
-        dir: './src/assets/icons/'
+        dir: './src/assets/icons/',
       },
     ],
   },
@@ -52,12 +58,10 @@ export default defineNuxtConfig({
     },
   }, */
 
-
-
   runtimeConfig: {
     public: {
       haexVault: {
-        lastVaultFileName: "lastVaults.json",
+        lastVaultFileName: 'lastVaults.json',
         //defaultDatabase: 'src/database/default.db',
       },
     },
@@ -65,11 +69,11 @@ export default defineNuxtConfig({
 
   devtools: { enabled: true },
 
-  srcDir: "./src",
+  srcDir: './src',
   // Enable SSG
   ssr: false,
   // Enables the development server to be discoverable by other devices when running on iOS physical devices
-  devServer: { host: process.env.TAURI_DEV_HOST || "localhost", port: 3003 },
+  devServer: { host: process.env.TAURI_DEV_HOST || 'localhost', port: 3003 },
 
   vite: {
     plugins: [tailwindcss()],
@@ -78,10 +82,10 @@ export default defineNuxtConfig({
     // Enable environment variables
     // Additional environment variables can be found at
     // https://v2.tauri.app/reference/environment-variables/
-    envPrefix: ["VITE_", "TAURI_"],
+    envPrefix: ['VITE_', 'TAURI_'],
     server: {
       // Tauri requires a consistent port
       strictPort: true,
     },
   },
-})
+})

package.json

@@ -16,8 +16,7 @@
   },
   "dependencies": {
     "@libsql/client": "^0.15.6",
-    "@nuxt/icon": "1.11.0",
+    "@nuxt/icon": "^1.13.0",
-    "@nuxt/image": "1.10.0",
     "@nuxtjs/i18n": "^9.5.4",
     "@pinia/nuxt": "^0.11.0",
     "@tailwindcss/vite": "^4.1.7",
@@ -31,29 +30,28 @@
     "@tauri-apps/plugin-store": "^2.2.0",
     "@vueuse/core": "^13.2.0",
     "@vueuse/nuxt": "^13.2.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "drizzle-orm": "^0.43.1",
-    "flyonui": "^2.1.0",
+    "lucide-vue-next": "^0.511.0",
     "nuxt": "^3.17.3",
-    "nuxt-icons": "3.2.1",
-    "nuxt-snackbar": "1.3.0",
-    "nuxt-svgo": "4.1.2",
-    "nuxt-svgo-loader": "0.5.0",
     "nuxt-zod-i18n": "^1.11.5",
+    "reka-ui": "^2.2.1",
+    "shadcn-nuxt": "^2.1.0",
+    "tailwind-merge": "^3.3.0",
     "tailwindcss": "^4.1.7",
+    "tw-animate-css": "^1.3.0",
     "vue": "^3.5.14",
     "vue-router": "^4.5.1",
-    "zod": "^3.25.4"
+    "vue-sonner": "^2.0.0",
+    "zod": "^3.25.20"
   },
   "devDependencies": {
-    "@egoist/tailwindcss-icons": "^1.9.0",
+    "@iconify/json": "^2.2.340",
-    "@iconify/json": "^2.2.339",
     "@iconify/tailwind4": "^1.0.6",
+    "@nuxtjs/color-mode": "^3.5.2",
     "@tauri-apps/cli": "^2.5.0",
-    "@vitejs/plugin-vue": "^5.2.4",
+    "drizzle-kit": "^0.31.1"
-    "drizzle-kit": "^0.31.1",
-    "typescript": "~5.8.3",
-    "vite": "^6.3.5",
-    "vue-tsc": "^2.2.10"
   },
   "packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39",
   "pnpm": {

src/app.vue

@@ -1,14 +1,16 @@
 <template>
-  <div>
+  <div class=" ">
-    <NuxtLayout :data-theme="currentTheme.value">
+    <BaseDialog />
+    <!-- <NuxtLayout>
       <NuxtPage />
-      <NuxtSnackbar />
+      <Toaster />
-    </NuxtLayout>
+    </NuxtLayout> -->
   </div>
 </template>
 
 <script setup lang="ts">
-const { currentTheme } = storeToRefs(useUiStore())
+//import 'vue-sonner/style.css'
+//const { currentTheme } = storeToRefs(useUiStore())
 </script>
 
 <style>

src/assets/css/tailwind.css

@@ -0,0 +1,228 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+
+@custom-variant dark (&:is(.dark *));
+
+@plugin "@iconify/tailwind4";
+
+@theme inline {
+
+  --color-background: var(--background);
+
+  --color-foreground: var(--foreground);
+
+  --color-card: var(--card);
+
+  --color-card-foreground: var(--card-foreground);
+
+  --color-popover: var(--popover);
+
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-primary: var(--primary);
+
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-muted: var(--muted);
+
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-accent: var(--accent);
+
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-destructive: var(--destructive);
+
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  --color-border: var(--border);
+
+  --color-input: var(--input);
+
+  --color-ring: var(--ring);
+
+  --color-chart-1: var(--chart-1);
+
+  --color-chart-2: var(--chart-2);
+
+  --color-chart-3: var(--chart-3);
+
+  --color-chart-4: var(--chart-4);
+
+  --color-chart-5: var(--chart-5);
+
+  --radius-sm: calc(var(--radius) - 4px);
+
+  --radius-md: calc(var(--radius) - 2px);
+
+  --radius-lg: var(--radius);
+
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --color-sidebar: var(--sidebar);
+
+  --color-sidebar-foreground: var(--sidebar-foreground);
+
+  --color-sidebar-primary: var(--sidebar-primary);
+
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+
+  --color-sidebar-accent: var(--sidebar-accent);
+
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+
+  --color-sidebar-border: var(--sidebar-border);
+
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+
+  --background: oklch(1 0 0);
+
+  --foreground: oklch(0.129 0.042 264.695);
+
+  --card: oklch(1 0 0);
+
+  --card-foreground: oklch(0.129 0.042 264.695);
+
+  --popover: oklch(1 0 0);
+
+  --popover-foreground: oklch(0.129 0.042 264.695);
+
+  --primary: oklch(0.208 0.042 265.755);
+
+  --primary-foreground: oklch(0.984 0.003 247.858);
+
+  --secondary: oklch(0.968 0.007 247.896);
+
+  --secondary-foreground: oklch(0.208 0.042 265.755);
+
+  --muted: oklch(0.968 0.007 247.896);
+
+  --muted-foreground: oklch(0.554 0.046 257.417);
+
+  --accent: oklch(0.968 0.007 247.896);
+
+  --accent-foreground: oklch(0.208 0.042 265.755);
+
+  --destructive: oklch(0.577 0.245 27.325);
+
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+
+  --border: oklch(0.929 0.013 255.508);
+
+  --input: oklch(0.929 0.013 255.508);
+
+  --ring: oklch(0.704 0.04 256.788);
+
+  --chart-1: oklch(0.646 0.222 41.116);
+
+  --chart-2: oklch(0.6 0.118 184.704);
+
+  --chart-3: oklch(0.398 0.07 227.392);
+
+  --chart-4: oklch(0.828 0.189 84.429);
+
+  --chart-5: oklch(0.769 0.188 70.08);
+
+  --radius: 0.625rem;
+
+  --sidebar: oklch(0.984 0.003 247.858);
+
+  --sidebar-foreground: oklch(0.129 0.042 264.695);
+
+  --sidebar-primary: oklch(0.208 0.042 265.755);
+
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+
+  --sidebar-accent: oklch(0.968 0.007 247.896);
+
+  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
+
+  --sidebar-border: oklch(0.929 0.013 255.508);
+
+  --sidebar-ring: oklch(0.704 0.04 256.788);
+}
+
+.dark {
+
+  --background: oklch(0.129 0.042 264.695);
+
+  --foreground: oklch(0.984 0.003 247.858);
+
+  --card: oklch(0.129 0.042 264.695);
+
+  --card-foreground: oklch(0.984 0.003 247.858);
+
+  --popover: oklch(0.129 0.042 264.695);
+
+  --popover-foreground: oklch(0.984 0.003 247.858);
+
+  --primary: oklch(0.984 0.003 247.858);
+
+  --primary-foreground: oklch(0.208 0.042 265.755);
+
+  --secondary: oklch(0.279 0.041 260.031);
+
+  --secondary-foreground: oklch(0.984 0.003 247.858);
+
+  --muted: oklch(0.279 0.041 260.031);
+
+  --muted-foreground: oklch(0.704 0.04 256.788);
+
+  --accent: oklch(0.279 0.041 260.031);
+
+  --accent-foreground: oklch(0.984 0.003 247.858);
+
+  --destructive: oklch(0.396 0.141 25.723);
+
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+
+  --border: oklch(0.279 0.041 260.031);
+
+  --input: oklch(0.279 0.041 260.031);
+
+  --ring: oklch(0.446 0.043 257.281);
+
+  --chart-1: oklch(0.488 0.243 264.376);
+
+  --chart-2: oklch(0.696 0.17 162.48);
+
+  --chart-3: oklch(0.769 0.188 70.08);
+
+  --chart-4: oklch(0.627 0.265 303.9);
+
+  --chart-5: oklch(0.645 0.246 16.439);
+
+  --sidebar: oklch(0.208 0.042 265.755);
+
+  --sidebar-foreground: oklch(0.984 0.003 247.858);
+
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+
+  --sidebar-accent: oklch(0.279 0.041 260.031);
+
+  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
+
+  --sidebar-border: oklch(0.279 0.041 260.031);
+
+  --sidebar-ring: oklch(0.446 0.043 257.281);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+

src/components/test/dialog.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const onClick = () => {
+  console.log("click")
+}
+</script>
+
+<template>
+  <Dialog>
+    <DialogTrigger as-child>
+      <Button variant="outline" @click="onClick">
+        Edit Profile
+      </Button>
+    </DialogTrigger>
+    <DialogContent class="sm:max-w-[425px]">
+      <DialogHeader>
+        <DialogTitle>Edit profile</DialogTitle>
+        <DialogDescription>
+          Make changes to your profile here. Click save when you're done.
+        </DialogDescription>
+      </DialogHeader>
+      <div class="grid gap-4 py-4">
+        <div class="grid grid-cols-4 items-center gap-4">
+          <Label for="name" class="text-right">
+            Name
+          </Label>
+          <Input id="name" default-value="Pedro Duarte" class="col-span-3" />
+        </div>
+        <div class="grid grid-cols-4 items-center gap-4">
+          <Label for="username" class="text-right">
+            Username
+          </Label>
+          <Input id="username" default-value="@peduarte" class="col-span-3" />
+        </div>
+      </div>
+      <DialogFooter>
+        <Button type="submit">
+          Save changes
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

src/components/vault/button/create.vue

@@ -1,42 +1,41 @@
 <template>
-  <UiDialog
+  <Dialog>
-    :title="t('title')"
+    <!-- class="btn btn-primary btn-outline shadow-md md:btn-lg shrink-0 flex-1 whitespace-nowrap flex-nowrap" -->
-    class="btn btn-primary btn-outline shadow-md md:btn-lg shrink-0 flex-1 whitespace-nowrap flex-nowrap"
+    <DialogTrigger as-child>
-  >
+      <Button>
-    <template #trigger>
-      <Icon name="mdi:plus" />
-      {{ t('database.create') }}
-    </template>
 
-    <form class="flex flex-col gap-4" @submit="onCreateAsync">
+        <Icon name="mdi:plus" />
-      <UiInput
+        {{ t('database.create') }}
-        :check-input="check"
+      </Button>
-        :label="t('database.label')"
+    </DialogTrigger>
-        :placeholder="t('database.placeholder')"
-        :rules="vaultDatabaseSchema.name"
-        autofocus
-        prepend-icon="mdi:safe"
-        v-model="database.name"
-      />
 
-      <UiInputPassword
+    <DialogContent>
-        :check-input="check"
+      <DialogHeader>
-        :rules="vaultDatabaseSchema.password"
+        <DialogTitle>Edit profile</DialogTitle>
-        prepend-icon="mdi:key-outline"
+        <DialogDescription>
-        v-model="database.password"
+          Make changes to your profile here. Click save when you're done.
-      />
+        </DialogDescription>
-    </form>
+      </DialogHeader>
 
-    <template #buttons>
+      <form class="flex flex-col gap-4" @submit="onCreateAsync">
-      <UiButton class="btn-error" @click="onClose">
+        <Input :check-input="check" :label="t('database.label')" :placeholder="t('database.placeholder')"
-        {{ t('abort') }}
+          :rules="vaultDatabaseSchema.name" autofocus prepend-icon="mdi:safe" v-model="database.name" />
-      </UiButton>
 
-      <UiButton class="btn-primary" @click="onCreateAsync">
+        <!-- <UiInputPassword :check-input="check" :rules="vaultDatabaseSchema.password" prepend-icon="mdi:key-outline"
-        {{ t('create') }}
+          v-model="database.password" /> -->
-      </UiButton>
+      </form>
-    </template>
+
-  </UiDialog>
+      <DialogFooter>
+        <Button class="btn-error" @click="onClose">
+          {{ t('abort') }}
+        </Button>
+
+        <Button class="btn-primary" @click="onCreateAsync">
+          {{ t('create') }}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
 </template>
 
 <script setup lang="ts">
@@ -44,6 +43,7 @@ import { save } from '@tauri-apps/plugin-dialog'
 import { onKeyStroke } from '@vueuse/core'
 import { useVaultStore } from '~/stores/vault'
 import { vaultDatabaseSchema } from './schema'
+import { toast } from 'vue-sonner'
 
 onKeyStroke('Enter', (e) => {
   e.preventDefault()
@@ -76,7 +76,7 @@ const initDatabase = () => {
 
 initDatabase()
 
-const { add } = useSnackbar()
+
 const { createAsync } = useVaultStore()
 
 const onCreateAsync = async () => {
@@ -121,7 +121,7 @@ const onCreateAsync = async () => {
     }
   } catch (error) {
     console.error(error)
-    add({ type: 'error', text: JSON.stringify(error) })
+    toast({ type: 'error', text: JSON.stringify(error) })
   }
 }
 
@@ -131,8 +131,7 @@ const onClose = () => {
 }
 </script>
 
-<i18n lang="json">
+<i18n lang="json">{
-{
   "de": {
     "database": {
       "label": "Vaultname",
@@ -145,7 +144,6 @@ const onClose = () => {
     "abort": "Abbrechen",
     "description": "Haex Vault für deine geheimsten Geheimnisse"
   },
-
   "en": {
     "database": {
       "label": "Vaultname",
@@ -158,5 +156,4 @@ const onClose = () => {
     "abort": "Abort",
     "description": "Haex Vault for your most secret secrets"
   }
-}
+}</i18n>
-</i18n>

src/layouts/app.vue

@@ -1,88 +1,50 @@
 <template>
-  <div class="w-full h-full flex flex-col min-w-min relative overflow-hidden">
+  <div class="w-full h-full flex flex-col min-w-min ">
-    <nav
+    <nav class="navbar bg-base-100 rounded-b max-sm:shadow border-b border-base-content/25 sm:z-20 relative px-2">
-      class="navbar bg-base-100 rounded-b max-sm:shadow border-b border-base-content/25 sm:z-20 relative px-2"
-    >
       <UiTooltip :tooltip="isVisible ? t('sidebar.close') : t('sidebar.show')">
-        <button
+        <button type="button" class="btn btn-text btn-square me-2 z-50" aria-haspopup="dialog" aria-expanded="false"
-          type="button"
+          aria-controls="sidebar" @click="toogleSidebar" ref="sidebarToogleRef">
-          class="btn btn-text btn-square me-2 z-50"
+          <Icon :name="isVisible
-          aria-haspopup="dialog"
+              ? 'tabler:layout-sidebar-filled'
-          aria-expanded="false"
+              : 'tabler:layout-sidebar'
-          aria-controls="sidebar"
+            " size="28" />
-          @click="toogleSidebar"
-          ref="sidebarToogleRef"
-        >
-          <Icon
-            :name="
-              isVisible
-                ? 'tabler:layout-sidebar-filled'
-                : 'tabler:layout-sidebar'
-            "
-            size="28"
-          />
         </button>
       </UiTooltip>
 
       <div class="flex flex-1 items-center">
-        <NuxtLinkLocale
+        <NuxtLinkLocale class="link text-base-content link-neutral text-xl font-semibold no-underline"
-          class="link text-base-content link-neutral text-xl font-semibold no-underline"
+          :to="{ name: 'vaultOverview' }">
-          :to="{ name: 'vaultOverview' }"
-        >
           <UiTextGradient class="text-nowrap">{{
             currentVaultName
-          }}</UiTextGradient>
+            }}</UiTextGradient>
         </NuxtLinkLocale>
       </div>
 
       <div class="navbar-end flex items-center gap-4 me-4">
-        <div
+        <div class="dropdown relative inline-flex [--auto-close:inside] [--offset:8] [--placement:bottom-end]">
-          class="dropdown relative inline-flex [--auto-close:inside] [--offset:8] [--placement:bottom-end]"
+          <button id="dropdown-scrollable" type="button"
-        >
-          <button
-            id="dropdown-scrollable"
-            type="button"
             class="dropdown-toggle btn btn-text btn-circle dropdown-open:bg-base-content/10 size-10"
-            aria-haspopup="menu"
+            aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
-            aria-expanded="false"
-            aria-label="Dropdown"
-          >
             <div class="indicator">
-              <span
+              <span v-show="notifications.length" class="indicator-item bg-error size-2 rounded-full text-sm"></span>
-                v-show="notifications.length"
+              <span class="icon-[tabler--bell] text-base-content size-[1.375rem]"></span>
-                class="indicator-item bg-error size-2 rounded-full text-sm"
-              ></span>
-              <span
-                class="icon-[tabler--bell] text-base-content size-[1.375rem]"
-              ></span>
             </div>
           </button>
-          <div
+          <div class="dropdown-menu dropdown-open:opacity-100 hidden" role="menu" aria-orientation="vertical"
-            class="dropdown-menu dropdown-open:opacity-100 hidden"
+            aria-labelledby="dropdown-scrollable">
-            role="menu"
-            aria-orientation="vertical"
-            aria-labelledby="dropdown-scrollable"
-          >
             <div class="dropdown-header justify-center">
               <h6 class="text-base-content text-base">
                 {{ t('notifications.label') }}
               </h6>
             </div>
             <div
-              class="vertical-scrollbar horizontal-scrollbar rounded-scrollbar text-base-content/80 max-h-56 overflow-auto max-md:max-w-60"
+              class="vertical-scrollbar horizontal-scrollbar rounded-scrollbar text-base-content/80 max-h-56 overflow-auto max-md:max-w-60">
-            >
               <div class="dropdown-item" v-for="notification in notifications">
                 <div class="avatar">
                   <div class="w-10 rounded-full">
-                    <img
+                    <img v-if="notification.image" :src="notification.image"
-                      v-if="notification.image"
+                      :alt="notification.alt ?? 'notification avatar'" />
-                      :src="notification.image"
+                    <Icon v-else-if="notification.icon" :name="notification.icon" />
-                      :alt="notification.alt ?? 'notification avatar'"
-                    />
-                    <Icon
-                      v-else-if="notification.icon"
-                      :name="notification.icon"
-                    />
                   </div>
                 </div>
                 <div class="w-60">
@@ -107,26 +69,12 @@
     </nav>
 
     <div class="flex h-full overflow-hidden">
-      <aside
+      <aside id="sidebar" class="sm:shadow-none transition-all h-full overflow-hidden border-r border-base-300"
-        id="sidebar"
+        :class="[!isVisible ? 'w-0' : 'w-16']" role="dialog" tabindex="-1">
-        class="sm:shadow-none transition-all h-full overflow-hidden border-r border-base-300"
-        :class="[!isVisible ? 'w-0' : 'w-16']"
-        role="dialog"
-        tabindex="-1"
-      >
         <div class="drawer-body h-full">
           <ul class="menu p-0 h-full rounded-none">
-            <HaexSidebarLink
+            <HaexSidebarLink v-bind="item" v-for="item in menu" :key="item.id" />
-              v-bind="item"
+            <HaexSidebarLink v-for="item in extensionLinks" :key="item.id" v-bind="item" icon-type="svg" />
-              v-for="item in menu"
-              :key="item.id"
-            />
-            <HaexSidebarLink
-              v-for="item in extensionLinks"
-              :key="item.id"
-              v-bind="item"
-              icon-type="svg"
-            />
           </ul>
         </div>
       </aside>

src/pages/index.vue

@@ -1,89 +1,33 @@
 <template>
   <div class="items-center justify-center min-h-full flex w-full relative">
     <div class="fixed top-2 right-2">
-      <UiDropdownLocale @select="setLocale" />
+      <!-- <UiDropdownLocale @select="setLocale" /> -->
+      <ThemeSwitcher />
+
     </div>
     <div class="flex flex-col justify-center items-center gap-5 max-w-3xl">
-      <img
+      <img src="/logo.svg" class="bg-primary p-3 size-16 rounded-full" alt="HaexVault Logo" />
-        src="/logo.svg"
-        class="bg-primary p-3 size-16 rounded-full"
-        alt="HaexVault Logo"
-      />
 
-      <span
+      <span class="flex flex-wrap font-bold text-pretty text-xl gap-2 justify-center">
-        class="flex flex-wrap font-bold text-pretty text-xl gap-2 justify-center"
-      >
         <p class="whitespace-nowrap">
           {{ t('welcome') }}
         </p>
-        <UiTextGradient>Haex Hub</UiTextGradient>
+        <!-- <UiTextGradient>Haex Hub</UiTextGradient> -->
       </span>
 
       <div class="flex flex-col md:flex-row gap-4 w-full h-24 md:h-auto">
         <VaultButtonCreate />
+        <TestDialog />
+        <BaseDialog />
+        <!-- 
 
         <VaultButtonOpen
           v-model:isOpen="passwordPromptOpen"
           :path="vaultPath"
-        />
+        /> -->
-        <UiDialogTest />
+
 
-        <UiDialog> aaaaaa </UiDialog>
-        <button
-          type="button"
-          class="btn btn-primary"
-          aria-haspopup="dialog"
-          aria-expanded="false"
-          aria-controls="basic-modal"
-          data-overlay="#basic-modal1"
-        >
-          Open modal
-        </button>
 
-        <div
-          id="basic-modal1"
-          class="overlay modal overlay-open:opacity-100 hidden overlay-open:duration-300"
-          role="dialog"
-          tabindex="-1"
-        >
-          <div
-            class="modal-dialog overlay-open:opacity-100 overlay-open:duration-300"
-          >
-            <div class="modal-content">
-              <div class="modal-header">
-                <h3 class="modal-title">Dialog Title</h3>
-                <button
-                  type="button"
-                  class="btn btn-text btn-circle btn-sm absolute end-3 top-3"
-                  aria-label="Close"
-                  data-overlay="#basic-modal1"
-                >
-                  <span class="icon-[tabler--x] size-4"></span>
-                </button>
-              </div>
-              <div class="modal-body">
-                This is some placeholder content to show the scrolling behavior
-                for modals. Instead of repeating the text in the modal, we use
-                an inline style to set a minimum height, thereby extending the
-                length of the overall modal and demonstrating the overflow
-                scrolling. When content becomes longer than the height of the
-                viewport, scrolling will move the modal as needed.
-              </div>
-              <div class="modal-footer">
-                <button
-                  type="button"
-                  class="btn btn-soft btn-secondary"
-                  data-overlay="#basic-modal1"
-                >
-                  Close
-                </button>
-                <button type="button" class="btn btn-primary">
-                  Save changes
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
 
       <div v-show="lastVaults.length" class="w-full">
@@ -92,17 +36,12 @@
         </div>
 
         <div
-          class="relative border-base-content/25 divide-base-content/25 flex w-full flex-col divide-y rounded-md border first:*:rounded-t-md last:*:rounded-b-md overflow-scroll"
+          class="relative border-base-content/25 divide-base-content/25 flex w-full flex-col divide-y rounded-md border first:*:rounded-t-md last:*:rounded-b-md overflow-scroll">
-        >
+          <div class="flex items-center justify-between group h-12 overflow-x-scroll" v-for="vault in lastVaults"
-          <div
+            :key="vault.path">
-            class="flex items-center justify-between group h-12 overflow-x-scroll"
-            v-for="vault in lastVaults"
-            :key="vault.path"
-          >
             <button
               class="link link-accent flex items-center no-underline justify-between text-nowrap text-sm md:text-base shrink w-full py-2 px-4"
-              @click=";(passwordPromptOpen = true), (vaultPath = vault.path)"
+              @click="; (passwordPromptOpen = true), (vaultPath = vault.path)">
-            >
               <span class="block md:hidden">
                 {{ vault.name }}
               </span>
@@ -110,13 +49,8 @@
                 {{ vault.path }}
               </span>
             </button>
-            <button
+            <button class="absolute right-2 btn btn-square btn-error btn-xs hidden group-hover:flex min-w-6">
-              class="absolute right-2 btn btn-square btn-error btn-xs hidden group-hover:flex min-w-6"
+              <Icon name="mdi:trash-can-outline" @click="removeVaultAsync(vault.path)" />
-            >
-              <Icon
-                name="mdi:trash-can-outline"
-                @click="removeVaultAsync(vault.path)"
-              />
             </button>
           </div>
         </div>
@@ -126,7 +60,7 @@
         <h4>{{ t('sponsors') }}</h4>
         <div>
           <button @click="openUrl('https://itemis.com')">
-            <UiLogoItemis class="text-[#00457C]" />
+            <!-- <UiLogoItemis class="text-[#00457C]" /> -->
           </button>
         </div>
       </div>
@@ -152,8 +86,7 @@ const { lastVaults } = storeToRefs(useLastVaultStore())
 await syncLastVaultsAsync()
 </script>
 
-<i18n lang="json">
+<i18n lang="json">{
-{
   "de": {
     "welcome": "Viel Spass mit",
     "lastUsed": "Zuletzt verwendete Vaults",
@@ -164,5 +97,4 @@ await syncLastVaultsAsync()
     "lastUsed": "Last used Vaults",
     "sponsors": "Powered by"
   }
-}
+}</i18n>
-</i18n>