From fe1ac5434c0ae2da118e10f25988d27b776d338d Mon Sep 17 00:00:00 2001
From: Ivan Cacciari <ivan.cacciari.1995@gmail.com>
Date: Fri, 4 Sep 2026 12:01:13 +0200
Subject: [PATCH] Alleggerisce Squadra e Classifica con sezioni a tendina e
 limita i prossimi eventi a 4.

Rimuove anche Scout Live dalle statistiche di squadra per snellire la schermata.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/components/crapp/ui-bits.tsx | 40 +++++++++++++++++++++++++-
 src/routes/calendario.tsx        | 14 ++++++++--
 src/routes/classifica.tsx        |  6 ++--
 src/routes/squadra.tsx           | 48 ++++++++++++++++----------------
 4 files changed, 77 insertions(+), 31 deletions(-)

diff --git a/src/components/crapp/ui-bits.tsx b/src/components/crapp/ui-bits.tsx
index 6532173..af66458 100644
--- a/src/components/crapp/ui-bits.tsx
+++ b/src/components/crapp/ui-bits.tsx
@@ -1,4 +1,5 @@
-import type { ReactNode } from "react";
+import { useState, type ReactNode } from "react";
+import { ChevronDown } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { statoMeta, type Stato } from "@/lib/crapp-data";
 import { Reveal } from "@/components/motion/Reveal";
@@ -52,6 +53,43 @@ export function Section({
   );
 }
 
+/** Sezione con titolo cliccabile: il contenuto si apre e chiude. `anteprima` resta sempre visibile. */
+export function SezioneTendina({
+  titolo,
+  children,
+  anteprima,
+  defaultAperta = false,
+  indice = 0,
+}: {
+  titolo: string;
+  children: ReactNode;
+  anteprima?: ReactNode;
+  defaultAperta?: boolean;
+  indice?: number;
+}) {
+  const [aperta, setAperta] = useState(defaultAperta);
+  return (
+    <Reveal as="section" indice={indice} className="px-5 py-4">
+      <button
+        type="button"
+        onClick={() => setAperta((v) => !v)}
+        className="mb-3 flex w-full items-center justify-between gap-3 text-left active:scale-[0.99]"
+        aria-expanded={aperta}
+      >
+        <h2 className="font-display text-lg uppercase tracking-wide">{titolo}</h2>
+        <ChevronDown
+          className={cn(
+            "h-4 w-4 shrink-0 text-muted-foreground transition-transform",
+            aperta && "rotate-180",
+          )}
+        />
+      </button>
+      {anteprima}
+      {aperta ? children : null}
+    </Reveal>
+  );
+}
+
 export function StatoBadge({ stato, className }: { stato: Stato; className?: string }) {
   const meta = statoMeta[stato];
   return (
diff --git a/src/routes/calendario.tsx b/src/routes/calendario.tsx
index ed01735..623cd4d 100644
--- a/src/routes/calendario.tsx
+++ b/src/routes/calendario.tsx
@@ -128,6 +128,14 @@ function Calendario() {
     ? (eventiPerGiorno.get(giornoSelezionato) ?? [])
     : [];
 
+  // Prossimi 4 eventi da oggi in avanti (indipendenti dal mese selezionato nella griglia).
+  const oggiIso = oggi
+    ? `${oggi.anno}-${pad2(oggi.mese + 1)}-${pad2(oggi.giorno)}`
+    : null;
+  const prossimiEventi = oggiIso
+    ? eventi.filter((e) => e.data >= oggiIso).slice(0, 4)
+    : [];
+
   return (
     <>
       <PageHeader titolo="Calendario" sottotitolo={`${mesiIT[mese]} ${anno} · Stagione 2026/27`} />
@@ -267,14 +275,14 @@ function Calendario() {
 
       <Section titolo="Prossimi eventi">
         <div className="space-y-3">
-          {eventiMese.length > 0 ? (
-            eventiMese.map((e) => {
+          {prossimiEventi.length > 0 ? (
+            prossimiEventi.map((e) => {
               const link = linkPerEvento(e);
               return <EventoCard key={e.id} evento={e} {...(link ? { linkTo: link } : {})} />;
             })
           ) : (
             <p className="rounded-3xl bg-card p-4 text-center text-sm text-muted-foreground shadow-card">
-              Nessun evento in {mesiIT[mese]!.toLowerCase()}
+              Nessun evento in programma
             </p>
           )}
         </div>
diff --git a/src/routes/classifica.tsx b/src/routes/classifica.tsx
index 0952f05..7733784 100644
--- a/src/routes/classifica.tsx
+++ b/src/routes/classifica.tsx
@@ -2,7 +2,7 @@ import { createFileRoute, Link } from "@tanstack/react-router";
 import { ChevronRight, RefreshCw } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { formatData } from "@/lib/crapp-data";
-import { PageHeader, Section } from "@/components/crapp/ui-bits";
+import { PageHeader, Section, SezioneTendina } from "@/components/crapp/ui-bits";
 import { useScoutMatches } from "@/lib/scout-store";
 import { useCsi } from "@/lib/csi";
 import { isNostraSquadra, matchDaPartitaCsi, partiteGiocate } from "@/lib/csi-core";
@@ -123,7 +123,7 @@ function Classifica() {
         </div>
       </Section>
 
-      <Section titolo="Storico match">
+      <SezioneTendina titolo="Storico match">
         {tuttiMatch.length === 0 ? (
           <p className="rounded-3xl bg-card p-4 text-center text-xs text-muted-foreground shadow-card">
             Nessun match disponibile.
@@ -194,7 +194,7 @@ function Classifica() {
             })}
           </div>
         )}
-      </Section>
+      </SezioneTendina>
     </>
   );
 }
diff --git a/src/routes/squadra.tsx b/src/routes/squadra.tsx
index c29baeb..8f2f395 100644
--- a/src/routes/squadra.tsx
+++ b/src/routes/squadra.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 import { createFileRoute } from "@tanstack/react-router";
 import { Cake, ChevronDown, Crown } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { PageHeader, Section } from "@/components/crapp/ui-bits";
+import { PageHeader, Section, SezioneTendina } from "@/components/crapp/ui-bits";
 import { Avatar } from "@/components/crapp/Avatar";
 import { formatData } from "@/lib/crapp-data";
 import { microcopyObiettivo, progressoObiettivo } from "@/lib/obiettivi";
@@ -12,7 +12,6 @@ import { totaliSquadra, useScoutMatches } from "@/lib/scout-store";
 import { useCsi } from "@/lib/csi";
 import { partiteGiocate } from "@/lib/csi-core";
 import { mediaSquadra, usePagelle } from "@/lib/pagelle";
-import { ScoutEntry } from "@/components/crapp/ScoutEntry";
 import { StatTile } from "@/components/crapp/ui-bits";
 import { Reveal } from "@/components/motion/Reveal";
 import { Barra } from "@/components/motion/Barra";
@@ -232,12 +231,9 @@ function Squadra() {
           <StatTile valore={team.ace} label="Ace squadra" />
           <StatTile valore={team.muri} label="Muri squadra" />
         </div>
-        <div className="mt-3">
-          <ScoutEntry />
-        </div>
       </Section>
 
-      <Section titolo="Classifica giocatori">
+      <SezioneTendina titolo="Classifica giocatori">
         <div className="mb-3 flex flex-nowrap gap-1.5">
           {criteri.map((c) => (
             <button
@@ -286,25 +282,29 @@ function Squadra() {
             </div>
           ))}
         </div>
-      </Section>
+      </SezioneTendina>
 
-      <Section titolo="Obiettivi di squadra">
-        <div className="mb-3 rounded-3xl bg-hero p-4 text-primary-foreground shadow-card">
-          <div className="flex items-end justify-between gap-3">
-            <div>
-              <p className="text-[11px] font-semibold uppercase tracking-wide text-primary-foreground/60">
-                Progresso collettivo
-              </p>
-              <p className="font-display text-4xl leading-none">
-                <Numero valore={mediaObiettivi} suffisso="%" />
+      <SezioneTendina
+        titolo="Obiettivi di squadra"
+        anteprima={
+          <div className="mb-3 rounded-3xl bg-hero p-4 text-primary-foreground shadow-card">
+            <div className="flex items-end justify-between gap-3">
+              <div>
+                <p className="text-[11px] font-semibold uppercase tracking-wide text-primary-foreground/60">
+                  Progresso collettivo
+                </p>
+                <p className="font-display text-4xl leading-none">
+                  <Numero valore={mediaObiettivi} suffisso="%" />
+                </p>
+              </div>
+              <p className="text-xs text-primary-foreground/70">
+                {completati}/{obiettivi.length} completati
               </p>
             </div>
-            <p className="text-xs text-primary-foreground/70">
-              {completati}/{obiettivi.length} completati
-            </p>
+            <Barra percentuale={mediaObiettivi} trackClassName="mt-3 bg-primary-foreground/15" />
           </div>
-          <Barra percentuale={mediaObiettivi} trackClassName="mt-3 bg-primary-foreground/15" />
-        </div>
+        }
+      >
         <div className="space-y-2">
           {obiettivi.map((o, i) => {
             const pct = progressoObiettivo(o);
@@ -346,9 +346,9 @@ function Squadra() {
             );
           })}
         </div>
-      </Section>
+      </SezioneTendina>
 
-      <Section titolo="Badge sbloccabili">
+      <SezioneTendina titolo="Badge sbloccabili">
         <div className="space-y-2">
           {badgeDefs.map((b) => {
             const Icon = b.icon;
@@ -392,7 +392,7 @@ function Squadra() {
             );
           })}
         </div>
-      </Section>
+      </SezioneTendina>
     </>
   );
 }