From 2149c7a725dd68ad357313d51ea1277c60ffc6b3 Mon Sep 17 00:00:00 2001
From: tammi-23 <t.thamm@opencloud.eu>
Date: Mon, 9 Feb 2026 21:50:07 +0100
Subject: [PATCH 1/7] Added draft state handling

---
 .../src/components/MailComposeForm.vue        |  25 +-
 .../web-app-mail/src/components/MailList.vue  |   6 +-
 .../src/components/MailListItem.vue           |  18 +-
 .../src/components/MailWidget.vue             | 289 +++++++++++++++++-
 .../src/components/MailboxTree.vue            |   8 +-
 .../src/composables/piniaStores/accounts.ts   |  77 ++---
 .../src/composables/piniaStores/helpers.ts    |  20 ++
 .../src/composables/piniaStores/mailboxes.ts  |  82 ++---
 .../src/composables/piniaStores/mails.ts      |  83 +++--
 .../src/composables/useSaveAsDraft.ts         | 112 +++++++
 .../src/helpers/mailDraftConnector.ts         |  42 +++
 11 files changed, 567 insertions(+), 195 deletions(-)
 create mode 100644 packages/web-app-mail/src/composables/piniaStores/helpers.ts
 create mode 100644 packages/web-app-mail/src/composables/useSaveAsDraft.ts
 create mode 100644 packages/web-app-mail/src/helpers/mailDraftConnector.ts

diff --git a/packages/web-app-mail/src/components/MailComposeForm.vue b/packages/web-app-mail/src/components/MailComposeForm.vue
index 7509c4f4b5..a52a30646e 100644
--- a/packages/web-app-mail/src/components/MailComposeForm.vue
+++ b/packages/web-app-mail/src/components/MailComposeForm.vue
@@ -65,7 +65,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, unref, watch } from 'vue'
+import { computed, unref, watch, toRefs } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { useRouteQuery } from '@opencloud-eu/web-pkg'
 import { storeToRefs } from 'pinia'
@@ -76,6 +76,7 @@ import MailAttachmentList from './MailAttachmentList.vue'
 type FromOption = {
   value: string
   label: string
+  name: string
   email: string
   accountId: string
   identityId: string
@@ -100,10 +101,17 @@ export type ComposeFormState = {
   attachments?: MailComposeAttachment[]
 }
 
-const { modelValue, showFormattingToolbar = false } = defineProps<{
-  modelValue: ComposeFormState
-  showFormattingToolbar?: boolean
-}>()
+const props = withDefaults(
+  defineProps<{
+    modelValue: ComposeFormState
+    showFormattingToolbar?: boolean
+  }>(),
+  {
+    showFormattingToolbar: false
+  }
+)
+
+const { modelValue, showFormattingToolbar } = toRefs(props)
 
 const emit = defineEmits<{
   (e: 'update:modelValue', value: ComposeFormState): void
@@ -122,6 +130,7 @@ const fromOptions = computed<FromOption[]>(() => {
       account.identities?.map((identity) => ({
         label: identity.name ? `${identity.name} <${identity.email}>` : identity.email,
         value: identity.id,
+        name: identity.name ?? identity.email,
         email: identity.email,
         accountId: account.accountId,
         identityId: identity.id
@@ -131,11 +140,11 @@ const fromOptions = computed<FromOption[]>(() => {
 })
 
 const updateField = <K extends keyof ComposeFormState>(key: K, value: ComposeFormState[K]) => {
-  emit('update:modelValue', { ...modelValue, [key]: value })
+  emit('update:modelValue', { ...modelValue.value, [key]: value })
 }
 
 const removeAttachment = (id: string) => {
-  const next = (modelValue.attachments ?? []).filter((a) => a.id !== id)
+  const next = (modelValue.value.attachments ?? []).filter((a) => a.id !== id)
   updateField('attachments', next)
 }
 
@@ -150,7 +159,7 @@ watch(
       ? (options.find((o) => o.accountId === selectedAccountId) ?? options[0])
       : options[0]
 
-    if (!modelValue.from && defaultFrom) {
+    if (!modelValue.value.from && defaultFrom) {
       updateField('from', defaultFrom)
     }
   },
diff --git a/packages/web-app-mail/src/components/MailList.vue b/packages/web-app-mail/src/components/MailList.vue
index 2f25870db5..56cf4d4de8 100644
--- a/packages/web-app-mail/src/components/MailList.vue
+++ b/packages/web-app-mail/src/components/MailList.vue
@@ -58,7 +58,7 @@
           </oc-button>
         </li>
       </oc-list>
-      <MailWidget v-model="showCompose" />
+      <MailWidget v-if="showCompose" v-model="showCompose" />
     </template>
   </template>
 </template>
@@ -107,9 +107,9 @@ const onSelectMail = async (mail: Mail) => {
   await loadMail(unref(currentAccount).accountId, mail.id)
 
   updateMailField({
-    id: unref(currentMail).id,
+    id: mail.id,
     field: 'keywords',
-    value: { ...unref(currentMail).keywords, ...{ $seen: true } }
+    value: { ...mail.keywords, ...{ $seen: true } }
   })
 }
 </script>
diff --git a/packages/web-app-mail/src/components/MailListItem.vue b/packages/web-app-mail/src/components/MailListItem.vue
index b11ffd98bf..52ad7fa1fb 100644
--- a/packages/web-app-mail/src/components/MailListItem.vue
+++ b/packages/web-app-mail/src/components/MailListItem.vue
@@ -25,7 +25,7 @@
         <mail-indicators :mail="mail" />
       </div>
       <div class="mail-list-item-preview text-role-on-surface-variant mt-1">
-        <span class="line-clamp-2" v-text="mail.preview"></span>
+        <span class="line-clamp-2" v-text="previewText"></span>
       </div>
     </div>
   </div>
@@ -37,11 +37,9 @@ import { computed } from 'vue'
 import { formatRelativeDateFromISO } from '@opencloud-eu/web-pkg'
 import { useGettext } from 'vue3-gettext'
 import MailIndicators from './MailIndicators.vue'
+import DOMPurify from 'dompurify'
 
-const { mail } = defineProps<{
-  mail: Mail
-}>()
-
+const { mail } = defineProps<{ mail: Mail }>()
 const { current: currentLanguage } = useGettext()
 
 const fromText = computed(() => {
@@ -51,4 +49,14 @@ const fromText = computed(() => {
 const receivedAtRelativeDate = computed(() => {
   return formatRelativeDateFromISO(mail.receivedAt, currentLanguage)
 })
+
+const previewText = computed(() => {
+  const p = mail.preview ?? ''
+  if (!p.includes('<')) {
+    return p
+  }
+
+  const stripped = DOMPurify.sanitize(p, { ALLOWED_TAGS: [], ALLOWED_ATTR: [] })
+  return stripped.replace(/\s+/g, ' ').trim()
+})
 </script>
diff --git a/packages/web-app-mail/src/components/MailWidget.vue b/packages/web-app-mail/src/components/MailWidget.vue
index 4b99fb48fa..33a3f582a8 100644
--- a/packages/web-app-mail/src/components/MailWidget.vue
+++ b/packages/web-app-mail/src/components/MailWidget.vue
@@ -25,7 +25,7 @@
               fill-type="line"
             />
           </oc-button>
-          <oc-button appearance="raw" :aria-label="$gettext('Close')" @click="close">
+          <oc-button appearance="raw" :aria-label="$gettext('Close')" @click="requestClose">
             <oc-icon name="close" fill-type="line" />
           </oc-button>
         </div>
@@ -46,7 +46,7 @@
             </oc-button>
             <MailComposeAttachmentButton
               v-model="composeState.attachments"
-              :account-id="composeState.from?.accountId"
+              :account-id="accountId"
             />
             <oc-button
               type="button"
@@ -57,6 +57,15 @@
             >
               <oc-icon name="text" fill-type="none" class="text-base text-role-on-surface" />
             </oc-button>
+            <div class="ml-auto flex items-center min-w-0">
+              <div
+                v-if="showSavedHint"
+                class="flex items-center gap-1 text-role-on-surface-variant"
+              >
+                <oc-icon name="check" fill-type="line" />
+                <span class="text-sm" v-text="$gettext('Saved')" />
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -78,7 +87,7 @@
       >
         <oc-icon name="collapse-diagonal" fill-type="line" />
       </oc-button>
-      <oc-button appearance="raw" :aria-label="$gettext('Close')" @click="close">
+      <oc-button appearance="raw" :aria-label="$gettext('Close')" @click="requestClose">
         <oc-icon name="close" fill-type="line" />
       </oc-button>
     </template>
@@ -99,7 +108,7 @@
             </oc-button>
             <MailComposeAttachmentButton
               v-model="composeState.attachments"
-              :account-id="composeState.from?.accountId"
+              :account-id="accountId"
             />
             <oc-button
               type="button"
@@ -112,33 +121,105 @@
             >
               <oc-icon name="text" fill-type="none" class="text-base text-role-on-surface" />
             </oc-button>
+            <div class="ml-auto flex items-center min-w-0">
+              <div
+                v-if="showSavedHint"
+                class="flex items-center gap-1 text-role-on-surface-variant"
+              >
+                <oc-icon name="check" fill-type="line" />
+                <span class="text-sm" v-text="$gettext('Saved')" />
+              </div>
+            </div>
           </div>
         </div>
       </div>
     </template>
   </oc-modal>
+  <oc-modal v-if="leaveModalOpen" :title="$gettext('Leave this screen?')" :hide-actions="true">
+    <template #content>
+      <p
+        class="oc-mb-m"
+        v-text="
+          $gettext(
+            'Your email isn’t finished yet. You can save it as a draft or exit without saving.'
+          )
+        "
+      />
+      <div class="oc-modal-body-actions flex justify-end p-4 text-right -mr-4 -mb-4 -ml-4">
+        <div class="oc-modal-body-actions-grid grid grid-flow-col auto-cols-1fr gap-2">
+          <oc-button
+            class="oc-modal-body-actions-confirm"
+            appearance="filled"
+            :disabled="isSaving || !canSaveDraft"
+            @click="onSaveDraftAndClose"
+          >
+            {{ $gettext('Save as draft') }}
+          </oc-button>
+          <oc-button
+            class="oc-modal-body-actions-secondary"
+            appearance="outline"
+            :disabled="isSaving"
+            @click="onDiscardAndClose"
+          >
+            {{ $gettext('Discard') }}
+          </oc-button>
+          <oc-button
+            class="oc-modal-body-actions-cancel"
+            appearance="outline"
+            :disabled="isSaving"
+            @click="leaveModalOpen = false"
+          >
+            {{ $gettext('Cancel') }}
+          </oc-button>
+        </div>
+      </div>
+    </template>
+  </oc-modal>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, watch, unref, onBeforeUnmount } from 'vue'
 import { useGettext } from 'vue3-gettext'
+import { storeToRefs } from 'pinia'
+import { useClientService, useConfigStore } from '@opencloud-eu/web-pkg'
+import DOMPurify from 'dompurify'
 import MailComposeForm, { ComposeFormState } from './MailComposeForm.vue'
 import MailComposeAttachmentButton from './MailComposeAttachmentButton.vue'
+import { useSaveAsDraft } from '../composables/useSaveAsDraft'
+import { createMailDraftConnector } from '../helpers/mailDraftConnector'
+import { useAccountsStore } from '../composables/piniaStores/accounts'
+import { useMailboxesStore } from '../composables/piniaStores/mailboxes'
 
 const { $gettext } = useGettext()
 
-const props = defineProps<{
-  modelValue?: boolean
-}>()
+// Configuration constants
+const SAVED_HINT_DURATION_MS = 2000 // 2 seconds
+const AUTO_SAVE_INTERVAL_MS = 120_000 // 2 minutes
 
+const props = defineProps<{ modelValue?: boolean }>()
 const emit = defineEmits<{
   (e: 'update:modelValue', value: boolean): void
   (e: 'close'): void
 }>()
 
 const isExpanded = ref(false)
+const leaveModalOpen = ref(false)
+const showFormattingToolbar = ref(false)
+const showSavedHint = ref(false)
+
+let savedHintTimeout: ReturnType<typeof setTimeout> | undefined
 
-const composeState = ref<ComposeFormState>({
+const flashSavedHint = () => {
+  showSavedHint.value = true
+  if (savedHintTimeout) {
+    clearTimeout(savedHintTimeout)
+  }
+  savedHintTimeout = setTimeout(() => {
+    showSavedHint.value = false
+  }, SAVED_HINT_DURATION_MS)
+}
+
+const createEmptyComposeState = (): ComposeFormState => ({
   from: undefined,
   to: '',
   cc: '',
@@ -148,13 +229,15 @@ const composeState = ref<ComposeFormState>({
   attachments: []
 })
 
-const showFormattingToolbar = ref(false)
+const composeState = ref<ComposeFormState>(createEmptyComposeState())
 
 const isOpen = computed({
   get: () => props.modelValue ?? true,
   set: (value: boolean) => {
     emit('update:modelValue', value)
-    if (!value) emit('close')
+    if (!value) {
+      emit('close')
+    }
   }
 })
 
@@ -162,10 +245,192 @@ const toggleCollapseExpand = () => {
   isExpanded.value = !isExpanded.value
 }
 
-const close = () => {
+const clientService = useClientService()
+const configStore = useConfigStore()
+
+const accountsStore = useAccountsStore()
+const mailboxesStore = useMailboxesStore()
+const { currentAccount } = storeToRefs(accountsStore)
+const { draftsMailboxId } = storeToRefs(mailboxesStore)
+
+const accountId = computed(() => unref(currentAccount)?.accountId ?? '')
+const draftMailboxId = computed(() => unref(draftsMailboxId) ?? '')
+
+const connector = createMailDraftConnector(
+  clientService.httpAuthenticated as any,
+  configStore.groupwareUrl
+)
+
+const canSaveDraft = computed(() => !!accountId.value && !!draftMailboxId.value)
+
+const parseRecipients = (value: string) => {
+  return value
+    .split(',')
+    .map((s) => s.trim())
+    .filter(Boolean)
+    .map((email) => ({ email }))
+}
+
+const htmlToText = (html: string) => {
+  const stripped = DOMPurify.sanitize(html ?? '', { ALLOWED_TAGS: [], ALLOWED_ATTR: [] })
+  return stripped.replace(/\s+/g, ' ').trim()
+}
+
+const hasMeaningfulChanges = computed(() => {
+  const to = (composeState.value.to ?? '').trim()
+  const cc = (composeState.value.cc ?? '').trim()
+  const bcc = (composeState.value.bcc ?? '').trim()
+  const subject = (composeState.value.subject ?? '').trim()
+  const bodyText = htmlToText(composeState.value.body ?? '')
+  const attachments = composeState.value.attachments ?? []
+  return !!to || !!cc || !!bcc || !!subject || !!bodyText || attachments.length > 0
+})
+
+const { isDirty, isSaving, markDirty, resetDraft, saveAsDraft, discardDraft } = useSaveAsDraft({
+  accountId,
+  draftMailboxId,
+  api: connector,
+  getDraftPayload: () => {
+    const bodyHtml = composeState.value.body ?? ''
+    const bodyPlain = htmlToText(bodyHtml)
+
+    const hasHtml = bodyHtml.trim().length > 0 && bodyPlain.length > 0
+    const hasText = bodyPlain.length > 0
+
+    return {
+      from: composeState.value.from
+        ? [{ email: composeState.value.from.email, name: composeState.value.from.name }]
+        : [],
+
+      to: parseRecipients(composeState.value.to),
+      cc: parseRecipients(composeState.value.cc),
+      bcc: parseRecipients(composeState.value.bcc),
+      subject: composeState.value.subject ?? '',
+
+      textBody: hasText ? [{ partId: 't', type: 'text/plain' }] : [],
+      htmlBody: hasHtml ? [{ partId: 'h', type: 'text/html' }] : [],
+
+      bodyValues: {
+        ...(hasText ? { t: { value: bodyPlain } } : {}),
+        ...(hasHtml ? { h: { value: bodyHtml } } : {})
+      },
+
+      attachments: (composeState.value.attachments ?? []).map((a: any) => ({
+        blobId: a.blobId,
+        name: a.name,
+        type: a.type,
+        disposition: a.disposition ?? 'attachment'
+      }))
+    }
+  }
+})
+
+watch(
+  composeState,
+  () => {
+    markDirty()
+  },
+  { deep: true }
+)
+
+const resetCompose = () => {
+  composeState.value = createEmptyComposeState()
+  showFormattingToolbar.value = false
+  leaveModalOpen.value = false
+  resetDraft(null)
+}
+
+const doClose = () => {
   isExpanded.value = false
   isOpen.value = false
+  resetCompose()
+}
+
+const requestClose = () => {
+  if (!hasMeaningfulChanges.value) {
+    doClose()
+    return
+  }
+
+  if (!isDirty.value) {
+    doClose()
+    return
+  }
+
+  leaveModalOpen.value = true
+}
+
+const onSaveDraftAndClose = async () => {
+  if (!canSaveDraft.value) {
+    return
+  }
+  await saveAsDraft()
+  flashSavedHint()
+  doClose()
 }
+
+const onDiscardAndClose = async () => {
+  await discardDraft()
+  doClose()
+}
+
+let autoSaveInterval: ReturnType<typeof setInterval> | undefined
+
+const stopAutoSave = () => {
+  if (!autoSaveInterval) {
+    return
+  }
+  clearInterval(autoSaveInterval)
+  autoSaveInterval = undefined
+}
+
+const canAutoSaveNow = computed(() => {
+  return (
+    isOpen.value &&
+    !leaveModalOpen.value &&
+    canSaveDraft.value &&
+    hasMeaningfulChanges.value &&
+    isDirty.value &&
+    !isSaving.value
+  )
+})
+
+const startAutoSave = () => {
+  stopAutoSave()
+  autoSaveInterval = setInterval(async () => {
+    if (!canAutoSaveNow.value) {
+      return
+    }
+
+    try {
+      const res = await saveAsDraft()
+      if (res) {
+        flashSavedHint()
+      }
+    } catch (error) {
+      console.error('Failed to auto-save draft:', error)
+    }
+  }, AUTO_SAVE_INTERVAL_MS)
+}
+
+watch(
+  () => isOpen.value,
+  (open) => {
+    if (open) {
+      startAutoSave()
+    } else {
+      stopAutoSave()
+    }
+  },
+  { immediate: true }
+)
+
+onBeforeUnmount(() => {
+  stopAutoSave()
+  if (savedHintTimeout) {
+    clearTimeout(savedHintTimeout)
+  }
+})
 </script>
 
 <style>
diff --git a/packages/web-app-mail/src/components/MailboxTree.vue b/packages/web-app-mail/src/components/MailboxTree.vue
index 0a229ebf3b..0af52e99d9 100644
--- a/packages/web-app-mail/src/components/MailboxTree.vue
+++ b/packages/web-app-mail/src/components/MailboxTree.vue
@@ -83,8 +83,14 @@ const { loadMails } = useLoadMails()
 const { isLoading } = useLoadMailboxes()
 
 const onSelectMailbox = async (mailbox: Mailbox) => {
+  const accountId = unref(currentAccount)?.accountId
+  if (!accountId) {
+    return
+  }
+
   setCurrentMailbox(mailbox)
   setCurrentMail(null)
-  await loadMails(unref(currentAccount).accountId, unref(currentMailbox).id)
+
+  await loadMails(accountId, mailbox.id)
 }
 </script>
diff --git a/packages/web-app-mail/src/composables/piniaStores/accounts.ts b/packages/web-app-mail/src/composables/piniaStores/accounts.ts
index ff160298d2..f2b45da730 100644
--- a/packages/web-app-mail/src/composables/piniaStores/accounts.ts
+++ b/packages/web-app-mail/src/composables/piniaStores/accounts.ts
@@ -1,78 +1,35 @@
 import { defineStore } from 'pinia'
-import { computed, ref, unref } from 'vue'
-import { MailAccount } from '../../types'
-import { useRouteQuery } from '@opencloud-eu/web-pkg/src'
-
-export const useAccountsStore = defineStore('accounts', () => {
-  const currentAccountIdQuery = useRouteQuery('accountId')
+import { computed, ref } from 'vue'
+import type { MailAccount } from '../../types'
+import { useRouteQueryId } from './helpers'
 
+export const useAccountsStore = defineStore('mail-accounts', () => {
   const accounts = ref<MailAccount[]>([])
-  const currentAccountId = ref<string>()
-
-  const currentAccount = computed(() =>
-    unref(accounts).find((account) => account.accountId === unref(currentAccountId))
-  )
 
-  const setAccounts = (data: MailAccount[]) => {
-    accounts.value = data
-  }
+  const currentAccountId = useRouteQueryId('accountId')
 
-  const upsertAccount = (data: MailAccount) => {
-    const existing = unref(accounts).find(({ accountId }) => accountId === data.accountId)
-    if (existing) {
-      Object.assign(existing, data)
-      return
-    }
-    unref(accounts).push(data)
-  }
+  const currentAccount = computed(() => {
+    const id = currentAccountId.value
+    return accounts.value.find((a) => a.accountId === id)
+  })
 
-  const removeAccounts = (values: MailAccount[]) => {
-    accounts.value = unref(accounts).filter(
-      (account) => !values.find(({ accountId }) => accountId === account.accountId)
-    )
+  const setAccounts = (list: MailAccount[]) => {
+    accounts.value = list ?? []
 
-    if (values.some((v) => v.accountId === unref(currentAccountId))) {
-      currentAccountId.value = null
-      currentAccountIdQuery.value = null
+    if (!currentAccountId.value && accounts.value.length) {
+      currentAccountId.value = accounts.value[0].accountId
     }
   }
 
-  const setCurrentAccount = (data: MailAccount) => {
-    currentAccountId.value = data.accountId
-    currentAccountIdQuery.value = data?.accountId
-  }
-
-  const updateAccountField = <T extends MailAccount>({
-    id,
-    field,
-    value
-  }: {
-    id: T['accountId']
-    field: keyof T
-    value: T[keyof T]
-  }) => {
-    const account = unref(accounts).find((account) => id === account.accountId) as T
-    if (account) {
-      account[field] = value
-    }
-  }
-
-  const reset = () => {
-    accounts.value = []
-    currentAccountId.value = null
-    currentAccountIdQuery.value = null
+  const setCurrentAccount = (account: MailAccount | null) => {
+    currentAccountId.value = account?.accountId ?? ''
   }
 
   return {
     accounts,
+    currentAccountId,
     currentAccount,
-    updateAccountField,
     setAccounts,
-    upsertAccount,
-    removeAccounts,
-    setCurrentAccount,
-    reset
+    setCurrentAccount
   }
 })
-
-export type AccountsStore = ReturnType<typeof useAccountsStore>
diff --git a/packages/web-app-mail/src/composables/piniaStores/helpers.ts b/packages/web-app-mail/src/composables/piniaStores/helpers.ts
new file mode 100644
index 0000000000..d4738f0daf
--- /dev/null
+++ b/packages/web-app-mail/src/composables/piniaStores/helpers.ts
@@ -0,0 +1,20 @@
+import { computed, type Ref } from 'vue'
+import { useRouteQuery } from '@opencloud-eu/web-pkg/src'
+
+export type RouteQueryValue = string | string[] | null | undefined
+
+export const toSingleString = (v: RouteQueryValue): string => {
+  if (Array.isArray(v)) return v[0] ?? ''
+  return v ?? ''
+}
+
+export const useRouteQueryId = (queryParamName: string) => {
+  const query = useRouteQuery(queryParamName) as unknown as Ref<RouteQueryValue>
+
+  return computed<string>({
+    get: () => toSingleString(query.value),
+    set: (value: string) => {
+      query.value = value || undefined
+    }
+  })
+}
diff --git a/packages/web-app-mail/src/composables/piniaStores/mailboxes.ts b/packages/web-app-mail/src/composables/piniaStores/mailboxes.ts
index b512825158..0dd16a40e4 100644
--- a/packages/web-app-mail/src/composables/piniaStores/mailboxes.ts
+++ b/packages/web-app-mail/src/composables/piniaStores/mailboxes.ts
@@ -1,78 +1,46 @@
 import { defineStore } from 'pinia'
-import { computed, ref, unref } from 'vue'
-import { Mailbox } from '../../types'
-import { useRouteQuery } from '@opencloud-eu/web-pkg/src'
-
-export const useMailboxesStore = defineStore('mailboxes', () => {
-  const currentMailboxIdQuery = useRouteQuery('mailboxId')
+import { computed, ref } from 'vue'
+import type { Mailbox } from '../../types'
+import { useRouteQueryId } from './helpers'
 
+export const useMailboxesStore = defineStore('mail-mailboxes', () => {
   const mailboxes = ref<Mailbox[]>([])
-  const currentMailboxId = ref<string>()
 
-  const currentMailbox = computed(() =>
-    unref(mailboxes).find((mailbox) => mailbox.id === unref(currentMailboxId))
-  )
+  const currentMailboxId = useRouteQueryId('mailboxId')
 
-  const setMailboxes = (data: Mailbox[]) => {
-    mailboxes.value = data
-  }
+  const currentMailbox = computed(() => {
+    const id = currentMailboxId.value
+    return mailboxes.value.find((m) => m.id === id)
+  })
 
-  const upsertMailbox = (data: Mailbox) => {
-    const existing = unref(mailboxes).find(({ id }) => id === data.id)
-    if (existing) {
-      Object.assign(existing, data)
-      return
+  const draftsMailboxId = computed(() => {
+    const byRole = mailboxes.value.find((m: any) => m.role === 'drafts')?.id
+    if (byRole) {
+      return byRole
     }
-    unref(mailboxes).push(data)
-  }
-
-  const removeMailboxes = (values: Mailbox[]) => {
-    mailboxes.value = unref(mailboxes).filter(
-      (mailbox) => !values.find(({ id }) => id === mailbox.id)
-    )
 
-    if (values.some((v) => v.id === unref(currentMailboxId))) {
-      currentMailboxId.value = null
-      currentMailboxIdQuery.value = null
-    }
-  }
+    const byName = mailboxes.value.find((m) => (m.name ?? '').toLowerCase() === 'drafts')?.id
+    return byName ?? ''
+  })
 
-  const setCurrentMailbox = (data: Mailbox) => {
-    currentMailboxId.value = data?.id
-    currentMailboxIdQuery.value = data?.id
-  }
+  const setMailboxes = (list: Mailbox[]) => {
+    mailboxes.value = list ?? []
 
-  const updateMailboxField = <T extends Mailbox>({
-    id,
-    field,
-    value
-  }: {
-    id: T['id']
-    field: keyof T
-    value: T[keyof T]
-  }) => {
-    const mailbox = unref(mailboxes).find((mailbox) => id === mailbox.id) as T
-    if (mailbox) {
-      mailbox[field] = value
+    if (!currentMailboxId.value && mailboxes.value.length) {
+      currentMailboxId.value = mailboxes.value[0].id
     }
   }
 
-  const reset = () => {
-    mailboxes.value = []
-    currentMailboxId.value = null
-    currentMailboxIdQuery.value = null
+  const setCurrentMailbox = (mailbox: Mailbox | null) => {
+    currentMailboxId.value = mailbox?.id ?? ''
   }
 
   return {
     mailboxes,
+    currentMailboxId,
     currentMailbox,
-    updateMailboxField,
+    draftsMailboxId,
     setMailboxes,
-    upsertMailbox,
-    removeMailboxes,
-    setCurrentMailbox,
-    reset
+    setCurrentMailbox
   }
 })
-
-export type MailboxesStore = ReturnType<typeof useMailboxesStore>
diff --git a/packages/web-app-mail/src/composables/piniaStores/mails.ts b/packages/web-app-mail/src/composables/piniaStores/mails.ts
index cdedee8af1..497f66f4ad 100644
--- a/packages/web-app-mail/src/composables/piniaStores/mails.ts
+++ b/packages/web-app-mail/src/composables/piniaStores/mails.ts
@@ -1,74 +1,59 @@
 import { defineStore } from 'pinia'
-import { computed, ref, unref } from 'vue'
-import { Mail } from '../../types'
-import { useRouteQuery } from '@opencloud-eu/web-pkg/src'
-
-export const useMailsStore = defineStore('mails', () => {
-  const currentMailIdQuery = useRouteQuery('mailId')
+import { computed, ref } from 'vue'
+import type { Mail } from '../../types'
+import { useRouteQueryId } from './helpers'
 
+export const useMailsStore = defineStore('mail-mails', () => {
   const mails = ref<Mail[]>([])
-  const currentMailId = ref<string>()
-
-  const currentMail = computed(() => unref(mails).find((mail) => mail.id === unref(currentMailId)))
 
-  const setMails = (data: Mail[]) => {
-    mails.value = data
-  }
+  const currentMailId = useRouteQueryId('mailId')
 
-  const upsertMail = (data: Mail) => {
-    const existing = unref(mails).find(({ id }) => id === data.id)
-    if (existing) {
-      Object.assign(existing, data)
-      return
-    }
-    unref(mails).push(data)
-  }
+  const currentMail = computed(() => {
+    const id = currentMailId.value
+    return mails.value.find((m) => m.id === id)
+  })
 
-  const removeMails = (values: Mail[]) => {
-    mails.value = unref(mails).filter((mail) => !values.find(({ id }) => id === mail.id))
+  const setMails = (list: Mail[]) => {
+    mails.value = list ?? []
 
-    if (values.some((v) => v.accountId === unref(currentMailId))) {
-      currentMailId.value = null
-      currentMailIdQuery.value = null
+    if (currentMailId.value && !currentMail.value) {
+      currentMailId.value = ''
     }
   }
 
-  const setCurrentMail = (data: Mail) => {
-    currentMailId.value = data?.id
-    currentMailIdQuery.value = data?.id
+  const upsertMail = (mail: Mail) => {
+    const idx = mails.value.findIndex((m) => m.id === mail.id)
+    if (idx === -1) {
+      mails.value.unshift(mail)
+    } else {
+      mails.value[idx] = { ...mails.value[idx], ...mail }
+    }
   }
 
-  const updateMailField = <T extends Mail>({
-    id,
-    field,
-    value
-  }: {
-    id: T['id']
-    field: keyof T
-    value: T[keyof T]
-  }) => {
-    const mail = unref(mails).find((mail) => id === mail.id) as T
-    if (mail) {
-      mail[field] = value
+  const setCurrentMail = (mail: Mail | null) => {
+    if (!mail) {
+      currentMailId.value = ''
+      return
     }
+    upsertMail(mail)
+    currentMailId.value = mail.id
   }
 
-  const reset = () => {
-    mails.value = []
-    currentMailId.value = null
-    currentMailIdQuery.value = null
+  const updateMailField = (opts: { id: string; field: keyof Mail; value: any }) => {
+    const idx = mails.value.findIndex((m) => m.id === opts.id)
+    if (idx === -1) {
+      return
+    }
+    mails.value[idx] = { ...mails.value[idx], [opts.field]: opts.value }
   }
 
   return {
     mails,
+    currentMailId,
     currentMail,
-    updateMailField,
     setMails,
     upsertMail,
-    removeMails,
     setCurrentMail,
-    reset
+    updateMailField
   }
 })
-
-export type MailsStore = ReturnType<typeof useMailsStore>
diff --git a/packages/web-app-mail/src/composables/useSaveAsDraft.ts b/packages/web-app-mail/src/composables/useSaveAsDraft.ts
new file mode 100644
index 0000000000..8dfca05033
--- /dev/null
+++ b/packages/web-app-mail/src/composables/useSaveAsDraft.ts
@@ -0,0 +1,112 @@
+import { computed, ref, toValue, type MaybeRefOrGetter } from 'vue'
+import { useTask } from 'vue-concurrency'
+
+export type DraftEmailPayload = Record<string, any> & {
+  mailboxIds: Record<string, true>
+  keywords: Record<string, boolean>
+}
+
+export type DraftEmailResponse = {
+  id: string
+  blobId?: string
+  threadId?: string
+  size?: number
+}
+
+export type MailDraftApi = {
+  createDraft: (accountId: string, payload: DraftEmailPayload) => Promise<DraftEmailResponse>
+  replaceDraft: (
+    accountId: string,
+    emailId: string,
+    payload: DraftEmailPayload
+  ) => Promise<DraftEmailResponse>
+  deleteDraft: (accountId: string, emailId: string) => Promise<void> | void
+}
+
+export const useSaveAsDraft = (opts: {
+  accountId: MaybeRefOrGetter<string>
+  draftMailboxId: MaybeRefOrGetter<string>
+  api: MailDraftApi
+  getDraftPayload: () =>
+    | Omit<DraftEmailPayload, 'mailboxIds' | 'keywords'>
+    | Partial<DraftEmailPayload>
+  initialDraftId?: string | null
+}) => {
+  const draftId = ref<string | null>(opts.initialDraftId ?? null)
+  const isDirty = ref(false)
+
+  const canSave = computed(() => {
+    return !!toValue(opts.accountId) && !!toValue(opts.draftMailboxId)
+  })
+
+  const saveDraftTask = useTask(function* () {
+    const accountId = toValue(opts.accountId)
+    const draftMailboxId = toValue(opts.draftMailboxId)
+    if (!accountId || !draftMailboxId) {
+      return null
+    }
+
+    const base = opts.getDraftPayload() ?? {}
+
+    const payload: DraftEmailPayload = {
+      ...(base as any),
+      mailboxIds: { [draftMailboxId]: true },
+      keywords: { ...(base as any).keywords, $draft: true }
+    }
+
+    let res: DraftEmailResponse
+    if (!draftId.value) {
+      res = yield opts.api.createDraft(accountId, payload)
+    } else {
+      res = yield opts.api.replaceDraft(accountId, draftId.value, payload)
+    }
+
+    draftId.value = res.id
+    isDirty.value = false
+    return res
+  }).restartable()
+
+  const discardDraftTask = useTask(function* () {
+    const accountId = toValue(opts.accountId)
+    if (!accountId || !draftId.value) {
+      return
+    }
+
+    yield opts.api.deleteDraft(accountId, draftId.value)
+    draftId.value = null
+    isDirty.value = false
+  }).restartable()
+
+  const isSaving = computed(() => saveDraftTask.isRunning)
+
+  const markDirty = () => {
+    isDirty.value = true
+  }
+
+  const resetDraft = (nextDraftId: string | null = null) => {
+    draftId.value = nextDraftId
+    isDirty.value = false
+  }
+
+  const saveAsDraft = async () => {
+    if (!canSave.value) {
+      return null
+    }
+    return await saveDraftTask.perform()
+  }
+
+  const discardDraft = async () => {
+    return await discardDraftTask.perform()
+  }
+
+  return {
+    draftId,
+    isDirty,
+    isSaving,
+    canSave,
+    markDirty,
+    resetDraft,
+    saveAsDraft,
+    discardDraft
+  }
+}
diff --git a/packages/web-app-mail/src/helpers/mailDraftConnector.ts b/packages/web-app-mail/src/helpers/mailDraftConnector.ts
new file mode 100644
index 0000000000..164c7e7328
--- /dev/null
+++ b/packages/web-app-mail/src/helpers/mailDraftConnector.ts
@@ -0,0 +1,42 @@
+import type {
+  DraftEmailPayload,
+  DraftEmailResponse,
+  MailDraftApi
+} from '../composables/useSaveAsDraft'
+
+type HttpLike = {
+  post: <T = unknown>(url: string, body: unknown) => Promise<{ data?: T } | T>
+  put: <T = unknown>(url: string, body: unknown) => Promise<{ data?: T } | T>
+  delete?: <T = unknown>(url: string) => Promise<{ data?: T } | T | void>
+}
+
+const unwrapData = <T>(res: any): T => {
+  if (res && typeof res === 'object' && 'data' in res) {
+    return res.data as T
+  }
+  return res as T
+}
+
+export function createMailDraftConnector(http: HttpLike, groupwareUrl: string): MailDraftApi {
+  const base = (groupwareUrl ?? '').replace(/\/+$/, '')
+  const emailsUrl = (accountId: string) => `${base}/accounts/${accountId}/emails`
+
+  return {
+    async createDraft(accountId: string, payload: DraftEmailPayload) {
+      const res = await http.post<DraftEmailResponse>(emailsUrl(accountId), payload)
+      return unwrapData<DraftEmailResponse>(res)
+    },
+
+    async replaceDraft(accountId: string, emailId: string, payload: DraftEmailPayload) {
+      const res = await http.put<DraftEmailResponse>(`${emailsUrl(accountId)}/${emailId}`, payload)
+      return unwrapData<DraftEmailResponse>(res)
+    },
+
+    async deleteDraft(accountId: string, emailId: string) {
+      if (!http.delete) {
+        return
+      }
+      await http.delete(`${emailsUrl(accountId)}/${emailId}`)
+    }
+  }
+}

From 6077bba8e91ae703b7ad42916042b2b9326c21dd Mon Sep 17 00:00:00 2001
From: tammi-23 <t.thamm@opencloud.eu>
Date: Tue, 10 Feb 2026 08:56:05 +0100
Subject: [PATCH 2/7] wip: only adding name

---
 .../src/components/MailComposeForm.vue        | 23 +++++++------------
 1 file changed, 8 insertions(+), 15 deletions(-)

diff --git a/packages/web-app-mail/src/components/MailComposeForm.vue b/packages/web-app-mail/src/components/MailComposeForm.vue
index a52a30646e..6f5204129b 100644
--- a/packages/web-app-mail/src/components/MailComposeForm.vue
+++ b/packages/web-app-mail/src/components/MailComposeForm.vue
@@ -65,7 +65,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, unref, watch, toRefs } from 'vue'
+import { computed, unref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { useRouteQuery } from '@opencloud-eu/web-pkg'
 import { storeToRefs } from 'pinia'
@@ -101,17 +101,10 @@ export type ComposeFormState = {
   attachments?: MailComposeAttachment[]
 }
 
-const props = withDefaults(
-  defineProps<{
-    modelValue: ComposeFormState
-    showFormattingToolbar?: boolean
-  }>(),
-  {
-    showFormattingToolbar: false
-  }
-)
-
-const { modelValue, showFormattingToolbar } = toRefs(props)
+const { modelValue, showFormattingToolbar = false } = defineProps<{
+  modelValue: ComposeFormState
+  showFormattingToolbar?: boolean
+}>()
 
 const emit = defineEmits<{
   (e: 'update:modelValue', value: ComposeFormState): void
@@ -140,11 +133,11 @@ const fromOptions = computed<FromOption[]>(() => {
 })
 
 const updateField = <K extends keyof ComposeFormState>(key: K, value: ComposeFormState[K]) => {
-  emit('update:modelValue', { ...modelValue.value, [key]: value })
+  emit('update:modelValue', { ...modelValue, [key]: value })
 }
 
 const removeAttachment = (id: string) => {
-  const next = (modelValue.value.attachments ?? []).filter((a) => a.id !== id)
+  const next = (modelValue.attachments ?? []).filter((a) => a.id !== id)
   updateField('attachments', next)
 }
 
@@ -159,7 +152,7 @@ watch(
       ? (options.find((o) => o.accountId === selectedAccountId) ?? options[0])
       : options[0]
 
-    if (!modelValue.value.from && defaultFrom) {
+    if (!modelValue.from && defaultFrom) {
       updateField('from', defaultFrom)
     }
   },

From 3b037442fdfca2356e44a97c3c2a57d7ee54ef30 Mon Sep 17 00:00:00 2001
From: tammi-23 <t.thamm@opencloud.eu>
Date: Tue, 10 Feb 2026 11:44:03 +0100
Subject: [PATCH 3/7] Apply suggestions from code review

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 .../src/composables/piniaStores/accounts.ts           | 11 +++++++++--
 .../src/composables/piniaStores/mailboxes.ts          |  4 +++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/web-app-mail/src/composables/piniaStores/accounts.ts b/packages/web-app-mail/src/composables/piniaStores/accounts.ts
index f2b45da730..584c57547e 100644
--- a/packages/web-app-mail/src/composables/piniaStores/accounts.ts
+++ b/packages/web-app-mail/src/composables/piniaStores/accounts.ts
@@ -16,8 +16,15 @@ export const useAccountsStore = defineStore('mail-accounts', () => {
   const setAccounts = (list: MailAccount[]) => {
     accounts.value = list ?? []
 
-    if (!currentAccountId.value && accounts.value.length) {
-      currentAccountId.value = accounts.value[0].accountId
+    const hasAccounts = accounts.value.length > 0
+    const hasValidCurrent = !!currentAccount.value
+
+    if (!hasValidCurrent) {
+      if (hasAccounts) {
+        currentAccountId.value = accounts.value[0].accountId
+      } else {
+        currentAccountId.value = ''
+      }
     }
   }
 
diff --git a/packages/web-app-mail/src/composables/piniaStores/mailboxes.ts b/packages/web-app-mail/src/composables/piniaStores/mailboxes.ts
index 0dd16a40e4..97230e78f4 100644
--- a/packages/web-app-mail/src/composables/piniaStores/mailboxes.ts
+++ b/packages/web-app-mail/src/composables/piniaStores/mailboxes.ts
@@ -14,7 +14,7 @@ export const useMailboxesStore = defineStore('mail-mailboxes', () => {
   })
 
   const draftsMailboxId = computed(() => {
-    const byRole = mailboxes.value.find((m: any) => m.role === 'drafts')?.id
+    const byRole = mailboxes.value.find((m: Mailbox & { role?: string }) => m.role === 'drafts')?.id
     if (byRole) {
       return byRole
     }
@@ -28,6 +28,8 @@ export const useMailboxesStore = defineStore('mail-mailboxes', () => {
 
     if (!currentMailboxId.value && mailboxes.value.length) {
       currentMailboxId.value = mailboxes.value[0].id
+    } else if (currentMailboxId.value && !currentMailbox.value) {
+      currentMailboxId.value = mailboxes.value[0]?.id ?? ''
     }
   }
 

From e9e213abcc24aadbc0e5a18fdb73b6bb6f32aed2 Mon Sep 17 00:00:00 2001
From: tammi-23 <t.thamm@opencloud.eu>
Date: Tue, 10 Feb 2026 12:07:48 +0100
Subject: [PATCH 4/7] wip: added suggestions from review

---
 .../src/components/MailComposeForm.vue        |  23 ++-
 .../src/components/MailWidget.vue             | 156 +++++++-----------
 .../src/composables/useAutoSaveDraft.ts       |  60 +++++++
 .../composables/useComposeDirtyTracking.ts    |  30 ++++
 .../src/composables/useSaveAsDraft.ts         |   6 +-
 .../src/composables/useSavedHint.ts           |  36 ++++
 .../src/helpers/mailComposeText.ts            |  37 +++++
 .../src/helpers/mailDraftConnector.ts         |  14 +-
 8 files changed, 251 insertions(+), 111 deletions(-)
 create mode 100644 packages/web-app-mail/src/composables/useAutoSaveDraft.ts
 create mode 100644 packages/web-app-mail/src/composables/useComposeDirtyTracking.ts
 create mode 100644 packages/web-app-mail/src/composables/useSavedHint.ts
 create mode 100644 packages/web-app-mail/src/helpers/mailComposeText.ts

diff --git a/packages/web-app-mail/src/components/MailComposeForm.vue b/packages/web-app-mail/src/components/MailComposeForm.vue
index 6f5204129b..a52a30646e 100644
--- a/packages/web-app-mail/src/components/MailComposeForm.vue
+++ b/packages/web-app-mail/src/components/MailComposeForm.vue
@@ -65,7 +65,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, unref, watch } from 'vue'
+import { computed, unref, watch, toRefs } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { useRouteQuery } from '@opencloud-eu/web-pkg'
 import { storeToRefs } from 'pinia'
@@ -101,10 +101,17 @@ export type ComposeFormState = {
   attachments?: MailComposeAttachment[]
 }
 
-const { modelValue, showFormattingToolbar = false } = defineProps<{
-  modelValue: ComposeFormState
-  showFormattingToolbar?: boolean
-}>()
+const props = withDefaults(
+  defineProps<{
+    modelValue: ComposeFormState
+    showFormattingToolbar?: boolean
+  }>(),
+  {
+    showFormattingToolbar: false
+  }
+)
+
+const { modelValue, showFormattingToolbar } = toRefs(props)
 
 const emit = defineEmits<{
   (e: 'update:modelValue', value: ComposeFormState): void
@@ -133,11 +140,11 @@ const fromOptions = computed<FromOption[]>(() => {
 })
 
 const updateField = <K extends keyof ComposeFormState>(key: K, value: ComposeFormState[K]) => {
-  emit('update:modelValue', { ...modelValue, [key]: value })
+  emit('update:modelValue', { ...modelValue.value, [key]: value })
 }
 
 const removeAttachment = (id: string) => {
-  const next = (modelValue.attachments ?? []).filter((a) => a.id !== id)
+  const next = (modelValue.value.attachments ?? []).filter((a) => a.id !== id)
   updateField('attachments', next)
 }
 
@@ -152,7 +159,7 @@ watch(
       ? (options.find((o) => o.accountId === selectedAccountId) ?? options[0])
       : options[0]
 
-    if (!modelValue.from && defaultFrom) {
+    if (!modelValue.value.from && defaultFrom) {
       updateField('from', defaultFrom)
     }
   },
diff --git a/packages/web-app-mail/src/components/MailWidget.vue b/packages/web-app-mail/src/components/MailWidget.vue
index 33a3f582a8..c24a5e548f 100644
--- a/packages/web-app-mail/src/components/MailWidget.vue
+++ b/packages/web-app-mail/src/components/MailWidget.vue
@@ -46,7 +46,7 @@
             </oc-button>
             <MailComposeAttachmentButton
               v-model="composeState.attachments"
-              :account-id="accountId"
+              :account-id="composeState.from?.accountId ?? accountId"
             />
             <oc-button
               type="button"
@@ -108,7 +108,7 @@
             </oc-button>
             <MailComposeAttachmentButton
               v-model="composeState.attachments"
-              :account-id="accountId"
+              :account-id="composeState.from?.accountId ?? accountId"
             />
             <oc-button
               type="button"
@@ -178,23 +178,25 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, unref, onBeforeUnmount } from 'vue'
+import { ref, computed, watch, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { storeToRefs } from 'pinia'
 import { useClientService, useConfigStore } from '@opencloud-eu/web-pkg'
-import DOMPurify from 'dompurify'
-import MailComposeForm, { ComposeFormState } from './MailComposeForm.vue'
+import MailComposeForm, { type ComposeFormState } from './MailComposeForm.vue'
 import MailComposeAttachmentButton from './MailComposeAttachmentButton.vue'
 import { useSaveAsDraft } from '../composables/useSaveAsDraft'
 import { createMailDraftConnector } from '../helpers/mailDraftConnector'
 import { useAccountsStore } from '../composables/piniaStores/accounts'
 import { useMailboxesStore } from '../composables/piniaStores/mailboxes'
+import { useSavedHint } from '../composables/useSavedHint'
+import { useAutoSaveDraft } from '../composables/useAutoSaveDraft'
+import { useComposeDirtyTracking } from '../composables/useComposeDirtyTracking'
+import { plainTextForChangeCheck, plainTextForSave } from '../helpers/mailComposeText'
 
 const { $gettext } = useGettext()
 
-// Configuration constants
-const SAVED_HINT_DURATION_MS = 2000 // 2 seconds
-const AUTO_SAVE_INTERVAL_MS = 120_000 // 2 minutes
+const SAVED_HINT_DURATION_MS = 2000
+const AUTO_SAVE_INTERVAL_MS = 120000 // 2(min) * 60 * 1000
 
 const props = defineProps<{ modelValue?: boolean }>()
 const emit = defineEmits<{
@@ -202,22 +204,27 @@ const emit = defineEmits<{
   (e: 'close'): void
 }>()
 
+const clientService = useClientService()
+const configStore = useConfigStore()
+
+const accountsStore = useAccountsStore()
+const mailboxesStore = useMailboxesStore()
+
+const { currentAccount } = storeToRefs(accountsStore)
+const { draftsMailboxId } = storeToRefs(mailboxesStore)
+
 const isExpanded = ref(false)
 const leaveModalOpen = ref(false)
 const showFormattingToolbar = ref(false)
-const showSavedHint = ref(false)
 
-let savedHintTimeout: ReturnType<typeof setTimeout> | undefined
+const { showSavedHint, flashSavedHint, clearSavedHint } = useSavedHint(SAVED_HINT_DURATION_MS)
 
-const flashSavedHint = () => {
-  showSavedHint.value = true
-  if (savedHintTimeout) {
-    clearTimeout(savedHintTimeout)
-  }
-  savedHintTimeout = setTimeout(() => {
-    showSavedHint.value = false
-  }, SAVED_HINT_DURATION_MS)
-}
+const accountId = computed(() => unref(currentAccount)?.accountId ?? '')
+const draftMailboxId = computed(() => unref(draftsMailboxId) ?? '')
+
+const canSaveDraft = computed(() => {
+  return !!accountId.value && !!draftMailboxId.value
+})
 
 const createEmptyComposeState = (): ComposeFormState => ({
   from: undefined,
@@ -245,43 +252,25 @@ const toggleCollapseExpand = () => {
   isExpanded.value = !isExpanded.value
 }
 
-const clientService = useClientService()
-const configStore = useConfigStore()
-
-const accountsStore = useAccountsStore()
-const mailboxesStore = useMailboxesStore()
-const { currentAccount } = storeToRefs(accountsStore)
-const { draftsMailboxId } = storeToRefs(mailboxesStore)
-
-const accountId = computed(() => unref(currentAccount)?.accountId ?? '')
-const draftMailboxId = computed(() => unref(draftsMailboxId) ?? '')
-
 const connector = createMailDraftConnector(
   clientService.httpAuthenticated as any,
   configStore.groupwareUrl
 )
 
-const canSaveDraft = computed(() => !!accountId.value && !!draftMailboxId.value)
-
 const parseRecipients = (value: string) => {
-  return value
+  return (value ?? '')
     .split(',')
     .map((s) => s.trim())
     .filter(Boolean)
     .map((email) => ({ email }))
 }
 
-const htmlToText = (html: string) => {
-  const stripped = DOMPurify.sanitize(html ?? '', { ALLOWED_TAGS: [], ALLOWED_ATTR: [] })
-  return stripped.replace(/\s+/g, ' ').trim()
-}
-
 const hasMeaningfulChanges = computed(() => {
   const to = (composeState.value.to ?? '').trim()
   const cc = (composeState.value.cc ?? '').trim()
   const bcc = (composeState.value.bcc ?? '').trim()
   const subject = (composeState.value.subject ?? '').trim()
-  const bodyText = htmlToText(composeState.value.body ?? '')
+  const bodyText = plainTextForChangeCheck(composeState.value.body ?? '')
   const attachments = composeState.value.attachments ?? []
   return !!to || !!cc || !!bcc || !!subject || !!bodyText || attachments.length > 0
 })
@@ -292,10 +281,10 @@ const { isDirty, isSaving, markDirty, resetDraft, saveAsDraft, discardDraft } =
   api: connector,
   getDraftPayload: () => {
     const bodyHtml = composeState.value.body ?? ''
-    const bodyPlain = htmlToText(bodyHtml)
+    const bodyPlain = plainTextForSave(bodyHtml)
 
-    const hasHtml = bodyHtml.trim().length > 0 && bodyPlain.length > 0
     const hasText = bodyPlain.length > 0
+    const hasHtml = bodyHtml.trim().length > 0 && bodyPlain.length > 0
 
     return {
       from: composeState.value.from
@@ -325,25 +314,24 @@ const { isDirty, isSaving, markDirty, resetDraft, saveAsDraft, discardDraft } =
   }
 })
 
-watch(
-  composeState,
-  () => {
-    markDirty()
-  },
-  { deep: true }
-)
+const { runWithResetGuard } = useComposeDirtyTracking(composeState, () => {
+  markDirty()
+})
 
-const resetCompose = () => {
-  composeState.value = createEmptyComposeState()
-  showFormattingToolbar.value = false
-  leaveModalOpen.value = false
-  resetDraft(null)
+const resetCompose = async () => {
+  await runWithResetGuard(() => {
+    composeState.value = createEmptyComposeState()
+    showFormattingToolbar.value = false
+    leaveModalOpen.value = false
+    clearSavedHint()
+    resetDraft(null)
+  })
 }
 
-const doClose = () => {
+const doClose = async () => {
   isExpanded.value = false
   isOpen.value = false
-  resetCompose()
+  await resetCompose()
 }
 
 const requestClose = () => {
@@ -365,7 +353,6 @@ const onSaveDraftAndClose = async () => {
     return
   }
   await saveAsDraft()
-  flashSavedHint()
   doClose()
 }
 
@@ -374,16 +361,6 @@ const onDiscardAndClose = async () => {
   doClose()
 }
 
-let autoSaveInterval: ReturnType<typeof setInterval> | undefined
-
-const stopAutoSave = () => {
-  if (!autoSaveInterval) {
-    return
-  }
-  clearInterval(autoSaveInterval)
-  autoSaveInterval = undefined
-}
-
 const canAutoSaveNow = computed(() => {
   return (
     isOpen.value &&
@@ -395,42 +372,27 @@ const canAutoSaveNow = computed(() => {
   )
 })
 
-const startAutoSave = () => {
-  stopAutoSave()
-  autoSaveInterval = setInterval(async () => {
-    if (!canAutoSaveNow.value) {
-      return
-    }
-
-    try {
-      const res = await saveAsDraft()
-      if (res) {
-        flashSavedHint()
-      }
-    } catch (error) {
-      console.error('Failed to auto-save draft:', error)
-    }
-  }, AUTO_SAVE_INTERVAL_MS)
-}
+useAutoSaveDraft({
+  isOpen,
+  canAutoSaveNow,
+  intervalMs: AUTO_SAVE_INTERVAL_MS,
+  save: saveAsDraft,
+  onSaved: () => {
+    flashSavedHint()
+  },
+  onError: (error) => {
+    console.error('Failed to auto-save draft:', error)
+  }
+})
 
 watch(
   () => isOpen.value,
-  (open) => {
-    if (open) {
-      startAutoSave()
-    } else {
-      stopAutoSave()
+  async (open) => {
+    if (!open) {
+      await resetCompose()
     }
-  },
-  { immediate: true }
-)
-
-onBeforeUnmount(() => {
-  stopAutoSave()
-  if (savedHintTimeout) {
-    clearTimeout(savedHintTimeout)
   }
-})
+)
 </script>
 
 <style>
diff --git a/packages/web-app-mail/src/composables/useAutoSaveDraft.ts b/packages/web-app-mail/src/composables/useAutoSaveDraft.ts
new file mode 100644
index 0000000000..b65f225f38
--- /dev/null
+++ b/packages/web-app-mail/src/composables/useAutoSaveDraft.ts
@@ -0,0 +1,60 @@
+import { watch, onBeforeUnmount, toValue, type MaybeRefOrGetter } from 'vue'
+
+export const useAutoSaveDraft = <T>(opts: {
+  isOpen: MaybeRefOrGetter<boolean>
+  canAutoSaveNow: MaybeRefOrGetter<boolean>
+  intervalMs: number
+  save: () => Promise<T | null | undefined>
+  onSaved?: (result: T) => void
+  onError?: (error: unknown) => void
+}) => {
+  let interval: ReturnType<typeof setInterval> | undefined
+
+  const stop = () => {
+    if (!interval) {
+      return
+    }
+    clearInterval(interval)
+    interval = undefined
+  }
+
+  const start = () => {
+    stop()
+
+    interval = setInterval(async () => {
+      if (!toValue(opts.canAutoSaveNow)) {
+        return
+      }
+
+      try {
+        const res = await opts.save()
+        if (res) {
+          opts.onSaved?.(res)
+        }
+      } catch (error) {
+        opts.onError?.(error)
+      }
+    }, opts.intervalMs)
+  }
+
+  watch(
+    () => toValue(opts.isOpen),
+    (open) => {
+      if (open) {
+        start()
+      } else {
+        stop()
+      }
+    },
+    { immediate: true }
+  )
+
+  onBeforeUnmount(() => {
+    stop()
+  })
+
+  return {
+    start,
+    stop
+  }
+}
diff --git a/packages/web-app-mail/src/composables/useComposeDirtyTracking.ts b/packages/web-app-mail/src/composables/useComposeDirtyTracking.ts
new file mode 100644
index 0000000000..177da675d3
--- /dev/null
+++ b/packages/web-app-mail/src/composables/useComposeDirtyTracking.ts
@@ -0,0 +1,30 @@
+import { ref, watch, nextTick, type Ref } from 'vue'
+
+export const useComposeDirtyTracking = <T extends object>(state: Ref<T>, onDirty: () => void) => {
+  const isResetting = ref(false)
+
+  watch(
+    state,
+    () => {
+      if (isResetting.value) {
+        return
+      }
+      onDirty()
+    },
+    { deep: true }
+  )
+
+  const runWithResetGuard = async (fn: () => void) => {
+    isResetting.value = true
+    fn()
+    // Wait two ticks to ensure all watchers have processed the changes
+    await nextTick()
+    await nextTick()
+    isResetting.value = false
+  }
+
+  return {
+    isResetting,
+    runWithResetGuard
+  }
+}
diff --git a/packages/web-app-mail/src/composables/useSaveAsDraft.ts b/packages/web-app-mail/src/composables/useSaveAsDraft.ts
index 8dfca05033..b522ab7c2b 100644
--- a/packages/web-app-mail/src/composables/useSaveAsDraft.ts
+++ b/packages/web-app-mail/src/composables/useSaveAsDraft.ts
@@ -77,13 +77,15 @@ export const useSaveAsDraft = (opts: {
     isDirty.value = false
   }).restartable()
 
-  const isSaving = computed(() => saveDraftTask.isRunning)
+  const isSaving = computed(() => {
+    return saveDraftTask.isRunning
+  })
 
   const markDirty = () => {
     isDirty.value = true
   }
 
-  const resetDraft = (nextDraftId: string | null = null) => {
+  const resetDraft = (nextDraftId: string | null) => {
     draftId.value = nextDraftId
     isDirty.value = false
   }
diff --git a/packages/web-app-mail/src/composables/useSavedHint.ts b/packages/web-app-mail/src/composables/useSavedHint.ts
new file mode 100644
index 0000000000..8353dee9f3
--- /dev/null
+++ b/packages/web-app-mail/src/composables/useSavedHint.ts
@@ -0,0 +1,36 @@
+import { ref, onBeforeUnmount } from 'vue'
+
+export const useSavedHint = (durationMs: number) => {
+  const showSavedHint = ref(false)
+  let timeout: ReturnType<typeof setTimeout> | undefined
+
+  const clearSavedHint = () => {
+    if (timeout) {
+      clearTimeout(timeout)
+      timeout = undefined
+    }
+    showSavedHint.value = false
+  }
+
+  const flashSavedHint = () => {
+    showSavedHint.value = true
+
+    if (timeout) {
+      clearTimeout(timeout)
+    }
+
+    timeout = setTimeout(() => {
+      showSavedHint.value = false
+    }, durationMs)
+  }
+
+  onBeforeUnmount(() => {
+    clearSavedHint()
+  })
+
+  return {
+    showSavedHint,
+    flashSavedHint,
+    clearSavedHint
+  }
+}
diff --git a/packages/web-app-mail/src/helpers/mailComposeText.ts b/packages/web-app-mail/src/helpers/mailComposeText.ts
new file mode 100644
index 0000000000..80e09e7c01
--- /dev/null
+++ b/packages/web-app-mail/src/helpers/mailComposeText.ts
@@ -0,0 +1,37 @@
+import DOMPurify from 'dompurify'
+
+const normalizeWhitespace = (value: string) => {
+  return (value ?? '').replace(/\s+/g, ' ').trim()
+}
+
+export const plainTextForChangeCheck = (html: string) => {
+  const raw = html ?? ''
+  if (!raw) {
+    return ''
+  }
+
+  if (!raw.includes('<')) {
+    return normalizeWhitespace(raw)
+  }
+
+  const withoutTags = raw
+    .replace(/<[^>]*>/g, ' ')
+    .replace(/&nbsp;|&#160;/gi, ' ')
+    .replace(/\u00A0/g, ' ')
+
+  return normalizeWhitespace(withoutTags)
+}
+
+export const plainTextForSave = (html: string) => {
+  const raw = html ?? ''
+  if (!raw) {
+    return ''
+  }
+
+  if (!raw.includes('<')) {
+    return normalizeWhitespace(raw)
+  }
+
+  const stripped = DOMPurify.sanitize(raw, { ALLOWED_TAGS: [], ALLOWED_ATTR: [] })
+  return normalizeWhitespace(stripped)
+}
diff --git a/packages/web-app-mail/src/helpers/mailDraftConnector.ts b/packages/web-app-mail/src/helpers/mailDraftConnector.ts
index 164c7e7328..ea4fa2fc30 100644
--- a/packages/web-app-mail/src/helpers/mailDraftConnector.ts
+++ b/packages/web-app-mail/src/helpers/mailDraftConnector.ts
@@ -17,18 +17,23 @@ const unwrapData = <T>(res: any): T => {
   return res as T
 }
 
+const buildPath = (...segments: string[]): string => {
+  return segments.map((segment) => encodeURIComponent(segment)).join('/')
+}
+
 export function createMailDraftConnector(http: HttpLike, groupwareUrl: string): MailDraftApi {
   const base = (groupwareUrl ?? '').replace(/\/+$/, '')
-  const emailsUrl = (accountId: string) => `${base}/accounts/${accountId}/emails`
 
   return {
     async createDraft(accountId: string, payload: DraftEmailPayload) {
-      const res = await http.post<DraftEmailResponse>(emailsUrl(accountId), payload)
+      const url = `${base}/accounts/${buildPath(accountId)}/emails`
+      const res = await http.post<DraftEmailResponse>(url, payload)
       return unwrapData<DraftEmailResponse>(res)
     },
 
     async replaceDraft(accountId: string, emailId: string, payload: DraftEmailPayload) {
-      const res = await http.put<DraftEmailResponse>(`${emailsUrl(accountId)}/${emailId}`, payload)
+      const url = `${base}/accounts/${buildPath(accountId)}/emails/${buildPath(emailId)}`
+      const res = await http.put<DraftEmailResponse>(url, payload)
       return unwrapData<DraftEmailResponse>(res)
     },
 
@@ -36,7 +41,8 @@ export function createMailDraftConnector(http: HttpLike, groupwareUrl: string):
       if (!http.delete) {
         return
       }
-      await http.delete(`${emailsUrl(accountId)}/${emailId}`)
+      const url = `${base}/accounts/${buildPath(accountId)}/emails/${buildPath(emailId)}`
+      await http.delete(url)
     }
   }
 }

From b78869c65aa9424a252344e6b43ffb3ff677221b Mon Sep 17 00:00:00 2001
From: tammi-23 <t.thamm@opencloud.eu>
Date: Tue, 10 Feb 2026 15:18:24 +0100
Subject: [PATCH 5/7] wip: added suggestions from review2

---
 .../src/components/MailWidget.vue             |  3 +-
 .../src/composables/piniaStores/helpers.ts    |  2 +-
 .../src/composables/piniaStores/mails.ts      |  2 +-
 .../src/composables/useAutoSaveDraft.ts       | 34 ++++++++++++++-----
 4 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/packages/web-app-mail/src/components/MailWidget.vue b/packages/web-app-mail/src/components/MailWidget.vue
index c24a5e548f..641fd38723 100644
--- a/packages/web-app-mail/src/components/MailWidget.vue
+++ b/packages/web-app-mail/src/components/MailWidget.vue
@@ -328,10 +328,9 @@ const resetCompose = async () => {
   })
 }
 
-const doClose = async () => {
+const doClose = () => {
   isExpanded.value = false
   isOpen.value = false
-  await resetCompose()
 }
 
 const requestClose = () => {
diff --git a/packages/web-app-mail/src/composables/piniaStores/helpers.ts b/packages/web-app-mail/src/composables/piniaStores/helpers.ts
index d4738f0daf..d719a3496d 100644
--- a/packages/web-app-mail/src/composables/piniaStores/helpers.ts
+++ b/packages/web-app-mail/src/composables/piniaStores/helpers.ts
@@ -14,7 +14,7 @@ export const useRouteQueryId = (queryParamName: string) => {
   return computed<string>({
     get: () => toSingleString(query.value),
     set: (value: string) => {
-      query.value = value || undefined
+      query.value = value || null
     }
   })
 }
diff --git a/packages/web-app-mail/src/composables/piniaStores/mails.ts b/packages/web-app-mail/src/composables/piniaStores/mails.ts
index 497f66f4ad..2574460de2 100644
--- a/packages/web-app-mail/src/composables/piniaStores/mails.ts
+++ b/packages/web-app-mail/src/composables/piniaStores/mails.ts
@@ -3,7 +3,7 @@ import { computed, ref } from 'vue'
 import type { Mail } from '../../types'
 import { useRouteQueryId } from './helpers'
 
-export const useMailsStore = defineStore('mail-mails', () => {
+export const useMailsStore = defineStore('mails', () => {
   const mails = ref<Mail[]>([])
 
   const currentMailId = useRouteQueryId('mailId')
diff --git a/packages/web-app-mail/src/composables/useAutoSaveDraft.ts b/packages/web-app-mail/src/composables/useAutoSaveDraft.ts
index b65f225f38..ada25be7c2 100644
--- a/packages/web-app-mail/src/composables/useAutoSaveDraft.ts
+++ b/packages/web-app-mail/src/composables/useAutoSaveDraft.ts
@@ -8,21 +8,29 @@ export const useAutoSaveDraft = <T>(opts: {
   onSaved?: (result: T) => void
   onError?: (error: unknown) => void
 }) => {
-  let interval: ReturnType<typeof setInterval> | undefined
+  let timeoutId: ReturnType<typeof setTimeout> | undefined
+  let isRunning = false
 
   const stop = () => {
-    if (!interval) {
-      return
+    if (timeoutId) {
+      clearTimeout(timeoutId)
+      timeoutId = undefined
     }
-    clearInterval(interval)
-    interval = undefined
+    isRunning = false
   }
 
-  const start = () => {
-    stop()
+  const scheduleNext = () => {
+    if (!isRunning) {
+      return
+    }
+
+    timeoutId = setTimeout(async () => {
+      if (!isRunning) {
+        return
+      }
 
-    interval = setInterval(async () => {
       if (!toValue(opts.canAutoSaveNow)) {
+        scheduleNext()
         return
       }
 
@@ -33,10 +41,20 @@ export const useAutoSaveDraft = <T>(opts: {
         }
       } catch (error) {
         opts.onError?.(error)
+      } finally {
+        scheduleNext()
       }
     }, opts.intervalMs)
   }
 
+  const start = () => {
+    if (isRunning) {
+      return
+    }
+    isRunning = true
+    scheduleNext()
+  }
+
   watch(
     () => toValue(opts.isOpen),
     (open) => {

From d0c16abf7eae9c2441a9555b6e6121080231378f Mon Sep 17 00:00:00 2001
From: tammi-23 <t.thamm@opencloud.eu>
Date: Thu, 19 Feb 2026 12:25:37 +0100
Subject: [PATCH 6/7] wip: implemented reviewer feedback

---
 .../src/components/MailComposeForm.vue        |  23 +--
 .../src/components/MailLeaveModal.vue         |  60 +++++++
 .../web-app-mail/src/components/MailList.vue  |   4 +-
 .../src/components/MailListItem.vue           |   8 +-
 .../src/components/MailSavedHint.vue          |  14 ++
 .../src/components/MailWidget.vue             | 157 ++++++------------
 .../src/components/MailboxTree.vue            |   8 +-
 .../src/composables/piniaStores/accounts.ts   |  13 +-
 .../src/composables/piniaStores/helpers.ts    |  20 ---
 .../src/composables/piniaStores/mailboxes.ts  |   8 +-
 .../src/composables/piniaStores/mails.ts      |   6 +-
 .../src/composables/useMailDraftConnector.ts  |  47 ++++++
 .../src/composables/useRouterQueryId.ts       |  13 ++
 .../src/helpers/mailComposeText.ts            |  36 +---
 .../src/helpers/mailDraftConnector.ts         |  48 ------
 packages/web-app-mail/src/views/Inbox.vue     |  43 +++--
 16 files changed, 240 insertions(+), 268 deletions(-)
 create mode 100644 packages/web-app-mail/src/components/MailLeaveModal.vue
 create mode 100644 packages/web-app-mail/src/components/MailSavedHint.vue
 delete mode 100644 packages/web-app-mail/src/composables/piniaStores/helpers.ts
 create mode 100644 packages/web-app-mail/src/composables/useMailDraftConnector.ts
 create mode 100644 packages/web-app-mail/src/composables/useRouterQueryId.ts
 delete mode 100644 packages/web-app-mail/src/helpers/mailDraftConnector.ts

diff --git a/packages/web-app-mail/src/components/MailComposeForm.vue b/packages/web-app-mail/src/components/MailComposeForm.vue
index a52a30646e..6f5204129b 100644
--- a/packages/web-app-mail/src/components/MailComposeForm.vue
+++ b/packages/web-app-mail/src/components/MailComposeForm.vue
@@ -65,7 +65,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, unref, watch, toRefs } from 'vue'
+import { computed, unref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { useRouteQuery } from '@opencloud-eu/web-pkg'
 import { storeToRefs } from 'pinia'
@@ -101,17 +101,10 @@ export type ComposeFormState = {
   attachments?: MailComposeAttachment[]
 }
 
-const props = withDefaults(
-  defineProps<{
-    modelValue: ComposeFormState
-    showFormattingToolbar?: boolean
-  }>(),
-  {
-    showFormattingToolbar: false
-  }
-)
-
-const { modelValue, showFormattingToolbar } = toRefs(props)
+const { modelValue, showFormattingToolbar = false } = defineProps<{
+  modelValue: ComposeFormState
+  showFormattingToolbar?: boolean
+}>()
 
 const emit = defineEmits<{
   (e: 'update:modelValue', value: ComposeFormState): void
@@ -140,11 +133,11 @@ const fromOptions = computed<FromOption[]>(() => {
 })
 
 const updateField = <K extends keyof ComposeFormState>(key: K, value: ComposeFormState[K]) => {
-  emit('update:modelValue', { ...modelValue.value, [key]: value })
+  emit('update:modelValue', { ...modelValue, [key]: value })
 }
 
 const removeAttachment = (id: string) => {
-  const next = (modelValue.value.attachments ?? []).filter((a) => a.id !== id)
+  const next = (modelValue.attachments ?? []).filter((a) => a.id !== id)
   updateField('attachments', next)
 }
 
@@ -159,7 +152,7 @@ watch(
       ? (options.find((o) => o.accountId === selectedAccountId) ?? options[0])
       : options[0]
 
-    if (!modelValue.value.from && defaultFrom) {
+    if (!modelValue.from && defaultFrom) {
       updateField('from', defaultFrom)
     }
   },
diff --git a/packages/web-app-mail/src/components/MailLeaveModal.vue b/packages/web-app-mail/src/components/MailLeaveModal.vue
new file mode 100644
index 0000000000..500975a873
--- /dev/null
+++ b/packages/web-app-mail/src/components/MailLeaveModal.vue
@@ -0,0 +1,60 @@
+<template>
+  <oc-modal v-if="modelValue" :title="$gettext('Leave this screen?')" :hide-actions="true">
+    <template #content>
+      <p
+        class="oc-mb-m"
+        v-text="
+          $gettext(
+            'Your email isn’t finished yet. You can save it as a draft or exit without saving.'
+          )
+        "
+      />
+      <div class="oc-modal-body-actions flex justify-end p-4 text-right -mr-4 -mb-4 -ml-4">
+        <div class="oc-modal-body-actions-grid grid grid-flow-col auto-cols-1fr gap-2">
+          <oc-button
+            class="oc-modal-body-actions-confirm"
+            appearance="filled"
+            :disabled="isSaving || !canSaveDraft"
+            @click="$emit('save')"
+          >
+            {{ $gettext('Save as draft') }}
+          </oc-button>
+          <oc-button
+            class="oc-modal-body-actions-secondary"
+            appearance="outline"
+            :disabled="isSaving"
+            @click="$emit('discard')"
+          >
+            {{ $gettext('Discard') }}
+          </oc-button>
+          <oc-button
+            class="oc-modal-body-actions-cancel"
+            appearance="outline"
+            :disabled="isSaving"
+            @click="$emit('update:modelValue', false)"
+          >
+            {{ $gettext('Cancel') }}
+          </oc-button>
+        </div>
+      </div>
+    </template>
+  </oc-modal>
+</template>
+
+<script setup lang="ts">
+import { useGettext } from 'vue3-gettext'
+
+defineProps<{
+  modelValue: boolean
+  isSaving: boolean
+  canSaveDraft: boolean
+}>()
+
+defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'save'): void
+  (e: 'discard'): void
+}>()
+
+const { $gettext } = useGettext()
+</script>
diff --git a/packages/web-app-mail/src/components/MailList.vue b/packages/web-app-mail/src/components/MailList.vue
index 56cf4d4de8..c4100dfdab 100644
--- a/packages/web-app-mail/src/components/MailList.vue
+++ b/packages/web-app-mail/src/components/MailList.vue
@@ -58,7 +58,7 @@
           </oc-button>
         </li>
       </oc-list>
-      <MailWidget v-if="showCompose" v-model="showCompose" />
+      <MailWidget v-if="showCompose" :model-value="true" @close="showCompose = false" />
     </template>
   </template>
 </template>
@@ -91,6 +91,8 @@ const { isLoading } = useLoadMails()
 const showCompose = ref(false)
 
 const openCompose = () => {
+  console.log('!!! openCompose jeöffnet !!!')
+
   showCompose.value = true
 }
 
diff --git a/packages/web-app-mail/src/components/MailListItem.vue b/packages/web-app-mail/src/components/MailListItem.vue
index 52ad7fa1fb..57e0761183 100644
--- a/packages/web-app-mail/src/components/MailListItem.vue
+++ b/packages/web-app-mail/src/components/MailListItem.vue
@@ -51,12 +51,12 @@ const receivedAtRelativeDate = computed(() => {
 })
 
 const previewText = computed(() => {
-  const p = mail.preview ?? ''
-  if (!p.includes('<')) {
-    return p
+  const mailPreview = mail.preview ?? ''
+  if (!mailPreview) {
+    return ''
   }
 
-  const stripped = DOMPurify.sanitize(p, { ALLOWED_TAGS: [], ALLOWED_ATTR: [] })
+  const stripped = DOMPurify.sanitize(mailPreview, { ALLOWED_TAGS: [], ALLOWED_ATTR: [] })
   return stripped.replace(/\s+/g, ' ').trim()
 })
 </script>
diff --git a/packages/web-app-mail/src/components/MailSavedHint.vue b/packages/web-app-mail/src/components/MailSavedHint.vue
new file mode 100644
index 0000000000..72b26abbf4
--- /dev/null
+++ b/packages/web-app-mail/src/components/MailSavedHint.vue
@@ -0,0 +1,14 @@
+<template>
+  <div v-if="show" class="flex items-center gap-1 text-role-on-surface-variant">
+    <oc-icon name="check" fill-type="line" />
+    <span class="text-sm" v-text="$gettext('Saved')" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useGettext } from 'vue3-gettext'
+
+defineProps<{ show: boolean }>()
+
+const { $gettext } = useGettext()
+</script>
diff --git a/packages/web-app-mail/src/components/MailWidget.vue b/packages/web-app-mail/src/components/MailWidget.vue
index 641fd38723..e34115d8cb 100644
--- a/packages/web-app-mail/src/components/MailWidget.vue
+++ b/packages/web-app-mail/src/components/MailWidget.vue
@@ -46,7 +46,7 @@
             </oc-button>
             <MailComposeAttachmentButton
               v-model="composeState.attachments"
-              :account-id="composeState.from?.accountId ?? accountId"
+              :account-id="currentAccountId"
             />
             <oc-button
               type="button"
@@ -58,13 +58,7 @@
               <oc-icon name="text" fill-type="none" class="text-base text-role-on-surface" />
             </oc-button>
             <div class="ml-auto flex items-center min-w-0">
-              <div
-                v-if="showSavedHint"
-                class="flex items-center gap-1 text-role-on-surface-variant"
-              >
-                <oc-icon name="check" fill-type="line" />
-                <span class="text-sm" v-text="$gettext('Saved')" />
-              </div>
+              <MailSavedHint :show="showSavedHint" />
             </div>
           </div>
         </div>
@@ -108,7 +102,7 @@
             </oc-button>
             <MailComposeAttachmentButton
               v-model="composeState.attachments"
-              :account-id="composeState.from?.accountId ?? accountId"
+              :account-id="currentAccountId"
             />
             <oc-button
               type="button"
@@ -119,73 +113,35 @@
               :title="$gettext('Toggle text formatting toolbar')"
               @click="showFormattingToolbar = !showFormattingToolbar"
             >
-              <oc-icon name="text" fill-type="none" class="text-base text-role-on-surface" />
+              <oc-icon name="text" fill-type="none" />
             </oc-button>
             <div class="ml-auto flex items-center min-w-0">
-              <div
-                v-if="showSavedHint"
-                class="flex items-center gap-1 text-role-on-surface-variant"
-              >
-                <oc-icon name="check" fill-type="line" />
-                <span class="text-sm" v-text="$gettext('Saved')" />
-              </div>
+              <MailSavedHint :show="showSavedHint" />
             </div>
           </div>
         </div>
       </div>
     </template>
   </oc-modal>
-  <oc-modal v-if="leaveModalOpen" :title="$gettext('Leave this screen?')" :hide-actions="true">
-    <template #content>
-      <p
-        class="oc-mb-m"
-        v-text="
-          $gettext(
-            'Your email isn’t finished yet. You can save it as a draft or exit without saving.'
-          )
-        "
-      />
-      <div class="oc-modal-body-actions flex justify-end p-4 text-right -mr-4 -mb-4 -ml-4">
-        <div class="oc-modal-body-actions-grid grid grid-flow-col auto-cols-1fr gap-2">
-          <oc-button
-            class="oc-modal-body-actions-confirm"
-            appearance="filled"
-            :disabled="isSaving || !canSaveDraft"
-            @click="onSaveDraftAndClose"
-          >
-            {{ $gettext('Save as draft') }}
-          </oc-button>
-          <oc-button
-            class="oc-modal-body-actions-secondary"
-            appearance="outline"
-            :disabled="isSaving"
-            @click="onDiscardAndClose"
-          >
-            {{ $gettext('Discard') }}
-          </oc-button>
-          <oc-button
-            class="oc-modal-body-actions-cancel"
-            appearance="outline"
-            :disabled="isSaving"
-            @click="leaveModalOpen = false"
-          >
-            {{ $gettext('Cancel') }}
-          </oc-button>
-        </div>
-      </div>
-    </template>
-  </oc-modal>
+  <MailLeaveModal
+    v-model="leaveModalOpen"
+    :is-saving="isSaving"
+    :can-save-draft="canSaveDraft"
+    @save="onSaveDraftAndClose"
+    @discard="onDiscardAndClose"
+  />
 </template>
 
 <script setup lang="ts">
 import { ref, computed, watch, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { storeToRefs } from 'pinia'
-import { useClientService, useConfigStore } from '@opencloud-eu/web-pkg'
 import MailComposeForm, { type ComposeFormState } from './MailComposeForm.vue'
 import MailComposeAttachmentButton from './MailComposeAttachmentButton.vue'
+import MailLeaveModal from './MailLeaveModal.vue'
+import MailSavedHint from './MailSavedHint.vue'
 import { useSaveAsDraft } from '../composables/useSaveAsDraft'
-import { createMailDraftConnector } from '../helpers/mailDraftConnector'
+import { useMailDraftConnector } from '../composables/useMailDraftConnector'
 import { useAccountsStore } from '../composables/piniaStores/accounts'
 import { useMailboxesStore } from '../composables/piniaStores/mailboxes'
 import { useSavedHint } from '../composables/useSavedHint'
@@ -204,13 +160,11 @@ const emit = defineEmits<{
   (e: 'close'): void
 }>()
 
-const clientService = useClientService()
-const configStore = useConfigStore()
-
 const accountsStore = useAccountsStore()
 const mailboxesStore = useMailboxesStore()
+const connector = useMailDraftConnector()
 
-const { currentAccount } = storeToRefs(accountsStore)
+const { currentAccountId } = storeToRefs(accountsStore)
 const { draftsMailboxId } = storeToRefs(mailboxesStore)
 
 const isExpanded = ref(false)
@@ -219,11 +173,8 @@ const showFormattingToolbar = ref(false)
 
 const { showSavedHint, flashSavedHint, clearSavedHint } = useSavedHint(SAVED_HINT_DURATION_MS)
 
-const accountId = computed(() => unref(currentAccount)?.accountId ?? '')
-const draftMailboxId = computed(() => unref(draftsMailboxId) ?? '')
-
 const canSaveDraft = computed(() => {
-  return !!accountId.value && !!draftMailboxId.value
+  return !!unref(draftsMailboxId)
 })
 
 const createEmptyComposeState = (): ComposeFormState => ({
@@ -252,11 +203,6 @@ const toggleCollapseExpand = () => {
   isExpanded.value = !isExpanded.value
 }
 
-const connector = createMailDraftConnector(
-  clientService.httpAuthenticated as any,
-  configStore.groupwareUrl
-)
-
 const parseRecipients = (value: string) => {
   return (value ?? '')
     .split(',')
@@ -266,35 +212,37 @@ const parseRecipients = (value: string) => {
 }
 
 const hasMeaningfulChanges = computed(() => {
-  const to = (composeState.value.to ?? '').trim()
-  const cc = (composeState.value.cc ?? '').trim()
-  const bcc = (composeState.value.bcc ?? '').trim()
-  const subject = (composeState.value.subject ?? '').trim()
-  const bodyText = plainTextForChangeCheck(composeState.value.body ?? '')
-  const attachments = composeState.value.attachments ?? []
+  const state = unref(composeState)
+
+  const to = (state.to ?? '').trim()
+  const cc = (state.cc ?? '').trim()
+  const bcc = (state.bcc ?? '').trim()
+  const subject = (state.subject ?? '').trim()
+  const bodyText = plainTextForChangeCheck(state.body ?? '')
+  const attachments = state.attachments ?? []
+
   return !!to || !!cc || !!bcc || !!subject || !!bodyText || attachments.length > 0
 })
 
 const { isDirty, isSaving, markDirty, resetDraft, saveAsDraft, discardDraft } = useSaveAsDraft({
-  accountId,
-  draftMailboxId,
+  accountId: currentAccountId,
+  draftMailboxId: draftsMailboxId,
   api: connector,
   getDraftPayload: () => {
-    const bodyHtml = composeState.value.body ?? ''
+    const state = unref(composeState)
+
+    const bodyHtml = state.body ?? ''
     const bodyPlain = plainTextForSave(bodyHtml)
 
     const hasText = bodyPlain.length > 0
     const hasHtml = bodyHtml.trim().length > 0 && bodyPlain.length > 0
 
     return {
-      from: composeState.value.from
-        ? [{ email: composeState.value.from.email, name: composeState.value.from.name }]
-        : [],
-
-      to: parseRecipients(composeState.value.to),
-      cc: parseRecipients(composeState.value.cc),
-      bcc: parseRecipients(composeState.value.bcc),
-      subject: composeState.value.subject ?? '',
+      from: state.from ? [{ email: state.from.email, name: state.from.name }] : [],
+      to: parseRecipients(state.to),
+      cc: parseRecipients(state.cc),
+      bcc: parseRecipients(state.bcc),
+      subject: state.subject ?? '',
 
       textBody: hasText ? [{ partId: 't', type: 'text/plain' }] : [],
       htmlBody: hasHtml ? [{ partId: 'h', type: 'text/html' }] : [],
@@ -304,7 +252,7 @@ const { isDirty, isSaving, markDirty, resetDraft, saveAsDraft, discardDraft } =
         ...(hasHtml ? { h: { value: bodyHtml } } : {})
       },
 
-      attachments: (composeState.value.attachments ?? []).map((a: any) => ({
+      attachments: (state.attachments ?? []).map((a: any) => ({
         blobId: a.blobId,
         name: a.name,
         type: a.type,
@@ -334,12 +282,12 @@ const doClose = () => {
 }
 
 const requestClose = () => {
-  if (!hasMeaningfulChanges.value) {
+  if (!unref(hasMeaningfulChanges)) {
     doClose()
     return
   }
 
-  if (!isDirty.value) {
+  if (!unref(isDirty)) {
     doClose()
     return
   }
@@ -348,7 +296,7 @@ const requestClose = () => {
 }
 
 const onSaveDraftAndClose = async () => {
-  if (!canSaveDraft.value) {
+  if (!unref(canSaveDraft)) {
     return
   }
   await saveAsDraft()
@@ -362,12 +310,12 @@ const onDiscardAndClose = async () => {
 
 const canAutoSaveNow = computed(() => {
   return (
-    isOpen.value &&
-    !leaveModalOpen.value &&
-    canSaveDraft.value &&
-    hasMeaningfulChanges.value &&
-    isDirty.value &&
-    !isSaving.value
+    unref(isOpen) &&
+    !unref(leaveModalOpen) &&
+    unref(canSaveDraft) &&
+    unref(hasMeaningfulChanges) &&
+    unref(isDirty) &&
+    !unref(isSaving)
   )
 })
 
@@ -384,14 +332,11 @@ useAutoSaveDraft({
   }
 })
 
-watch(
-  () => isOpen.value,
-  async (open) => {
-    if (!open) {
-      await resetCompose()
-    }
+watch(isOpen, async (open) => {
+  if (!open) {
+    await resetCompose()
   }
-)
+})
 </script>
 
 <style>
diff --git a/packages/web-app-mail/src/components/MailboxTree.vue b/packages/web-app-mail/src/components/MailboxTree.vue
index 0af52e99d9..0275758f2d 100644
--- a/packages/web-app-mail/src/components/MailboxTree.vue
+++ b/packages/web-app-mail/src/components/MailboxTree.vue
@@ -83,14 +83,8 @@ const { loadMails } = useLoadMails()
 const { isLoading } = useLoadMailboxes()
 
 const onSelectMailbox = async (mailbox: Mailbox) => {
-  const accountId = unref(currentAccount)?.accountId
-  if (!accountId) {
-    return
-  }
-
   setCurrentMailbox(mailbox)
   setCurrentMail(null)
-
-  await loadMails(accountId, mailbox.id)
+  await loadMails(unref(currentAccount).accountId, mailbox.id)
 }
 </script>
diff --git a/packages/web-app-mail/src/composables/piniaStores/accounts.ts b/packages/web-app-mail/src/composables/piniaStores/accounts.ts
index 584c57547e..159a527522 100644
--- a/packages/web-app-mail/src/composables/piniaStores/accounts.ts
+++ b/packages/web-app-mail/src/composables/piniaStores/accounts.ts
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 import type { MailAccount } from '../../types'
-import { useRouteQueryId } from './helpers'
+import { useRouteQueryId } from '../useRouterQueryId'
 
 export const useAccountsStore = defineStore('mail-accounts', () => {
   const accounts = ref<MailAccount[]>([])
@@ -15,17 +15,6 @@ export const useAccountsStore = defineStore('mail-accounts', () => {
 
   const setAccounts = (list: MailAccount[]) => {
     accounts.value = list ?? []
-
-    const hasAccounts = accounts.value.length > 0
-    const hasValidCurrent = !!currentAccount.value
-
-    if (!hasValidCurrent) {
-      if (hasAccounts) {
-        currentAccountId.value = accounts.value[0].accountId
-      } else {
-        currentAccountId.value = ''
-      }
-    }
   }
 
   const setCurrentAccount = (account: MailAccount | null) => {
diff --git a/packages/web-app-mail/src/composables/piniaStores/helpers.ts b/packages/web-app-mail/src/composables/piniaStores/helpers.ts
deleted file mode 100644
index d719a3496d..0000000000
--- a/packages/web-app-mail/src/composables/piniaStores/helpers.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { computed, type Ref } from 'vue'
-import { useRouteQuery } from '@opencloud-eu/web-pkg/src'
-
-export type RouteQueryValue = string | string[] | null | undefined
-
-export const toSingleString = (v: RouteQueryValue): string => {
-  if (Array.isArray(v)) return v[0] ?? ''
-  return v ?? ''
-}
-
-export const useRouteQueryId = (queryParamName: string) => {
-  const query = useRouteQuery(queryParamName) as unknown as Ref<RouteQueryValue>
-
-  return computed<string>({
-    get: () => toSingleString(query.value),
-    set: (value: string) => {
-      query.value = value || null
-    }
-  })
-}
diff --git a/packages/web-app-mail/src/composables/piniaStores/mailboxes.ts b/packages/web-app-mail/src/composables/piniaStores/mailboxes.ts
index 97230e78f4..66fc45c273 100644
--- a/packages/web-app-mail/src/composables/piniaStores/mailboxes.ts
+++ b/packages/web-app-mail/src/composables/piniaStores/mailboxes.ts
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 import type { Mailbox } from '../../types'
-import { useRouteQueryId } from './helpers'
+import { useRouteQueryId } from '../useRouterQueryId'
 
 export const useMailboxesStore = defineStore('mail-mailboxes', () => {
   const mailboxes = ref<Mailbox[]>([])
@@ -25,12 +25,6 @@ export const useMailboxesStore = defineStore('mail-mailboxes', () => {
 
   const setMailboxes = (list: Mailbox[]) => {
     mailboxes.value = list ?? []
-
-    if (!currentMailboxId.value && mailboxes.value.length) {
-      currentMailboxId.value = mailboxes.value[0].id
-    } else if (currentMailboxId.value && !currentMailbox.value) {
-      currentMailboxId.value = mailboxes.value[0]?.id ?? ''
-    }
   }
 
   const setCurrentMailbox = (mailbox: Mailbox | null) => {
diff --git a/packages/web-app-mail/src/composables/piniaStores/mails.ts b/packages/web-app-mail/src/composables/piniaStores/mails.ts
index 2574460de2..26e6b348d2 100644
--- a/packages/web-app-mail/src/composables/piniaStores/mails.ts
+++ b/packages/web-app-mail/src/composables/piniaStores/mails.ts
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 import type { Mail } from '../../types'
-import { useRouteQueryId } from './helpers'
+import { useRouteQueryId } from '../useRouterQueryId'
 
 export const useMailsStore = defineStore('mails', () => {
   const mails = ref<Mail[]>([])
@@ -15,10 +15,6 @@ export const useMailsStore = defineStore('mails', () => {
 
   const setMails = (list: Mail[]) => {
     mails.value = list ?? []
-
-    if (currentMailId.value && !currentMail.value) {
-      currentMailId.value = ''
-    }
   }
 
   const upsertMail = (mail: Mail) => {
diff --git a/packages/web-app-mail/src/composables/useMailDraftConnector.ts b/packages/web-app-mail/src/composables/useMailDraftConnector.ts
new file mode 100644
index 0000000000..16014c1ef7
--- /dev/null
+++ b/packages/web-app-mail/src/composables/useMailDraftConnector.ts
@@ -0,0 +1,47 @@
+import { useClientService, useConfigStore } from '@opencloud-eu/web-pkg'
+import { urlJoin } from '@opencloud-eu/web-client'
+import type { DraftEmailPayload, DraftEmailResponse, MailDraftApi } from './useSaveAsDraft'
+
+export const useMailDraftConnector = (): MailDraftApi => {
+  const configStore = useConfigStore()
+  const clientService = useClientService()
+
+  const http = clientService.httpAuthenticated
+  const baseUrl = configStore.groupwareUrl
+
+  return {
+    async createDraft(accountId: string, payload: DraftEmailPayload) {
+      const { data } = await http.post(
+        urlJoin(baseUrl, 'accounts', encodeURIComponent(accountId), 'emails'),
+        payload
+      )
+      return data as DraftEmailResponse
+    },
+
+    async replaceDraft(accountId: string, emailId: string, payload: DraftEmailPayload) {
+      const { data } = await http.put(
+        urlJoin(
+          baseUrl,
+          'accounts',
+          encodeURIComponent(accountId),
+          'emails',
+          encodeURIComponent(emailId)
+        ),
+        payload
+      )
+      return data as DraftEmailResponse
+    },
+
+    async deleteDraft(accountId: string, emailId: string) {
+      await http.delete(
+        urlJoin(
+          baseUrl,
+          'accounts',
+          encodeURIComponent(accountId),
+          'emails',
+          encodeURIComponent(emailId)
+        )
+      )
+    }
+  }
+}
diff --git a/packages/web-app-mail/src/composables/useRouterQueryId.ts b/packages/web-app-mail/src/composables/useRouterQueryId.ts
new file mode 100644
index 0000000000..39719107c6
--- /dev/null
+++ b/packages/web-app-mail/src/composables/useRouterQueryId.ts
@@ -0,0 +1,13 @@
+import { computed } from 'vue'
+import { useRouteQuery, queryItemAsString } from '@opencloud-eu/web-pkg'
+
+export const useRouteQueryId = (queryParamName: string) => {
+  const query = useRouteQuery(queryParamName)
+
+  return computed<string>({
+    get: () => queryItemAsString(query.value),
+    set: (value: string) => {
+      query.value = value || null
+    }
+  })
+}
diff --git a/packages/web-app-mail/src/helpers/mailComposeText.ts b/packages/web-app-mail/src/helpers/mailComposeText.ts
index 80e09e7c01..b3a7b3a15d 100644
--- a/packages/web-app-mail/src/helpers/mailComposeText.ts
+++ b/packages/web-app-mail/src/helpers/mailComposeText.ts
@@ -1,37 +1,19 @@
 import DOMPurify from 'dompurify'
 
-const normalizeWhitespace = (value: string) => {
-  return (value ?? '').replace(/\s+/g, ' ').trim()
+const replaceNbsp = (value: string) => {
+  return (value ?? '').replace(/&nbsp;|&#160;/gi, ' ').replace(/\u00A0/g, ' ')
 }
 
-export const plainTextForChangeCheck = (html: string) => {
-  const raw = html ?? ''
-  if (!raw) {
+const toPlainText = (input: string) => {
+  const value = input ?? ''
+  if (!value) {
     return ''
   }
 
-  if (!raw.includes('<')) {
-    return normalizeWhitespace(raw)
-  }
-
-  const withoutTags = raw
-    .replace(/<[^>]*>/g, ' ')
-    .replace(/&nbsp;|&#160;/gi, ' ')
-    .replace(/\u00A0/g, ' ')
-
-  return normalizeWhitespace(withoutTags)
+  const stripped = DOMPurify.sanitize(value, { ALLOWED_TAGS: [], ALLOWED_ATTR: [] })
+  return replaceNbsp(stripped)
 }
 
-export const plainTextForSave = (html: string) => {
-  const raw = html ?? ''
-  if (!raw) {
-    return ''
-  }
-
-  if (!raw.includes('<')) {
-    return normalizeWhitespace(raw)
-  }
+export const plainTextForSave = (html: string) => toPlainText(html)
 
-  const stripped = DOMPurify.sanitize(raw, { ALLOWED_TAGS: [], ALLOWED_ATTR: [] })
-  return normalizeWhitespace(stripped)
-}
+export const plainTextForChangeCheck = (html: string) => toPlainText(html)
diff --git a/packages/web-app-mail/src/helpers/mailDraftConnector.ts b/packages/web-app-mail/src/helpers/mailDraftConnector.ts
deleted file mode 100644
index ea4fa2fc30..0000000000
--- a/packages/web-app-mail/src/helpers/mailDraftConnector.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import type {
-  DraftEmailPayload,
-  DraftEmailResponse,
-  MailDraftApi
-} from '../composables/useSaveAsDraft'
-
-type HttpLike = {
-  post: <T = unknown>(url: string, body: unknown) => Promise<{ data?: T } | T>
-  put: <T = unknown>(url: string, body: unknown) => Promise<{ data?: T } | T>
-  delete?: <T = unknown>(url: string) => Promise<{ data?: T } | T | void>
-}
-
-const unwrapData = <T>(res: any): T => {
-  if (res && typeof res === 'object' && 'data' in res) {
-    return res.data as T
-  }
-  return res as T
-}
-
-const buildPath = (...segments: string[]): string => {
-  return segments.map((segment) => encodeURIComponent(segment)).join('/')
-}
-
-export function createMailDraftConnector(http: HttpLike, groupwareUrl: string): MailDraftApi {
-  const base = (groupwareUrl ?? '').replace(/\/+$/, '')
-
-  return {
-    async createDraft(accountId: string, payload: DraftEmailPayload) {
-      const url = `${base}/accounts/${buildPath(accountId)}/emails`
-      const res = await http.post<DraftEmailResponse>(url, payload)
-      return unwrapData<DraftEmailResponse>(res)
-    },
-
-    async replaceDraft(accountId: string, emailId: string, payload: DraftEmailPayload) {
-      const url = `${base}/accounts/${buildPath(accountId)}/emails/${buildPath(emailId)}`
-      const res = await http.put<DraftEmailResponse>(url, payload)
-      return unwrapData<DraftEmailResponse>(res)
-    },
-
-    async deleteDraft(accountId: string, emailId: string) {
-      if (!http.delete) {
-        return
-      }
-      const url = `${base}/accounts/${buildPath(accountId)}/emails/${buildPath(emailId)}`
-      await http.delete(url)
-    }
-  }
-}
diff --git a/packages/web-app-mail/src/views/Inbox.vue b/packages/web-app-mail/src/views/Inbox.vue
index 1e813b0b1e..9ba8e53ef3 100644
--- a/packages/web-app-mail/src/views/Inbox.vue
+++ b/packages/web-app-mail/src/views/Inbox.vue
@@ -71,34 +71,45 @@ const currentMailboxIdQuery = useRouteQuery('mailboxId')
 const currentMailIdQuery = useRouteQuery('mailId')
 
 const onComposeMail = () => {
+  console.log('Compose geklickt')
   mailListRef.value?.openCompose()
 }
 
 onMounted(async () => {
   await loadAccounts()
-  if (unref(currentAccountIdQuery)) {
-    setCurrentAccount(
-      unref(accounts).find((account) => account.accountId === unref(currentAccountIdQuery))
-    )
-  } else {
-    setCurrentAccount(unref(accounts)?.[0])
+
+  const selectedAccountId = unref(currentAccountIdQuery)
+  const account = selectedAccountId
+    ? (unref(accounts).find((a) => a.accountId === selectedAccountId) ??
+      unref(accounts)?.[0] ??
+      null)
+    : (unref(accounts)?.[0] ?? null)
+
+  if (!account) {
+    isLoading.value = false
+    return
   }
 
-  console.log(unref(currentAccount))
+  setCurrentAccount(account)
+
+  await loadMailboxes(unref(account).accountId)
 
-  await loadMailboxes(unref(currentAccount).accountId)
-  if (unref(currentMailboxIdQuery)) {
-    setCurrentMailbox(
-      unref(mailboxes).find((mailbox) => mailbox.id === unref(currentMailboxIdQuery))
-    )
-  } else {
-    setCurrentMailbox(unref(mailboxes)?.[0])
+  const selectedMailboxId = unref(currentMailboxIdQuery)
+  const mailbox = selectedMailboxId
+    ? (unref(mailboxes).find((m) => m.id === selectedMailboxId) ?? unref(mailboxes)?.[0] ?? null)
+    : (unref(mailboxes)?.[0] ?? null)
+
+  if (!mailbox) {
+    isLoading.value = false
+    return
   }
 
-  await loadMails(unref(currentAccount).accountId, unref(currentMailbox).id)
+  setCurrentMailbox(mailbox)
+
+  await loadMails(unref(account).accountId, unref(mailbox).id)
 
   if (unref(currentMailIdQuery)) {
-    await loadMail(unref(currentAccount).accountId, queryItemAsString(unref(currentMailIdQuery)))
+    await loadMail(unref(account).accountId, queryItemAsString(unref(currentMailIdQuery)))
   }
 
   isLoading.value = false

From 722ad04fe84325f74afbe526a7332c2fd0447a03 Mon Sep 17 00:00:00 2001
From: tammi-23 <t.thamm@opencloud.eu>
Date: Thu, 19 Feb 2026 12:46:10 +0100
Subject: [PATCH 7/7] wip: removed log entries

---
 packages/web-app-mail/src/components/MailList.vue | 2 --
 packages/web-app-mail/src/views/Inbox.vue         | 1 -
 2 files changed, 3 deletions(-)

diff --git a/packages/web-app-mail/src/components/MailList.vue b/packages/web-app-mail/src/components/MailList.vue
index c4100dfdab..bb5651d3aa 100644
--- a/packages/web-app-mail/src/components/MailList.vue
+++ b/packages/web-app-mail/src/components/MailList.vue
@@ -91,8 +91,6 @@ const { isLoading } = useLoadMails()
 const showCompose = ref(false)
 
 const openCompose = () => {
-  console.log('!!! openCompose jeöffnet !!!')
-
   showCompose.value = true
 }
 
diff --git a/packages/web-app-mail/src/views/Inbox.vue b/packages/web-app-mail/src/views/Inbox.vue
index 9ba8e53ef3..0627011449 100644
--- a/packages/web-app-mail/src/views/Inbox.vue
+++ b/packages/web-app-mail/src/views/Inbox.vue
@@ -71,7 +71,6 @@ const currentMailboxIdQuery = useRouteQuery('mailboxId')
 const currentMailIdQuery = useRouteQuery('mailId')
 
 const onComposeMail = () => {
-  console.log('Compose geklickt')
   mailListRef.value?.openCompose()
 }