feat: #101 Add player count to roster

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 {

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,16 +15,19 @@ export interface TournamentRosterProps {
 export const TournamentRoster = ({
   className,
 }: TournamentRosterProps): JSX.Element => {
-  const { useTeams } = useTournament();
+  const { useTeams, competitorSize } = useTournament();
   const competitors = useTournamentCompetitors();
   return (
     <>
       <Accordion className={className}>
         {(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) => (

src/components/TournamentRoster/components/CompetitorActions/CompetitorActions.module.scss

@@ -9,5 +9,5 @@
 .CompetitorActions {
   @include flex.row;
 
-  margin-left: auto;
+  flex-shrink: 0;
 }

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>

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;
+  }
+}

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>
+  );
+};

src/components/TournamentRoster/components/PlayerCount/index.ts

@@ -0,0 +1,2 @@
+export type { PlayerCountProps } from './PlayerCount';
+export { PlayerCount } from './PlayerCount';