adjust for mobile

src/components/haex/menu/applications.vue

@@ -4,6 +4,8 @@
       icon="material-symbols:apps"
       color="neutral"
       variant="outline"
+      v-bind="$attrs"
+      size="xl"
     />
 
     <template #content>

src/components/haex/pass/group/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <UCard v-if="group">
+  <UCard
+    v-if="group"
+    :ui="{ root: [''] }"
+  >
     <template #header>
       <div class="flex items-center gap-2">
         <Icon

src/components/haex/pass/mobile/menu/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="menuItems?.length"
-    class="flex-1"
+    class="flex-1 h-full"
   >
     <ul
       ref="listRef"
@@ -43,7 +43,7 @@
   </div>
   <div
     v-else
-    class="flex justify-center items-center px-20 flex-1 my-auto"
+    class="flex justify-center items-center flex-1"
   >
     <UiIconNoData class="text-primary size-24 shrink-0" />
   </div>

src/components/haex/vault/create.vue

@@ -53,33 +53,23 @@
 </template>
 
 <script setup lang="ts">
-import { save } from '@tauri-apps/plugin-dialog'
-import { BaseDirectory, readFile, writeFile } from '@tauri-apps/plugin-fs'
-import { resolveResource } from '@tauri-apps/api/path'
-
 import { vaultSchema } from './schema'
-//import type { FormSubmitEvent } from '@nuxt/ui'
 
 const { t } = useI18n()
 
-//type Schema = z.output<typeof vaultSchema>
-
 const vault = reactive<{
   name: string
   password: string
-  path: string | null
   type: 'password' | 'text'
 }>({
   name: 'HaexVault',
   password: '',
-  path: '',
   type: 'password',
 })
 
 const initVault = () => {
   vault.name = 'HaexVault'
   vault.password = ''
-  vault.path = ''
   vault.type = 'password'
 }
 
@@ -95,34 +85,16 @@ const onCreateAsync = async () => {
   const nameCheck = vaultSchema.name.safeParse(vault.name)
   const passwordCheck = vaultSchema.password.safeParse(vault.password)
 
-  console.log('checks', vault.name, nameCheck, vault.password, passwordCheck)
   if (!nameCheck.success || !passwordCheck.success) return
 
   open.value = false
   try {
-    const template_vault_path = await resolveResource('database/vault.db')
-
-    const template_vault = await readFile(template_vault_path)
-
-    vault.path = await save({
-      defaultPath: vault.name.endsWith('.db') ? vault.name : `${vault.name}.db`,
-    })
-
-    if (!vault.path) return
-
-    await writeFile('temp_vault.db', template_vault, {
-      baseDir: BaseDirectory.AppLocalData,
-    })
-
-    console.log('data', vault)
-
-    if (vault.path && vault.password) {
+    if (vault.name && vault.password) {
       const vaultId = await createAsync({
-        path: vault.path,
+        vaultName: vault.name,
         password: vault.password,
       })
 
-      console.log('vaultId', vaultId)
       if (vaultId) {
         initVault()
         await navigateTo(
@@ -132,7 +104,7 @@ const onCreateAsync = async () => {
     }
   } catch (error) {
     console.error(error)
-    add({ color: 'error', description: `${error}` })
+    add({ color: 'error', description: JSON.stringify(error) })
   }
 }
 </script>

src/components/haex/vault/open.vue

@@ -5,7 +5,7 @@
     :description="vault.path || path"
     @confirm="onOpenDatabase"
   >
-    <UiButton
+    <!-- <UiButton
       :label="t('vault.open')"
       :ui="{
         base: 'px-3 py-2',
@@ -15,7 +15,7 @@
       variant="outline"
       block
       @click.stop="onLoadDatabase"
-    />
+    /> -->
 
     <template #title>
       <i18n-t
@@ -51,9 +51,14 @@
 </template>
 
 <script setup lang="ts">
-import { open as openVault } from '@tauri-apps/plugin-dialog'
+/* import { open as openVault } from '@tauri-apps/plugin-dialog' */
 import { vaultSchema } from './schema'
 
+const open = defineModel<boolean>('open', { default: false })
+const props = defineProps<{
+  path?: string
+}>()
+
 const { t } = useI18n()
 
 const vault = reactive<{
@@ -68,11 +73,7 @@ const vault = reactive<{
   type: 'password',
 })
 
-const open = defineModel('open', { type: Boolean })
-
-const { add } = useToast()
-
-const onLoadDatabase = async () => {
+/* const onLoadDatabase = async () => {
   try {
     vault.path = await openVault({
       multiple: false,
@@ -97,15 +98,11 @@ const onLoadDatabase = async () => {
     console.error('handleError', error, typeof error)
     add({ color: 'error', description: `${error}` })
   }
-}
+} */
 
 const { syncLocaleAsync, syncThemeAsync, syncVaultNameAsync } =
   useVaultSettingsStore()
 
-const props = defineProps<{
-  path: string
-}>()
-
 const check = ref(false)
 
 const initVault = () => {
@@ -120,13 +117,17 @@ const onAbort = () => {
   open.value = false
 }
 
+const { add } = useToast()
+
 const onOpenDatabase = async () => {
   try {
+    if (!props.path) return
+
     const { openAsync } = useVaultStore()
     const localePath = useLocalePath()
 
     check.value = true
-    const path = vault.path || props.path
+    const path = props.path
     const pathCheck = vaultSchema.path.safeParse(path)
     const passwordCheck = vaultSchema.password.safeParse(vault.password)
 

src/components/ui/button/index.vue

@@ -3,7 +3,11 @@
     <UTooltip :text="buttonProps?.tooltip">
       <UButton
         class="pointer-events-auto"
-        v-bind="{ ...buttonProps, ...$attrs }"
+        v-bind="{
+          ...{ size: isSmallScreen ? 'lg' : 'md' },
+          ...buttonProps,
+          ...$attrs,
+        }"
         @click="(e) => $emit('click', e)"
       >
         <template
@@ -28,4 +32,6 @@ interface IButtonProps extends /* @vue-ignore */ ButtonProps {
 }
 const buttonProps = defineProps<IButtonProps>()
 defineEmits<{ click: [Event] }>()
+
+const { isSmallScreen } = storeToRefs(useUiStore())
 </script>

src/components/ui/dialog/confirm.vue

@@ -3,8 +3,6 @@
     v-model:open="open"
     :title
     :description
-    :fullscreen="isSmallScreen"
-    :ui="{ header: 'pt-10 sm:pt-0', footer: 'mb-10 sm:mb-0' }"
   >
     <slot>
       <!-- <UiButton
@@ -49,8 +47,6 @@
 </template>
 
 <script setup lang="ts">
-import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
-
 defineProps<{
   abortIcon?: string
   abortLabel?: string
@@ -64,11 +60,6 @@ const open = defineModel<boolean>('open', { default: false })
 
 const { t } = useI18n()
 defineEmits(['confirm'])
-
-const breakpoints = useBreakpoints(breakpointsTailwind)
-
-// "smAndDown" gilt für sm, xs usw.
-const isSmallScreen = breakpoints.smaller('sm')
 </script>
 
 <i18n lang="yaml">

src/components/ui/dropdown/locale.vue

@@ -3,6 +3,7 @@
     arrow
     :items
     :ui="{}"
+    :size="isSmallScreen ? 'lg' : 'md'"
   >
     <UButton
       :icon="items.find((item) => item.label === locale)?.icon"
@@ -35,4 +36,6 @@ const items = computed<DropdownMenuItem[]>(() =>
     },
   })),
 )
+
+const { isSmallScreen } = storeToRefs(useUiStore())
 </script>

src/components/ui/dropdown/vault.vue

@@ -4,6 +4,8 @@
       icon="mdi:menu"
       color="neutral"
       variant="outline"
+      v-bind="$attrs"
+      size="xl"
     />
   </UDropdownMenu>
 </template>

src/components/ui/input/index.vue

@@ -5,6 +5,7 @@
     :readonly="props.readOnly"
     :leading-icon="props.leadingIcon"
     :ui="{ base: 'peer' }"
+    :size="isSmallScreen ? 'lg' : 'md'"
     @change="(e) => $emit('change', e)"
     @blur="(e) => $emit('blur', e)"
     @keyup="(e: KeyboardEvent) => $emit('keyup', e)"
@@ -48,7 +49,8 @@
 </template>
 
 <script setup lang="ts">
-import type { AcceptableValue, InputProps } from '@nuxt/ui'
+import type { InputProps } from '@nuxt/ui'
+import type { AcceptableValue } from '@nuxt/ui/runtime/types/utils.js'
 
 const value = defineModel<AcceptableValue | undefined>()
 
@@ -83,6 +85,8 @@ const filteredSlots = computed(() => {
 })
 
 watchImmediate(props, () => console.log('props', props))
+
+const { isSmallScreen } = storeToRefs(useUiStore())
 </script>
 
 <i18n lang="yaml">

src/components/ui/input/password.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script setup lang="ts">
-import type { AcceptableValue } from '@nuxt/ui'
+import type { AcceptableValue } from '@nuxt/ui/runtime/types/utils.js'
 
 defineProps<{
   label?: string