feat: show username and team name on the clock display (#44)

- Show owner username as primary label in "On the Clock" section (mobile bar + desktop sidebar), with team name as a secondary label below
- Memoize currentDraftSlot to avoid O(n) array scan on every timer tick
- Derive currentDraftSlotOwnerName once instead of looking up ownerMap four times per render

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

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

@@ -1021,12 +1021,16 @@ export default function DraftRoom() {
   const currentRound = draftSlots.length > 0 ? Math.ceil(currentPick / draftSlots.length) : 1;
 
   // Determine whose turn it is
-  const currentDraftSlot = getTeamForPick(currentPick, draftSlots);
+  const currentDraftSlot = useMemo(
+    () => getTeamForPick(currentPick, draftSlots),
+    [currentPick, draftSlots]
+  );
   const isMyTurn = !!(
     userTeam && currentDraftSlot && currentDraftSlot.team.id === userTeam.id
   );
   const canPick = isMyTurn && season.status === "draft" && !isPaused; // Only team owner on their turn when draft is active
 
+  const currentDraftSlotOwnerName = currentDraftSlot ? ownerMap[currentDraftSlot.team.id] : undefined;
   const currentClockTime = currentDraftSlot ? teamTimers[currentDraftSlot.team.id] : undefined;
   const currentClockColor = getTimerColorClass(currentClockTime);
 
@@ -1327,7 +1331,12 @@ export default function DraftRoom() {
             <div className={`text-xs font-bold uppercase tracking-wider ${isMyTurn ? "text-electric" : "text-muted-foreground"}`}>
               {isMyTurn ? "Your Turn!" : "On the Clock"}
             </div>
-            <div className="text-sm font-bold">{currentDraftSlot.team.name}</div>
+            <div className="text-sm font-bold">
+              {currentDraftSlotOwnerName ?? currentDraftSlot.team.name}
+            </div>
+            {currentDraftSlotOwnerName && (
+              <div className="text-xs text-muted-foreground">{currentDraftSlot.team.name}</div>
+            )}
           </div>
           {isPaused ? (
             <span className="text-sm font-bold text-amber-accent">Paused</span>
@@ -1452,8 +1461,11 @@ export default function DraftRoom() {
                             {isMyTurn ? "Your Turn!" : "On the Clock"}
                           </div>
                           <div className={`text-sm font-bold ${isMyTurn ? "text-foreground" : "text-muted-foreground"}`}>
-                            {currentDraftSlot.team.name}
+                            {currentDraftSlotOwnerName ?? currentDraftSlot.team.name}
                           </div>
+                          {currentDraftSlotOwnerName && (
+                            <div className="text-xs text-muted-foreground">{currentDraftSlot.team.name}</div>
+                          )}
                         </div>
                         {isPaused ? (
                           <span className="text-sm font-bold text-amber-accent">Paused</span>