Fix autodraft settings panel not reflecting auto-disable after pick (#50)

app/hooks/useDraftAuthRecovery.ts

@@ -62,11 +62,6 @@ export function useDraftAuthRecovery({
     mode: (userAutodraftSettings?.mode || "next_pick") as "next_pick" | "while_on",
     queueOnly: userAutodraftSettings?.queueOnly || false,
   });
-  const userAutodraftRef = useRef(userAutodraft);
-  useEffect(() => {
-    userAutodraftRef.current = userAutodraft;
-  }, [userAutodraft]);
-
   // Re-fetch loader data after each reconnect so stale picks/timers are refreshed.
   const revalidationRetryRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   useEffect(() => {
@@ -194,10 +189,19 @@ export function useDraftAuthRecovery({
         });
         return status;
       });
+
+      if (userAutodraftSettings) {
+        setUserAutodraft({
+          isEnabled: userAutodraftSettings.isEnabled,
+          mode: userAutodraftSettings.mode,
+          queueOnly: userAutodraftSettings.queueOnly,
+        });
+      }
+
       setIsSyncing(false);
     }
-  }, [revalidatorState, draftPicks, season, userQueue, timers, autodraftSettings, currentUserId,
-    setPicks, setCurrentPick, setIsPaused, setIsDraftComplete, setQueue, setTeamTimers, setAutodraftStatus, setIsSyncing]);
+  }, [revalidatorState, draftPicks, season, userQueue, timers, autodraftSettings, currentUserId, userAutodraftSettings,
+    setPicks, setCurrentPick, setIsPaused, setIsDraftComplete, setQueue, setTeamTimers, setAutodraftStatus, setUserAutodraft, setIsSyncing]);
 
   const authFetch = useCallback(async (url: string, init?: RequestInit): Promise<Response | null> => {
     const response = await fetch(url, init);
@@ -213,7 +217,6 @@ export function useDraftAuthRecovery({
     authFetch,
     userAutodraft,
     setUserAutodraft,
-    userAutodraftRef,
     isRevalidatingRef,
     pendingPicksDuringRevalidationRef,
     pendingQueueMutationsRef,

app/hooks/useDraftSocketEvents.ts

@@ -22,7 +22,6 @@ interface UseDraftSocketEventsParams {
   isRevalidatingRef: RefObject<boolean>;
   pendingPicksDuringRevalidationRef: MutableRefObject<DraftPicks>;
   pendingQueueMutationsRef: MutableRefObject<number>;
-  userAutodraftRef: MutableRefObject<{ isEnabled: boolean; mode: "next_pick" | "while_on"; queueOnly: boolean }>;
   // Notification refs from the component
   sendNotificationRef: MutableRefObject<(title: string, body: string) => void>;
   notificationsModeRef: MutableRefObject<string>;
@@ -55,7 +54,6 @@ export function useDraftSocketEvents({
   isRevalidatingRef,
   pendingPicksDuringRevalidationRef,
   pendingQueueMutationsRef,
-  userAutodraftRef,
   sendNotificationRef,
   notificationsModeRef,
   setPicks,
@@ -139,6 +137,7 @@ export function useDraftSocketEvents({
       mode: "next_pick" | "while_on";
       queueOnly: boolean;
       source?: "commissioner" | "user";
+      reason?: "queue_empty" | "pick_complete";
     }) => {
       setAutodraftStatus((prev) => ({
         ...prev,
@@ -153,8 +152,9 @@ export function useDraftSocketEvents({
             toast.info(`Commissioner changed your autodraft to "${getAutodraftLabel(data.isEnabled, data.mode, data.queueOnly)}"`);
           }
         } else {
-          const prev = userAutodraftRef.current;
-          if (!data.isEnabled && prev.isEnabled && prev.queueOnly && prev.mode === "while_on") {
+          if (!data.isEnabled && data.reason === "pick_complete") {
+            toast.info("Autodraft turned off — next pick complete");
+          } else if (!data.isEnabled && data.reason === "queue_empty") {
             toast.info("Autodraft disabled — your queue is empty");
           }
         }

app/models/draft-utils.ts

@@ -569,6 +569,7 @@ export async function executeAutoPick(params: {
             isEnabled: false,
             mode: autodraftSettings.mode,
             queueOnly: autodraftSettings.queueOnly,
+            reason: "queue_empty" as const,
           });
         } catch (error) {
           logger.error("[AutoPick] Socket.IO autodraft-updated error (queue-empty shutoff):", error);
@@ -774,6 +775,7 @@ export async function executeAutoPick(params: {
           isEnabled: false,
           mode: autodraftSettings.mode,
           queueOnly: autodraftSettings.queueOnly,
+          reason: "pick_complete" as const,
         });
       } catch (error) {
         logger.error("[AutoPick] Socket.IO autodraft-updated error:", error);

app/routes/leagues/$leagueId.draft.$seasonId.tsx

@@ -343,7 +343,6 @@ export default function DraftRoom() {
     authFetch,
     userAutodraft,
     setUserAutodraft,
-    userAutodraftRef,
     isRevalidatingRef,
     pendingPicksDuringRevalidationRef,
     pendingQueueMutationsRef,
@@ -504,7 +503,6 @@ export default function DraftRoom() {
     isRevalidatingRef,
     pendingPicksDuringRevalidationRef,
     pendingQueueMutationsRef,
-    userAutodraftRef,
     sendNotificationRef,
     notificationsModeRef,
     setPicks,

server/socket.ts

@@ -30,6 +30,7 @@ interface ServerToClientEvents {
     mode: "next_pick" | "while_on";
     queueOnly: boolean;
     source?: "commissioner" | "user";
+    reason?: "queue_empty" | "pick_complete";
   }) => void;
   "team-connected": (data: { teamId: string }) => void;
   "team-disconnected": (data: { teamId: string }) => void;