implemented device name

src/components/haex/menu/notifications.vue

@@ -6,7 +6,7 @@
       <button
         id="dropdown-scrollable"
         type="button"
-        class="dropdown-toggle btn btn-text btn-circle dropdown-open:bg-base-content/10 size-10"
+        class="dropdown-toggle btn btn-text btn-circle dropdown-open:bg-base-content/10"
         aria-haspopup="menu"
         aria-expanded="false"
         aria-label="Dropdown"

src/components/ui/dialog/confirm.vue

@@ -20,13 +20,15 @@
           class="btn-error btn-outline w-full sm:w-auto"
           @click="onAbort"
         >
-          <Icon name="mdi:close" /> {{ abortLabel ?? t('abort') }}
+          <Icon :name="abortIcon || 'mdi:close'" />
+          {{ abortLabel ?? t('abort') }}
         </UiButton>
         <UiButton
           class="btn-primary w-full sm:w-auto"
           @click="onConfirm"
         >
-          <Icon name="mdi:check" /> {{ confirmLabel ?? t('confirm') }}
+          <Icon :name="confirmIcon || 'mdi:check'" />
+          {{ confirmLabel ?? t('confirm') }}
         </UiButton>
       </slot>
     </template>
@@ -34,7 +36,13 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{ confirmLabel?: string; abortLabel?: string; title?: string }>()
+defineProps<{
+  confirmLabel?: string
+  abortLabel?: string
+  title?: string
+  abortIcon?: string
+  confirmIcon?: string
+}>()
 
 const open = defineModel<boolean>('open', { default: false })
 

src/components/ui/dialog/index.vue

@@ -25,7 +25,7 @@
         class="overlay-animation-target overlay-open:duration-300 overlay-open:opacity-100 transition-all ease-out modal-dialog"
       >
         <div class="modal-content justify-between">
-          <div class="modal-header">
+          <div class="modal-header py-0 sm:py-4">
             <div
               v-if="title || $slots.title"
               class="modal-title py-4 break-all"
@@ -49,7 +49,7 @@
             </button>
           </div>
 
-          <div class="modal-body text-sm sm:text-base grow">
+          <div class="modal-body text-sm sm:text-base grow mt-0 pt-0">
             <slot />
           </div>
 

src/components/ui/input/index.vue

@@ -73,13 +73,13 @@
 <script setup lang="ts">
 import type { ZodSchema } from 'zod'
 
+const input = defineModel<string | number | undefined | null>({
+  required: true,
+})
+
 const inputRef = useTemplateRef('inputRef')
 defineExpose({ inputRef })
 
-defineOptions({
-  inheritAttrs: false,
-})
-
 const props = defineProps({
   placeholder: {
     type: String,
@@ -131,11 +131,6 @@ const props = defineProps({
   read_only: Boolean,
 })
 
-const input = defineModel<string | number | undefined | null>({
-  default: '',
-  required: true,
-})
-
 onMounted(() => {
   if (props.autofocus && inputRef.value) inputRef.value.focus()
 })

src/components/ui/test.vue

@@ -0,0 +1,7 @@
+<template>
+  <input v-model="value" />
+</template>
+
+<script setup lang="ts">
+const value = defineModel()
+</script>

src/components/vault/button/open.vue

@@ -28,12 +28,12 @@
     </template>
 
     <UiInputPassword
-      v-model="database.password"
       :check-input="check"
       :rules="vaultDatabaseSchema.password"
+      @keyup.enter="onOpenDatabase"
       autofocus
       prepend-icon="mdi:key-outline"
-      @keyup.enter="onOpenDatabase"
+      v-model="database.password"
     />
   </UiDialogConfirm>
 </template>

src/layouts/app.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full w-full flex flex-col overflow-hidden">
+  <div class="h-full flex-1 flex flex-col overflow-auto">
     <nav
       class="navbar rounded-b max-sm:shadow border-b border-base-content/25 sm:z-20 relative px-2 py-0 sm:py-2"
     >
@@ -35,13 +35,13 @@
         </NuxtLinkLocale>
       </div>
 
-      <div class="flex items-center gap-4 me-4">
+      <div class="flex items-center gap-x-4">
         <HaexMenuNotifications />
         <HaexMenuMain />
       </div>
     </nav>
 
-    <div class="flex h-full w-full overflow-hidden">
+    <div class="flex h-full w-full overflow-auto">
       <aside
         id="sidebar"
         class="sm:shadow-none transition-all h-full overflow-hidden border-r border-base-300"

src/layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-screen h-screen bg-base-200 min-w-52">
+  <div class="w-screen h-dvh bg-base-200 min-w-52 overflow-auto">
     <slot />
   </div>
 </template>

src/pages/index.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="items-center justify-center h-full flex w-full relative">
-    <div class="fixed top-2 right-2">
+  <div class="items-center justify-center flex w-full relative min-h-full">
+    <div class="absolute top-2 right-2">
       <UiDropdownLocale @select="setLocale" />
     </div>
     <div class="flex flex-col justify-center items-center gap-5 max-w-3xl">
-      <UiLogoHaexhub class="bg-primary p-3 size-16 rounded-full" />
+      <UiLogoHaexhub class="bg-primary p-3 size-16 rounded-full shrink-0" />
       <span
         class="flex flex-wrap font-bold text-pretty text-xl gap-2 justify-center"
       >
@@ -98,12 +98,12 @@ await syncLastVaultsAsync()
   "de": {
     "welcome": "Viel Spass mit",
     "lastUsed": "Zuletzt verwendete Vaults",
-    "sponsors": "Powered by"
+    "sponsors": "Supported by"
   },
   "en": {
     "welcome": "Have fun with",
     "lastUsed": "Last used Vaults",
-    "sponsors": "Powered by"
+    "sponsors": "Supported by"
   }
 }
 </i18n>

src/pages/vault.vue

@@ -1,15 +1,32 @@
 <template>
-  <div class="h-full w-full">
+  <div class="h-full">
     <NuxtLayout name="app">
       <NuxtPage />
     </NuxtLayout>
 
-    <UiDialog v-model:open="showInstanceDialog">
-      <div>
-        Das scheint das erste Mal zu sein, dass du auf diesem Gerät diese Vault
-        öffnest. Bitte gib diesem Gerät einen Namen
-      </div>
-    </UiDialog>
+    <div class="hidden">
+      <UiDialogConfirm
+        :confirm-label="t('newDevice.save')"
+        :title="t('newDevice.title')"
+        @abort="showNewDeviceDialog = false"
+        @confirm="onSetDeviceNameAsync"
+        confirm-icon="mdi:content-save-outline"
+        v-model:open="showNewDeviceDialog"
+      >
+        <div class="flex flex-col gap-4">
+          <p>{{ t('newDevice.intro') }}</p>
+          <p>
+            {{ t('newDevice.setName') }}
+          </p>
+          {{ deviceId }}
+          <UiInput
+            v-model="newDeviceName"
+            :label="t('newDevice.label')"
+            :rules="vaultDeviceNameSchema"
+          />
+        </div>
+      </UiDialogConfirm>
+    </div>
   </div>
 </template>
 
@@ -18,20 +35,68 @@ definePageMeta({
   middleware: 'database',
 })
 
-const showInstanceDialog = ref(false)
+const { t } = useI18n()
+
+const showNewDeviceDialog = ref(false)
+
+const { hostname } = storeToRefs(useDeviceStore())
+
+const newDeviceName = ref<string>('unknown')
 
 const { readNotificationsAsync } = useNotificationStore()
-const { isFirstTimeAsync } = useVaultInstanceStore()
+const { isKnownDeviceAsync } = useDeviceStore()
 const { loadExtensionsAsync } = useExtensionsStore()
+const { setDeviceIdIfNotExistsAsync, addDeviceNameAsync } = useDeviceStore()
+const { deviceId } = storeToRefs(useDeviceStore())
 
 onMounted(async () => {
+  await setDeviceIdIfNotExistsAsync()
   await loadExtensionsAsync()
   await readNotificationsAsync()
 
-  if (await isFirstTimeAsync()) {
-    showInstanceDialog.value = true
+  if (!(await isKnownDeviceAsync())) {
+    console.log('not known device')
+    newDeviceName.value = hostname.value ?? 'unknown'
+    showNewDeviceDialog.value = true
   }
 })
 
-onMounted(() => {})
+const { add } = useSnackbar()
+const onSetDeviceNameAsync = async () => {
+  try {
+    const check = vaultDeviceNameSchema.safeParse(newDeviceName.value)
+    if (!check.success) {
+      console.log('check failed', check.error)
+      return
+    }
+
+    await addDeviceNameAsync({ name: newDeviceName.value })
+    showNewDeviceDialog.value = false
+    add({ type: 'success', text: t('newDevice.success') })
+  } catch (error) {
+    add({ type: 'error', text: t('newDevice.error') })
+  }
+}
 </script>
+
+<i18n lang="yaml">
+de:
+  newDevice:
+    title: Neues Gerät erkannt
+    save: Speichern
+    label: Name
+    intro: Offenbar öffnest du das erste Mal diese Vault auf diesem Gerät.
+    setName: Bitte gib diesem Gerät einen für dich sprechenden Namen. Dadurch kannst du später besser nachverfolgen, welche Änderungen von welchem Gerät erfolgt sind.
+    success: Name erfolgreich gespeichert
+    error: Name konnt nicht gespeichert werden
+
+en:
+  newDevice:
+    title: New device recognized
+    save: Save
+    label: Name
+    intro: This is obviously your first time with this Vault on this device.
+    setName: Please give this device a name that is meaningful to you. This will make it easier for you to track which changes have been made by which device.
+    success: Name successfully saved
+    error: Name could not be saved
+</i18n>

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

@@ -1,6 +1,7 @@
 <template>
   <div>
-    <div class="h-full text-base-content flex bg-base-200 p-4">
+    aaaa
+    <div class="h-full text-base-content flex bg-base-200">
       <HaexExtensionCard
         v-for="extension in extensionStore.availableExtensions"
         v-bind="extension"

src/pages/vault/[vaultId]/passwords/[[groupId]]/edit.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    {{ group }}
     <HaexPassGroup
       v-model="group"
       mode="edit"
@@ -43,16 +44,15 @@ const onClose = () => {
 
 const { add } = useSnackbar()
 
+const { updateAsync } = usePasswordGroupStore()
+
 const onSaveAsync = async () => {
   try {
     check.value = true
     if (!group.value) return
 
-    console.log('onSave', errors.value)
     if (errors.value.name.length || errors.value.description.length) return
 
-    const { updateAsync } = usePasswordGroupStore()
-
     await updateAsync(group.value)
 
     add({ type: 'success', text: t('change.success') })

src/pages/vault/[vaultId]/passwords/[[groupId]]/item/[itemId].vue

@@ -163,14 +163,16 @@ const { currentItem } = storeToRefs(usePasswordItemStore())
 
 watch(
   currentItem,
-  (newItem) => {
-    item.details = JSON.parse(JSON.stringify(newItem?.details))
-    item.keyValues = JSON.parse(JSON.stringify(newItem?.keyValues))
-    item.history = JSON.parse(JSON.stringify(newItem?.history))
+  () => {
+    console.log('watch currentItem', currentItem.value)
+    if (!currentItem.value) return
+    item.details = JSON.parse(JSON.stringify(currentItem.value?.details))
+    item.keyValues = JSON.parse(JSON.stringify(currentItem.value?.keyValues))
+    item.history = JSON.parse(JSON.stringify(currentItem.value?.history))
     item.keyValuesAdd = []
     item.keyValuesDelete = []
-    item.originalDetails = JSON.stringify(newItem?.details)
-    item.originalKeyValues = JSON.stringify(newItem?.keyValues)
+    item.originalDetails = JSON.stringify(currentItem.value?.details)
+    item.originalKeyValues = JSON.stringify(currentItem.value?.keyValues)
     ignoreChanges.value = false
   },
   { immediate: true },

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

@@ -40,9 +40,7 @@
 </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: 'settings',
@@ -50,24 +48,19 @@ definePageMeta({
 
 const { t, setLocale } = useI18n()
 
-const { currentVault, currentVaultName } = storeToRefs(useVaultStore())
-const { updateVaultNameAsync } = useVaultSettingsStore()
+const { currentVaultName } = storeToRefs(useVaultStore())
+const { updateVaultNameAsync, updateLocaleAsync, updateThemeAsync } =
+  useVaultSettingsStore()
 
 const onSelectLocaleAsync = async (locale: Locale) => {
-  await currentVault.value?.drizzle
-    .update(haexSettings)
-    .set({ key: 'locale', value: locale })
-    .where(eq(haexSettings.key, 'locale'))
+  await updateLocaleAsync(locale)
   await setLocale(locale)
 }
 
 const { currentTheme } = storeToRefs(useUiStore())
 
 const onSelectThemeAsync = async (theme: ITheme) => {
-  await currentVault.value?.drizzle
-    .update(haexSettings)
-    .set({ key: 'theme', value: theme.name })
-    .where(eq(haexSettings.key, 'theme'))
+  await updateThemeAsync(theme.value)
   currentTheme.value = theme
 }
 
@@ -82,9 +75,7 @@ const onSetVaultNameAsync = async () => {
   }
 }
 
-const { isNotificationAllowed } = storeToRefs(useNotificationStore())
 const { requestNotificationPermissionAsync } = useNotificationStore()
-//const { test } = useLastVaultStore()
 </script>
 
 <i18n lang="yaml">

src/stores/passwords/items.ts

@@ -21,9 +21,7 @@ export const usePasswordItemStore = defineStore('passwordItemStore', () => {
     },
   })
 
-  const currentItem = computedAsync(
-    async () => await readAsync(currentItemId.value),
-  )
+  const currentItem = computedAsync(() => readAsync(currentItemId.value))
 
   return {
     currentItemId,
@@ -179,6 +177,8 @@ const readAsync = async (itemId: string | null) => {
         where: eq(haexPasswordsItemDetails.id, itemId),
       })
 
+    console.log('readAsync details', details)
+
     if (!details) return null
 
     const history = (await usePasswordHistoryStore().getAsync(itemId)) ?? []

src/stores/vault/device.ts

@@ -0,0 +1,98 @@
+import { load } from '@tauri-apps/plugin-store'
+import { hostname as tauriHostname } from '@tauri-apps/plugin-os'
+
+export const useDeviceStore = defineStore('vaultInstanceStore', () => {
+  const deviceId = ref<string>()
+
+  const hostname = computedAsync(() => tauriHostname())
+
+  const deviceName = ref<string>()
+
+  const getDeviceIdAsync = async () => {
+    const store = await getStoreAsync()
+    return store.get<string>('id')
+  }
+
+  const getStoreAsync = async () => {
+    const {
+      public: { haexVault },
+    } = useRuntimeConfig()
+
+    return await load(haexVault.instanceFileName || 'instance.json')
+  }
+
+  const setDeviceIdAsync = async (id?: string) => {
+    const store = await getStoreAsync()
+    const _id = id || crypto.randomUUID()
+    await store.set('id', _id)
+    deviceId.value = _id
+    return _id
+  }
+
+  const setDeviceIdIfNotExistsAsync = async () => {
+    const _deviceId = await getDeviceIdAsync()
+    if (_deviceId) {
+      deviceId.value = _deviceId
+      return deviceId.value
+    }
+    return await setDeviceIdAsync()
+  }
+
+  const isKnownDeviceAsync = async () => {
+    const { readDeviceNameAsync } = useVaultSettingsStore()
+    const deviceId = await getDeviceIdAsync()
+    return deviceId ? (await readDeviceNameAsync(deviceId)) || false : false
+  }
+
+  const readDeviceNameAsync = async (id: string) => {
+    const { readDeviceNameAsync } = useVaultSettingsStore()
+    deviceName.value = (await readDeviceNameAsync(id))?.value ?? ''
+    return deviceName.value
+  }
+
+  const updateDeviceNameAsync = async ({
+    id,
+    name,
+  }: {
+    id?: string
+    name?: string
+  }) => {
+    const { updateDeviceNameAsync } = useVaultSettingsStore()
+    const _id = id ?? deviceId.value
+    if (!_id || !name) return
+
+    deviceName.value = name
+
+    return updateDeviceNameAsync({
+      deviceId: _id,
+      deviceName: name,
+    })
+  }
+
+  const addDeviceNameAsync = async ({
+    id,
+    name,
+  }: {
+    id?: string
+    name: string
+  }) => {
+    const { addDeviceNameAsync } = useVaultSettingsStore()
+    const _id = id ?? deviceId.value
+    if (!_id || !name) throw new Error('Id oder Name fehlen')
+
+    return addDeviceNameAsync({
+      deviceId: _id,
+      deviceName: name,
+    })
+  }
+  return {
+    addDeviceNameAsync,
+    hostname,
+    deviceId,
+    isKnownDeviceAsync,
+    readDeviceNameAsync,
+    setDeviceIdAsync,
+    setDeviceIdIfNotExistsAsync,
+    updateDeviceNameAsync,
+  }
+})

src/stores/vault/instance.ts

@@ -1,47 +0,0 @@
-import { load } from '@tauri-apps/plugin-store'
-
-export const useVaultInstanceStore = defineStore('vaultInstanceStore', () => {
-  const instanceId = ref<string>()
-
-  const getInstanceIdAsync = async () => {
-    const store = await getStoreAsync()
-    instanceId.value = await store.get<string>('id')
-
-    return instanceId.value
-  }
-
-  const getStoreAsync = async () => {
-    const {
-      public: { haexVault },
-    } = useRuntimeConfig()
-
-    return await load(haexVault.instanceFileName || 'instance.json')
-  }
-
-  const setInstanceIdAsync = async (id?: string) => {
-    const store = await getStoreAsync()
-    const _id = id || crypto.randomUUID()
-    await store.set('id', _id)
-
-    return _id
-  }
-
-  const setInstanceIdIfNotExistsAsync = async () => {
-    const id = await getInstanceIdAsync()
-    return id ?? (await setInstanceIdAsync())
-  }
-
-  const isFirstTimeAsync = async () => {
-    const { currentVault } = useVaultStore()
-
-    currentVault.drizzle.select
-    return !(await getInstanceIdAsync())
-  }
-
-  return {
-    instanceId,
-    isFirstTimeAsync,
-    setInstanceIdAsync,
-    setInstanceIdIfNotExistsAsync,
-  }
-})

src/stores/vault/settings.ts

@@ -1,5 +1,20 @@
+import { and, eq } from 'drizzle-orm'
+import { z } from 'zod'
 import * as schema from '@/../src-tauri/database/schemas/vault'
-import { eq } from 'drizzle-orm'
+import type { Locale } from 'vue-i18n'
+
+export enum VaultSettingsTypeEnum {
+  deviceName = 'deviceName',
+  settings = 'settings',
+}
+
+export enum VaultSettingsKeyEnum {
+  locale = 'locale',
+  theme = 'theme',
+  vaultName = 'vaultName',
+}
+
+export const vaultDeviceNameSchema = z.string().min(3).max(255)
 
 export const useVaultSettingsStore = defineStore('vaultSettingsStore', () => {
   const { currentVault, currentVaultName } = storeToRefs(useVaultStore())
@@ -12,20 +27,21 @@ export const useVaultSettingsStore = defineStore('vaultSettingsStore', () => {
     try {
       const app = useNuxtApp()
 
-      const currentLocaleRow = await currentVault.value?.drizzle
-        .select()
-        .from(schema.haexSettings)
-        .where(eq(schema.haexSettings.key, 'locale'))
+      const currentLocaleRow =
+        await currentVault.value?.drizzle.query.haexSettings.findFirst({
+          where: eq(schema.haexSettings.key, VaultSettingsKeyEnum.locale),
+        })
 
-      if (currentLocaleRow?.[0]?.value) {
+      if (currentLocaleRow?.value) {
         const currentLocale = app.$i18n.availableLocales.find(
-          (locale) => locale === currentLocaleRow[0].value,
+          (locale) => locale === currentLocaleRow.value,
         )
         await app.$i18n.setLocale(currentLocale ?? app.$i18n.defaultLocale)
       } else {
         await currentVault.value?.drizzle.insert(schema.haexSettings).values({
           id: crypto.randomUUID(),
-          key: 'locale',
+          key: VaultSettingsKeyEnum.locale,
+          type: VaultSettingsTypeEnum.settings,
           value: app.$i18n.locale.value,
         })
       }
@@ -34,44 +50,62 @@ export const useVaultSettingsStore = defineStore('vaultSettingsStore', () => {
     }
   }
 
+  const updateLocaleAsync = async (locale: Locale) => {
+    await currentVault.value?.drizzle
+      .update(schema.haexSettings)
+      .set({ key: VaultSettingsKeyEnum.locale, value: locale })
+      .where(
+        and(
+          eq(schema.haexSettings.key, VaultSettingsKeyEnum.locale),
+          eq(schema.haexSettings.type, VaultSettingsTypeEnum.settings),
+        ),
+      )
+  }
   const syncThemeAsync = async () => {
     const { availableThemes, defaultTheme, currentTheme } = storeToRefs(
       useUiStore(),
     )
-    const currentThemeRow = await currentVault.value?.drizzle
-      .select()
-      .from(schema.haexSettings)
-      .where(eq(schema.haexSettings.key, 'theme'))
+    const currentThemeRow =
+      await currentVault.value?.drizzle.query.haexSettings.findFirst({
+        where: eq(schema.haexSettings.key, VaultSettingsKeyEnum.theme),
+      })
 
-    if (currentThemeRow?.[0]?.value) {
+    if (currentThemeRow?.value) {
       const theme = availableThemes.value.find(
-        (theme) => theme.name === currentThemeRow[0].value,
+        (theme) => theme.value === currentThemeRow.value,
       )
       currentTheme.value = theme ?? defaultTheme.value
     } else {
       await currentVault.value?.drizzle.insert(schema.haexSettings).values({
         id: crypto.randomUUID(),
-        key: 'theme',
+        key: VaultSettingsKeyEnum.theme,
+        type: VaultSettingsTypeEnum.settings,
         value: currentTheme.value.value,
       })
     }
   }
 
-  const syncVaultNameAsync = async () => {
-    const currentVaultNameRow = await currentVault.value?.drizzle
-      .select()
-      .from(schema.haexSettings)
-      .where(eq(schema.haexSettings.key, 'vaultName'))
+  const updateThemeAsync = async (theme: string) => {
+    return await currentVault.value?.drizzle
+      .update(schema.haexSettings)
+      .set({ key: VaultSettingsKeyEnum.theme, value: theme })
+      .where(eq(schema.haexSettings.key, VaultSettingsKeyEnum.theme))
+  }
 
-    if (currentVaultNameRow?.[0]?.value) {
+  const syncVaultNameAsync = async () => {
+    const currentVaultNameRow =
+      await currentVault.value?.drizzle.query.haexSettings.findFirst({
+        where: eq(schema.haexSettings.key, VaultSettingsKeyEnum.vaultName),
+      })
+
+    if (currentVaultNameRow?.value) {
       currentVaultName.value =
-        currentVaultNameRow.at(0)?.value ||
-        haexVault.defaultVaultName ||
-        'HaexHub'
+        currentVaultNameRow.value || haexVault.defaultVaultName || 'HaexHub'
     } else {
       await currentVault.value?.drizzle.insert(schema.haexSettings).values({
         id: crypto.randomUUID(),
-        key: 'vaultName',
+        key: VaultSettingsKeyEnum.vaultName,
+        type: VaultSettingsTypeEnum.settings,
         value: currentVaultName.value,
       })
     }
@@ -84,10 +118,76 @@ export const useVaultSettingsStore = defineStore('vaultSettingsStore', () => {
       .where(eq(schema.haexSettings.key, 'vaultName'))
   }
 
+  const readDeviceNameAsync = async (id: string) => {
+    const { currentVault } = useVaultStore()
+
+    const deviceName = await currentVault.drizzle.query.haexSettings.findFirst({
+      where: and(
+        eq(schema.haexSettings.type, VaultSettingsTypeEnum.deviceName),
+        eq(schema.haexSettings.key, id),
+      ),
+    })
+    console.log('readDeviceNameAsync', deviceName)
+    return deviceName
+  }
+
+  const addDeviceNameAsync = async ({
+    deviceId,
+    deviceName,
+  }: {
+    deviceId: string
+    deviceName: string
+  }) => {
+    const { currentVault } = useVaultStore()
+
+    const isNameOk = vaultDeviceNameSchema.safeParse(deviceName)
+    if (!isNameOk.success) {
+      console.log('deviceName not OK', isNameOk.error)
+      return
+    }
+
+    return currentVault.drizzle.insert(schema.haexSettings).values({
+      id: crypto.randomUUID(),
+      type: VaultSettingsTypeEnum.deviceName,
+      key: deviceId,
+      value: deviceName,
+    })
+  }
+
+  const updateDeviceNameAsync = async ({
+    deviceId,
+    deviceName,
+  }: {
+    deviceId: string
+    deviceName: string
+  }) => {
+    const { currentVault } = useVaultStore()
+
+    const isNameOk = vaultDeviceNameSchema.safeParse(deviceName)
+    if (!isNameOk.success) return
+
+    return currentVault.drizzle
+      .update(schema.haexSettings)
+      .set({
+        value: deviceName,
+      })
+      .where(
+        and(
+          eq(schema.haexSettings.key, deviceId),
+          eq(schema.haexSettings.type, VaultSettingsTypeEnum.deviceName),
+        ),
+      )
+  }
+
   return {
+    addDeviceNameAsync,
+    readDeviceNameAsync,
     syncLocaleAsync,
     syncThemeAsync,
     syncVaultNameAsync,
+    updateDeviceNameAsync,
+    updateLocaleAsync,
+    updateThemeAsync,
     updateVaultNameAsync,
   }
 })