From 3c2f9cf876c0bc412b9edf3dab9ccca931712622 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Mon, 28 Sep 2026 09:13:10 +0200
Subject: [PATCH] Uniforma la riga collassata della rosa tra allenatore e
 giocatori
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

La card dell'allenatore mostrava subito nome, ruolo e data di nascita,
mentre quella dei giocatori mostra solo nome e ruolo lasciando i
dettagli (nascita, statistiche) dietro l'espansione. Ora anche
l'allenatore è una card espandibile identica, con la data di nascita
visibile solo aprendola.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/routes/squadra.tsx | 64 ++++++++++++++++++++++++++----------------
 1 file changed, 40 insertions(+), 24 deletions(-)

diff --git a/src/routes/squadra.tsx b/src/routes/squadra.tsx
index 0c89d97..13591a6 100644
--- a/src/routes/squadra.tsx
+++ b/src/routes/squadra.tsx
@@ -130,31 +130,47 @@ function Squadra() {
   const contenutoRosa = useMemo(
     () => (
       <div className="space-y-2">
-        {allenatori.map((a) => (
-          <article
-            key={a.id}
-            className="flex min-h-11 items-center gap-3 rounded-3xl bg-card p-3 shadow-card"
-          >
-            <Avatar
-              id={a.id}
-              fallback={inizialiDa(nomeCompleto(a))}
-              className="h-11 w-11 text-lg"
-            />
-            <span className="min-w-0 flex-1">
-              <span className="block truncate text-sm font-bold leading-tight">
-                {nomeCompleto(a)}
-              </span>
-              <span className="mt-1 flex items-center gap-2">
-                <RuoloBadge ruolo={ruoloVisibile(a)} />
-                {a.nascita ? (
-                  <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
-                    <Cake className="h-3.5 w-3.5" /> {formatData(a.nascita)}
+        {allenatori.map((a) => {
+          const isOpen = aperto === a.id;
+          return (
+            <article key={a.id} className="overflow-hidden rounded-3xl bg-card shadow-card">
+              <button
+                type="button"
+                onClick={() => setAperto(isOpen ? null : a.id)}
+                className="flex min-h-11 w-full items-center gap-3 p-3 text-left active:scale-[0.99]"
+                aria-expanded={isOpen}
+              >
+                <Avatar
+                  id={a.id}
+                  fallback={inizialiDa(nomeCompleto(a))}
+                  className="h-11 w-11 text-lg"
+                />
+                <span className="min-w-0 flex-1">
+                  <span className="block truncate text-sm font-bold leading-tight">
+                    {nomeCompleto(a)}
                   </span>
-                ) : null}
-              </span>
-            </span>
-          </article>
-        ))}
+                  <span className="mt-1 flex items-center gap-2">
+                    <RuoloBadge ruolo={ruoloVisibile(a)} />
+                  </span>
+                </span>
+                <ChevronDown
+                  className={cn(
+                    "h-4 w-4 shrink-0 text-muted-foreground transition-transform",
+                    isOpen && "rotate-180",
+                  )}
+                />
+              </button>
+
+              {isOpen && a.nascita ? (
+                <div className="border-t border-border px-4 pb-4 pt-3">
+                  <p className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
+                    <Cake className="h-3.5 w-3.5" /> {formatData(a.nascita)}
+                  </p>
+                </div>
+              ) : null}
+            </article>
+          );
+        })}
         {rosa.map((g) => {
           const stati = badgeGiocatore(g);
           const sbloccati = sonoAllenatore