social overhaul

src/app/routes/_authed/admin/tournaments/run.$id.tsx

@@ -97,6 +97,16 @@ function RouteComponent() {
     ) || false;
   }, [tournament.matches]);
 
+  const nextUpMatchId = useMemo(() => {
+    const ready = (tournament.matches ?? [])
+      .filter(
+        (match) =>
+          match.status === "ready" && match.home && match.away && !match.bye
+      )
+      .sort((a, b) => a.order - b.order);
+    return ready[0]?.id;
+  }, [tournament.matches]);
+
   const bracket: BracketData = useMemo(() => {
     if (!tournament.matches || tournament.matches.length === 0) {
       return { winners: [], losers: [] };
@@ -146,11 +156,12 @@ function RouteComponent() {
               hasKnockoutBracket={knockoutBracketPopulated}
               isRegional={tournament.regional}
               groupConfig={tournament.group_config}
+              nextUpMatchId={nextUpMatchId}
             />
             <Divider />
             <div>
               <Title order={3} ta="center" mb="md">Knockout Bracket</Title>
-              <BracketView bracket={bracket} showControls groupConfig={tournament.group_config} />
+              <BracketView bracket={bracket} showControls groupConfig={tournament.group_config} nextUpMatchId={nextUpMatchId} />
             </div>
           </Stack>
         ) : hasGroupStage ? (
@@ -162,9 +173,10 @@ function RouteComponent() {
             hasKnockoutBracket={knockoutBracketPopulated}
             isRegional={tournament.regional}
             groupConfig={tournament.group_config}
+            nextUpMatchId={nextUpMatchId}
           />
         ) : (
-          <BracketView bracket={bracket} showControls groupConfig={tournament.group_config} />
+          <BracketView bracket={bracket} showControls groupConfig={tournament.group_config} nextUpMatchId={nextUpMatchId} />
         )
       ) : (
         tournament.regional === true ? (