added settings page, cleanup

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>