davideandClaude Opus 5
5c49294ad1
`rounded-3xl bg-card p-4 shadow-card` era ricopiato a mano 22 volte: cambiare raggio od ombra voleva dire toccare venti file. `Card` in `ui-bits.tsx` è ora l'unica definizione delle superfici, con la gerarchia dei raggi scritta invece che implicita (contenitore 3xl, elemento interno 2xl, controllo full). Tocco e tastiera: - i chip presenza di `EventoCard` erano alti ~28 px ed è il controllo più toccato dell'app: ora `min-h-11`, con 8 px di spazio fra l'uno e l'altro; - stessa cura per il link «Apri partita», la chiusura di `CelebrazioneBadge` e il titolo di `SezioneTendina`; - `aria-pressed` sui controlli a stato, `aria-controls` sulle tendine (che avevano `aria-expanded` senza il pannello a cui si riferisce), `aria-busy` sui caricamenti; - `BottomNav`: lo stato attivo era comunicato solo dal colore. Ora cambia anche il peso del testo, compare una barretta sopra l'icona e c'è `aria-current="page"`. La voce «Home» diventa «Oggi», che dice cosa contiene. La barra è un materiale traslucido con bordo sfumato al posto della riga netta. - `Barra` espone `role="progressbar"` con i valori. Il testo sotto i 12 px è sparito (108 occorrenze fra `text-[9px]`, `text-[10px]` e `text-[11px]`): sotto quella soglia la leggibilità cala e su iOS non scala con Dynamic Type. La gerarchia la fanno peso e maiuscolo. `Avatar` aveva `alt="Foto di 12"` quando il fallback è il numero di maglia — non descrive niente e il nome è già scritto accanto, quindi alt vuoto. Aggiunti `width`/`height` per non far saltare il layout al caricamento. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
import { urlAvatar } from "@/lib/avatar-store";
|
|
|
|
export function Avatar({
|
|
id,
|
|
fallback,
|
|
className,
|
|
alt,
|
|
bust,
|
|
}: {
|
|
id: string;
|
|
fallback: string;
|
|
className?: string;
|
|
alt?: string;
|
|
/** Forza il ricaricamento ignorando la cache: usato dopo aver cambiato la propria foto. */
|
|
bust?: number;
|
|
}) {
|
|
const [errore, setErrore] = useState(false);
|
|
useEffect(() => setErrore(false), [id, bust]);
|
|
|
|
if (!errore) {
|
|
const src = bust ? `${urlAvatar(id)}?v=${bust}` : urlAvatar(id);
|
|
return (
|
|
<img
|
|
src={src}
|
|
// `fallback` è spesso il numero di maglia: "Foto di 12" non descrive
|
|
// niente. Senza un nome vero l'immagine è decorativa e il nome sta già
|
|
// scritto accanto, quindi alt vuoto.
|
|
alt={alt ?? ""}
|
|
// Le dimensioni reali le dà la classe; width/height servono solo a
|
|
// riservare il rapporto e non far saltare il layout al caricamento.
|
|
width={96}
|
|
height={96}
|
|
loading="lazy"
|
|
decoding="async"
|
|
onError={() => setErrore(true)}
|
|
className={cn("aspect-square shrink-0 rounded-2xl object-cover", className)}
|
|
/>
|
|
);
|
|
}
|
|
return (
|
|
<span
|
|
className={cn(
|
|
"grid shrink-0 place-items-center rounded-2xl bg-secondary font-display",
|
|
className,
|
|
)}
|
|
>
|
|
{fallback}
|
|
</span>
|
|
);
|
|
}
|