From 12e5fe692865b2ba6fec4cc090f2e99cc4a775a9 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Thu, 27 Nov 2025 13:39:30 +0100
Subject: [PATCH 1/7] feat: implement mail account switcher

---
 ...lAccountList.vue => MailAccountSwitch.vue} | 51 +++++++----
 .../src/components/MailboxTree.vue            | 84 ++++++++++---------
 .../src/composables/useLoadAccounts.ts        |  2 +-
 packages/web-app-mail/src/views/Inbox.vue     |  5 --
 4 files changed, 83 insertions(+), 59 deletions(-)
 rename packages/web-app-mail/src/components/{MailAccountList.vue => MailAccountSwitch.vue} (51%)

diff --git a/packages/web-app-mail/src/components/MailAccountList.vue b/packages/web-app-mail/src/components/MailAccountSwitch.vue
similarity index 51%
rename from packages/web-app-mail/src/components/MailAccountList.vue
rename to packages/web-app-mail/src/components/MailAccountSwitch.vue
index fff7818eef..aaa8ad5494 100644
--- a/packages/web-app-mail/src/components/MailAccountList.vue
+++ b/packages/web-app-mail/src/components/MailAccountSwitch.vue
@@ -1,25 +1,48 @@
 <template>
-  <div class="flex justify-center">
+  <oc-button
+    id="account-list-toggle"
+    class="w-full"
+    appearance="filled"
+    color-role="surface"
+    no-hover
+  >
     <app-loading-spinner v-if="isLoading" />
-    <oc-list v-else>
-      <li v-for="account in accounts" :key="account.accountId">
+    <div v-else class="flex justify-between items-center w-full">
+      <div class="flex items-center">
+        <oc-avatar :user-name="currentAccount.name" />
+        <div class="flex flex-col items-start ml-5">
+          <span class="font-bold" v-text="currentAccount.name" />
+          <span v-text="currentAccount.identities[0].email" />
+        </div>
+      </div>
+      <oc-icon name="more-2" />
+    </div>
+  </oc-button>
+  <oc-drop :title="$gettext('Accounts')" class="w-md" toggle="#account-list-toggle" close-on-click>
+    <oc-list>
+      <li v-for="account in accounts" :key="account.accountId" class="oc-list">
         <oc-button
-          v-oc-tooltip="account.name"
-          class="account-list-item mt-4"
-          no-hover
-          appearance="raw"
+          class="p2"
+          :appearance="account.accountId === currentAccount.accountId ? 'filled' : 'raw-inverse'"
+          :color-role="
+            account.accountId === currentAccount.accountId ? 'secondaryContainer' : 'surface'
+          "
           @click="onSelectAccount(account)"
         >
-          <oc-avatar
-            :class="{
-              'border-2 border-role-secondary': currentAccount?.accountId === account.accountId
-            }"
-            :user-name="account.name"
-          />
+          <div class="flex justify-between items-center w-full">
+            <div class="flex items-center">
+              <oc-avatar :user-name="account.name" />
+              <div class="flex flex-col items-start ml-5">
+                <span class="font-bold" v-text="account.name" />
+                <span v-text="account.identities[0].email" />
+              </div>
+            </div>
+            <oc-icon name="check" />
+          </div>
         </oc-button>
       </li>
     </oc-list>
-  </div>
+  </oc-drop>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/web-app-mail/src/components/MailboxTree.vue b/packages/web-app-mail/src/components/MailboxTree.vue
index f9db9d8a86..e2e13669b7 100644
--- a/packages/web-app-mail/src/components/MailboxTree.vue
+++ b/packages/web-app-mail/src/components/MailboxTree.vue
@@ -1,44 +1,49 @@
 <template>
-  <div class="mailbox-tree h-full px-1">
-    <h1 v-if="currentAccount" class="text-lg ml-4 truncate" v-text="currentAccount.name" />
-    <app-loading-spinner v-if="isLoading" />
-    <template v-else>
-      <no-content-message v-if="!mailboxes?.length" icon="folder-reduce" icon-fill-type="line">
-        <template #message>
-          <span v-text="$gettext('No mailboxes found')" />
-        </template>
-      </no-content-message>
-      <div v-else>
-        <oc-list class="mailbox-tree mt-1">
-          <li v-for="mailbox in mailboxes" :key="mailbox.id" class="pb-1 px-2">
-            <oc-button
-              class="w-full p-2 hover:bg-role-surface-container-highest focus:bg-role-surface-container-highest"
-              :class="{ '!bg-role-secondary-container': currentMailbox?.id === mailbox.id }"
-              no-hover
-              justify-content="left"
-              appearance="raw"
-              size="small"
-              @click="onSelectMailbox(mailbox)"
-            >
-              <div class="flex items-center justify-between w-full">
-                <div class="flex items-center truncate">
-                  <oc-icon name="folder" class="mr-2" fill-type="line" />
-                  <span class="truncate" v-text="mailbox.name" />
+  <div class="mailbox-tree h-full px-1 flex flex-col">
+    <div>
+      <h1 v-if="currentAccount" class="text-lg ml-4 truncate" v-text="currentAccount.name" />
+      <app-loading-spinner v-if="isLoading" />
+      <template v-else>
+        <no-content-message v-if="!mailboxes?.length" icon="folder-reduce" icon-fill-type="line">
+          <template #message>
+            <span v-text="$gettext('No mailboxes found')" />
+          </template>
+        </no-content-message>
+        <div v-else>
+          <oc-list class="mailbox-tree mt-1">
+            <li v-for="mailbox in mailboxes" :key="mailbox.id" class="pb-1 px-2">
+              <oc-button
+                class="w-full p-2 hover:bg-role-surface-container-highest focus:bg-role-surface-container-highest"
+                :class="{ '!bg-role-secondary-container': currentMailbox?.id === mailbox.id }"
+                no-hover
+                justify-content="left"
+                appearance="raw"
+                size="small"
+                @click="onSelectMailbox(mailbox)"
+              >
+                <div class="flex items-center justify-between w-full">
+                  <div class="flex items-center truncate">
+                    <oc-icon name="folder" class="mr-2" fill-type="line" />
+                    <span class="truncate" v-text="mailbox.name" />
+                  </div>
+                  <oc-tag
+                    v-if="mailbox.unreadEmails"
+                    v-oc-tooltip="$gettext('Unread emails')"
+                    class="ml-2"
+                    appearance="filled"
+                    :rounded="true"
+                    ><span v-text="mailbox.unreadEmails"
+                  /></oc-tag>
                 </div>
-                <oc-tag
-                  v-if="mailbox.unreadEmails"
-                  v-oc-tooltip="$gettext('Unread emails')"
-                  class="ml-2"
-                  appearance="filled"
-                  :rounded="true"
-                  ><span v-text="mailbox.unreadEmails"
-                /></oc-tag>
-              </div>
-            </oc-button>
-          </li>
-        </oc-list>
-      </div>
-    </template>
+              </oc-button>
+            </li>
+          </oc-list>
+        </div>
+      </template>
+    </div>
+    <div class="w-full self-end mt-auto px-2 mb-4">
+      <MailAccountSwitch />
+    </div>
   </div>
 </template>
 
@@ -52,6 +57,7 @@ import { useAccountsStore } from '../composables/piniaStores/accounts'
 import { useMailsStore } from '../composables/piniaStores/mails'
 import { useLoadMails } from '../composables/useLoadMails'
 import { unref } from 'vue'
+import MailAccountSwitch from './MailAccountSwitch.vue'
 
 const mailboxesStore = useMailboxesStore()
 const accountsStore = useAccountsStore()
diff --git a/packages/web-app-mail/src/composables/useLoadAccounts.ts b/packages/web-app-mail/src/composables/useLoadAccounts.ts
index 32ffb9369f..2e99a9b590 100644
--- a/packages/web-app-mail/src/composables/useLoadAccounts.ts
+++ b/packages/web-app-mail/src/composables/useLoadAccounts.ts
@@ -31,7 +31,7 @@ export const useLoadAccounts = () => {
     }).restartable()
   }
 
-  const loadAccounts = async () => {
+  const loadAccounts = () => {
     return loadAccountsTask!.perform()
   }
 
diff --git a/packages/web-app-mail/src/views/Inbox.vue b/packages/web-app-mail/src/views/Inbox.vue
index 36f875c9d2..b972dd3de9 100644
--- a/packages/web-app-mail/src/views/Inbox.vue
+++ b/packages/web-app-mail/src/views/Inbox.vue
@@ -8,10 +8,6 @@
           'hidden md:flex': currentMailbox
         }"
       >
-        <div class="border-r-2 overflow-y-auto bg-role-surface-container w-[100px]">
-          <MailAccountList />
-        </div>
-
         <div class="overflow-y-auto md:border-r-2 bg-role-surface-container w-full">
           <MailboxTree />
         </div>
@@ -41,7 +37,6 @@ import { ref, unref, onMounted } from 'vue'
 import MailList from '../components/MailList.vue'
 import MailDetails from '../components/MailDetails.vue'
 import MailboxTree from '../components/MailboxTree.vue'
-import MailAccountList from '../components/MailAccountList.vue'
 import { AppLoadingSpinner, queryItemAsString } from '@opencloud-eu/web-pkg'
 import { useRouteQuery } from '@opencloud-eu/web-pkg'
 import { useMailsStore } from '../composables/piniaStores/mails'

From c38a7ecef8e262a8eacb884e342f8b4d6b541d22 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Thu, 27 Nov 2025 13:44:04 +0100
Subject: [PATCH 2/7] format

---
 packages/web-app-mail/src/composables/useLoadMail.ts      | 2 +-
 packages/web-app-mail/src/composables/useLoadMailboxes.ts | 2 +-
 packages/web-app-mail/src/composables/useLoadMails.ts     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/web-app-mail/src/composables/useLoadMail.ts b/packages/web-app-mail/src/composables/useLoadMail.ts
index e9c4a181b2..cf6dc866df 100644
--- a/packages/web-app-mail/src/composables/useLoadMail.ts
+++ b/packages/web-app-mail/src/composables/useLoadMail.ts
@@ -34,7 +34,7 @@ export const useLoadMail = () => {
     }).restartable()
   }
 
-  const loadMail = async (accountId: string, mailId: string) => {
+  const loadMail = (accountId: string, mailId: string) => {
     return loadMailTask!.perform(accountId, mailId)
   }
 
diff --git a/packages/web-app-mail/src/composables/useLoadMailboxes.ts b/packages/web-app-mail/src/composables/useLoadMailboxes.ts
index 0ef59ee36b..de73f18a96 100644
--- a/packages/web-app-mail/src/composables/useLoadMailboxes.ts
+++ b/packages/web-app-mail/src/composables/useLoadMailboxes.ts
@@ -31,7 +31,7 @@ export const useLoadMailboxes = () => {
     }).restartable()
   }
 
-  const loadMailboxes = async (accountId: string) => {
+  const loadMailboxes = (accountId: string) => {
     return loadMailboxesTask!.perform(accountId)
   }
 
diff --git a/packages/web-app-mail/src/composables/useLoadMails.ts b/packages/web-app-mail/src/composables/useLoadMails.ts
index b9162b9b35..7636f1555e 100644
--- a/packages/web-app-mail/src/composables/useLoadMails.ts
+++ b/packages/web-app-mail/src/composables/useLoadMails.ts
@@ -31,7 +31,7 @@ export const useLoadMails = () => {
     }).restartable()
   }
 
-  const loadMails = async (accountId: string, mailboxId: string) => {
+  const loadMails = (accountId: string, mailboxId: string) => {
     return loadMailsTask!.perform(accountId, mailboxId)
   }
 

From 0dd3cfc622c4385ae5fcd6c20b898c53e0d7e22f Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Thu, 27 Nov 2025 13:50:32 +0100
Subject: [PATCH 3/7] add truncate

---
 .../src/components/MailAccountSwitch.vue            | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/web-app-mail/src/components/MailAccountSwitch.vue b/packages/web-app-mail/src/components/MailAccountSwitch.vue
index aaa8ad5494..fb2d6097a3 100644
--- a/packages/web-app-mail/src/components/MailAccountSwitch.vue
+++ b/packages/web-app-mail/src/components/MailAccountSwitch.vue
@@ -4,18 +4,19 @@
     class="w-full"
     appearance="filled"
     color-role="surface"
+    justify-content="space-between"
     no-hover
   >
     <app-loading-spinner v-if="isLoading" />
     <div v-else class="flex justify-between items-center w-full">
-      <div class="flex items-center">
+      <div class="flex items-center truncate">
         <oc-avatar :user-name="currentAccount.name" />
-        <div class="flex flex-col items-start ml-5">
+        <div class="flex flex-col items-start ml-5 truncate">
           <span class="font-bold" v-text="currentAccount.name" />
           <span v-text="currentAccount.identities[0].email" />
         </div>
       </div>
-      <oc-icon name="more-2" />
+      <oc-icon class="ml-2" name="more-2" />
     </div>
   </oc-button>
   <oc-drop :title="$gettext('Accounts')" class="w-md" toggle="#account-list-toggle" close-on-click>
@@ -30,14 +31,14 @@
           @click="onSelectAccount(account)"
         >
           <div class="flex justify-between items-center w-full">
-            <div class="flex items-center">
+            <div class="flex items-center truncate">
               <oc-avatar :user-name="account.name" />
-              <div class="flex flex-col items-start ml-5">
+              <div class="flex flex-col items-start ml-5 truncate">
                 <span class="font-bold" v-text="account.name" />
                 <span v-text="account.identities[0].email" />
               </div>
             </div>
-            <oc-icon name="check" />
+            <oc-icon class="ml-2" name="check" />
           </div>
         </oc-button>
       </li>

From 609e80c8c801b94ac53a10c573f7c22ea4a2d7e3 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Thu, 27 Nov 2025 13:54:36 +0100
Subject: [PATCH 4/7] adjust margin

---
 packages/web-app-mail/src/components/MailboxTree.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-mail/src/components/MailboxTree.vue b/packages/web-app-mail/src/components/MailboxTree.vue
index e2e13669b7..3662d00789 100644
--- a/packages/web-app-mail/src/components/MailboxTree.vue
+++ b/packages/web-app-mail/src/components/MailboxTree.vue
@@ -41,7 +41,7 @@
         </div>
       </template>
     </div>
-    <div class="w-full self-end mt-auto px-2 mb-4">
+    <div class="w-full self-end mt-auto px-2 py-4">
       <MailAccountSwitch />
     </div>
   </div>

From f98fafa8eb62fa2a90a8eb5b534d8e76ad7b34ee Mon Sep 17 00:00:00 2001
From: Alex <abackermann91@gmail.com>
Date: Thu, 27 Nov 2025 14:31:12 +0100
Subject: [PATCH 5/7] MailAccountSwitch.vue aktualisieren

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 packages/web-app-mail/src/components/MailAccountSwitch.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-mail/src/components/MailAccountSwitch.vue b/packages/web-app-mail/src/components/MailAccountSwitch.vue
index fb2d6097a3..5726d01bc7 100644
--- a/packages/web-app-mail/src/components/MailAccountSwitch.vue
+++ b/packages/web-app-mail/src/components/MailAccountSwitch.vue
@@ -38,7 +38,7 @@
                 <span v-text="account.identities[0].email" />
               </div>
             </div>
-            <oc-icon class="ml-2" name="check" />
+            <oc-icon v-if="account.accountId === currentAccount.accountId" class="ml-2" name="check" />
           </div>
         </oc-button>
       </li>

From fa7ecb2e70237f21e69ca472e38d1611ee0a3cbe Mon Sep 17 00:00:00 2001
From: Alex <abackermann91@gmail.com>
Date: Thu, 27 Nov 2025 14:31:23 +0100
Subject: [PATCH 6/7] MailAccountSwitch.vue aktualisieren

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 packages/web-app-mail/src/components/MailAccountSwitch.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-mail/src/components/MailAccountSwitch.vue b/packages/web-app-mail/src/components/MailAccountSwitch.vue
index 5726d01bc7..3e4e95d2cb 100644
--- a/packages/web-app-mail/src/components/MailAccountSwitch.vue
+++ b/packages/web-app-mail/src/components/MailAccountSwitch.vue
@@ -23,7 +23,7 @@
     <oc-list>
       <li v-for="account in accounts" :key="account.accountId" class="oc-list">
         <oc-button
-          class="p2"
+          class="p-2"
           :appearance="account.accountId === currentAccount.accountId ? 'filled' : 'raw-inverse'"
           :color-role="
             account.accountId === currentAccount.accountId ? 'secondaryContainer' : 'surface'

From a8eb25cad7a84e0e55920ba93f3b922e143ad4b6 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Thu, 27 Nov 2025 14:48:51 +0100
Subject: [PATCH 7/7] conditional mail address rendering

---
 .../src/components/MailAccountSwitch.vue            | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/web-app-mail/src/components/MailAccountSwitch.vue b/packages/web-app-mail/src/components/MailAccountSwitch.vue
index 3e4e95d2cb..6c40cb3017 100644
--- a/packages/web-app-mail/src/components/MailAccountSwitch.vue
+++ b/packages/web-app-mail/src/components/MailAccountSwitch.vue
@@ -13,7 +13,10 @@
         <oc-avatar :user-name="currentAccount.name" />
         <div class="flex flex-col items-start ml-5 truncate">
           <span class="font-bold" v-text="currentAccount.name" />
-          <span v-text="currentAccount.identities[0].email" />
+          <span
+            v-if="currentAccount.identities?.[0]?.email"
+            v-text="currentAccount.identities[0].email"
+          />
         </div>
       </div>
       <oc-icon class="ml-2" name="more-2" />
@@ -35,10 +38,14 @@
               <oc-avatar :user-name="account.name" />
               <div class="flex flex-col items-start ml-5 truncate">
                 <span class="font-bold" v-text="account.name" />
-                <span v-text="account.identities[0].email" />
+                <span v-if="account.identities?.[0]?.email" v-text="account.identities[0].email" />
               </div>
             </div>
-            <oc-icon v-if="account.accountId === currentAccount.accountId" class="ml-2" name="check" />
+            <oc-icon
+              v-if="account.accountId === currentAccount.accountId"
+              class="ml-2"
+              name="check"
+            />
           </div>
         </oc-button>
       </li>