Web: log SocketIO connection status in notifications history

web/app/src/stores/socket-status.js

@@ -1,5 +1,12 @@
-import { stringifyStyle } from '@vue/shared'
 import { defineStore } from 'pinia'
+import { useNotifs } from '@/stores/notifications'
+
+// Not sure if this is the best way to deal with those notifications. It feels a
+// bit spaghetto to have one Pinia store influence another. Maybe move this to
+// the app level once the Workers and Settings views are fleshed out. Maybe
+// that'll cause the Notifications popover to be handled at the app-global
+// level, instead of per view, creating a better place to put this logic.
+const notifs = useNotifs();
 
 /**
  * Status of the SocketIO/Websocket connection to Flamenco Manager.
@@ -9,6 +16,8 @@ export const useSocketStatus = defineStore('socket-status', {
     /** @type { bool } */
     isConnected: false,
 
+    wasEverDisconnected: false,
+
     /** @type {string} */
     message: "",
   }),
@@ -18,8 +27,13 @@ export const useSocketStatus = defineStore('socket-status', {
      * @param {string} reason
      */
     disconnected(reason) {
+      // Only patch the state if it actually will change.
+      if (!this.isConnected)
+        return;
+      notifs.add(`Connection to Flamenco Manager lost`);
       this.$patch({
         isConnected: false,
+        wasEverDisconnected: true,
         message: `${reason}`,
       });
     },
@@ -27,6 +41,12 @@ export const useSocketStatus = defineStore('socket-status', {
      * Indicate the connection is good.
      */
     connected() {
+      // Only patch the state if it actually will change.
+      if (this.isConnected)
+        return;
+
+      if (this.wasEverDisconnected)
+        notifs.add("Connection to Flamenco Manager established");
       this.$patch({
         isConnected: true,
         message: "",