Show tournament team seeds on the match page

Closes #3080

app/components/match-page/MatchRosterTab.tsx

@@ -49,6 +49,7 @@ interface RosterTabTeam {
 	/** Sub user ids i.e. those who are not the current active roster */
 	subbedOut?: Array<number>;
 	tier?: { name: TierName; isPlus: boolean };
+	seed?: number | null;
 }
 
 interface MatchRosterTabProps {
@@ -263,6 +264,26 @@ function TeamHeader({
 	const tierText = team.tier
 		? `${team.tier.name.toLowerCase()}${team.tier.isPlus ? "+" : ""}`
 		: undefined;
+	const seedText = typeof team.seed === "number" ? `#${team.seed}` : undefined;
+
+	const meta = (
+		<div className="stack xs horizontal items-center text-lighter">
+			<div className={dotClassName} />
+			{label}
+			{tierText ? (
+				<>
+					<span>•</span>
+					<span className="text-capitalize">{tierText}</span>
+				</>
+			) : null}
+			{seedText ? (
+				<>
+					<span>•</span>
+					<span>{seedText}</span>
+				</>
+			) : null}
+		</div>
+	);
 
 	if (team.team) {
 		return (
@@ -274,16 +295,7 @@ function TeamHeader({
 				/>
 				<div className="stack justify-center line-height-tight">
 					<h2 className="text-main-forced font-bold">{team.team.name}</h2>
-					<div className="stack xs horizontal items-center text-lighter">
-						<div className={dotClassName} />
-						{label}
-						{tierText ? (
-							<>
-								<span>•</span>
-								<span className="text-capitalize">{tierText}</span>
-							</>
-						) : null}
-					</div>
+					{meta}
 				</div>
 			</Link>
 		);
@@ -296,16 +308,7 @@ function TeamHeader({
 			<div className={styles.teamAvatar} data-side={side} />
 			<div className="stack justify-center line-height-tight">
 				<h2 className="text-main-forced font-bold">{team.defaultName}</h2>
-				<div className="stack xs horizontal items-center text-lighter">
-					<div className={dotClassName} />
-					{label}
-					{tierText ? (
-						<>
-							<span>•</span>
-							<span className="text-capitalize">{tierText}</span>
-						</>
-					) : null}
-				</div>
+				{meta}
 			</div>
 		</div>
 	);

app/features/tournament-match/components/TournamentMatchTabs.tsx

@@ -401,6 +401,7 @@ function TournamentMatchRosterTab({
 				inGameName: m.inGameName,
 			})),
 			subbedOut,
+			seed: team.seed,
 		};
 	}