refactor: Drive connection status from tRPC subscription state

Replace browser online/offline event listeners with tRPC onEvent subscription
status, so the connection indicator reflects actual server reachability rather
than general network availability.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/web/src/hooks/useConnectionStatus.ts

@@ -1,31 +1,11 @@
-import { useState, useEffect } from "react";
+import { trpc } from '@/lib/trpc';
 
 export type ConnectionState = "connected" | "reconnecting" | "disconnected";
 
 export function useConnectionStatus(): ConnectionState {
-  const [state, setState] = useState<ConnectionState>("connected");
+  const { status } = trpc.onEvent.useSubscription(undefined);
 
-  useEffect(() => {
+  if (status === 'pending') return "connected";
-    function handleOnline() {
+  if (status === 'connecting') return "reconnecting";
-      setState("connected");
+  return "disconnected"; // 'idle' (stream closed) or 'error' (fatal)
-    }
-    function handleOffline() {
-      setState("disconnected");
-    }
-
-    window.addEventListener("online", handleOnline);
-    window.addEventListener("offline", handleOffline);
-
-    // Initial state
-    if (!navigator.onLine) {
-      setState("disconnected");
-    }
-
-    return () => {
-      window.removeEventListener("online", handleOnline);
-      window.removeEventListener("offline", handleOffline);
-    };
-  }, []);
-
-  return state;
 }