sync Admin UI collection changes across browser tabs

ui/src/stores/collections.js

@@ -1,4 +1,4 @@
-import { writable } from "svelte/store";
+import { writable, get } from "svelte/store";
 import ApiClient    from "@/utils/ApiClient";
 import CommonHelper from "@/utils/CommonHelper";
 
@@ -7,6 +7,20 @@ export const activeCollection               = writable({});
 export const isCollectionsLoading           = writable(false);
 export const protectedFilesCollectionsCache = writable({});
 
+let notifyChannel;
+
+if (typeof BroadcastChannel != "undefined") {
+    notifyChannel = new BroadcastChannel("collections");
+
+    notifyChannel.onmessage = () => {
+        loadCollections(get(activeCollection)?.id)
+    }
+}
+
+function notifyOtherTabs() {
+    notifyChannel?.postMessage("reload");
+}
+
 export function changeActiveCollectionById(collectionId) {
     collections.update((list) => {
         const found = CommonHelper.findByKey(list, "id", collectionId);
@@ -32,6 +46,8 @@ export function addCollection(collection) {
 
         refreshProtectedFilesCollectionsCache();
 
+        notifyOtherTabs();
+
         return CommonHelper.sortCollections(list);
     });
 }
@@ -49,6 +65,8 @@ export function removeCollection(collection) {
 
         refreshProtectedFilesCollectionsCache();
 
+        notifyOtherTabs();
+
         return list;
     });
 }