slop

frontend/src/App.jsx

@@ -5319,16 +5319,26 @@ function TournamentStandings({ standings }) {
   )
 }
 
-function TournamentMatchList({ sides, navigate }) {
+function TournamentListSide({ side, navigate }) {
+  const [collapsed, setCollapsed] = useState(false)
   return (
+    <div className="bracket-side">
+      <button
+        aria-expanded={!collapsed}
+        className="mb-3 flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-fury-violet transition hover:text-text"
+        onClick={() => setCollapsed((v) => !v)}
+        type="button"
+      >
+        {side.label}
+        <span aria-hidden="true" className={`bracket-caret${collapsed ? ' is-collapsed' : ''}`}>▾</span>
+      </button>
+      {collapsed ? null : (
         <div className="space-y-6">
-      {sides.map((side) => {
-        const matches = side.columns.flatMap((column) => column.matches)
-        return (
-          <div key={side.key}>
-            <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-fury-cyan">{side.label}</h3>
+          {side.columns.map((column) => (
+            <div key={column.id}>
+              <p className="mb-3 text-xs font-semibold uppercase tracking-wide text-text-muted">{column.label}</p>
               <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
-              {matches.map((match) => (
+                {column.matches.map((match) => (
                   <TournamentMatchCard
                     key={`${match.type_bracket}-${match.match_id}`}
                     match={match}
@@ -5337,8 +5347,19 @@ function TournamentMatchList({ sides, navigate }) {
                 ))}
               </div>
             </div>
+          ))}
+        </div>
+      )}
+    </div>
   )
-      })}
+}
+
+function TournamentMatchList({ sides, navigate }) {
+  return (
+    <div className="space-y-6">
+      {sides.map((side) => (
+        <TournamentListSide key={side.key} side={side} navigate={navigate} />
+      ))}
     </div>
   )
 }