refactor: remove inline WebSocket code from templates

collections.templ:
- Removed ~75 lines of inline WebSocket JS
- Added initializeCollectionWebSocket using websocket.ts utility
- Updated template to use x-init for WebSocket init

admin.templ:
- Removed ~55 lines of inline WebSocket JS
- Added initializeScanWebSocket using websocket.ts utility
- Updated template to use x-init for WebSocket init

Both now use the shared websocket.ts createWebSocket function

web/src/collections.ts

@@ -1,5 +1,50 @@
 import { Alpine } from "./alpine";
 import { showToast } from "./toast";
+import { createWebSocket } from "./websocket";
+
+let collectionId: string | null = null;
+
+function initializeCollectionWebSocket(): void {
+  const dataEl = document.getElementById("collection-data");
+  if (!dataEl) return;
+  
+  collectionId = dataEl.dataset.id || null;
+  
+  if (!collectionId) return;
+
+  createWebSocket({
+    onMessage: (message) => {
+      if (message.type === "collection_updated" && message.data.collection_id === collectionId) {
+        const actionText =
+          message.data.action === "books_added"
+            ? `Added ${message.data.count || 0} book(s)`
+            : message.data.action === "book_removed"
+              ? "Removed a book"
+              : message.data.action === "books_bulk_removed"
+                ? `Removed ${message.data.count || 0} book(s)`
+                : "Collection updated";
+
+        showToast(actionText, "info");
+
+        const activeElement = document.activeElement;
+        const isUserActive =
+          activeElement &&
+          (activeElement.tagName === "INPUT" ||
+            activeElement.tagName === "TEXTAREA" ||
+            activeElement.tagName === "SELECT" ||
+            activeElement.getAttribute("contenteditable") === "true");
+
+        if (!isUserActive) {
+          setTimeout(() => {
+            location.reload();
+          }, 1000);
+        }
+      }
+    },
+    enableReconnect: true,
+    reconnectDelay: 5000,
+  });
+}
 
 async function loadCollections(): Promise<void> {
   const token = localStorage.getItem("token");
@@ -410,6 +455,7 @@ export {
   deleteRule,
   filterIcons,
   initColorSelection,
+  initializeCollectionWebSocket,
   loadCollectionRules,
   loadCollections,
   navigateToCollection,
@@ -426,6 +472,7 @@ Alpine.data("collections", () => ({
   deleteRule,
   filterIcons,
   initColorSelection,
+  initializeCollectionWebSocket,
   loadCollectionRules,
   loadCollections,
   navigateToCollection,