Seeds on tournament match page

app/features/tournament-bracket/components/TeamRosterInputs.tsx

@@ -67,7 +67,12 @@ export function TeamRosterInputs({
             />
             Team {teamI + 1}
           </div>
-          <h4>{team.name}</h4>
+          <h4>
+            <span className="tournament-bracket__during-match-actions__seed">
+              #{data.seeds[teamI]}
+            </span>{" "}
+            {team.name}
+          </h4>
           <WinnerRadio
             presentational={presentational}
             checked={

app/features/tournament-bracket/routes/to.$id.matches.$mid.tsx

@@ -276,7 +276,25 @@ export const loader = ({ params }: LoaderArgs) => {
   return {
     match,
     results: findResultsByMatchId(matchId),
+    seeds: resolveSeeds(),
   };
+
+  function resolveSeeds() {
+    const tournamentId = tournamentIdFromParams(params);
+    const teams = findTeamsByTournamentId(tournamentId);
+
+    const teamOneIndex = teams.findIndex(
+      (team) => team.id === match.opponentOne?.id
+    );
+    const teamTwoIndex = teams.findIndex(
+      (team) => team.id === match.opponentTwo?.id
+    );
+
+    return [
+      teamOneIndex !== -1 ? teamOneIndex + 1 : null,
+      teamTwoIndex !== -1 ? teamTwoIndex + 1 : null,
+    ];
+  }
 };
 
 export default function TournamentMatchPage() {

app/features/tournament-bracket/tournament-bracket.css

@@ -190,6 +190,11 @@
   cursor: pointer;
 }
 
+.tournament-bracket__during-match-actions__seed {
+  font-size: var(--fonts-xxs);
+  color: var(--theme);
+}
+
 .tournament-bracket__mode-progress {
   display: flex;
   margin-bottom: var(--s-4);