added settings page, cleanup

src/pages/index.vue

@@ -1,11 +1,20 @@
 <template>
-  <div class="items-center justify-center min-h-full flex w-full">
+  <div class="items-center justify-center min-h-full flex w-full relative">
+    <div class="fixed top-2 right-2">
+      <UiDropdownLocale @select="setLocale" />
+    </div>
     <div class="flex flex-col justify-center items-center gap-5 max-w-3xl">
-      <img src="/logo.svg" class="bg-primary p-3 size-16 rounded-full" alt="HaexVault Logo" />
+      <img
+        src="/logo.svg"
+        class="bg-primary p-3 size-16 rounded-full"
+        alt="HaexVault Logo"
+      />
 
-      <span class="flex flex-wrap font-bold text-pretty text-xl gap-2 justify-center">
+      <span
+        class="flex flex-wrap font-bold text-pretty text-xl gap-2 justify-center"
+      >
         <p class="whitespace-nowrap">
-          {{ t("welcome") }}
+          {{ t('welcome') }}
         </p>
         <UiTextGradient>Haex Hub</UiTextGradient>
       </span>
@@ -13,34 +22,15 @@
       <div class="flex flex-col md:flex-row gap-4 w-full h-24 md:h-auto">
         <VaultButtonCreate />
 
-        <VaultButtonOpen v-model:isOpen="passwordPromptOpen" :path="vaultPath" />
-        <!-- <NuxtLinkLocale
-          :to="{
-            name: 'haexBrowser',
-            params: { vaultId: 'test' },
-          }"
-          >test link</NuxtLinkLocale
-        > -->
-        <!-- <button @click="test">test</button>
-        <NuxtLinkLocale
-          :to="{ name: 'vaultGroup', params: { vaultId: 'test' } }"
-          >test link</NuxtLinkLocale
-        > -->
-
-        <!-- <UiTreeFolder
-          @edit="test"
-          :value="tests"
-          v-for="tests in [1, 2, 3]"
+        <VaultButtonOpen
+          v-model:isOpen="passwordPromptOpen"
+          :path="vaultPath"
         />
-        <UiTreeFolder
-          @edit="test"
-          value="test123"
-        /> -->
       </div>
 
       <div v-show="lastVaults.length" class="w-full">
         <div class="font-thin text-sm justify-start px-2 pb-1">
-          {{ t("lastUsed") }}
+          {{ t('lastUsed') }}
         </div>
 
         <div
@@ -53,10 +43,7 @@
           >
             <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 }}
@@ -68,14 +55,17 @@
             <button
               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>
       </div>
 
       <div class="flex flex-col items-center gap-2">
-        <h4>{{ t("sponsors") }}</h4>
+        <h4>{{ t('sponsors') }}</h4>
         <div>
           <button @click="openUrl('https://itemis.com')">
             <UiLogoItemis class="text-[#00457C]" />
@@ -87,41 +77,21 @@
 </template>
 
 <script setup lang="ts">
-import { openUrl } from "@tauri-apps/plugin-opener";
-
-const passwordPromptOpen = ref(false);
-const vaultPath = ref("");
+import { openUrl } from '@tauri-apps/plugin-opener'
 
 definePageMeta({
-  name: "vaultOpen",
-});
+  name: 'vaultOpen',
+})
 
-const { t } = useI18n();
+const passwordPromptOpen = ref(false)
+const vaultPath = ref('')
 
-const { syncLastVaultsAsync, removeVaultAsync } = useLastVaultStore();
-const { lastVaults } = storeToRefs(useLastVaultStore());
+const { t, setLocale } = useI18n()
 
-await syncLastVaultsAsync();
+const { syncLastVaultsAsync, removeVaultAsync } = useLastVaultStore()
+const { lastVaults } = storeToRefs(useLastVaultStore())
 
-/* const { $pluginManager } = useNuxtApp();
-
-console.log('$pluginManager', $pluginManager);
-async function loadModule() {
-  try {
-    // Dynamisches Laden des Moduls
-    const file = await open({
-      multiple: false,
-      directory: false,
-    });
-    const moduleUrl =
-      '/home/haex/Projekte/haex-vault-2/haex-vault/src/extensions/test/testPlugin.ts'; // Pfad relativ zum Server-Root
-    await $pluginManager.loadDynamicModule(file);
-    console.log('Modul erfolgreich geladen');
-  } catch (error) {
-    console.error('Fehler beim Laden des Moduls:', error);
-  }
-}
-//await loadModule(); */
+await syncLastVaultsAsync()
 </script>
 
 <i18n lang="json">

src/pages/vault.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="text-white h-full">
+  <div class="w-full h-full">
     <NuxtLayout name="app">
       <NuxtPage />
     </NuxtLayout>
@@ -8,6 +8,6 @@
 
 <script setup lang="ts">
 definePageMeta({
-  middleware: "database",
-});
+  middleware: 'database',
+})
 </script>

src/pages/vault/[vaultId]/extensions/[extensionId].vue

@@ -4,7 +4,7 @@
       {{ iframeSrc }}
     </div> -->
     <iframe
-      v-if="iframeSrc"
+      v-if="iframeIndex"
       class="w-full h-full"
       @load=""
       ref="iFrameRef"
@@ -13,14 +13,25 @@
       allow="autoplay; speaker-selection; encrypted-media;"
     >
     </iframe>
+
+    <UiButton @click="go = true">Go</UiButton>
     <!--  <p v-else>{{ t("loading") }}</p> -->
-    <audio controls :src="audioTest">
+    {{ audioTest }}
+    <audio v-if="go" controls :src="audioTest">
       Dein Browser unterstützt das Audio-Element nicht.
     </audio>
+
+    <video v-if="go" controls width="600" :src="demoVideo"></video>
+    <div v-if="audioError">
+      Fehler beim Laden der Audio-Datei: {{ audioError }}
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { convertFileSrc } from '@tauri-apps/api/core'
+import { appDataDir, join, resourceDir } from '@tauri-apps/api/path'
+
 definePageMeta({
   name: 'haexExtension',
 })
@@ -30,25 +41,34 @@ const iframeRef = useTemplateRef('iFrameRef')
 const { extensionEntry: iframeSrc, currentExtension } = storeToRefs(
   useExtensionsStore()
 )
-const audioTest = computed(() => `${iframeSrc.value}/sounds/music/demo.mp3`)
-watch(audioTest, () => console.log('audioTest', audioTest.value), {
-  immediate: true,
-})
+const audioAssetUrl = ref('')
+const audioError = ref('')
+const audioTest = convertFileSrc(
+  await join(await appDataDir(), 'resources/demo.mp3')
+)
 
+//computed(() => `${iframeSrc.value}/sounds/music/demo.mp3`)
+
+const go = ref(false)
 const iframeIndex = computed(() => `${iframeSrc.value}/index.html`)
+const demoVideo = computed(() => `${iframeSrc.value}/sounds/music/demo.mp3`)
+
 const extensionStore = useExtensionsStore()
 
-watch(iframeSrc, () => console.log('iframeSrc', iframeSrc.value), {
-  immediate: true,
-})
+watch(
+  demoVideo,
+  async () => {
+    const res = await fetch(
+      '/home/haex/.local/share/space.haex.hub/extensions/pokedemo/1.0/sounds/music/demo.mp3'
+    )
+    console.log('respo', res)
 
-onMounted(async () => {
-  /* const minfest = await extensionStore.readManifestFileAsync(
-    currentExtension.value!.id,
-    currentExtension.value!.version
-  );
-  console.log("manifest", minfest, extensionStore.extensionEntry); */
-})
+    console.log('iframeSrc', iframeSrc.value)
+  },
+  {
+    immediate: true,
+  }
+)
 </script>
 
 <i18n lang="yaml">

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

@@ -1,15 +1,15 @@
 <template>
-  <div class="h-full"></div>
+  <div class="h-full text-base-content"></div>
 </template>
 
 <script setup lang="ts">
 definePageMeta({
-  name: "vaultOverview",
-});
+  name: 'vaultOverview',
+})
 
-const extensionStore = useExtensionsStore();
+const extensionStore = useExtensionsStore()
 
 onMounted(async () => {
-  await extensionStore.loadExtensionsAsync();
-});
+  await extensionStore.loadExtensionsAsync()
+})
 </script>

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

@@ -0,0 +1,77 @@
+<template>
+  <div
+    class="grid grid-rows-2 sm:grid-cols-2 sm:gap-2 p-2 max-w-2xl w-full h-fit"
+  >
+    <div class="p-2">{{ t('language') }}</div>
+    <div><UiDropdownLocale @select="onSelectLocaleAsync" /></div>
+
+    <div class="p-2">{{ t('design') }}</div>
+    <div><UiDropdownTheme @select="onSelectThemeAsync" /></div>
+
+    <div class="p-2">{{ t('vaultName') }}</div>
+    <div>
+      <UiInput v-model="currentVaultName" :placeholder="t('vaultName')">
+        <template #append>
+          <UiTooltip :tooltip="t('save')">
+            <UiButton class="btn-primary" @click="onSetVaultNameAsync">
+              <Icon name="mdi:content-save-outline" />
+            </UiButton>
+          </UiTooltip>
+        </template>
+      </UiInput>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { eq } from 'drizzle-orm'
+import { type Locale } from 'vue-i18n'
+import { haexSettings } from '~~/src-tauri/database/schemas/vault'
+
+definePageMeta({
+  name: 'haexSettings',
+})
+
+const { t, setLocale } = useI18n()
+
+const { currentVault, currentVaultName } = storeToRefs(useVaultStore())
+const { updateVaultNameAsync } = useVaultStore()
+
+const onSelectLocaleAsync = async (locale: Locale) => {
+  console.log('onSelectLocaleAsync', locale)
+  const update = await currentVault.value?.drizzle
+    .update(haexSettings)
+    .set({ key: 'locale', value: locale })
+    .where(eq(haexSettings.key, 'locale'))
+  await setLocale(locale)
+  console.log('update locale', update)
+}
+
+const { currentTheme } = storeToRefs(useUiStore())
+
+const onSelectThemeAsync = async (theme: ITheme) => {
+  const update = await currentVault.value?.drizzle
+    .update(haexSettings)
+    .set({ key: 'theme', value: theme.name })
+    .where(eq(haexSettings.key, 'theme'))
+  currentTheme.value = theme
+}
+
+const onSetVaultNameAsync = async (vaultName: string) => {
+  updateVaultNameAsync(vaultName)
+}
+</script>
+
+<i18n lang="yaml">
+de:
+  language: Sprache
+  design: Design
+  vaultName: Vaultname
+  save: Änderung speichern
+
+en:
+  language: Language
+  design: Design
+  vaultName: Vault Name
+  save: save changes
+</i18n>