Create bracket look.

app/components/scoring/BracketTreeView.tsx

@@ -0,0 +1,525 @@
+import { useState } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Button } from "~/components/ui/button";
+
+export interface BracketMatch {
+  id: string;
+  round: string;
+  matchNumber: number;
+  participant1Id: string | null;
+  participant2Id: string | null;
+  winnerId: string | null;
+  loserId: string | null;
+  isComplete: boolean;
+  participant1Score: string | null;
+  participant2Score: string | null;
+  isScoring?: boolean;
+  participant1?: { id: string; name: string } | null;
+  participant2?: { id: string; name: string } | null;
+  winner?: { id: string; name: string } | null;
+  loser?: { id: string; name: string } | null;
+}
+
+export interface BracketOwnership {
+  participantId: string;
+  teamName: string;
+  teamId: string;
+  ownerName?: string;
+}
+
+const COLUMN_WIDTH = 152;
+const CONNECTOR_WIDTH = 24;
+const LABEL_HEIGHT = 32;
+const CARD_GAP = 14;         // vertical gap between cards (split top/bottom)
+const DESIRED_CARD_HEIGHT = 112; // target card height — tall enough to show owner info
+const MAX_CARD_HEIGHT = 140;    // cap for sparse later rounds
+
+// Avatar color palette (matches TeamOwnerBadge)
+const AVATAR_COLORS = ["#adf661", "#2ce1c1", "#8b5cf6", "#f59e0b", "#ef4444", "#3b82f6"];
+function hashName(name: string): number {
+  let h = 0;
+  for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) & 0xffff;
+  return h;
+}
+function avatarColor(name: string) {
+  return AVATAR_COLORS[hashName(name) % AVATAR_COLORS.length];
+}
+
+function formatScore(score: string | null): string | null {
+  if (!score) return null;
+  const n = parseFloat(score);
+  if (isNaN(n)) return null;
+  return Number.isInteger(n) ? String(n) : n.toFixed(1);
+}
+
+// ─── Match Slot ──────────────────────────────────────────────────────────────
+
+interface ParticipantRowProps {
+  name: string | null;
+  isTbd: boolean;
+  isWinner: boolean;
+  isLoser: boolean;
+  isOwned: boolean;
+  ownership: BracketOwnership | null;
+  score: string | null;
+  rowHeight: number;
+  showScore: boolean;
+  showOwner: boolean;
+  showText: boolean;
+}
+
+function ParticipantRow({
+  name,
+  isTbd,
+  isWinner,
+  isLoser,
+  isOwned,
+  ownership,
+  score,
+  rowHeight,
+  showScore,
+  showOwner,
+  showText,
+}: ParticipantRowProps) {
+  const formattedScore = formatScore(score);
+
+  return (
+    <div
+      className="relative flex items-center overflow-hidden"
+      style={{ height: rowHeight }}
+    >
+      {showText && (
+        <div className={[
+          "flex items-center flex-1 min-w-0 gap-1 px-2 pl-[7px] ml-2",
+          isWinner ? "border border-white/15 bg-white/5 rounded-md mr-2 my-0.5 self-stretch py-1" : "",
+        ].filter(Boolean).join(" ")}>
+          {/* Electric dot for user's pick (when not winner) */}
+          {isOwned && !isWinner && showText && (
+            <span
+              className="shrink-0 rounded-full"
+              style={{ width: 5, height: 5, background: "#2ce1c1" }}
+            />
+          )}
+
+          <div className="flex-1 min-w-0">
+            <span
+              className={[
+                "text-[13px] leading-tight block truncate",
+                isTbd ? "text-muted-foreground/50 italic" : "",
+                isLoser ? "text-muted-foreground line-through" : "",
+                isOwned && !isLoser ? "text-electric font-medium" : "",
+                isWinner ? "font-semibold" : "",
+              ]
+                .filter(Boolean)
+                .join(" ")}
+            >
+              {name ?? "TBD"}
+            </span>
+
+            {/* Owner info row */}
+            {showOwner && !isTbd && ownership && (
+              <div className="flex items-center gap-1 mt-0.5">
+                <div
+                  className="shrink-0 rounded-[2px] flex items-center justify-center text-[8px] font-bold"
+                  style={{
+                    width: 14,
+                    height: 14,
+                    background: "#000",
+                    color: avatarColor(ownership.teamName),
+                  }}
+                >
+                  {ownership.teamName
+                    .split(/\s+/)
+                    .slice(0, 2)
+                    .map((w) => w[0]?.toUpperCase() ?? "")
+                    .join("")}
+                </div>
+                <span className="text-[10px] text-muted-foreground truncate">
+                  {ownership.ownerName ?? ownership.teamName}
+                </span>
+              </div>
+            )}
+          </div>
+
+          {/* Score */}
+          {showScore && formattedScore && (
+            <span
+              className={[
+                "shrink-0 text-xs tabular-nums font-medium ml-auto pl-1",
+                isLoser ? "text-muted-foreground/60" : "",
+                isWinner ? "text-yellow-400" : "",
+              ]
+                .filter(Boolean)
+                .join(" ")}
+            >
+              {formattedScore}
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface BracketMatchSlotProps {
+  match: BracketMatch;
+  slotHeight: number;
+  ownershipMap: Map<string, BracketOwnership>;
+  userParticipantIds: Set<string>;
+}
+
+function BracketMatchSlot({
+  match,
+  slotHeight,
+  ownershipMap,
+  userParticipantIds,
+}: BracketMatchSlotProps) {
+  const rowHeight = slotHeight / 2;
+  const showText = rowHeight >= 10;
+  const showScore = rowHeight >= 20 && (!!match.participant1Score || match.isComplete);
+  const showOwner = rowHeight >= 36;
+
+  const p1Id = match.participant1Id;
+  const p2Id = match.participant2Id;
+  const p1IsWinner = match.isComplete && match.winnerId === p1Id;
+  const p2IsWinner = match.isComplete && match.winnerId === p2Id;
+  const p1IsLoser = match.isComplete && match.loserId === p1Id;
+  const p2IsLoser = match.isComplete && match.loserId === p2Id;
+  const p1IsOwned = !!(p1Id && userParticipantIds.has(p1Id));
+  const p2IsOwned = !!(p2Id && userParticipantIds.has(p2Id));
+  const matchHasOwned = p1IsOwned || p2IsOwned;
+  const isTbd1 = !p1Id;
+  const isTbd2 = !p2Id;
+
+  const p1Ownership = p1Id ? ownershipMap.get(p1Id) ?? null : null;
+  const p2Ownership = p2Id ? ownershipMap.get(p2Id) ?? null : null;
+
+  // Corona glow: gradient for complete matches, electric for user's picks, subtle white for pending
+  const coronaStyle: React.CSSProperties = match.isComplete
+    ? { background: "linear-gradient(to bottom, #adf661, #2ce1c1)" }
+    : matchHasOwned
+    ? { background: "rgba(44, 225, 193, 0.4)" }
+    : { background: "rgba(255, 255, 255, 0.07)" };
+
+  const INSET = Math.max(1, Math.min(2, Math.floor(slotHeight / 20)));
+
+  return (
+    <div className="relative overflow-hidden" style={{ height: slotHeight }}>
+      {/* Corona layer — left-2 matches card borderRadius to prevent gradient bleed at left corners */}
+      <div className="absolute left-2 right-0 rounded-lg" style={{ ...coronaStyle, top: INSET - 2, bottom: INSET - 2 }} />
+
+      {/* Inner card, inset on right to expose corona glow strip */}
+      <div
+        className="absolute flex flex-col overflow-hidden"
+        style={{
+          top: 0,
+          right: INSET + 2,
+          bottom: 0,
+          left: 0,
+          borderRadius: 8,
+          background: "var(--color-muted)",
+          paddingTop: INSET,
+          paddingBottom: INSET,
+        }}
+      >
+        <ParticipantRow
+          name={match.participant1?.name ?? null}
+          isTbd={isTbd1}
+          isWinner={p1IsWinner}
+          isLoser={p1IsLoser}
+          isOwned={p1IsOwned}
+          ownership={showOwner ? p1Ownership : null}
+          score={match.participant1Score}
+          rowHeight={rowHeight - INSET}
+          showScore={showScore}
+          showOwner={showOwner}
+          showText={showText}
+        />
+        <ParticipantRow
+          name={match.participant2?.name ?? null}
+          isTbd={isTbd2}
+          isWinner={p2IsWinner}
+          isLoser={p2IsLoser}
+          isOwned={p2IsOwned}
+          ownership={showOwner ? p2Ownership : null}
+          score={match.participant2Score}
+          rowHeight={rowHeight - INSET}
+          showScore={showScore}
+          showOwner={showOwner}
+          showText={showText}
+        />
+      </div>
+    </div>
+  );
+}
+
+// ─── Per-pair connector column ────────────────────────────────────────────────
+
+interface ConnectorColumnProps {
+  currentMatches: BracketMatch[];
+  nextMatches: BracketMatch[];
+  bracketHeight: number;
+}
+
+function ConnectorColumn({ currentMatches, nextMatches, bracketHeight }: ConnectorColumnProps) {
+  const mid = CONNECTOR_WIDTH / 2;
+  const paths: string[] = [];
+
+  if (nextMatches.length === Math.ceil(currentMatches.length / 2)) {
+    const currentSlotH = bracketHeight / Math.max(currentMatches.length, 1);
+    const nextSlotH = bracketHeight / Math.max(nextMatches.length, 1);
+
+    for (let k = 0; k < nextMatches.length; k++) {
+      const topY = (2 * k) * currentSlotH + currentSlotH / 2;
+      const midY = k * nextSlotH + nextSlotH / 2;
+      const botIdx = 2 * k + 1;
+
+      if (botIdx < currentMatches.length) {
+        const botY = botIdx * currentSlotH + currentSlotH / 2;
+        // U-shape from two source midpoints; horizontal out to next column
+        paths.push(`M 0 ${topY} H ${mid} V ${botY} H 0`);
+        paths.push(`M ${mid} ${midY} H ${CONNECTOR_WIDTH}`);
+      } else {
+        // Odd last match: straight line through
+        paths.push(`M 0 ${topY} H ${CONNECTOR_WIDTH}`);
+      }
+    }
+  }
+
+  return (
+    <div style={{ flex: `0 0 ${CONNECTOR_WIDTH}px`, position: "relative" }}>
+      <svg
+        style={{
+          position: "absolute",
+          top: LABEL_HEIGHT,
+          left: 0,
+          width: CONNECTOR_WIDTH,
+          height: bracketHeight,
+          overflow: "visible",
+          pointerEvents: "none",
+        }}
+      >
+        {paths.map((d) => (
+          <path key={d} d={d} fill="none" stroke="hsl(var(--border))" strokeWidth={1} />
+        ))}
+      </svg>
+    </div>
+  );
+}
+
+// ─── Tree columns (shared by full + paginated) ───────────────────────────────
+
+interface TreeColumnsProps {
+  visibleRounds: string[];
+  matchesByRound: Map<string, BracketMatch[]>;
+  ownershipMap: Map<string, BracketOwnership>;
+  userParticipantIds: Set<string>;
+  bracketHeight: number;
+}
+
+function TreeColumns({
+  visibleRounds,
+  matchesByRound,
+  ownershipMap,
+  userParticipantIds,
+  bracketHeight,
+}: TreeColumnsProps) {
+  return (
+    <div style={{ display: "flex", width: "100%", height: bracketHeight + LABEL_HEIGHT }}>
+      {visibleRounds.map((round, ri) => {
+        const roundMatches = matchesByRound.get(round) ?? [];
+        const slotHeight = bracketHeight / Math.max(roundMatches.length, 1);
+        const cardHeight = Math.min(slotHeight - CARD_GAP, MAX_CARD_HEIGHT);
+        const cardTop = (slotHeight - cardHeight) / 2;
+        const nextRound = ri < visibleRounds.length - 1 ? visibleRounds[ri + 1] : null;
+        const nextMatches = nextRound ? (matchesByRound.get(nextRound) ?? []) : [];
+
+        return (
+          <div key={round} style={{ display: "contents" }}>
+            {/* Round column */}
+            <div style={{ flex: "1 1 0", minWidth: COLUMN_WIDTH, position: "relative" }}>
+              <div
+                className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground truncate text-center"
+                style={{ height: LABEL_HEIGHT, display: "flex", alignItems: "center", justifyContent: "center" }}
+              >
+                {round}
+              </div>
+
+              <div style={{ position: "relative", height: bracketHeight }}>
+                {roundMatches.map((match, matchIdx) => (
+                  <div
+                    key={match.id}
+                    style={{
+                      position: "absolute",
+                      top: matchIdx * slotHeight + cardTop,
+                      left: 0,
+                      right: 0,
+                      height: cardHeight,
+                    }}
+                  >
+                    <BracketMatchSlot
+                      match={match}
+                      slotHeight={cardHeight}
+                      ownershipMap={ownershipMap}
+                      userParticipantIds={userParticipantIds}
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Connector between this column and the next */}
+            {nextRound && (
+              <ConnectorColumn
+                currentMatches={roundMatches}
+                nextMatches={nextMatches}
+                bracketHeight={bracketHeight}
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// ─── Full desktop tree ────────────────────────────────────────────────────────
+
+interface BracketTreeViewProps {
+  rounds: string[];
+  matchesByRound: Map<string, BracketMatch[]>;
+  ownershipMap: Map<string, BracketOwnership>;
+  userParticipantIds: Set<string>;
+}
+
+export function BracketTreeView({
+  rounds,
+  matchesByRound,
+  ownershipMap,
+  userParticipantIds,
+}: BracketTreeViewProps) {
+  const maxMatches = Math.max(...rounds.map((r) => matchesByRound.get(r)?.length ?? 0), 1);
+  const bracketHeight = maxMatches * (DESIRED_CARD_HEIGHT + CARD_GAP);
+  const minWidth = rounds.length * COLUMN_WIDTH + Math.max(0, rounds.length - 1) * CONNECTOR_WIDTH;
+
+  return (
+    <div
+      className="w-full overflow-x-auto"
+      style={{ minHeight: bracketHeight + LABEL_HEIGHT + 2 }}
+    >
+      <div style={{ minWidth }}>
+        <TreeColumns
+          visibleRounds={rounds}
+          matchesByRound={matchesByRound}
+          ownershipMap={ownershipMap}
+          userParticipantIds={userParticipantIds}
+          bracketHeight={bracketHeight}
+        />
+      </div>
+    </div>
+  );
+}
+
+// ─── Paginated mobile tree ────────────────────────────────────────────────────
+
+interface BracketTreePaginatedProps {
+  rounds: string[];
+  matchesByRound: Map<string, BracketMatch[]>;
+  ownershipMap: Map<string, BracketOwnership>;
+  userParticipantIds: Set<string>;
+  /** Index of the first scoring round — default page starts here */
+  firstScoringRoundIdx?: number;
+}
+
+export function BracketTreePaginated({
+  rounds,
+  matchesByRound,
+  ownershipMap,
+  userParticipantIds,
+  firstScoringRoundIdx,
+}: BracketTreePaginatedProps) {
+  // Default to showing around the first scoring round
+  const defaultPage = Math.max(
+    0,
+    Math.min(
+      firstScoringRoundIdx !== undefined
+        ? Math.max(0, firstScoringRoundIdx - 1)
+        : rounds.length - 2,
+      rounds.length - 2,
+    ),
+  );
+  const [pageStart, setPageStart] = useState(defaultPage);
+
+  const visibleRounds = rounds.slice(pageStart, pageStart + 2);
+  const canGoLeft = pageStart > 0;
+  const canGoRight = pageStart + 2 < rounds.length;
+
+  const maxMatchesInView = Math.max(...visibleRounds.map((r) => matchesByRound.get(r)?.length ?? 0), 1);
+  const bracketHeight = maxMatchesInView * (DESIRED_CARD_HEIGHT + CARD_GAP);
+
+  return (
+    <div>
+      {/* Round tab navigation */}
+      <div className="flex items-center gap-1 mb-3 overflow-x-auto pb-1">
+        {rounds.map((round, ri) => {
+          const isActive = ri >= pageStart && ri < pageStart + 2;
+          return (
+            <button
+              key={round}
+              onClick={() => setPageStart(Math.min(ri, rounds.length - 2))}
+              className={[
+                "shrink-0 px-2 py-1 rounded text-[10px] font-medium uppercase tracking-wide transition-colors",
+                isActive
+                  ? "bg-electric/15 text-electric border border-electric/30"
+                  : "text-muted-foreground border border-transparent hover:text-foreground hover:border-border",
+              ].join(" ")}
+            >
+              {round}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Bracket columns */}
+      <div style={{ minHeight: bracketHeight + LABEL_HEIGHT + 2 }}>
+        <TreeColumns
+          visibleRounds={visibleRounds}
+          matchesByRound={matchesByRound}
+          ownershipMap={ownershipMap}
+          userParticipantIds={userParticipantIds}
+          bracketHeight={bracketHeight}
+        />
+      </div>
+
+      {/* Prev / Next navigation */}
+      <div className="flex items-center justify-between mt-3">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => setPageStart((p) => Math.max(0, p - 1))}
+          disabled={!canGoLeft}
+          className="gap-1 text-xs"
+        >
+          <ChevronLeft className="h-3 w-3" />
+          {canGoLeft ? rounds[pageStart - 1] : "—"}
+        </Button>
+
+        <span className="text-xs text-muted-foreground">
+          {visibleRounds[0]}
+          {visibleRounds[1] ? ` → ${visibleRounds[1]}` : ""}
+        </span>
+
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => setPageStart((p) => Math.min(rounds.length - 2, p + 1))}
+          disabled={!canGoRight}
+          className="gap-1 text-xs"
+        >
+          {canGoRight ? rounds[pageStart + 2] : "—"}
+          <ChevronRight className="h-3 w-3" />
+        </Button>
+      </div>
+    </div>
+  );
+}

app/components/scoring/PlayoffBracket.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { Badge } from "~/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
 import {
@@ -8,15 +9,22 @@ import {
   TableHeader,
   TableRow,
 } from "~/components/ui/table";
-import { Trophy, Star } from "lucide-react";
+import { Button } from "~/components/ui/button";
+import { Trophy, Star, Columns2, LayoutList } from "lucide-react";
 import { TeamOwnerBadge } from "~/components/ui/team-owner-badge";
+import {
+  BracketTreeView,
+  BracketTreePaginated,
+  type BracketMatch,
+  type BracketOwnership,
+} from "./BracketTreeView";
 
 interface Participant {
   id: string;
   name: string;
 }
 
-interface Match {
+export interface Match {
   id: string;
   round: string;
   matchNumber: number;
@@ -27,13 +35,14 @@ interface Match {
   isComplete: boolean;
   participant1Score: string | null;
   participant2Score: string | null;
+  isScoring?: boolean;
   participant1?: Participant | null;
   participant2?: Participant | null;
   winner?: Participant | null;
   loser?: Participant | null;
 }
 
-interface TeamOwnership {
+export interface TeamOwnership {
   participantId: string;
   teamName: string;
   teamId: string;
@@ -43,9 +52,9 @@ interface TeamOwnership {
 interface PlayoffBracketProps {
   matches: Match[];
   rounds: string[]; // Ordered list of round names (earliest first)
-  preEliminatedParticipants?: { id: string; name: string }[]; // Eliminated before bracket (e.g. group stage)
+  preEliminatedParticipants?: { id: string; name: string }[];
-  participantPoints?: { participantId: string; points: number }[]; // Computed fantasy points per participant
+  participantPoints?: { participantId: string; points: number }[];
-  partialScoreParticipantIds?: string[]; // Still-competing participants with provisional floor scores
+  partialScoreParticipantIds?: string[];
   teamOwnerships?: TeamOwnership[];
   userParticipantIds?: string[];
   showOwnership?: boolean;
@@ -164,6 +173,25 @@ export function computeEliminatedByRound(
   return result;
 }
 
+/** Returns true if every adjacent round pair has exactly ceil(prev/2) matches — pure single-elimination. */
+function isSingleElimination(matchesByRound: Map<string, Match[]>, rounds: string[]): boolean {
+  if (rounds.length < 2) return true;
+  for (let i = 1; i < rounds.length; i++) {
+    const prev = matchesByRound.get(rounds[i - 1])?.length ?? 0;
+    const curr = matchesByRound.get(rounds[i])?.length ?? 0;
+    if (curr !== Math.ceil(prev / 2)) return false;
+  }
+  return true;
+}
+
+/** Find the index of the first round that has scoring matches. */
+function firstScoringRoundIdx(matchesByRound: Map<string, Match[]>, rounds: string[]): number {
+  for (let i = 0; i < rounds.length; i++) {
+    if (matchesByRound.get(rounds[i])?.some((m) => m.isScoring)) return i;
+  }
+  return 0;
+}
+
 export function PlayoffBracket({
   matches,
   rounds,
@@ -181,21 +209,23 @@ export function PlayoffBracket({
   teamOwnerships.forEach((o) => ownershipMap.set(o.participantId, o));
   const pointsMap = new Map(participantPoints.map((p) => [p.participantId, p.points]));
 
-  // Group matches once; reused for feeder map and rendering
   const matchesByRound = groupMatchesByRound(matches);
   const feederMap = buildFeederMap(matchesByRound, rounds);
 
+  // Determine if the bracket supports the visual tree view
+  const supportsTreeView = matches.length > 0 && isSingleElimination(matchesByRound, rounds);
+  const scoringRoundIdx = firstScoringRoundIdx(matchesByRound, rounds);
+
+  const [viewMode, setViewMode] = useState<"tree" | "cards">("tree");
+
   const getTbdLabel = (round: string, matchNumber: number, slot: "p1" | "p2") => {
     const feeder = feederMap.get(`${round}:${matchNumber}:${slot}`);
     if (!feeder) return "TBD";
     return `Winner of ${feeder.round} M${feeder.matchNumber}`;
   };
 
-  // Build elimination rankings: collect losers per round, then assign rank labels.
+  // Build elimination rankings
-  // In double-chance brackets (e.g. AFL), a participant may lose one round but
-  // win a later one — only count them as eliminated at their FINAL losing match.
   const losersByRound = new Map<string, Array<{ participant: Participant; score: string | null; ownership: TeamOwnership | null }>>();
-  let _hasScore = false;
   let bracketWinner: Participant | null = null;
 
   const lastRound = rounds[rounds.length - 1];
@@ -204,7 +234,6 @@ export function PlayoffBracket({
     : null;
   if (finalMatch?.winner) bracketWinner = finalMatch.winner;
 
-  // Compute which participants are eliminated in which round, handling double-chance.
   const eliminatedByRound = computeEliminatedByRound(matches, rounds);
 
   for (const match of matches) {
@@ -215,7 +244,6 @@ export function PlayoffBracket({
       match.loserId === match.participant1Id
         ? match.participant1Score
         : match.participant2Score;
-    if (loserScore) _hasScore = true;
     if (!losersByRound.has(match.round)) losersByRound.set(match.round, []);
     losersByRound.get(match.round)?.push({
       participant: match.loser,
@@ -224,17 +252,13 @@ export function PlayoffBracket({
     });
   }
 
-  // Walk rounds latest→earliest to assign rank labels.
-  // Use TOTAL match count per round (not eliminated-so-far) so that partial scoring
-  // shows the correct eventual rank. E.g. R64 losers in NCAAM 68 always show T33
-  // even while other R64 games are still pending.
   const allBracketParticipantIds = new Set<string>();
   for (const match of matches) {
     if (match.participant1Id) allBracketParticipantIds.add(match.participant1Id);
     if (match.participant2Id) allBracketParticipantIds.add(match.participant2Id);
   }
   const rankedEntries: EliminatedEntry[] = [];
-  let nextRank = 2; // rank 1 = champion (even if not yet decided)
+  let nextRank = 2;
   for (let ri = rounds.length - 1; ri >= 0; ri--) {
     const roundName = rounds[ri];
     const roundLosers = losersByRound.get(roundName) || [];
@@ -248,7 +272,6 @@ export function PlayoffBracket({
     nextRank += totalMatchesInRound;
   }
 
-  // Exclude pre-eliminated participants already ranked via bracket match losers
   const rankedParticipantIds = new Set(rankedEntries.map((e) => e.participant.id));
   if (bracketWinner) rankedParticipantIds.add(bracketWinner.id);
   const filteredPreEliminated = preEliminatedParticipants.filter(
@@ -257,7 +280,6 @@ export function PlayoffBracket({
 
   const showRankings = rankedEntries.length > 0 || bracketWinner !== null || filteredPreEliminated.length > 0;
 
-  // Build participant lookup from match data for the "In Contention" table
   const participantMap = new Map<string, Participant>();
   for (const match of matches) {
     if (match.participant1) participantMap.set(match.participant1.id, match.participant1);
@@ -268,21 +290,46 @@ export function PlayoffBracket({
     .map((id) => participantMap.get(id))
     .filter((p): p is Participant => p !== undefined);
 
-  // Hide participants with 0 points that nobody drafted — they add noise without value.
   const isDraftedOrScoring = (participantId: string) =>
     ownershipMap.has(participantId) || (pointsMap.get(participantId) ?? 0) > 0;
 
-  // Hoist winner row lookups so we don't need an IIFE in JSX
   const winnerIsOwned = bracketWinner ? userParticipantSet.has(bracketWinner.id) : false;
   const winnerOwnership = bracketWinner ? ownershipMap.get(bracketWinner.id) : undefined;
   const winnerPts = bracketWinner ? pointsMap.get(bracketWinner.id) : undefined;
 
   return (
     <div className="space-y-6">
-      <div>
+      {/* Header */}
-        <h2 className="text-xl font-semibold">{title}</h2>
+      <div className="flex items-center justify-between gap-4">
-        {description && (
+        <div>
-          <p className="text-sm text-muted-foreground mt-1">{description}</p>
+          <h2 className="text-xl font-semibold">{title}</h2>
+          {description && (
+            <p className="text-sm text-muted-foreground mt-1">{description}</p>
+          )}
+        </div>
+
+        {/* View toggle — desktop only, when tree view is supported */}
+        {supportsTreeView && (
+          <div className="hidden md:flex items-center gap-1 rounded-md border border-border p-0.5">
+            <Button
+              variant="ghost"
+              size="sm"
+              className={`h-7 px-2 ${viewMode === "tree" ? "bg-muted" : ""}`}
+              onClick={() => setViewMode("tree")}
+              title="Bracket tree"
+            >
+              <Columns2 className="h-3.5 w-3.5" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className={`h-7 px-2 ${viewMode === "cards" ? "bg-muted" : ""}`}
+              onClick={() => setViewMode("cards")}
+              title="Card list"
+            >
+              <LayoutList className="h-3.5 w-3.5" />
+            </Button>
+          </div>
         )}
       </div>
 
@@ -295,176 +342,56 @@ export function PlayoffBracket({
         </div>
       ) : (
         <div className="space-y-8">
-          {rounds.map((round) => {
+          {/* ── Desktop: visual tree or card list ── */}
-            const roundMatches = matchesByRound.get(round) || [];
+          {supportsTreeView && viewMode === "tree" ? (
-            if (roundMatches.length === 0) return null;
+            <div className="hidden md:block">
+              <BracketTreeView
+                rounds={rounds}
+                matchesByRound={matchesByRound as Map<string, BracketMatch[]>}
+                ownershipMap={ownershipMap as Map<string, BracketOwnership>}
+                userParticipantIds={userParticipantSet}
+              />
+            </div>
+          ) : (
+            <div className="hidden md:block">
+              <CardListView
+                rounds={rounds}
+                matchesByRound={matchesByRound}
 
-            return (
+                ownershipMap={ownershipMap}
-              <div key={round}>
+                userParticipantSet={userParticipantSet}
-                <div className="flex items-center gap-2 mb-3">
+                showOwnership={showOwnership}
-                  <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                getTbdLabel={getTbdLabel}
-                    {round}
+              />
-                  </h3>
+            </div>
-                  <div className="flex-1 border-t border-border" />
+          )}
-                  <span className="text-xs text-muted-foreground">
-                    {roundMatches.length}{" "}
-                    {roundMatches.length === 1 ? "match" : "matches"}
-                  </span>
-                </div>
 
-                <div className="grid md:grid-cols-2 gap-2">
+          {/* ── Mobile: paginated tree or card list ── */}
-                  {roundMatches.map((match) => {
+          {supportsTreeView ? (
-                    const p1IsWinner =
+            <div className="md:hidden">
-                      match.isComplete && match.winnerId === match.participant1Id;
+              <BracketTreePaginated
-                    const p2IsWinner =
+                rounds={rounds}
-                      match.isComplete && match.winnerId === match.participant2Id;
+                matchesByRound={matchesByRound as Map<string, BracketMatch[]>}
-                    const p1IsLoser =
+                ownershipMap={ownershipMap as Map<string, BracketOwnership>}
-                      match.isComplete && match.loserId === match.participant1Id;
+                userParticipantIds={userParticipantSet}
-                    const p2IsLoser =
+                firstScoringRoundIdx={scoringRoundIdx}
-                      match.isComplete && match.loserId === match.participant2Id;
+              />
+            </div>
+          ) : (
+            <div className="md:hidden">
+              <CardListView
+                rounds={rounds}
+                matchesByRound={matchesByRound}
 
-                    const p1Name =
+                ownershipMap={ownershipMap}
-                      match.participant1?.name ||
+                userParticipantSet={userParticipantSet}
-                      (match.participant1Id
+                showOwnership={showOwnership}
-                        ? "TBD"
+                getTbdLabel={getTbdLabel}
-                        : getTbdLabel(round, match.matchNumber, "p1"));
+              />
-                    const p2Name =
+            </div>
-                      match.participant2?.name ||
+          )}
-                      (match.participant2Id
-                        ? "TBD"
-                        : getTbdLabel(round, match.matchNumber, "p2"));
 
-                    const p1IsTbd = !match.participant1Id;
+          {/* ── In Contention ── */}
-                    const p2IsTbd = !match.participant2Id;
-
-                    const p1IsOwned = !p1IsTbd && userParticipantSet.has(match.participant1Id ?? "");
-                    const p2IsOwned = !p2IsTbd && userParticipantSet.has(match.participant2Id ?? "");
-                    const matchHasOwned = p1IsOwned || p2IsOwned;
-
-                    const p1Ownership =
-                      showOwnership && match.participant1Id
-                        ? ownershipMap.get(match.participant1Id) || null
-                        : null;
-                    const p2Ownership =
-                      showOwnership && match.participant2Id
-                        ? ownershipMap.get(match.participant2Id) || null
-                        : null;
-
-                    return (
-                      <div
-                        key={match.id}
-                        className={`rounded-lg border bg-card px-3 py-2 ${matchHasOwned ? "border-electric/50" : "border-border"}`}
-                      >
-                        {/* Match label row */}
-                        <div className="flex items-center justify-between mb-2">
-                          <span className="text-xs font-mono text-muted-foreground">
-                            M{match.matchNumber}
-                          </span>
-                          {match.isComplete && (
-                            <Badge variant="secondary" className="text-xs">
-                              Done
-                            </Badge>
-                          )}
-                        </div>
-
-                        {/* Participants: left vs right (stacks on mobile) */}
-                        <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2">
-                          {/* Participant 1 — left-aligned */}
-                          <div className="flex-1 min-w-0">
-                            <div className="flex items-center gap-1">
-                              {p1IsOwned && !p1IsWinner && (
-                                <span className="inline-block w-1.5 h-1.5 rounded-full bg-electric shrink-0" />
-                              )}
-                              {p1IsWinner && (
-                                <Trophy className="h-3.5 w-3.5 text-yellow-500 shrink-0" />
-                              )}
-                              <span
-                                className={[
-                                  "text-sm font-medium truncate",
-                                  p1IsLoser ? "text-muted-foreground line-through" : "",
-                                  p1IsTbd ? "text-muted-foreground italic font-normal" : "",
-                                  p1IsWinner ? "font-semibold" : "",
-                                  p1IsOwned && !p1IsLoser ? "text-electric" : "",
-                                ]
-                                  .filter(Boolean)
-                                  .join(" ")}
-                              >
-                                {p1Name}
-                              </span>
-                            </div>
-                            {!p1IsTbd && p1Ownership && (
-                              <div className="mt-1">
-                                <TeamOwnerBadge
-                                  teamName={p1Ownership.teamName}
-                                  ownerName={p1Ownership.ownerName}
-                                />
-                              </div>
-                            )}
-                          </div>
-
-                          {/* Center: scores + vs */}
-                          <div className="shrink-0 flex sm:flex-col items-center gap-1 sm:gap-0.5 min-w-[2.5rem]">
-                            {match.participant1Score ? (
-                              <>
-                                <span className="text-xs tabular-nums font-medium">
-                                  {parseFloat(match.participant1Score)}
-                                </span>
-                                <span className="text-[10px] text-muted-foreground/60 uppercase tracking-wider">
-                                  vs
-                                </span>
-                                <span className="text-xs tabular-nums font-medium">
-                                  {match.participant2Score
-                                    ? parseFloat(match.participant2Score)
-                                    : "—"}
-                                </span>
-                              </>
-                            ) : (
-                              <span className="text-xs text-muted-foreground">vs</span>
-                            )}
-                          </div>
-
-                          {/* Participant 2 — right-aligned on sm+, left-aligned on mobile */}
-                          <div className="flex-1 min-w-0 flex flex-col sm:items-end">
-                            <div className="flex items-center gap-1 sm:justify-end">
-                              <span
-                                className={[
-                                  "text-sm font-medium truncate",
-                                  p2IsLoser ? "text-muted-foreground line-through" : "",
-                                  p2IsTbd ? "text-muted-foreground italic font-normal" : "",
-                                  p2IsWinner ? "font-semibold" : "",
-                                  p2IsOwned && !p2IsLoser ? "text-electric" : "",
-                                ]
-                                  .filter(Boolean)
-                                  .join(" ")}
-                              >
-                                {p2Name}
-                              </span>
-                              {p2IsWinner && (
-                                <Trophy className="h-3.5 w-3.5 text-yellow-500 shrink-0" />
-                              )}
-                              {p2IsOwned && !p2IsWinner && (
-                                <span className="inline-block w-1.5 h-1.5 rounded-full bg-electric shrink-0" />
-                              )}
-                            </div>
-                            {!p2IsTbd && p2Ownership && (
-                              <div className="mt-1">
-                                <TeamOwnerBadge
-                                  teamName={p2Ownership.teamName}
-                                  ownerName={p2Ownership.ownerName}
-                                />
-                              </div>
-                            )}
-                          </div>
-                        </div>
-                      </div>
-                    );
-                  })}
-                </div>
-              </div>
-            );
-          })}
-
-          {/* In Contention */}
           {activeParticipants.length > 0 && (
             <Card className="border-green-500/30">
               <CardHeader>
@@ -525,7 +452,7 @@ export function PlayoffBracket({
             </Card>
           )}
 
-          {/* Final Rankings / Eliminated Teams */}
+          {/* ── Final Rankings ── */}
           {showRankings && (
             <Card className="border-electric/30">
               <CardHeader>
@@ -661,3 +588,177 @@ export function PlayoffBracket({
     </div>
   );
 }
+
+// ─── Card list view (existing style, used as fallback) ───────────────────────
+
+interface CardListViewProps {
+  rounds: string[];
+  matchesByRound: Map<string, Match[]>;
+  ownershipMap: Map<string, TeamOwnership>;
+  userParticipantSet: Set<string>;
+  showOwnership: boolean;
+  getTbdLabel: (round: string, matchNumber: number, slot: "p1" | "p2") => string;
+}
+
+function CardListView({
+  rounds,
+  matchesByRound,
+  ownershipMap,
+  userParticipantSet,
+  showOwnership,
+  getTbdLabel,
+}: CardListViewProps) {
+  return (
+    <div className="space-y-8">
+      {rounds.map((round) => {
+        const roundMatches = matchesByRound.get(round) || [];
+        if (roundMatches.length === 0) return null;
+
+        return (
+          <div key={round}>
+            <div className="flex items-center gap-2 mb-3">
+              <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                {round}
+              </h3>
+              <div className="flex-1 border-t border-border" />
+              <span className="text-xs text-muted-foreground">
+                {roundMatches.length}{" "}
+                {roundMatches.length === 1 ? "match" : "matches"}
+              </span>
+            </div>
+
+            <div className="grid md:grid-cols-2 gap-2">
+              {roundMatches.map((match) => {
+                const p1IsWinner = match.isComplete && match.winnerId === match.participant1Id;
+                const p2IsWinner = match.isComplete && match.winnerId === match.participant2Id;
+                const p1IsLoser = match.isComplete && match.loserId === match.participant1Id;
+                const p2IsLoser = match.isComplete && match.loserId === match.participant2Id;
+
+                const p1Name =
+                  match.participant1?.name ||
+                  (match.participant1Id ? "TBD" : getTbdLabel(round, match.matchNumber, "p1"));
+                const p2Name =
+                  match.participant2?.name ||
+                  (match.participant2Id ? "TBD" : getTbdLabel(round, match.matchNumber, "p2"));
+
+                const p1IsTbd = !match.participant1Id;
+                const p2IsTbd = !match.participant2Id;
+
+                const p1IsOwned = !p1IsTbd && userParticipantSet.has(match.participant1Id ?? "");
+                const p2IsOwned = !p2IsTbd && userParticipantSet.has(match.participant2Id ?? "");
+                const matchHasOwned = p1IsOwned || p2IsOwned;
+
+                const p1Ownership = showOwnership && match.participant1Id
+                  ? ownershipMap.get(match.participant1Id) || null
+                  : null;
+                const p2Ownership = showOwnership && match.participant2Id
+                  ? ownershipMap.get(match.participant2Id) || null
+                  : null;
+
+                // Corona: gradient for complete, electric for user's pick, subtle for pending
+                const coronaStyle: React.CSSProperties = match.isComplete
+                  ? { background: "linear-gradient(to bottom, #adf661, #2ce1c1)" }
+                  : matchHasOwned
+                  ? { background: "rgba(44, 225, 193, 0.4)" }
+                  : { background: "rgba(255, 255, 255, 0.07)" };
+
+                return (
+                  <div key={match.id} className="relative overflow-hidden rounded-lg">
+                    {/* Corona layer — outer overflow-hidden handles all corner rounding */}
+                    <div className="absolute top-0.5 bottom-0.5 left-0 right-0" style={coronaStyle} />
+                    {/* Inner card — only mr-1 to expose corona on right */}
+                    <div className="relative z-10 bg-muted rounded-l-none rounded-r-[5px] px-3 py-2 mr-1">
+                    <div className="flex items-center justify-between mb-2">
+                      <span className="text-xs font-mono text-muted-foreground">
+                        M{match.matchNumber}
+                      </span>
+                      {match.isComplete && (
+                        <Badge variant="secondary" className="text-xs">Done</Badge>
+                      )}
+                    </div>
+
+                    <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2">
+                      {/* Participant 1 */}
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-1">
+                          {p1IsOwned && !p1IsWinner && (
+                            <span className="inline-block w-1.5 h-1.5 rounded-full bg-electric shrink-0" />
+                          )}
+                          {p1IsWinner && (
+                            <Trophy className="h-3.5 w-3.5 text-yellow-500 shrink-0" />
+                          )}
+                          <span
+                            className={[
+                              "text-sm font-medium truncate",
+                              p1IsLoser ? "text-muted-foreground line-through" : "",
+                              p1IsTbd ? "text-muted-foreground italic font-normal" : "",
+                              p1IsWinner ? "font-semibold" : "",
+                              p1IsOwned && !p1IsLoser ? "text-electric" : "",
+                            ].filter(Boolean).join(" ")}
+                          >
+                            {p1Name}
+                          </span>
+                        </div>
+                        {!p1IsTbd && p1Ownership && (
+                          <div className="mt-1">
+                            <TeamOwnerBadge teamName={p1Ownership.teamName} ownerName={p1Ownership.ownerName} />
+                          </div>
+                        )}
+                      </div>
+
+                      {/* Scores */}
+                      <div className="shrink-0 flex sm:flex-col items-center gap-1 sm:gap-0.5 min-w-[2.5rem]">
+                        {match.participant1Score ? (
+                          <>
+                            <span className="text-xs tabular-nums font-medium">
+                              {parseFloat(match.participant1Score)}
+                            </span>
+                            <span className="text-[10px] text-muted-foreground/60 uppercase tracking-wider">vs</span>
+                            <span className="text-xs tabular-nums font-medium">
+                              {match.participant2Score ? parseFloat(match.participant2Score) : "—"}
+                            </span>
+                          </>
+                        ) : (
+                          <span className="text-xs text-muted-foreground">vs</span>
+                        )}
+                      </div>
+
+                      {/* Participant 2 */}
+                      <div className="flex-1 min-w-0 flex flex-col sm:items-end">
+                        <div className="flex items-center gap-1 sm:justify-end">
+                          <span
+                            className={[
+                              "text-sm font-medium truncate",
+                              p2IsLoser ? "text-muted-foreground line-through" : "",
+                              p2IsTbd ? "text-muted-foreground italic font-normal" : "",
+                              p2IsWinner ? "font-semibold" : "",
+                              p2IsOwned && !p2IsLoser ? "text-electric" : "",
+                            ].filter(Boolean).join(" ")}
+                          >
+                            {p2Name}
+                          </span>
+                          {p2IsWinner && (
+                            <Trophy className="h-3.5 w-3.5 text-yellow-500 shrink-0" />
+                          )}
+                          {p2IsOwned && !p2IsWinner && (
+                            <span className="inline-block w-1.5 h-1.5 rounded-full bg-electric shrink-0" />
+                          )}
+                        </div>
+                        {!p2IsTbd && p2Ownership && (
+                          <div className="mt-1">
+                            <TeamOwnerBadge teamName={p2Ownership.teamName} ownerName={p2Ownership.ownerName} align="right" />
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

app/routes/leagues/$leagueId.sports-seasons.$sportsSeasonId.server.ts

@@ -168,12 +168,11 @@ export async function loader(args: Route.LoaderArgs) {
 
   if (scoringPattern === "playoff_bracket") {
     // Fetch playoff matches via scoring events
+    let templateId: string | undefined;
     const events = await db.query.scoringEvents.findMany({
       where: eq(schema.scoringEvents.sportsSeasonId, sportsSeasonId),
     });
 
-    let templateId: string | undefined;
-
     if (events.length > 0) {
       const eventIds = events.map((e) => e.id);
       const matches = await db.query.playoffMatches.findMany({