diff --git a/packages/design-system/src/components/OcModal/OcModal.vue b/packages/design-system/src/components/OcModal/OcModal.vue
index 4aaa6bb523..f8767cc218 100644
--- a/packages/design-system/src/components/OcModal/OcModal.vue
+++ b/packages/design-system/src/components/OcModal/OcModal.vue
@@ -15,9 +15,12 @@
         @keydown.esc.stop="cancelModalAction"
       >
         <div
-          class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4 rounded-t-sm"
+          class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap justify-between py-3 px-4 rounded-t-sm"
         >
           <h2 id="oc-modal-title" class="truncate m-0 text-base" v-text="title" />
+          <div v-if="$slots['headerActions']" class="flex items-center gap-1">
+            <slot name="headerActions" />
+          </div>
         </div>
         <div class="oc-modal-body px-4 pt-4">
           <div
@@ -211,6 +214,11 @@ export interface Slots {
    * @docs Custom content of the modal.
    */
   content?: () => unknown
+
+  /**
+   * @docs Custom actions in the modal header.
+   */
+  headerActions?: () => unknown
 }
 
 const {
diff --git a/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap b/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
index 2527d70ae5..67eb05f95c 100644
--- a/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
+++ b/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
@@ -4,8 +4,9 @@ exports[`OcModal > displays input 1`] = `
 "<div class="oc-modal-background fixed left-0 top-0 z-[var(--z-index-modal)] bg-black/40 flex items-center justify-center flex-row flex-wrap size-full">
   <focus-trap-stub tabbableoptions="[object Object]" active="true" escapedeactivates="true" returnfocusondeactivate="true" allowoutsideclick="true" clickoutsidedeactivates="false" initialfocus="[Function]" delayinitialfocus="true" preventscroll="false" setreturnfocus="false">
     <div class="oc-modal bg-role-surface border z-[calc(var(--z-index-modal)+1)] border-role-outline rounded-lg focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto shadow-2xl" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
-      <div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4 rounded-t-sm">
+      <div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap justify-between py-3 px-4 rounded-t-sm">
         <h2 id="oc-modal-title" class="truncate m-0 text-base">Create new folder</h2>
+        <!--v-if-->
       </div>
       <div class="oc-modal-body px-4 pt-4">
         <!--v-if-->
@@ -27,8 +28,9 @@ exports[`OcModal > displays loading state 1`] = `
 "<div class="oc-modal-background fixed left-0 top-0 z-[var(--z-index-modal)] bg-black/40 flex items-center justify-center flex-row flex-wrap size-full">
   <focus-trap-stub tabbableoptions="[object Object]" active="true" escapedeactivates="true" returnfocusondeactivate="true" allowoutsideclick="true" clickoutsidedeactivates="false" initialfocus="[Function]" delayinitialfocus="true" preventscroll="false" setreturnfocus="false">
     <div class="oc-modal bg-role-surface border z-[calc(var(--z-index-modal)+1)] border-role-outline rounded-lg focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto shadow-2xl" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
-      <div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4 rounded-t-sm">
+      <div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap justify-between py-3 px-4 rounded-t-sm">
         <h2 id="oc-modal-title" class="truncate m-0 text-base">Example title</h2>
+        <!--v-if-->
       </div>
       <div class="oc-modal-body px-4 pt-4">
         <p class="oc-modal-body-message mt-0 mb-0">Example message</p>
@@ -50,8 +52,9 @@ exports[`OcModal > matches snapshot 1`] = `
 "<div class="oc-modal-background fixed left-0 top-0 z-[var(--z-index-modal)] bg-black/40 flex items-center justify-center flex-row flex-wrap size-full">
   <focus-trap-stub tabbableoptions="[object Object]" active="true" escapedeactivates="true" returnfocusondeactivate="true" allowoutsideclick="true" clickoutsidedeactivates="false" initialfocus="[Function]" delayinitialfocus="true" preventscroll="false" setreturnfocus="false">
     <div class="oc-modal bg-role-surface border z-[calc(var(--z-index-modal)+1)] border-role-outline rounded-lg focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto shadow-2xl" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
-      <div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4 rounded-t-sm">
+      <div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap justify-between py-3 px-4 rounded-t-sm">
         <h2 id="oc-modal-title" class="truncate m-0 text-base">Example title</h2>
+        <!--v-if-->
       </div>
       <div class="oc-modal-body px-4 pt-4">
         <p class="oc-modal-body-message mt-0 mb-0">Example message</p>
@@ -73,8 +76,9 @@ exports[`OcModal > overrides props message with slot 1`] = `
 "<div class="oc-modal-background fixed left-0 top-0 z-[var(--z-index-modal)] bg-black/40 flex items-center justify-center flex-row flex-wrap size-full">
   <focus-trap-stub tabbableoptions="[object Object]" active="true" escapedeactivates="true" returnfocusondeactivate="true" allowoutsideclick="true" clickoutsidedeactivates="false" initialfocus="[Function]" delayinitialfocus="true" preventscroll="false" setreturnfocus="false">
     <div class="oc-modal bg-role-surface border z-[calc(var(--z-index-modal)+1)] border-role-outline rounded-lg focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto shadow-2xl" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
-      <div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4 rounded-t-sm">
+      <div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap justify-between py-3 px-4 rounded-t-sm">
         <h2 id="oc-modal-title" class="truncate m-0 text-base">Example title</h2>
+        <!--v-if-->
       </div>
       <div class="oc-modal-body px-4 pt-4">
         <div class="oc-modal-body-message mt-2 mb-4">
diff --git a/packages/web-app-mail/src/components/MailComposeForm.vue b/packages/web-app-mail/src/components/MailComposeForm.vue
new file mode 100644
index 0000000000..45975a55d9
--- /dev/null
+++ b/packages/web-app-mail/src/components/MailComposeForm.vue
@@ -0,0 +1,140 @@
+<template>
+  <div class="px-4">
+    <div class="py-2 mb-2 border-b border-role-outline-variant">
+      <oc-select
+        :model-value="modelValue.from"
+        :label="`${$gettext('From')}:`"
+        :inline-label="true"
+        :has-border="false"
+        :options="fromOptions"
+        option-label="label"
+        option-value="value"
+        class="w-full"
+        @update:model-value="(value: FromOption) => updateField('from', value)"
+      />
+    </div>
+
+    <oc-text-input
+      :model-value="modelValue.to"
+      type="email"
+      class="mail-new-message-to-input mb-2 pb-2 border-b border-role-outline-variant"
+      :label="`${$gettext('To')}:`"
+      :inline-label="true"
+      :has-border="false"
+      @update:model-value="(value: string) => updateField('to', value)"
+    />
+
+    <oc-text-input
+      :model-value="modelValue.cc"
+      type="email"
+      class="mail-new-message-cc-input mb-2 pb-2 border-b border-role-outline-variant"
+      :label="`${$gettext('CC')}:`"
+      :inline-label="true"
+      :has-border="false"
+      @update:model-value="(value: string) => updateField('cc', value)"
+    />
+
+    <oc-text-input
+      :model-value="modelValue.bcc"
+      type="email"
+      class="mail-new-message-bcc-input mb-2 pb-2 border-b border-role-outline-variant"
+      :label="`${$gettext('BCC')}:`"
+      :inline-label="true"
+      :has-border="false"
+      @update:model-value="(value: string) => updateField('bcc', value)"
+    />
+
+    <oc-text-input
+      :model-value="modelValue.subject"
+      class="mail-new-message-to-input pb-2 border-b border-role-outline-variant"
+      :label="`${$gettext('Subject')}:`"
+      :inline-label="true"
+      :has-border="false"
+      @update:model-value="(value: string) => updateField('subject', value)"
+    />
+
+    <div class="py-4">
+      <oc-textarea
+        :model-value="modelValue.body"
+        :label="$gettext('Write email')"
+        @update:model-value="(value: string) => updateField('body', value)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, unref, watch } from 'vue'
+import { useGettext } from 'vue3-gettext'
+import { useRouteQuery } from '@opencloud-eu/web-pkg'
+import { storeToRefs } from 'pinia'
+import { useAccountsStore } from '../composables/piniaStores/accounts'
+
+type FromOption = {
+  value: string
+  label: string
+  email: string
+  accountId: string
+  identityId: string
+}
+
+export type ComposeFormState = {
+  from?: FromOption
+  to: string
+  cc: string
+  bcc: string
+  subject: string
+  body: string
+}
+
+const props = defineProps<{
+  modelValue: ComposeFormState
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: ComposeFormState): void
+}>()
+
+const { $gettext } = useGettext()
+
+const accountsStore = useAccountsStore()
+const { accounts } = storeToRefs(accountsStore)
+
+const selectedAccountIdQuery = useRouteQuery('accountId')
+
+const fromOptions = computed<FromOption[]>(() => {
+  return (
+    unref(accounts)?.flatMap((account) =>
+      account.identities?.map((identity) => ({
+        label: identity.name ? `${identity.name} <${identity.email}>` : identity.email,
+        value: identity.id,
+        email: identity.email,
+        accountId: account.accountId,
+        identityId: identity.id
+      }))
+    ) ?? []
+  )
+})
+
+const updateField = <K extends keyof ComposeFormState>(key: K, value: ComposeFormState[K]) => {
+  emit('update:modelValue', { ...props.modelValue, [key]: value })
+}
+
+watch(
+  fromOptions,
+  (options) => {
+    if (!options.length) {
+      return
+    }
+    const selectedAccountId = unref(selectedAccountIdQuery)
+    const defaultFrom = selectedAccountId
+      ? (options.find((o) => o.accountId === selectedAccountId) ?? options[0])
+      : options[0]
+
+    if (!props.modelValue.from && defaultFrom) {
+      updateField('from', defaultFrom)
+    }
+  },
+  { immediate: true }
+)
+</script>
diff --git a/packages/web-app-mail/src/components/MailList.vue b/packages/web-app-mail/src/components/MailList.vue
index 0c0d42d8f8..2f25870db5 100644
--- a/packages/web-app-mail/src/components/MailList.vue
+++ b/packages/web-app-mail/src/components/MailList.vue
@@ -5,13 +5,14 @@
       class="md:hidden"
       mode="action"
       :aria-label="$gettext('Write new Email')"
-      :to="{ name: 'mail-create', query: { ...route.query, draftId: 'new' } }"
+      @click="showCompose = true"
     />
     <no-content-message v-if="!currentMailbox" icon="folder" icon-fill-type="line">
       <template #message>
         <span v-text="$gettext('No mailbox selected')" />
       </template>
     </no-content-message>
+
     <template v-else>
       <div class="flex w-full items-center justify-between md:justify-normal">
         <oc-button
@@ -23,9 +24,10 @@
         >
           <oc-icon name="arrow-left" fill-type="line" />
         </oc-button>
-        <h2 class="text-lg ml-4" v-text="currentMailbox.name"></h2>
-        <div class="paceholder" />
+        <h2 class="text-lg ml-4" v-text="currentMailbox.name" />
+        <div class="placeholder" />
       </div>
+
       <no-content-message
         v-if="!mails || !mails.length"
         class="mail-list-empty"
@@ -36,6 +38,7 @@
           <span v-text="$gettext('No mails in this mailbox')" />
         </template>
       </no-content-message>
+
       <oc-list v-else class="mail-list">
         <li
           v-for="mail in mails"
@@ -55,6 +58,7 @@
           </oc-button>
         </li>
       </oc-list>
+      <MailWidget v-model="showCompose" />
     </template>
   </template>
 </template>
@@ -62,19 +66,19 @@
 <script setup lang="ts">
 import { AppLoadingSpinner, NoContentMessage } from '@opencloud-eu/web-pkg'
 import MailListItem from './MailListItem.vue'
-import { Mail } from '../types'
-import { useRoute } from 'vue-router'
+import MailWidget from './MailWidget.vue'
+import type { Mail } from '../types'
 import { useLoadMails } from '../composables/useLoadMails'
 import { useMailsStore } from '../composables/piniaStores/mails'
 import { useMailboxesStore } from '../composables/piniaStores/mailboxes'
 import { storeToRefs } from 'pinia'
 import { useLoadMail } from '../composables/useLoadMail'
-import { unref } from 'vue'
+import { ref, unref } from 'vue'
 import { useAccountsStore } from '../composables/piniaStores/accounts'
 
-const route = useRoute()
 const accountsStore = useAccountsStore()
 const { currentAccount } = storeToRefs(accountsStore)
+
 const mailsStore = useMailsStore()
 const mailboxesStore = useMailboxesStore()
 const { currentMail, mails } = storeToRefs(mailsStore)
@@ -84,6 +88,16 @@ const { setCurrentMailbox } = mailboxesStore
 const { loadMail } = useLoadMail()
 const { isLoading } = useLoadMails()
 
+const showCompose = ref(false)
+
+const openCompose = () => {
+  showCompose.value = true
+}
+
+defineExpose({
+  openCompose
+})
+
 const onNavigateBack = () => {
   setCurrentMailbox(null)
   setCurrentMail(null)
diff --git a/packages/web-app-mail/src/components/MailWidget.vue b/packages/web-app-mail/src/components/MailWidget.vue
new file mode 100644
index 0000000000..956a0ebf1a
--- /dev/null
+++ b/packages/web-app-mail/src/components/MailWidget.vue
@@ -0,0 +1,141 @@
+<template>
+  <div
+    v-if="isOpen && !isExpanded"
+    class="z-50 transition absolute inset-0 md:fixed md:inset-0 pointer-events-auto md:pointer-events-none bg-transparent"
+  >
+    <div
+      class="oc-mail-compose-widget pointer-events-auto absolute bg-role-surface border-0 md:border md:border-role-outline-variant flex flex-col md:rounded-xl top-0 left-0 right-0 bottom-0 md:top-auto md:bottom-2 md:left-auto md:right-8 md:w-[720px] md:h-[800px] md:max-h-[80vh]"
+    >
+      <div class="flex items-center justify-between px-4 py-2">
+        <h2
+          class="oc-mail-compose-widget-headline text-lg font-bold"
+          v-text="$gettext('New message')"
+        />
+        <div class="flex items-center gap-1">
+          <oc-button
+            class="hidden md:inline-flex"
+            appearance="raw"
+            :aria-label="
+              isExpanded ? $gettext('Collapse compose window') : $gettext('Expand compose window')
+            "
+            @click="toggleCollapseExpand"
+          >
+            <oc-icon
+              :name="isExpanded ? 'collapse-diagonal' : 'expand-diagonal'"
+              fill-type="line"
+            />
+          </oc-button>
+          <oc-button appearance="raw" :aria-label="$gettext('Close')" @click="close">
+            <oc-icon name="close" fill-type="line" />
+          </oc-button>
+        </div>
+      </div>
+      <div class="flex-1 overflow-y-auto overflow-x-hidden min-h-0">
+        <MailComposeForm v-model="composeState" />
+      </div>
+      <div class="px-4 py-3 border-t border-role-outline-variant flex items-center justify-between">
+        <oc-button appearance="filled" class="min-w-[120px]">
+          <span v-text="$gettext('Send')" />
+        </oc-button>
+        <div class="flex items-center gap-1" />
+      </div>
+    </div>
+  </div>
+  <oc-modal
+    v-if="isOpen && isExpanded"
+    :title="$gettext('New message')"
+    :hide-actions="true"
+    element-class="mail-compose-modal"
+  >
+    <template #headerActions>
+      <oc-button
+        class="hidden md:inline-flex"
+        appearance="raw"
+        :aria-label="$gettext('Collapse compose window')"
+        @click="toggleCollapseExpand"
+      >
+        <oc-icon name="collapse-diagonal" fill-type="line" />
+      </oc-button>
+      <oc-button appearance="raw" :aria-label="$gettext('Close')" @click="close">
+        <oc-icon name="close" fill-type="line" />
+      </oc-button>
+    </template>
+    <template #content>
+      <div class="flex flex-col flex-1 min-h-0">
+        <div class="flex-1 overflow-y-auto overflow-x-hidden">
+          <MailComposeForm v-model="composeState" />
+        </div>
+        <div
+          class="px-4 pt-3 border-t border-role-outline-variant flex items-center justify-between mt-4"
+        >
+          <oc-button appearance="filled" class="min-w-[120px]">
+            <span v-text="$gettext('Send')" />
+          </oc-button>
+        </div>
+      </div>
+    </template>
+  </oc-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useGettext } from 'vue3-gettext'
+import MailComposeForm, { ComposeFormState } from './MailComposeForm.vue'
+
+const { $gettext } = useGettext()
+
+const props = defineProps<{
+  modelValue?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'close'): void
+}>()
+
+const isExpanded = ref(false)
+
+const composeState = ref<ComposeFormState>({
+  from: undefined,
+  to: '',
+  cc: '',
+  bcc: '',
+  subject: '',
+  body: ''
+})
+
+const isOpen = computed({
+  get: () => props.modelValue ?? true,
+  set: (value: boolean) => {
+    emit('update:modelValue', value)
+    if (!value) emit('close')
+  }
+})
+
+const toggleCollapseExpand = () => {
+  isExpanded.value = !isExpanded.value
+}
+
+const close = () => {
+  isExpanded.value = false
+  isOpen.value = false
+}
+</script>
+
+<style>
+.mail-compose-modal {
+  width: 90vw;
+  max-width: 90vw;
+  height: 90vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.mail-compose-modal .oc-modal-body,
+.mail-compose-modal .oc-modal-body-message {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+</style>
diff --git a/packages/web-app-mail/src/components/MailboxTree.vue b/packages/web-app-mail/src/components/MailboxTree.vue
index d41719030f..0a229ebf3b 100644
--- a/packages/web-app-mail/src/components/MailboxTree.vue
+++ b/packages/web-app-mail/src/components/MailboxTree.vue
@@ -4,10 +4,9 @@
       <div class="px-2 py-4">
         <oc-button
           id="new-email-menu-btn"
-          type="router-link"
-          :to="{ name: 'mail-create', query: { ...route.query, draftId: 'new' } }"
           class="w-full hidden md:flex"
           appearance="filled"
+          @click="$emit('composeMail')"
         >
           <oc-icon name="edit-box" fill-type="line" />
           <span v-text="$gettext('Write new Email')" />
@@ -60,7 +59,7 @@
 
 <script setup lang="ts">
 import type { Mailbox } from '../types'
-import { AppLoadingSpinner, NoContentMessage, useRoute } from '@opencloud-eu/web-pkg'
+import { AppLoadingSpinner, NoContentMessage } from '@opencloud-eu/web-pkg'
 import { useLoadMailboxes } from '../composables/useLoadMailboxes'
 import { useMailboxesStore } from '../composables/piniaStores/mailboxes'
 import { storeToRefs } from 'pinia'
@@ -70,6 +69,10 @@ import { useLoadMails } from '../composables/useLoadMails'
 import { unref } from 'vue'
 import MailAccountSwitch from './MailAccountSwitch.vue'
 
+const emit = defineEmits<{
+  (e: 'composeMail'): void
+}>()
+
 const mailboxesStore = useMailboxesStore()
 const accountsStore = useAccountsStore()
 const { mailboxes, currentMailbox } = storeToRefs(mailboxesStore)
@@ -78,7 +81,6 @@ const { currentAccount } = storeToRefs(accountsStore)
 const { setCurrentMail } = useMailsStore()
 const { loadMails } = useLoadMails()
 const { isLoading } = useLoadMailboxes()
-const route = useRoute()
 
 const onSelectMailbox = async (mailbox: Mailbox) => {
   setCurrentMailbox(mailbox)
diff --git a/packages/web-app-mail/src/index.ts b/packages/web-app-mail/src/index.ts
index d9046c93ef..76195391f0 100644
--- a/packages/web-app-mail/src/index.ts
+++ b/packages/web-app-mail/src/index.ts
@@ -2,7 +2,6 @@ import translations from '../l10n/translations.json'
 import { useGettext } from 'vue3-gettext'
 import { computed } from 'vue'
 import Inbox from './views/Inbox.vue'
-import MailCompose from './views/MailCompose.vue'
 import LayoutContainer from './LayoutContainer.vue'
 import EmptyLayoutContainer from './EmptyLayoutContainer.vue'
 
@@ -41,15 +40,6 @@ export default defineWebApplication({
             path: '',
             redirect: { name: 'mail-all-inbox' }
           },
-          {
-            path: 'create',
-            name: 'mail-create',
-            component: MailCompose,
-            meta: {
-              authContext: 'user',
-              title: $gettext('Create new email')
-            }
-          },
           {
             path: 'all',
             name: 'mail-all',
diff --git a/packages/web-app-mail/src/views/Inbox.vue b/packages/web-app-mail/src/views/Inbox.vue
index b972dd3de9..dddcd252bf 100644
--- a/packages/web-app-mail/src/views/Inbox.vue
+++ b/packages/web-app-mail/src/views/Inbox.vue
@@ -9,7 +9,7 @@
         }"
       >
         <div class="overflow-y-auto md:border-r-2 bg-role-surface-container w-full">
-          <MailboxTree />
+          <MailboxTree @composeMail="onComposeMail" />
         </div>
       </div>
       <div
@@ -18,7 +18,7 @@
           'hidden md:block': currentMail || !currentMailbox
         }"
       >
-        <MailList />
+        <MailList ref="mailListRef" />
       </div>
       <div
         class="overflow-y-auto min-w-0 w-full md:w-2/4 px-4 pt-4 md:pt-0"
@@ -33,7 +33,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, unref, onMounted } from 'vue'
+import { ref, unref, onMounted, ComponentPublicInstance, useTemplateRef } from 'vue'
 import MailList from '../components/MailList.vue'
 import MailDetails from '../components/MailDetails.vue'
 import MailboxTree from '../components/MailboxTree.vue'
@@ -64,11 +64,16 @@ const { loadMails } = useLoadMails()
 const { loadMail } = useLoadMail()
 
 const isLoading = ref<boolean>(true)
+const mailListRef = useTemplateRef<ComponentPublicInstance<typeof MailList>>('mailListRef')
 
 const currentAccountIdQuery = useRouteQuery('accountId')
 const currentMailboxIdQuery = useRouteQuery('mailboxId')
 const currentMailIdQuery = useRouteQuery('mailId')
 
+const onComposeMail = () => {
+  mailListRef.value?.openCompose()
+}
+
 onMounted(async () => {
   await loadAccounts()
   if (unref(currentAccountIdQuery)) {
diff --git a/packages/web-app-mail/src/views/MailCompose.vue b/packages/web-app-mail/src/views/MailCompose.vue
deleted file mode 100644
index 7570be08c2..0000000000
--- a/packages/web-app-mail/src/views/MailCompose.vue
+++ /dev/null
@@ -1,149 +0,0 @@
-<template>
-  <app-loading-spinner v-if="isLoading" />
-  <template v-else>
-    <div class="flex items-center justify-between px-4 py-3 border-b border-role-outline-variant">
-      <oc-button
-        type="router-link"
-        :to="allInboxRoute"
-        appearance="raw"
-        no-hover
-        :aria-label="$gettext('Close')"
-      >
-        <oc-icon name="close" fill-type="line" />
-      </oc-button>
-      <h2 class="text-lg font-bold" v-text="$gettext('New message')" />
-      <oc-button appearance="raw" disabled :aria-label="$gettext('Send')">
-        <oc-icon name="send" fill-type="line" />
-      </oc-button>
-    </div>
-    <div class="px-4">
-      <div class="py-2 mb-2 border-b border-role-outline-variant">
-        <oc-select
-          v-model="from"
-          :label="`${$gettext('From')}:`"
-          :inline-label="true"
-          :has-border="false"
-          :options="fromOptions"
-          option-label="label"
-          option-value="value"
-          class="w-full"
-          :loading="isLoading"
-        />
-      </div>
-      <oc-text-input
-        v-model="toMail"
-        type="email"
-        class="mail-new-message-to-input mb-2 pb-2 border-b border-role-outline-variant"
-        :label="`${$gettext('To')}:`"
-        :inline-label="true"
-        :has-border="false"
-      />
-      <oc-text-input
-        v-model="ccMail"
-        type="email"
-        class="mail-new-message-cc-input mb-2 pb-2 border-b border-role-outline-variant"
-        :label="`${$gettext('CC')}:`"
-        :inline-label="true"
-        :has-border="false"
-      />
-      <oc-text-input
-        v-model="bccMail"
-        type="email"
-        class="mail-new-message-bcc-input mb-2 pb-2 border-b border-role-outline-variant"
-        :label="`${$gettext('BCC')}:`"
-        :inline-label="true"
-        :has-border="false"
-      />
-      <oc-text-input
-        v-model="subject"
-        class="mail-new-message-to-input pb-2 border-b border-role-outline-variant"
-        :label="`${$gettext('Subject')}:`"
-        :inline-label="true"
-        :has-border="false"
-      />
-      <div class="py-4">
-        <oc-textarea v-model="mailBody" :label="$gettext('Write email')" />
-      </div>
-    </div>
-  </template>
-</template>
-
-<script setup lang="ts">
-import { z } from 'zod'
-import { ref, computed, onMounted, unref, watch } from 'vue'
-import { MailAccount, MailAccountSchema } from '../types'
-import { useGettext } from 'vue3-gettext'
-import { useConfigStore, useClientService, useRouteQuery } from '@opencloud-eu/web-pkg'
-import { useTask } from 'vue-concurrency'
-import { urlJoin } from '@opencloud-eu/web-client'
-import { useRoute } from 'vue-router'
-
-type FromOption = {
-  value: string
-  label: string
-  email: string
-  accountId: string
-  identityId: string
-}
-
-const { $gettext } = useGettext()
-const route = useRoute()
-
-const configStore = useConfigStore()
-const clientService = useClientService()
-
-const selectedAccountIdQuery = useRouteQuery('accountId')
-
-const accounts = ref<MailAccount[]>()
-const from = ref<FromOption>()
-const toMail = ref<string>('')
-const ccMail = ref<string>('')
-const bccMail = ref<string>('')
-const subject = ref<string>('')
-const mailBody = ref<string>('')
-
-const isLoading = computed(() => loadAccountsTask.isRunning || !loadAccountsTask.last)
-
-const allInboxRoute = computed(() => {
-  const { draftId, ...restQuery } = route.query
-
-  return {
-    name: 'mail-all-inbox',
-    query: restQuery
-  }
-})
-
-const fromOptions = computed(() => {
-  return unref(accounts)?.flatMap((account) =>
-    account.identities?.map((identity) => ({
-      label: identity.name ? `${identity.name} <${identity.email}>` : identity.email,
-      value: identity.id,
-      email: identity.email,
-      accountId: account.accountId,
-      identityId: identity.id
-    }))
-  )
-})
-
-const loadAccountsTask = useTask(function* (signal) {
-  const url = urlJoin(configStore.groupwareUrl, `accounts`)
-  try {
-    const { data } = yield clientService.httpAuthenticated.get(url, { signal })
-    accounts.value = z.array(MailAccountSchema).parse(data)
-
-    console.log(unref(accounts))
-  } catch (e) {
-    console.error(e)
-  }
-})
-
-watch(fromOptions, () => {
-  from.value = unref(selectedAccountIdQuery)
-    ? unref(fromOptions).find((o) => o.accountId === unref(selectedAccountIdQuery))
-    : unref(fromOptions)[0]
-})
-
-onMounted(() => {
-  loadAccountsTask.perform()
-})
-</script>