move mailbox count and size to header

dashboard/src/views/EmailMailboxesView.vue

@@ -70,6 +70,7 @@ function onActionMenu(mailbox, event) {
 
 const busy = ref(true);
 const mailboxes = ref([]);
+const mailboxesUsage = ref(0);
 const domains = ref([]);
 const users = ref([]);
 const groups = ref([]);
@@ -173,6 +174,7 @@ async function refresh() {
   }
 
   mailboxes.value = tmp;
+  mailboxesUsage.value = mailboxes.value.reduce((acc, m) => acc + (m.usage && m.usage.diskSize), 0);
 }
 
 onMounted(async () => {
@@ -224,6 +226,9 @@ onMounted(async () => {
     <MailboxDialog ref="mailboxDialog" :users="users" :groups="groups" :domains="domains" @success="refresh()"/>
 
     <Section :title="$t('email.incoming.mailboxes.title')">
+      <template #header-title-extra>
+        <span style="font-weight: normal; font-size: 14px">({{ $t('emails.domains.stats', { mailboxCount: filteredMailboxes.length, usage: prettyDecimalSize(filteredMailboxesUsage) }) }})</span>
+      </template>
       <template #header-buttons>
         <TextInput :placeholder="$t('main.searchPlaceholder')" style="flex-grow: 1;" v-model="searchFilter"/>
         <Button @click="onAddOrEdit()">{{ $t('email.incoming.mailboxes.addAction') }}</Button>
@@ -245,7 +250,6 @@ onMounted(async () => {
         </template>
       </TableView>
 
-      <div style="margin-top: 20px; font-weight: bold;">{{ $t('emails.domains.stats', { mailboxCount: filteredMailboxes.length, usage: prettyDecimalSize(filteredMailboxesUsage) }) }}</div>
     </Section>
   </div>
 </template>