Improve EmailStatusView to show expanded indicator

dashboard/src/views/EmailStatusView.vue

@@ -2,7 +2,7 @@
 
 import { ref, onMounted } from 'vue';
 import { eachLimit } from 'async';
-import { Button } from 'pankow';
+import { Button, Icon } from 'pankow';
 import { prettyDecimalSize } from 'pankow/utils';
 import Section from '../components/Section.vue';
 import StateLED from '../components/StateLED.vue';
@@ -24,6 +24,8 @@ async function onRefresh() {
 }
 
 async function refreshStatus(domain) {
+  domain.loading = true;
+
   let [error, result] = await mailModel.status(domain.domain);
   if (error) {
     console.error(error);
@@ -54,8 +56,6 @@ async function refreshStatus(domain) {
 
   domain.loading = false;
 
-  // TODO
-  // mail usage is loaded separately with a cancellation check. when there are a lot of domains, it runs a long time in background and slows down loading of new views
   [error, result] = await mailModel.usage(domain.domain);
   if (error) {
     console.error(error);
@@ -91,8 +91,9 @@ onMounted(async () => {
       </template>
 
       <div class="domain-list-item" :class="{ active: domain.domain === expandedDomain }" v-for="domain in domains" :key="domain.domain">
-        <div @click="onToggleExpanded(domain.domain)" style="display: flex; justify-content: space-between;">
+        <div @click="onToggleExpanded(domain.domain)" style="display: flex; justify-content: space-between; padding: 10px 0;">
           <div>
+            <i class="collapse fa-solid fa-angle-right" :class="{ expanded: domain.domain === expandedDomain }" style="margin-right: 6px;"></i>
             <StateLED :busy="!domain.statusCheckDone" :state="domain.status ? 'success' : 'danger'" style="margin-right: 6px"/>
             {{ domain.domain }}
           </div>
@@ -120,10 +121,9 @@ onMounted(async () => {
 
 .domain-list-item {
   cursor: pointer;
-  padding: 10px 0;
-  border-radius: var(--pankow-border-radius);
-  padding: 10px;
+  padding: 0 10px;
   margin-bottom: 10px;
+  border-radius: var(--pankow-border-radius);
 }
 
 .domain-list-item.active,