slop

frontend/src/App.jsx

@@ -5319,26 +5319,47 @@ function TournamentStandings({ standings }) {
   )
 }
 
+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">
+          {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">
+                {column.matches.map((match) => (
+                  <TournamentMatchCard
+                    key={`${match.type_bracket}-${match.match_id}`}
+                    match={match}
+                    navigate={navigate}
+                  />
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
 function TournamentMatchList({ sides, navigate }) {
   return (
     <div className="space-y-6">
-      {sides.map((side) => {
+      {sides.map((side) => (
-        const matches = side.columns.flatMap((column) => column.matches)
+        <TournamentListSide key={side.key} side={side} navigate={navigate} />
-        return (
+      ))}
-          <div key={side.key}>
-            <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-fury-cyan">{side.label}</h3>
-            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
-              {matches.map((match) => (
-                <TournamentMatchCard
-                  key={`${match.type_bracket}-${match.match_id}`}
-                  match={match}
-                  navigate={navigate}
-                />
-              ))}
-            </div>
-          </div>
-        )
-      })}
     </div>
   )
 }