From 8a4c75e8608b0076733f9736674bcea26217049f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 25 Apr 2026 09:14:04 +0000
Subject: [PATCH] Move hasHeaderMenu out of IIFE into component body

Computing it before the return statement is the right place since it only
depends on props, not loop variables. Removes the IIFE entirely and fixes
the indentation of the map callback body.

https://claude.ai/code/session_017JCShLVs9xZ6FZmyrUFaE1
---
 app/components/draft/MiniDraftGrid.tsx | 101 ++++++++++++-------------
 1 file changed, 50 insertions(+), 51 deletions(-)

diff --git a/app/components/draft/MiniDraftGrid.tsx b/app/components/draft/MiniDraftGrid.tsx
index 2aca6d0..687c5bb 100644
--- a/app/components/draft/MiniDraftGrid.tsx
+++ b/app/components/draft/MiniDraftGrid.tsx
@@ -142,6 +142,8 @@ export const MiniDraftGrid = memo(function MiniDraftGrid({
 
   if (draftGrid.length === 0) return null;
 
+  const hasHeaderMenu = !!(onAdjustTimeBankOpen || onSetAutodraftOpen);
+
   // h-14 (56px) + gap-1.5 (6px) fallback until first measurement
   const effectiveRowHeight = rowHeight > 0 ? rowHeight : 56;
 
@@ -154,60 +156,57 @@ export const MiniDraftGrid = memo(function MiniDraftGrid({
       <div className="inline-block min-w-full">
         {/* Team header */}
         <div className="flex gap-1.5 mb-1.5">
-          {(() => {
-            const hasHeaderMenu = !!(onAdjustTimeBankOpen || onSetAutodraftOpen);
-            return draftSlots.map((slot) => {
-              const teamTime = teamTimers[slot.team.id];
-              const isAutodraft = autodraftStatus[slot.team.id]?.isEnabled ?? false;
-              const isConnected = connectedTeams ? connectedTeams.has(slot.team.id) : true;
+          {draftSlots.map((slot) => {
+            const teamTime = teamTimers[slot.team.id];
+            const isAutodraft = autodraftStatus[slot.team.id]?.isEnabled ?? false;
+            const isConnected = connectedTeams ? connectedTeams.has(slot.team.id) : true;
 
-              const headerContent = (
-                <>
-                  <div className="text-xs font-medium truncate px-1 flex items-center justify-center gap-0.5">
-                    {isAutodraft && (
-                      <span className="inline-flex items-center justify-center h-3.5 w-3.5 text-[9px] font-bold text-white bg-black shrink-0">A</span>
-                    )}
-                    <span className={`truncate${!isConnected ? " italic text-muted-foreground" : ""}`}>
-                      {ownerMap[slot.team.id] || slot.team.name}
-                    </span>
-                  </div>
-                  <div className={`text-xs font-mono px-1 ${getTimerColorClass(teamTime)}`}>
-                    {formatClockTime(teamTime)}
-                  </div>
-                </>
-              );
-
-              if (hasHeaderMenu) {
-                return (
-                  <ContextMenu key={slot.id}>
-                    <ContextMenuTrigger asChild>
-                      <div className="flex-1 min-w-20 text-center cursor-context-menu">
-                        {headerContent}
-                      </div>
-                    </ContextMenuTrigger>
-                    <ContextMenuContent>
-                      {onAdjustTimeBankOpen && (
-                        <ContextMenuItem onClick={() => onAdjustTimeBankOpen(slot.team.id)}>
-                          Adjust Time Bank...
-                        </ContextMenuItem>
-                      )}
-                      {onSetAutodraftOpen && (
-                        <ContextMenuItem onClick={() => onSetAutodraftOpen(slot.team.id)}>
-                          Set Autodraft...
-                        </ContextMenuItem>
-                      )}
-                    </ContextMenuContent>
-                  </ContextMenu>
-                );
-              }
-
-              return (
-                <div key={slot.id} className="flex-1 min-w-20 text-center">
-                  {headerContent}
+            const headerContent = (
+              <>
+                <div className="text-xs font-medium truncate px-1 flex items-center justify-center gap-0.5">
+                  {isAutodraft && (
+                    <span className="inline-flex items-center justify-center h-3.5 w-3.5 text-[9px] font-bold text-white bg-black shrink-0">A</span>
+                  )}
+                  <span className={`truncate${!isConnected ? " italic text-muted-foreground" : ""}`}>
+                    {ownerMap[slot.team.id] || slot.team.name}
+                  </span>
                 </div>
+                <div className={`text-xs font-mono px-1 ${getTimerColorClass(teamTime)}`}>
+                  {formatClockTime(teamTime)}
+                </div>
+              </>
+            );
+
+            if (hasHeaderMenu) {
+              return (
+                <ContextMenu key={slot.id}>
+                  <ContextMenuTrigger asChild>
+                    <div className="flex-1 min-w-20 text-center cursor-context-menu">
+                      {headerContent}
+                    </div>
+                  </ContextMenuTrigger>
+                  <ContextMenuContent>
+                    {onAdjustTimeBankOpen && (
+                      <ContextMenuItem onClick={() => onAdjustTimeBankOpen(slot.team.id)}>
+                        Adjust Time Bank...
+                      </ContextMenuItem>
+                    )}
+                    {onSetAutodraftOpen && (
+                      <ContextMenuItem onClick={() => onSetAutodraftOpen(slot.team.id)}>
+                        Set Autodraft...
+                      </ContextMenuItem>
+                    )}
+                  </ContextMenuContent>
+                </ContextMenu>
               );
-            });
-          })()}
+            }
+
+            return (
+              <div key={slot.id} className="flex-1 min-w-20 text-center">
+                {headerContent}
+              </div>
+            );
+          })}
         </div>
 
         {/* Rows — clipped to 2-row height, slides to reveal new round */}