Web: extract notification list into its own component

The footer popover is going to contain the task logs as well, so the
notifications are now their own component to be able to show/hide them.

web/app/src/components/footer/FooterPopup.vue

@@ -1,62 +1,8 @@
 <script setup>
-import { onMounted } from 'vue'
+import NotificationList from './NotificationList.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'])
-
-const tabOptions = {
-  columns: [
-    {
-      title: 'Time', field: 'time',
-      sorter: 'alphanum', sorterParams: { alignEmptyValues: "top" },
-      formatter(cell) {
-        const cellValue = cell.getData().time;
-        return datetime.shortened(cellValue);
-      },
-      widthGrow: 1,
-      resizable: true,
-    },
-    {
-      title: 'Message',
-      field: 'msg',
-      sorter: 'string',
-      widthGrow: 100,
-      resizable: true,
-    },
-  ],
-  initialSort: [
-    { column: "time", dir: "asc" },
-  ],
-  headerVisible: false,
-  layout: "fitDataStretch",
-  resizableColumnFit: true,
-  height: "calc(20vh - 3rem)", // Must be set in order for the virtual DOM to function correctly.
-  data: notifs.history,
-  placeholder: "Notification history will appear here",
-  selectable: false,
-};
-
-let tabulator = null;
-onMounted(() => {
-  tabulator = new Tabulator('#notification_list', tabOptions);
-  tabulator.on("tableBuilt", _scrollToBottom);
-  tabulator.on("tableBuilt", _subscribeToPinia);
-});
-
-function _scrollToBottom() {
-  if (notifs.empty) return;
-  tabulator.scrollToRow(notifs.lastID, "bottom", false);
-}
-function _subscribeToPinia() {
-  notifs.$subscribe(() => {
-    tabulator.setData(notifs.history)
-      .then(_scrollToBottom)
-  })
-}
 </script>
 
 <template>
@@ -66,6 +12,6 @@ function _subscribeToPinia() {
       <connection-status />
       <button class='close' @click="emit('clickClose')">X</button>
     </header>
-    <div id="notification_list"></div>
+    <notification-list />
   </section>
 </template>

web/app/src/components/footer/NotificationList.vue

@@ -0,0 +1,62 @@
+<script setup>
+import { onMounted } from 'vue'
+import { TabulatorFull as Tabulator } from 'tabulator-tables';
+import { useNotifs } from '@/stores/notifications'
+import * as datetime from "@/datetime";
+
+const notifs = useNotifs();
+
+const tabOptions = {
+  columns: [
+    {
+      title: 'Time', field: 'time',
+      sorter: 'alphanum', sorterParams: { alignEmptyValues: "top" },
+      formatter(cell) {
+        const cellValue = cell.getData().time;
+        return datetime.shortened(cellValue);
+      },
+      widthGrow: 1,
+      resizable: true,
+    },
+    {
+      title: 'Message',
+      field: 'msg',
+      sorter: 'string',
+      widthGrow: 100,
+      resizable: true,
+    },
+  ],
+  initialSort: [
+    { column: "time", dir: "asc" },
+  ],
+  headerVisible: false,
+  layout: "fitDataStretch",
+  resizableColumnFit: true,
+  height: "calc(20vh - 3rem)", // Must be set in order for the virtual DOM to function correctly.
+  data: notifs.history,
+  placeholder: "Notification history will appear here",
+  selectable: false,
+};
+
+let tabulator = null;
+onMounted(() => {
+  tabulator = new Tabulator('#notification_list', tabOptions);
+  tabulator.on("tableBuilt", _scrollToBottom);
+  tabulator.on("tableBuilt", _subscribeToPinia);
+});
+
+function _scrollToBottom() {
+  if (notifs.empty) return;
+  tabulator.scrollToRow(notifs.lastID, "bottom", false);
+}
+function _subscribeToPinia() {
+  notifs.$subscribe(() => {
+    tabulator.setData(notifs.history)
+      .then(_scrollToBottom)
+  })
+}
+</script>
+
+<template>
+    <div id="notification_list"></div>
+</template>