slop

frontend/src/App.jsx

@@ -5345,7 +5345,7 @@ function TournamentStandings({ standings }) {
   )
 }
 
-function TournamentListColumn({ column, navigate }) {
+function TournamentListColumn({ column, navigate, highlight, onHover }) {
   const [collapsed, setCollapsed] = useState(false)
   return (
     <div className={`tournament-list-column${collapsed ? ' is-collapsed' : ''}`}>
@@ -5361,29 +5361,31 @@ function TournamentListColumn({ column, navigate }) {
       </button>
       {collapsed ? null : (
         <div className="grid grid-cols-2 gap-3">
-          {column.matches.map((match) => (
-            <TournamentMatchCard
-              key={`${match.type_bracket}-${match.match_id}`}
-              match={match}
-              navigate={navigate}
-            />
-          ))}
+          {column.matches.map((match) => {
+            const traced = traceClass(teamsOf(match), highlight)
+            return (
+              <div className={`tournament-match-node${traced}`} key={`${match.type_bracket}-${match.match_id}`}>
+                <TournamentMatchCard match={match} navigate={navigate} onHover={onHover} />
+              </div>
+            )
+          })}
         </div>
       )}
     </div>
   )
 }
 
-function TournamentListSide({ side, navigate }) {
+function TournamentListSide({ side, navigate, highlight, onHover }) {
+  const active = Boolean(highlight)
   return (
     <div className="bracket-side">
       <p className="mb-3 text-sm font-semibold uppercase tracking-wide text-fury-violet">
         {side.label}
       </p>
       <BracketViewport>
-        <div className="tournament-bracket-grid">
+        <div className={`tournament-bracket-grid${active ? ' has-trace' : ''}`}>
           {side.columns.map((column) => (
-            <TournamentListColumn column={column} key={column.id} navigate={navigate} />
+            <TournamentListColumn column={column} highlight={highlight} key={column.id} navigate={navigate} onHover={onHover} />
           ))}
         </div>
       </BracketViewport>
@@ -5391,11 +5393,11 @@ function TournamentListSide({ side, navigate }) {
   )
 }
 
-function TournamentMatchList({ sides, navigate }) {
+function TournamentMatchList({ sides, navigate, highlight, onHover }) {
   return (
     <div className="space-y-6">
       {sides.map((side) => (
-        <TournamentListSide key={side.key} side={side} navigate={navigate} />
+        <TournamentListSide highlight={highlight} key={side.key} navigate={navigate} onHover={onHover} side={side} />
       ))}
     </div>
   )
@@ -5515,7 +5517,7 @@ function TournamentDetailPage({ tournamentId, navigate }) {
             <div className="space-y-4">
               {bracketSides.length ? <h2 className="text-lg font-semibold">Group stage</h2> : null}
               {hasStandings ? <TournamentStandings standings={standings} /> : null}
-              {listSides.length ? <TournamentMatchList sides={listSides} navigate={navigate} /> : null}
+              {listSides.length ? <TournamentMatchList highlight={highlight} navigate={navigate} onHover={onHover} sides={listSides} /> : null}
             </div>
           ) : null}