Avvisi in Home: componente condiviso, più leggibili; turno palloni ridisegnato

Certificati e turno palloni usano lo stesso componente Avviso: icona propria per
ogni caso (il colore non è l'unico segnale), testo più grande, elenchi di persone
in righe con dettaglio a destra e conteggio, freccia sulle card cliccabili,
comparsa graduale. Il turno palloni ha la pillola «Oggi»/«In arrivo» e i
messaggi in riquadri. Solo aspetto: testi e regole di comparsa invariati.
Test del componente, CHANGELOG, ARCHITECTURE e test/README aggiornati.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/components/crapp/Avviso.tsx

@@ -0,0 +1,127 @@
+import { Link } from "@tanstack/react-router";
+import { ChevronRight, type LucideIcon } from "lucide-react";
+import { Reveal } from "@/components/motion/Reveal";
+import { cn } from "@/lib/utils";
+
+/**
+ * Gravità di un avviso in Home. Il colore non è l'unico segnale: ogni avviso ha anche un'icona
+ * sua e un titolo, così si distingue anche senza vedere i colori.
+ */
+export type TonoAvviso = "critico" | "attenzione" | "scaduto" | "azione";
+
+const toni: Record<TonoAvviso, string> = {
+  critico: "bg-destructive text-destructive-foreground",
+  attenzione: "bg-warning text-warning-foreground",
+  scaduto: "bg-primary text-primary-foreground",
+  azione: "bg-accent-grad text-accent-foreground",
+};
+
+/** Una riga di un elenco: a sinistra chi, a destra il dettaglio (es. la scadenza). */
+export type RigaAvviso = { chi: string; cosa: string };
+
+type ProprietaCorpo = {
+  tono: TonoAvviso;
+  icona: LucideIcon;
+  titolo: string;
+  /** Frasi di spiegazione, una per paragrafo. */
+  testi?: string[];
+  /** Elenco di persone con il loro dettaglio; con più di una riga compare il conteggio. */
+  elenco?: RigaAvviso[];
+  /** Mostra la freccia: tutta la card porta a un'altra schermata. */
+  cliccabile?: boolean;
+  /** Parola breve accanto al titolo (es. «Oggi»), per dire subito quando riguarda. */
+  etichetta?: string;
+  /** I testi in riquadri propri, uno per messaggio: per chi deve fare una cosa precisa. */
+  riquadri?: boolean;
+};
+
+/** Contenuto dell'avviso, senza margini né link: è la parte che si può verificare nei test. */
+export function CorpoAvviso({
+  tono,
+  icona: Icona,
+  titolo,
+  testi = [],
+  elenco = [],
+  cliccabile = false,
+  etichetta,
+  riquadri = false,
+}: ProprietaCorpo) {
+  return (
+    <div className={cn("rounded-3xl p-5 shadow-pop", toni[tono])}>
+      <div className="flex items-center gap-3">
+        <span
+          aria-hidden
+          className="grid h-11 w-11 shrink-0 place-items-center rounded-2xl bg-current/15"
+        >
+          <Icona className="h-6 w-6" />
+        </span>
+        <p className="min-w-0 flex-1 font-display text-lg uppercase leading-tight tracking-wide">
+          {titolo}
+        </p>
+        {etichetta ? (
+          <span className="rounded-full bg-black/25 px-3 py-1 text-[13px] font-bold uppercase tracking-wide">
+            {etichetta}
+          </span>
+        ) : null}
+        {elenco.length > 1 ? (
+          <span
+            aria-label={`${elenco.length} persone`}
+            className="rounded-full bg-current/15 px-3 py-1 text-[13px] font-bold tabular-nums"
+          >
+            {elenco.length}
+          </span>
+        ) : null}
+        {cliccabile ? <ChevronRight aria-hidden className="h-6 w-6 shrink-0" /> : null}
+      </div>
+
+      {testi.map((t) => (
+        <p
+          key={t}
+          className={cn(
+            "mt-3 text-[15px] leading-snug",
+            riquadri && "rounded-2xl bg-black/15 p-3.5 font-semibold",
+          )}
+        >
+          {t}
+        </p>
+      ))}
+
+      {elenco.length > 0 ? (
+        <ul className="mt-3 divide-y divide-current/15 border-t border-current/15">
+          {elenco.map((r) => (
+            <li
+              key={`${r.chi}-${r.cosa}`}
+              className="flex items-baseline justify-between gap-3 py-2.5 text-[15px] leading-snug"
+            >
+              <span className="min-w-0 truncate font-semibold">{r.chi}</span>
+              <span className="shrink-0 text-right tabular-nums">{r.cosa}</span>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  );
+}
+
+/**
+ * Avviso in Home: comparsa graduale, margini della colonna e, se serve, link ai documenti del
+ * profilo. Tutti gli avvisi (certificati, turno palloni) passano da qui per avere lo stesso aspetto.
+ */
+export function Avviso({ indice = 0, ...corpo }: ProprietaCorpo & { indice?: number }) {
+  const card = <CorpoAvviso {...corpo} />;
+  return (
+    <Reveal indice={indice} className="mx-5 mt-4">
+      {corpo.cliccabile ? (
+        <Link
+          to="/profilo"
+          search={{ tab: "documenti" }}
+          className="premi block rounded-3xl focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+        >
+          {card}
+        </Link>
+      ) : (
+        <div role="status">{card}</div>
+      )}
+    </Reveal>
+  );
+}