fixed sync locale and theme

src/components/haex/menu/main.vue

@@ -1,5 +1,8 @@
 <template>
-  <UiDropdown activator-class="btn btn-text btn-circle">
+  <UiDropdown
+    activator-class="btn btn-text btn-circle "
+    dropdown-class="[--offset:20]"
+  >
     <template #activator>
       <div
         class="size-9.5 rounded-full items-center justify-center text-base-content text-base"

src/components/ui/dropdown/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="dropdown relative inline-flex">
+  <div class="dropdown relative inline-flex" :class="dropdownClass">
     <button
       :id
       class="dropdown-toggle"
@@ -47,6 +47,7 @@ const { itemIs = 'li' } = defineProps<{
   items?: T[]
   itemIs?: string
   activatorClass?: string
+  dropdownClass?: string
 }>()
 
 defineEmits<{ select: [T] }>()

src/components/ui/input/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <fieldset class="join w-full">
+    <fieldset class="join w-full pt-0.5">
       <slot name="prepend" />
 
       <div class="input join-item">

src/components/ui/sidebar/index.vue

@@ -1,33 +1,12 @@
 <template>
   <aside
-    class="flex shrink-0 transition-[width] ease-in duration-300 z-30 h-full overflow-hidden fixed sm:relative left-0 shadow border-r border-base-300"
+    class="flex shrink-0 transition-[width] ease-in duration-300 z-30 h-full overflow-hidden fixed sm:relative left-0 shadow border-r border-base-300/90"
   >
     <div class="sm:flex flex-col w-14 bg-base-200 shrink-0 h-full hidden">
       <img src="/logo.svg" class="bg-primary p-3 size-16" />
 
       <div class="flex flex-col justify-between h-full overflow-y-scroll z-10">
-        <div class="flex flex-col space-y-2 text-base-content/90">
-          <template v-for="item in menu.top">
-            <UiSidebarLink v-if="item.to" v-bind="item" />
-
-            <UiSidebarButton v-else :icon="item.icon" :label="$t(item.label)" @click="item.click" />
-          </template>
-        </div>
-
-        <div class="flex flex-col space-y-2 text-base-content/90">
-          <template v-for="item in menu.bottom">
-            <UiSidebarLink v-if="item.to" v-bind="item" />
-
-            <UiSidebarButton v-else :icon="item.icon" :label="$t(item.label)" @click="item.click" />
-          </template>
-          <!-- <UiSidebarLink
-            v-for="item in menu.bottom"
-            :icon="item.icon"
-            :to="item.to ?? ''"
-            :label="item.label"
-            @click="item.click"
-          /> -->
-        </div>
+        <div class="flex flex-col space-y-2 text-base-content/90"></div>
       </div>
     </div>
 
@@ -76,11 +55,8 @@
 <script lang="ts" setup>
 defineProps({
   menu: {
-    type: Object as PropType<ISidebarMenu>,
+    type: Object as PropType<ISidebarItem>,
     default: () => {},
   },
-});
-
-//const show = ref(true);
-const { show } = storeToRefs(useSidebarStore());
+})
 </script>

src/components/ui/sidebar/link/index.vue

@@ -2,7 +2,7 @@
   <li
     @click="triggerNavigate"
     class="hover:text-primary rounded"
-    :class="{ ['bg-base-300']: isActive }"
+    :class="{ ['bg-base-200 text-base-content']: isActive }"
   >
     <UiTooltip :tooltip="tooltip ?? name" direction="right-start">
       <NuxtLinkLocale
@@ -18,24 +18,27 @@
 </template>
 
 <script setup lang="ts">
-import { type ISidebarItem } from "#imports";
+import { type ISidebarItem } from '#imports'
 
-const props = defineProps<ISidebarItem>();
+const props = defineProps<ISidebarItem>()
 
-const router = useRouter();
+const router = useRouter()
 
-console.log("to", props.to);
+console.log('to', props.to)
 const isActive = computed(() => {
-  if (props.to?.name === "haexExtension") {
-    return getSingleRouteParam(router.currentRoute.value.params.extensionId) === props.id;
+  if (props.to?.name === 'haexExtension') {
+    return (
+      getSingleRouteParam(router.currentRoute.value.params.extensionId) ===
+      props.id
+    )
   } else {
-    return props.to?.name === router.currentRoute.value.meta.name;
+    return props.to?.name === router.currentRoute.value.meta.name
   }
-});
+})
 
-const linkRef = useTemplateRef("linkRef");
+const linkRef = useTemplateRef('linkRef')
 
-const triggerNavigate = () => linkRef.value?.$el.click();
+const triggerNavigate = () => linkRef.value?.$el.click()
 
 /* computed(() => {
   const found = useRouter()

src/components/vault/button/create.vue

@@ -43,9 +43,9 @@
 
 <script setup lang="ts">
 import { save } from '@tauri-apps/plugin-dialog'
+import { onKeyStroke } from '@vueuse/core'
 import { useVaultStore } from '~/stores/vault'
 import { vaultDatabaseSchema } from './schema'
-import { onKeyStroke } from '@vueuse/core'
 
 onKeyStroke('Enter', (e) => {
   e.preventDefault()

src/components/vault/button/open.vue

@@ -7,7 +7,7 @@
         @click="onLoadDatabase"
       >
         <Icon name="mdi:folder-open-outline" />
-        {{ t("database.open") }}
+        {{ t('database.open') }}
       </button>
     </template>
 
@@ -22,62 +22,60 @@
 
     <template #buttons>
       <UiButton class="btn-error" @click="onClose">
-        {{ t("abort") }}
+        {{ t('abort') }}
       </UiButton>
 
       <UiButton type="submit" class="btn-primary" @click="onOpenDatabase">
-        {{ t("open") }}
+        {{ t('open') }}
       </UiButton>
     </template>
   </UiDialog>
 </template>
 
 <script setup lang="ts">
-import { open } from "@tauri-apps/plugin-dialog";
-import { vaultDatabaseSchema } from "./schema";
+import { open } from '@tauri-apps/plugin-dialog'
+import { vaultDatabaseSchema } from './schema'
 
-const { t } = useI18n();
+const { t } = useI18n()
 
-const isOpen = defineModel("isOpen", { type: Boolean });
+const isOpen = defineModel('isOpen', { type: Boolean })
 
 const props = defineProps({
   path: String,
-});
+})
 
-const check = ref(false);
+const check = ref(false)
 
 const database = reactive<{
-  name: string;
-  password: string;
-  path: string | null;
-  type: "password" | "text";
+  name: string
+  password: string
+  path: string | null
+  type: 'password' | 'text'
 }>({
-  name: "",
-  password: "",
-  path: "",
-  type: "password",
-});
+  name: '',
+  password: '',
+  path: '',
+  type: 'password',
+})
 
 const initDatabase = () => {
-  database.name = "";
-  database.password = "";
-  database.path = "";
-  database.type = "password";
-};
+  database.name = ''
+  database.password = ''
+  database.path = ''
+  database.type = 'password'
+}
 
-initDatabase();
+initDatabase()
 
-const { add } = useSnackbar();
+const { add } = useSnackbar()
 
 const handleError = (error: unknown) => {
-  isOpen.value = false;
-  console.log("handleError", error, typeof error);
-  add({ type: "error", text: "Passwort falsch" });
-  //console.error(error);
-};
+  isOpen.value = false
+  console.error('handleError', error, typeof error)
+  add({ type: 'error', text: 'Passwort falsch' })
+}
 
-const { openAsync } = useVaultStore();
-//const { show } = storeToRefs(useSidebarStore());
+const { openAsync } = useVaultStore()
 
 const onLoadDatabase = async () => {
   try {
@@ -86,75 +84,77 @@ const onLoadDatabase = async () => {
       directory: false,
       filters: [
         {
-          name: "HaexVault",
-          extensions: ["db"],
+          name: 'HaexVault',
+          extensions: ['db'],
         },
       ],
-    });
+    })
 
-    if (!database.path) return;
+    if (!database.path) return
 
-    isOpen.value = true;
+    isOpen.value = true
   } catch (error) {
-    handleError(error);
+    handleError(error)
   }
-};
+}
 
-const localePath = useLocalePath();
+const localePath = useLocalePath()
 
-const { currentVault, currentVaultId } = storeToRefs(useVaultStore());
+const { syncLocaleAsync, syncThemeAsync, syncVaultNameAsync } = useVaultStore()
 const onOpenDatabase = async () => {
   try {
-    check.value = true;
-    const path = database.path || props.path;
-    const pathCheck = vaultDatabaseSchema.path.safeParse(path);
-    const passwordCheck = vaultDatabaseSchema.password.safeParse(database.password);
+    check.value = true
+    const path = database.path || props.path
+    const pathCheck = vaultDatabaseSchema.path.safeParse(path)
+    const passwordCheck = vaultDatabaseSchema.password.safeParse(
+      database.password
+    )
 
     if (!pathCheck.success || !passwordCheck.success || !path) {
       add({
-        type: "error",
+        type: 'error',
         text: `Params falsch. Path: ${pathCheck.error} | Password: ${passwordCheck.error}`,
-      });
-      return;
+      })
+      return
     }
 
-    console.log("try to open", path);
-
     const vaultId = await openAsync({
       path,
       password: database.password,
-    });
+    })
 
     if (!vaultId) {
       add({
-        type: "error",
-        text: "Vault konnte nicht geöffnet werden. \n Vermutlich ist das Passwort falsch",
-      });
-      return;
+        type: 'error',
+        text: 'Vault konnte nicht geöffnet werden. \n Vermutlich ist das Passwort falsch',
+      })
+      return
     }
 
-    onClose();
+    onClose()
 
-    currentVaultId.value = vaultId;
-    console.log("vault before navigation", currentVault.value, currentVaultId.value, vaultId);
     await navigateTo(
       localePath({
-        name: "vaultOverview",
+        name: 'vaultOverview',
         params: {
           vaultId,
         },
       })
-    );
+    )
+    await Promise.allSettled([
+      syncLocaleAsync(),
+      syncThemeAsync(),
+      syncVaultNameAsync(),
+    ])
   } catch (error) {
-    console.log(error);
-    handleError(error);
+    handleError(error)
   }
-};
+}
 
 const onClose = () => {
-  initDatabase();
-  isOpen.value = false;
-};
+  initDatabase()
+  isOpen.value = false
+}
 </script>
 
 <i18n lang="json">