From 9c5b7fe476cd1594ad3d9e00843e66791e67aab8 Mon Sep 17 00:00:00 2001
From: Ian Paschal <ianpaschal@users.noreply.github.com>
Date: Mon, 30 Jun 2025 09:00:24 +0200
Subject: [PATCH 1/2] feat: #101 Add player count to roster

---
 .../TournamentRoster.module.scss              | 23 +++++++++++-----
 .../TournamentRoster/TournamentRoster.tsx     | 10 ++++---
 .../CompetitorActions.module.scss             |  2 +-
 .../CompetitorActions/CompetitorActions.tsx   |  5 +++-
 .../PlayerCount/PlayerCount.module.scss       | 12 +++++++++
 .../components/PlayerCount/PlayerCount.tsx    | 26 +++++++++++++++++++
 .../components/PlayerCount/index.ts           |  2 ++
 7 files changed, 69 insertions(+), 11 deletions(-)
 create mode 100644 src/components/TournamentRoster/components/PlayerCount/PlayerCount.module.scss
 create mode 100644 src/components/TournamentRoster/components/PlayerCount/PlayerCount.tsx
 create mode 100644 src/components/TournamentRoster/components/PlayerCount/index.ts

diff --git a/src/components/TournamentRoster/TournamentRoster.module.scss b/src/components/TournamentRoster/TournamentRoster.module.scss
index fc2038af..548343ef 100644
--- a/src/components/TournamentRoster/TournamentRoster.module.scss
+++ b/src/components/TournamentRoster/TournamentRoster.module.scss
@@ -8,14 +8,25 @@
 
 .TournamentRoster {
   &_Header {
-    @include flex.row;
-    @include flex.stretchy;
+    display: grid;
+    grid-template-areas: "Identity PlayerCount Actions";
+    grid-template-columns: 1fr auto auto;
+    grid-template-rows: 2.5rem;
+    gap: 1rem;
 
-    &_Actions {
-      @include flex.row;
+    width: 100%;
+  }
+
+  &_Identity {
+    grid-area: Identity;
+  }
+
+  &_PlayerCount {
+    grid-area: PlayerCount;
+  }
 
-      margin-left: auto;
-    }
+  &_Actions {
+    grid-area: Actions;
   }
 
   &_Content {
diff --git a/src/components/TournamentRoster/TournamentRoster.tsx b/src/components/TournamentRoster/TournamentRoster.tsx
index e6156db9..5f2256c3 100644
--- a/src/components/TournamentRoster/TournamentRoster.tsx
+++ b/src/components/TournamentRoster/TournamentRoster.tsx
@@ -4,6 +4,7 @@ import { TournamentCompetitorEditDialog } from '~/components/TournamentCompetito
 import { useTournamentCompetitors } from '~/components/TournamentCompetitorsProvider';
 import { useTournament } from '~/components/TournamentProvider';
 import { CompetitorActions } from '~/components/TournamentRoster/components/CompetitorActions';
+import { PlayerCount } from '~/components/TournamentRoster/components/PlayerCount';
 
 import styles from './TournamentRoster.module.scss';
 
@@ -14,7 +15,7 @@ export interface TournamentRosterProps {
 export const TournamentRoster = ({
   className,
 }: TournamentRosterProps): JSX.Element => {
-  const { useTeams } = useTournament();
+  const { useTeams, competitorSize } = useTournament();
   const competitors = useTournamentCompetitors();
   return (
     <>
@@ -22,8 +23,11 @@ export const TournamentRoster = ({
         {(competitors || []).map((competitor) => (
           <AccordionItem id={competitor._id} disabled={!useTeams} key={competitor._id}>
             <div className={styles.TournamentRoster_Header}>
-              <IdentityBadge competitor={competitor} />
-              <CompetitorActions competitor={competitor} />
+              <IdentityBadge className={styles.TournamentRoster_Identity} competitor={competitor} />
+              {useTeams && (
+                <PlayerCount className={styles.TournamentRoster_PlayerCount} competitorSize={competitorSize} competitor={competitor} />
+              )}
+              <CompetitorActions className={styles.TournamentRoster_Actions} competitor={competitor} />
             </div>
             <div className={styles.TournamentRoster_Content}>
               {competitor.players.filter((player) => player.active).map((player) => (
diff --git a/src/components/TournamentRoster/components/CompetitorActions/CompetitorActions.module.scss b/src/components/TournamentRoster/components/CompetitorActions/CompetitorActions.module.scss
index 09e4aabc..4efbf490 100644
--- a/src/components/TournamentRoster/components/CompetitorActions/CompetitorActions.module.scss
+++ b/src/components/TournamentRoster/components/CompetitorActions/CompetitorActions.module.scss
@@ -9,5 +9,5 @@
 .CompetitorActions {
   @include flex.row;
 
-  margin-left: auto;
+  flex-shrink: 0;
 }
diff --git a/src/components/TournamentRoster/components/CompetitorActions/CompetitorActions.tsx b/src/components/TournamentRoster/components/CompetitorActions/CompetitorActions.tsx
index 25137975..2f066843 100644
--- a/src/components/TournamentRoster/components/CompetitorActions/CompetitorActions.tsx
+++ b/src/components/TournamentRoster/components/CompetitorActions/CompetitorActions.tsx
@@ -1,4 +1,5 @@
 import { MouseEvent } from 'react';
+import clsx from 'clsx';
 import { Ellipsis, UserPlus } from 'lucide-react';
 
 import { TournamentCompetitor } from '~/api';
@@ -20,10 +21,12 @@ import {
 import styles from './CompetitorActions.module.scss';
 
 export interface CompetitorActionsProps {
+  className?: string;
   competitor: TournamentCompetitor;
 }
 
 export const CompetitorActions = ({
+  className,
   competitor,
 }: CompetitorActionsProps): JSX.Element => {
   const user = useAuth();
@@ -94,7 +97,7 @@ export const CompetitorActions = ({
 
   return (
     <>
-      <div className={styles.CompetitorActions}>
+      <div className={clsx(styles.CompetitorActions, className)}>
         {showCheckInToggle && (
           <>
             <Label>Checked In</Label>
diff --git a/src/components/TournamentRoster/components/PlayerCount/PlayerCount.module.scss b/src/components/TournamentRoster/components/PlayerCount/PlayerCount.module.scss
new file mode 100644
index 00000000..e6c4b647
--- /dev/null
+++ b/src/components/TournamentRoster/components/PlayerCount/PlayerCount.module.scss
@@ -0,0 +1,12 @@
+@use "/src/style/flex";
+@use "/src/style/text";
+
+.PlayerCount {
+  @include flex.row($gap: 0.25rem);
+  @include text.ui($muted: true);
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}
diff --git a/src/components/TournamentRoster/components/PlayerCount/PlayerCount.tsx b/src/components/TournamentRoster/components/PlayerCount/PlayerCount.tsx
new file mode 100644
index 00000000..5b02d49e
--- /dev/null
+++ b/src/components/TournamentRoster/components/PlayerCount/PlayerCount.tsx
@@ -0,0 +1,26 @@
+import clsx from 'clsx';
+import { Users } from 'lucide-react';
+
+import { TournamentCompetitor } from '~/api';
+
+import styles from './PlayerCount.module.scss';
+
+export interface PlayerCountProps {
+  className?: string;
+  competitor: TournamentCompetitor;
+  competitorSize: number;
+}
+
+export const PlayerCount = ({
+  className,
+  competitor,
+  competitorSize,
+}: PlayerCountProps): JSX.Element => {
+  const playerCount = competitor.players.filter((p) => p.active).length;
+  return (
+    <div className={clsx(styles.PlayerCount, className)} data-full={playerCount === competitorSize}>
+      <Users />
+      {`${playerCount}/${competitorSize}`}
+    </div>
+  );
+};
diff --git a/src/components/TournamentRoster/components/PlayerCount/index.ts b/src/components/TournamentRoster/components/PlayerCount/index.ts
new file mode 100644
index 00000000..6e47b7b8
--- /dev/null
+++ b/src/components/TournamentRoster/components/PlayerCount/index.ts
@@ -0,0 +1,2 @@
+export type { PlayerCountProps } from './PlayerCount';
+export { PlayerCount } from './PlayerCount';

From 0296bc006c075407222c8134136b8d99ce64341f Mon Sep 17 00:00:00 2001
From: Ian Paschal <ianpaschal@users.noreply.github.com>
Date: Mon, 30 Jun 2025 16:43:46 +0200
Subject: [PATCH 2/2] feat: Gracefully handle missing competitor on
 <PlayerCount/>

#101
---
 .../TournamentRoster/components/PlayerCount/PlayerCount.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TournamentRoster/components/PlayerCount/PlayerCount.tsx b/src/components/TournamentRoster/components/PlayerCount/PlayerCount.tsx
index 5b02d49e..c5258d6c 100644
--- a/src/components/TournamentRoster/components/PlayerCount/PlayerCount.tsx
+++ b/src/components/TournamentRoster/components/PlayerCount/PlayerCount.tsx
@@ -16,7 +16,7 @@ export const PlayerCount = ({
   competitor,
   competitorSize,
 }: PlayerCountProps): JSX.Element => {
-  const playerCount = competitor.players.filter((p) => p.active).length;
+  const playerCount = (competitor.players ?? []).filter((p) => p.active).length;
   return (
     <div className={clsx(styles.PlayerCount, className)} data-full={playerCount === competitorSize}>
       <Users />