update event

Author: SuaYoo

frontend/src/utils/TabSyncService.ts

@@ -1,14 +1,17 @@
 import { nanoid } from "nanoid";
+import { z } from "zod";
 
-type TabSyncConfig = { tabIds: string[] };
+const tabIdSchema = z.string().nanoid();
+type TabId = z.infer<typeof tabIdSchema>;
+type TabSyncConfig = { tabIds: TabId[] };
 
 /**
  * Service for syncing data across tabs using `BroadcastChannel`
  */
 export default class TabSyncService {
   static storageKey = "btrix.tabSync";
 
-  public tabId = nanoid();
+  public tabId?: TabId;
   public channel: BroadcastChannel;
   public get tabCount() {
     return this.getStoredSyncConfig()?.tabIds.length;
@@ -18,36 +21,34 @@ export default class TabSyncService {
     // Open channel
     this.channel = new BroadcastChannel(channelName);
 
-    // Update number of open tabs
+    // Update number of open tabs based on current tab visibility
+    this.handleVisibilityChange();
+
+    // Update tab ID when tab is closed or switched
+    window.addEventListener("visibilitychange", () => {
+      this.handleVisibilityChange();
+    });
+  }
+
+  private handleVisibilityChange() {
     const syncConfig = this.getStoredSyncConfig() || { tabIds: [] };
 
-    syncConfig.tabIds.push(this.tabId);
+    if (document.visibilityState === "visible") {
+      this.tabId = nanoid();
+
+      syncConfig.tabIds.push(this.tabId);
+    } else if (this.tabId) {
+      syncConfig.tabIds = syncConfig.tabIds.filter((id) => id === this.tabId);
+    }
 
     window.localStorage.setItem(
       TabSyncService.storageKey,
       JSON.stringify({
         ...syncConfig,
-        // Somewhat arbitrary, but only store latest 20 tabs to keep list managable
-        tabIds: syncConfig.tabIds.slice(-20),
+        // Somewhat arbitrary, but only store latest tabs to keep list managable
+        tabIds: syncConfig.tabIds.slice(-50),
       }),
     );
-
-    // Remove tab ID on page unload
-    window.addEventListener("unload", () => {
-      const syncConfig = this.getStoredSyncConfig();
-
-      if (syncConfig) {
-        const tabIds = syncConfig.tabIds.filter((id) => id === this.tabId);
-
-        window.localStorage.setItem(
-          TabSyncService.storageKey,
-          JSON.stringify({
-            ...syncConfig,
-            tabIds,
-          }),
-        );
-      }
-    });
   }
 
   private getStoredSyncConfig(): TabSyncConfig | null {