Fix draft state not updating when returning from backgrounded mobile app

Mobile browsers suspend JavaScript and silently drop WebSocket connections
when the user switches to another app, without firing "offline"/"online"
events. Add a visibilitychange handler so that when the user returns:
- If the socket is disconnected, reconnect immediately (skipping backoff)
- If the socket appears connected but JS was suspended, rejoin the draft
  room and trigger a loader revalidation to catch any missed picks/state

https://claude.ai/code/session_016tCZVFjSeHdQsdKktbDHEt

app/hooks/useDraftSocket.ts

@@ -93,12 +93,31 @@ export function useDraftSocket(seasonId: string, teamId?: string): UseDraftSocke
       }
     };
 
+    const handleVisibilityChange = () => {
+      if (document.visibilityState !== "visible") return;
+
+      if (!socketRef.current?.connected) {
+        // Mobile browsers kill WebSockets when the app is backgrounded without
+        // firing "offline". Reconnect immediately when the user returns.
+        socketRef.current?.connect();
+      } else {
+        // Socket appears connected but may have gone stale while JS was suspended.
+        // Rejoin the draft room (idempotent) and bump reconnectCount so the draft
+        // page revalidates loader data to catch any picks/state changes missed
+        // while the browser was backgrounded.
+        socketRef.current?.emit("join-draft", seasonId, teamId);
+        setReconnectCount((c) => c + 1);
+      }
+    };
+
     window.addEventListener("offline", handleOffline);
     window.addEventListener("online", handleOnline);
+    document.addEventListener("visibilitychange", handleVisibilityChange);
 
     return () => {
       window.removeEventListener("offline", handleOffline);
       window.removeEventListener("online", handleOnline);
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
       console.log("Leaving draft room:", seasonId);
       socket.emit("leave-draft", seasonId);
       socket.disconnect();