Ripulisce profilo e tab, e mette Apri evento sull'ultima riga delle presenze.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-07 08:48:21 +02:00
parent 6bc5e8f006
commit ca1eee5425
4 changed files with 61 additions and 71 deletions
@@ -7,8 +7,8 @@ export type VoceSottosezione = {
  id: string;
  label: string;
  contenuto: ReactNode;
-  /** Se true, non ripete il titolo della tab sopra il contenuto (es. Classifica già nella barra). */
-  nascondiTitolo?: boolean;
+  /** Se true, il pannello è a tutta larghezza (niente padding), es. barra filtri Classifica. */
+  aTuttoLarghezza?: boolean;
 };

 /** Tween breve: evita molle + exit che tengono due pannelli in DOM insieme. */
@@ -19,9 +19,9 @@ const transizioneTab = { type: "tween" as const, duration: 0.16, ease: [0.25, 0.
 * pannello che mostra una sola sezione alla volta, cambiabile anche con
 * swipe sul contenuto.
 *
- * `variante="sottolineatura"`: tab a testo con sottolineatura rossa e senza titolo
- * ripetuto sotto la barra (Squadra e Classifica CSI). Default `pillole`: restano le
- * pill e i titoli usati dal Profilo.
+ * `variante="sottolineatura"`: tab a testo con sottolineatura rossa (Squadra e Classifica
+ * CSI). Default `pillole`: restano le pill usate dal Profilo. Il titolo ripetuto sotto la
+ * barra non viene mai mostrato: l’etichetta è già nella tab.
 */
 export function BarraSottosezioni({
  voci,
@@ -135,11 +135,8 @@ export function BarraSottosezioni({
          initial={ridotto ? { opacity: 0 } : { opacity: 0, x: direzione.current * 20 }}
          animate={{ opacity: 1, x: 0 }}
          transition={ridotto ? { duration: 0.1 } : transizioneTab}
-          className={cn("touch-pan-y", voce.nascondiTitolo ? "px-0 pt-0 pb-4" : "px-5 py-4")}
+          className={cn("touch-pan-y", voce.aTuttoLarghezza ? "px-0 pt-0 pb-4" : "px-5 py-4")}
        >
-          {voce.nascondiTitolo || sottolineatura ? null : (
-            <h2 className="mb-3 font-display-sm text-lg uppercase">{voce.label}</h2>
-          )}
          {voce.contenuto}
        </motion.div>
      </div>
@@ -54,6 +54,36 @@ export function EventoCard({
  const isCompleanno = evento.tipo === "compleanno";
  const passato = evento.data < dataOggi();

+  function ChipPresenza({ s }: { s: Stato }) {
+    const meta = statoMeta[s];
+    const attivo = stato === s;
+    return (
+      <button
+        type="button"
+        disabled={!io || salva.isPending || passato}
+        onClick={() => {
+          if (!io) return;
+          salva.mutate({
+            eventoId: evento.id,
+            giocatoreId: io.id,
+            stato: attivo ? null : s,
+          });
+        }}
+        aria-pressed={attivo}
+        className={cn(
+          // min-h-11: sono i controlli più toccati dell'app, sotto i
+          // 44px si sbaglia bersaglio.
+          "min-h-11 rounded-full border border-border px-3 text-xs font-semibold transition-all active:scale-95 disabled:opacity-50",
+          attivo
+            ? cn(meta.className, "border-transparent shadow-card")
+            : "bg-background text-muted-foreground",
+        )}
+      >
+        {meta.label}
+      </button>
+    );
+  }
+
  if (isCompleanno) {
    return (
      <Card as="article" className="flex items-center gap-3">
@@ -96,18 +126,6 @@ export function EventoCard({
        </div>
      </div>

-      {linkTo && (
-        <div className="mt-2 flex justify-end">
-          <Link
-            to={linkTo.to}
-            params={linkTo.params}
-            className="inline-flex min-h-11 items-center gap-1 rounded-full bg-primary px-4 text-xs font-bold uppercase tracking-wide text-primary-foreground transition-transform active:scale-95"
-          >
-            {linkTo.label} <ArrowRight className="h-3 w-3" />
-          </Link>
-        </div>
-      )}
-
      <div className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
        <span className="inline-flex items-center gap-1">
          <Clock className="h-3.5 w-3.5" /> {evento.ora}
@@ -123,37 +141,22 @@ export function EventoCard({

      <Barra percentuale={perc} altezza="h-1.5" trackClassName="mt-3" />

-      {io ? (
+      {io || linkTo ? (
        <div className="mt-4 flex flex-wrap gap-2">
-          {stati.map((s) => {
-            const meta = statoMeta[s];
-            const attivo = stato === s;
-            return (
-              <button
-                key={s}
-                type="button"
-                disabled={salva.isPending || passato}
-                onClick={() =>
-                  salva.mutate({
-                    eventoId: evento.id,
-                    giocatoreId: io.id,
-                    stato: attivo ? null : s,
-                  })
-                }
-                aria-pressed={attivo}
-                className={cn(
-                  // min-h-11: sono i controlli più toccati dell'app, sotto i
-                  // 44px si sbaglia bersaglio.
-                  "min-h-11 rounded-full border border-border px-3 text-xs font-semibold transition-all active:scale-95 disabled:opacity-50",
-                  attivo
-                    ? cn(meta.className, "border-transparent shadow-card")
-                    : "bg-background text-muted-foreground",
-                )}
+          {io ? stati.slice(0, -1).map((s) => <ChipPresenza key={s} s={s} />) : null}
+          {/* Ultima riga: ultimo chip + Apri insieme, così non nasce una terza riga. */}
+          <div className="flex w-full basis-full items-center gap-2">
+            {io ? <ChipPresenza s={stati[stati.length - 1]!} /> : null}
+            {linkTo ? (
+              <Link
+                to={linkTo.to}
+                params={linkTo.params}
+                className="ml-auto inline-flex min-h-11 items-center gap-1 rounded-full bg-primary px-4 text-xs font-bold uppercase tracking-wide text-primary-foreground transition-transform active:scale-95"
              >
-                {meta.label}
-              </button>
-            );
-          })}
+                {linkTo.label} <ArrowRight className="h-3 w-3" />
+              </Link>
+            ) : null}
+          </div>
        </div>
      ) : null}
    </Card>
@@ -1,7 +1,7 @@
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
-import { Flame, Camera, Trash2, Bell, LogOut, ShieldCheck, Bug, Lightbulb } from "lucide-react";
+import { Flame, Trash2, Bell, LogOut, ShieldCheck, Bug, Lightbulb } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Card, PageHeader, StatTile, TeamLogo } from "@/components/crapp/ui-bits";
 import { BarraSottosezioni } from "@/components/crapp/BarraSottosezioni";
@@ -140,24 +140,14 @@ function Profilo() {
      <Reveal className="-mt-6 px-5">
        <Card>
          <div className="flex flex-col items-center gap-4">
-            <div className="relative">
-              <Avatar id={g.id} fallback={g.iniziali} className="h-20 w-20 text-2xl" bust={bust} />
-              <input
-                ref={inputRef}
-                type="file"
-                accept="image/*"
-                className="hidden"
-                onChange={onFile}
-              />
-              <button
-                type="button"
-                onClick={() => inputRef.current?.click()}
-                className="absolute -bottom-1 -right-1 grid h-11 w-11 place-items-center rounded-full bg-accent-grad text-accent-foreground shadow-pop"
-                aria-label="Cambia foto"
-              >
-                <Camera className="h-4 w-4" />
-              </button>
-            </div>
+            <Avatar id={g.id} fallback={g.iniziali} className="h-20 w-20 text-2xl" bust={bust} />
+            <input
+              ref={inputRef}
+              type="file"
+              accept="image/*"
+              className="hidden"
+              onChange={onFile}
+            />
          </div>
          <div className="mt-4 flex gap-2">
            <button
@@ -181,7 +171,7 @@ function Profilo() {
                    toast.error("Non sono riuscito a rimuovere l'immagine");
                  }
                }}
-                className="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-secondary text-muted-foreground"
+                className="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-destructive/15 text-destructive"
                aria-label="Rimuovi immagine"
              >
                <Trash2 className="h-4 w-4" />
@@ -270,7 +270,7 @@ function Squadra() {
          {
            id: "classifica-giocatori",
            label: "Classifica",
-            nascondiTitolo: true,
+            aTuttoLarghezza: true,
            contenuto: (
              <>
                <div className="flex min-w-0 items-center gap-2 border-b border-border bg-card px-5 py-2.5">