Web: show SocketIO connection status in the notifications popover as well

Move the connection status indicator to its own component, and use that
in both the notification bar and the popover.

web/app/src/components/ConnectionStatus.vue

@@ -0,0 +1,28 @@
+<template>
+  <span class='socket-status' v-if="!sockStatus.isConnected" :title="sockStatus.message">Connection Lost</span>
+</template>
+
+<script setup>
+import { useSocketStatus } from '@/stores/socket-status';
+
+const sockStatus = useSocketStatus();
+</script>
+
+<style scoped>
+.socket-status {
+  font-size: 1rem;
+
+  min-width: 1.2em;
+  padding: 0.1em 1em;
+  border-radius: 0.5em;
+  text-align: center;
+  margin: 0 0.5em;
+
+  color: var(--color-connection-lost-text);
+  background-color: var(--color-connection-lost-bg);
+  box-shadow: 0 0 1em var(--color-connection-lost-bg);
+  border: solid thin var(--color-connection-lost-text);
+
+  cursor: help;
+}
+</style>

web/app/src/components/FooterPopup.vue

@@ -3,6 +3,7 @@ import { onMounted } from 'vue'
 import { TabulatorFull as Tabulator } from 'tabulator-tables';
 import { useNotifs } from '@/stores/notifications'
 import * as datetime from "@/datetime";
+import ConnectionStatus from '@/components/ConnectionStatus.vue'
 
 const notifs = useNotifs();
 const emit = defineEmits(['clickClose'])
@@ -62,6 +63,7 @@ function _subscribeToPinia() {
   <section class="footer-popup">
     <header>
       <h3 class="sub-title">Notifications</h3>
+      <connection-status />
       <button class='close' @click="emit('clickClose')">X</button>
     </header>
     <div id="notification_list"></div>

web/app/src/components/NotificationBar.vue

@@ -1,19 +1,21 @@
 <template>
   <section class="notification-bar">
     <span class='notifications' v-if="notifs.last">{{ notifs.last.msg }}</span>
-    <span class='socket-status' v-if="!sockStatus.isConnected" :title="sockStatus.message">Connection Lost</span>
+    <connection-status />
   </section>
 </template>
 
 <script>
 import { useNotifs } from '@/stores/notifications';
-import { useSocketStatus } from '@/stores/socket-status';
+import ConnectionStatus from '@/components/ConnectionStatus.vue'
 
 export default {
   name: 'NotificationBar',
+  components: {
+    ConnectionStatus,
+  },
   data: () => ({
     notifs: useNotifs(),
-    sockStatus: useSocketStatus(),
   }),
 }
 </script>
@@ -25,20 +27,5 @@ export default {
 
 .socket-status {
   float: right;
-
-  font-weight: bold;
-  font-size: larger;
-
-  min-width: 1.2em;
-  padding: 0.2em 1em;
-  border-radius: 0.5em;
-  text-align: center;
-
-  color: var(--color-connection-lost-text);
-  background-color: var(--color-connection-lost-bg);
-  box-shadow: 0 0 1em var(--color-connection-lost-bg);
-  border: solid thin var(--color-connection-lost-text);
-
-  cursor: help;
 }
 </style>