Added draft state handling

packages/web-app-mail/src/components/MailComposeForm.vue

@@ -76,6 +76,7 @@ import MailAttachmentList from './MailAttachmentList.vue'
 type FromOption = {
   value: string
   label: string
+  name: string
   email: string
   accountId: string
   identityId: string
@@ -122,6 +123,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

packages/web-app-mail/src/components/MailList.vue

@@ -5,7 +5,7 @@
       class="md:hidden"
       mode="action"
       :aria-label="$gettext('Write new Email')"
-      @click="showCompose = true"
+      @click="openCompose"
     />
     <no-content-message v-if="!currentMailbox" icon="folder" icon-fill-type="line">
       <template #message>
@@ -58,15 +58,13 @@
           </oc-button>
         </li>
       </oc-list>
-      <MailWidget v-model="showCompose" />
     </template>
   </template>
 </template>
 
 <script setup lang="ts">
 import { AppLoadingSpinner, NoContentMessage } from '@opencloud-eu/web-pkg'
 import MailListItem from './MailListItem.vue'
-import MailWidget from './MailWidget.vue'
 import type { Mail } from '../types'
 import { useLoadMails } from '../composables/useLoadMails'
 import { useMailsStore } from '../composables/piniaStores/mails'
@@ -76,22 +74,26 @@ import { useLoadMail } from '../composables/useLoadMail'
 import { ref, unref } from 'vue'
 import { useAccountsStore } from '../composables/piniaStores/accounts'
 
-const accountsStore = useAccountsStore()
-const { currentAccount } = storeToRefs(accountsStore)
-
 const mailsStore = useMailsStore()
 const mailboxesStore = useMailboxesStore()
+const accountsStore = useAccountsStore()
+const { loadMail } = useLoadMail()
+const { isLoading } = useLoadMails()
+
+const { currentAccount } = storeToRefs(accountsStore)
 const { currentMail, mails } = storeToRefs(mailsStore)
 const { updateMailField, setCurrentMail } = mailsStore
 const { currentMailbox } = storeToRefs(mailboxesStore)
 const { setCurrentMailbox } = mailboxesStore
-const { loadMail } = useLoadMail()
-const { isLoading } = useLoadMails()
 
 const showCompose = ref(false)
 
+const emit = defineEmits<{
+  (e: 'compose-mail'): void
+}>()
+
 const openCompose = () => {
-  showCompose.value = true
+  emit('compose-mail')
 }
 
 defineExpose({
@@ -107,9 +109,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>

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,13 @@ const fromText = computed(() => {
 const receivedAtRelativeDate = computed(() => {
   return formatRelativeDateFromISO(mail.receivedAt, currentLanguage)
 })
+
+const previewText = computed(() => {
+  if (!mail.preview) {
+    return ''
+  }
+
+  const stripped = DOMPurify.sanitize(mail.preview, { ALLOWED_TAGS: [], ALLOWED_ATTR: [] })
+  return stripped.replace(/\s+/g, ' ').trim()
+})
 </script>

packages/web-app-mail/src/components/MailSavedHint.vue

@@ -0,0 +1,12 @@
+<template>
+  <div 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'
+
+const { $gettext } = useGettext()
+</script>