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/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>

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" :model-value="true" @close="showCompose = false" />
     </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>

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 mailPreview = mail.preview ?? ''
+  if (!mailPreview) {
+    return ''
+  }
+
+  const stripped = DOMPurify.sanitize(mailPreview, { ALLOWED_TAGS: [], ALLOWED_ATTR: [] })
+  return stripped.replace(/\s+/g, ' ').trim()
+})
 </script>

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>