Fix context menu missing.

app/components/draft/AvailableParticipantsSection.tsx

@@ -153,6 +153,10 @@ interface AvailableParticipantsSectionProps {
     currentPick: number;
     currentRound: number;
     ownerMap?: Record<string, string>;
+    onForceAutopick?: (pickNumber: number, teamId: string) => void;
+    onForceManualPickOpen?: (pickNumber: number, teamId: string) => void;
+    onReplacePick?: (pickNumber: number, teamId: string) => void;
+    onRollbackToPick?: (pickNumber: number) => void;
   };
   searchQuery: string;
   sportFilters: string[];

app/components/draft/DraftGridSection.tsx

@@ -229,6 +229,7 @@ export const DraftGridSection = memo(function DraftGridSection({
                               state={cellState}
                               pick={pickData}
                               coronaState={pendingCorona}
+                              className="cursor-context-menu"
                             >
                               {mobileButtons}
                             </DraftPickCell>
@@ -267,6 +268,7 @@ export const DraftGridSection = memo(function DraftGridSection({
                               state={cellState}
                               pick={pickData}
                               coronaState={pendingCorona}
+                              className="cursor-context-menu"
                             >
                               {mobileButtons}
                             </DraftPickCell>

app/components/draft/DraftPickCell.tsx

@@ -1,4 +1,4 @@
-import type { CSSProperties, ReactNode } from "react";
+import { forwardRef, type CSSProperties, type ComponentPropsWithoutRef } from "react";
 import { cn } from "~/lib/utils";
 
 export type CoronaState =
@@ -13,7 +13,7 @@ type CoronaVariant =
   | "amber"
   | "coral";
 
-interface DraftPickCellProps {
+type DraftPickCellProps = ComponentPropsWithoutRef<"div"> & {
   pickNumber: number;
   round: number;
   pickInRound: number;
@@ -24,9 +24,7 @@ interface DraftPickCellProps {
   };
   corona?: CoronaVariant;
   coronaState?: CoronaState;
-  className?: string;
-  children?: ReactNode;
-}
+};
 
 const coronaClasses: Record<CoronaVariant, string> = {
   gradient: "[background:linear-gradient(to_bottom,#adf661,#2ce1c1)]",
@@ -50,7 +48,8 @@ function getCoronaStyle(cs: CoronaState): CSSProperties {
   }
 }
 
-export function DraftPickCell({
+export const DraftPickCell = forwardRef<HTMLDivElement, DraftPickCellProps>(
+function DraftPickCell({
   pickNumber,
   round,
   pickInRound,
@@ -60,16 +59,19 @@ export function DraftPickCell({
   coronaState,
   className,
   children,
-}: DraftPickCellProps) {
+  ...rest
+}, ref) {
   const showCorona = state === "picked" || (state === "upcoming" && !!coronaState);
   const isCurrent = state === "current";
 
   return (
     <div
+      ref={ref}
       className={cn(
         "relative flex-1 min-w-32 overflow-hidden",
         className,
       )}
+      {...rest}
     >
       {isCurrent ? (
         <div className="absolute inset-0 rounded-lg [background:linear-gradient(to_bottom,#adf661,#2ce1c1)] animate-pulse-gradient" />
@@ -126,4 +128,4 @@ export function DraftPickCell({
       </div>
     </div>
   );
-}
+});

app/components/draft/MiniDraftGrid.tsx

@@ -1,5 +1,11 @@
 import { memo, useMemo } from "react";
 import { DraftPickCell } from "~/components/draft/DraftPickCell";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "~/components/ui/context-menu";
 
 interface MiniDraftGridProps {
   draftSlots: Array<{
@@ -30,6 +36,10 @@ interface MiniDraftGridProps {
   currentPick: number;
   currentRound: number;
   ownerMap?: Record<string, string>;
+  onForceAutopick?: (pickNumber: number, teamId: string) => void;
+  onForceManualPickOpen?: (pickNumber: number, teamId: string) => void;
+  onReplacePick?: (pickNumber: number, teamId: string) => void;
+  onRollbackToPick?: (pickNumber: number) => void;
 }
 
 export const MiniDraftGrid = memo(function MiniDraftGrid({
@@ -38,6 +48,10 @@ export const MiniDraftGrid = memo(function MiniDraftGrid({
   currentPick,
   currentRound,
   ownerMap = {},
+  onForceAutopick,
+  onForceManualPickOpen,
+  onReplacePick,
+  onRollbackToPick,
 }: MiniDraftGridProps) {
   const roundsToShow = useMemo(() => {
     if (currentRound <= 1) return [0, 1];
@@ -82,6 +96,73 @@ export const MiniDraftGrid = memo(function MiniDraftGrid({
                     : isCurrent
                       ? "current"
                       : "upcoming";
+                  const pickData = cell.pick
+                    ? {
+                        participant: { name: cell.pick.participant.name },
+                        sport: { name: cell.pick.sport.name },
+                      }
+                    : undefined;
+
+                  if (!isPicked && isCurrent && (onForceAutopick || onForceManualPickOpen)) {
+                    return (
+                      <ContextMenu key={cell.pickNumber}>
+                        <ContextMenuTrigger asChild>
+                          <DraftPickCell
+                            pickNumber={cell.pickNumber}
+                            round={cell.round}
+                            pickInRound={cell.pickInRound}
+                            state={cellState}
+                            pick={pickData}
+                            className="[&>div]:h-10 cursor-context-menu"
+                          />
+                        </ContextMenuTrigger>
+                        <ContextMenuContent>
+                          {onForceAutopick && (
+                            <ContextMenuItem onClick={() => onForceAutopick(cell.pickNumber, cell.teamId)}>
+                              Force Auto Pick
+                            </ContextMenuItem>
+                          )}
+                          {onForceManualPickOpen && (
+                            <ContextMenuItem onClick={() => onForceManualPickOpen(cell.pickNumber, cell.teamId)}>
+                              Force Manual Pick
+                            </ContextMenuItem>
+                          )}
+                        </ContextMenuContent>
+                      </ContextMenu>
+                    );
+                  }
+
+                  if (isPicked && (onReplacePick || onRollbackToPick)) {
+                    return (
+                      <ContextMenu key={cell.pickNumber}>
+                        <ContextMenuTrigger asChild>
+                          <DraftPickCell
+                            pickNumber={cell.pickNumber}
+                            round={cell.round}
+                            pickInRound={cell.pickInRound}
+                            state={cellState}
+                            pick={pickData}
+                            className="[&>div]:h-10 cursor-context-menu"
+                          />
+                        </ContextMenuTrigger>
+                        <ContextMenuContent>
+                          {onReplacePick && (
+                            <ContextMenuItem onClick={() => onReplacePick(cell.pickNumber, cell.teamId)}>
+                              Replace Pick
+                            </ContextMenuItem>
+                          )}
+                          {onRollbackToPick && (
+                            <ContextMenuItem
+                              onClick={() => onRollbackToPick(cell.pickNumber)}
+                              className="text-destructive focus:text-destructive"
+                            >
+                              Roll Back to This Pick
+                            </ContextMenuItem>
+                          )}
+                        </ContextMenuContent>
+                      </ContextMenu>
+                    );
+                  }
 
                   return (
                     <DraftPickCell
@@ -90,14 +171,7 @@ export const MiniDraftGrid = memo(function MiniDraftGrid({
                       round={cell.round}
                       pickInRound={cell.pickInRound}
                       state={cellState}
-                      pick={
-                        cell.pick
-                          ? {
-                              participant: { name: cell.pick.participant.name },
-                              sport: { name: cell.pick.sport.name },
-                            }
-                          : undefined
-                      }
+                      pick={pickData}
                       className="[&>div]:h-10"
                     />
                   );

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

@@ -1511,6 +1511,10 @@ export default function DraftRoom() {
       currentPick,
       currentRound,
       ownerMap,
+      onForceAutopick: isCommissioner ? handleForceAutopick : undefined,
+      onForceManualPickOpen: isCommissioner ? handleForceManualPickOpen : undefined,
+      onReplacePick: isCommissioner ? handleReplacePickOpen : undefined,
+      onRollbackToPick: isCommissioner && !isDraftComplete ? handleRollbackToPick : undefined,
     },
     searchQuery,
     sportFilters,