Merge email domain status into the domain view

dashboard/src/views/EmailDomainView.vue

@@ -5,11 +5,12 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef, inject } from 'vue';
-import { Button, Checkbox, InputDialog, Dialog, FormGroup, Switch } from '@cloudron/pankow';
+import { Button, ProgressBar, Checkbox, InputDialog, Dialog, FormGroup, Switch } from '@cloudron/pankow';
 import Section from '../components/Section.vue';
 import SettingsItem from '../components/SettingsItem.vue';
 import CatchAllSettingsItem from '../components/CatchAllSettingsItem.vue';
 import MailRelaySettingsItem from '../components/MailRelaySettingsItem.vue';
+import MailDomainStatus from '../components/MailDomainStatus.vue';
 import DashboardModel from '../models/DashboardModel.js';
 import DomainsModel from '../models/DomainsModel.js';
 import MailModel from '../models/MailModel.js';
@@ -37,7 +38,6 @@ const infoMenu = ref([]);
 const busyRefresh = ref(true);
 const inboundEnabled = ref(false);
 const outboundEnabled = ref(false);
-const usage = ref(0);
 
 async function onSendTestMail() {
   const [error, result] = await profileModel.get();
@@ -276,6 +276,8 @@ onMounted(async () => {
 
     <h1 class="view-header">{{ $t('email.config.title', { domain: domain }) }}</h1>
 
+    <ProgressBar mode="indeterminate" v-if="busyRefresh" slim :show-label="false" />
+
     <Section :title="$t('email.config.sending.title')" :padding="false" v-if="!busyRefresh">
       <template #header-buttons>
         <Button @click="onSendTestMail">{{ $t('emails.domains.testEmailTooltip') }}</Button>
@@ -317,5 +319,7 @@ onMounted(async () => {
 
       <CatchAllSettingsItem :domain-config="mailConfig" :disabled="!features.emailServer"/>
     </Section>
+
+    <MailDomainStatus v-if="!busyRefresh && domain" :domain="domain"/>
   </div>
 </template>