Use offline indicator which does not tear out the current UI

dashboard/src/components/OfflineOverlay.vue

@@ -1,12 +1,11 @@
 <script setup>
 
-import { useTemplateRef, ref } from 'vue';
-import { fetcher, Spinner, Dialog } from 'pankow';
+import { ref } from 'vue';
+import { fetcher, OfflineBanner } from 'pankow';
 import { API_ORIGIN } from '../constants.js';
 
 const emits = defineEmits(['online']);
 
-const dialog = useTemplateRef('dialog');
 const isOpen = ref(false);
 
 async function waitForOnline() {
@@ -22,7 +21,6 @@ async function waitForOnline() {
 
   // back online
   emits('online');
-  dialog.value.close();
   isOpen.value = false;
 }
 
@@ -32,7 +30,6 @@ defineExpose({
 
     isOpen.value = true;
 
-    dialog.value.open();
     waitForOnline();
   }
 });
@@ -40,10 +37,5 @@ defineExpose({
 </script>
 
 <template>
- <Dialog ref="dialog" :modal="true">
-  <div style="display: flex; flex-direction: column; align-items: center;">
-    <Spinner class="pankow-spinner-large" style="margin: 20px"/>
-    <a href="https://docs.cloudron.io/troubleshooting/" target="_blank">{{ $t('main.offline') }}</a>
-  </div>
- </Dialog>
+  <OfflineBanner :active="isOpen"/>
 </template>