refactor(admin): move WebSocket from TypeScript to template with server-side token

- Move WebSocket connection logic from admin.ts to admin.templ template
- Inject JWT token directly into WebSocket URL from server-side User.Token
- Remove createWebSocket import and related functions from admin.ts
- Embed complete WebSocket message handling in template script tag

Changes to admin.templ:
- Add inline <script> with WebSocket connection using server-injected token
- Implement scan_progress, scan_complete, and scan_error message handlers
- Include error handling for WebSocket failures

Changes to admin.ts:
- Remove createWebSocket import
- Remove connectWebSocket(), updateScanProgress(), showScanComplete(), showScanError() functions
- Keep stopScanStatusPolling() for Alpine.js integration
- Preserve all other admin functionality (scan triggering, stats loading, etc.)

This refactoring eliminates client-side localStorage dependencies for
WebSocket authentication, making the admin page consistent with the
SSR architecture. The token is now injected server-side on every page
load, ensuring WebSocket connections always work when the user is
authenticated via HttpOnly cookie.

web/src/admin.ts

@@ -330,55 +330,10 @@ async function loadWatchStatus(): Promise<void> {
 
 document.addEventListener("DOMContentLoaded", function () {
   loadWatchStatus();
-  connectScanWebSocket();
 });
 
 let scanPollInterval: ReturnType<typeof setInterval> | undefined = undefined;
-let scanWs: WebSocket | null = null;
-function connectScanWebSocket(): void {
-  const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-  const wsUrl = `${protocol}//${window.location.host}/ws/sync`;
 
-  scanWs = new WebSocket(wsUrl);
-
-  scanWs.onmessage = (event) => {
-    const message = JSON.parse(event.data);
-
-    switch (message.type) {
-      case "scan_progress":
-        updateScanProgress(message.data);
-        break;
-      case "scan_complete":
-        showScanComplete(message.data);
-        stopScanStatusPolling(); // Optional: stop HTTP polling
-        break;
-      case "scan_error":
-        showScanError(message.data);
-        break;
-    }
-  };
-}
-function updateScanProgress(data: any): void {
-  // Update progress bar
-  const progressBar = document.getElementById(
-    "scan-progress-bar",
-  ) as HTMLElement;
-  if (progressBar) {
-    progressBar.style.width = `${data.progress * 100}%`;
-  }
-
-  // Update text
-  const progressText = document.getElementById("scan-progress-text");
-  if (progressText) {
-    progressText.textContent = `${data.files_scanned} files scanned (${data.new_items} new)`;
-  }
-}
-function showScanComplete(data: any): void {
-  console.log("Scan complete:", data);
-}
-function showScanError(data: any): void {
-  console.error("Scan error:", data);
-}
 function stopScanStatusPolling(): void {
   if (scanPollInterval !== undefined) {
     clearInterval(scanPollInterval);
@@ -396,7 +351,7 @@ export {
   triggerQuickScan,
 };
 
-Alpine.store("admin", {
+Alpine.data("admin", () => ({
   hideScanProgress,
   loadSystemStats,
   loadWatchStatus,
@@ -404,4 +359,4 @@ Alpine.store("admin", {
   stopScanStatusPolling,
   triggerLibraryScan,
   triggerQuickScan,
-});
+}));