davideandClaude Opus 5
78ae3fbbd7
L'altezza della barra era dedotta dai padding delle voci e poi ricopiata a occhio altrove: `pb-24` nel contenitore delle pagine, `pb-28` nella celebrazione badge. Su iPhone i conti tornavano per 2 px — barra ~60 px più 34 px di safe area contro 96 px riservati — quindi bastava un inset diverso (orizzontale, o un modello con home indicator più alta) perché l'ultimo elemento della pagina finisse sotto la barra. Solo su iOS: su Android avanzavano 36 px. Ora la geometria sta in due token, `--altezza-nav` e `--pad-sicura-fondo`, e le utility `spazio-nav` e `pad-sicura-fondo` la leggono da lì. La striscia toccabile ha altezza fissa, così misura uguale sui due sistemi e sotto varia solo l'inset: `max(env(safe-area-inset-bottom), 0.5rem)` dà ad Android un respiro minimo dove iOS mette la home indicator. Identiche al pixel non possono essere — quell'inset esiste per un motivo fisico che Android non ha — ma la differenza è ora un margine in più, non un allineamento diverso. `100vh` diventa `100dvh` ovunque: su iOS Safari `vh` misura il viewport con la toolbar collassata, cioè più alto di quello visibile, e le schermate a tutta altezza risultavano più lunghe dello schermo. `dvh` segue la toolbar. Aggiunto il ripiego per Chrome su Android, che disattiva `backdrop-filter` senza accelerazione hardware: senza, su quei device la barra restava semitrasparente e il contenuto si leggeva attraverso. Resta fuori portata una differenza sola: in Safari non installata la toolbar di sistema sta in basso e collassa allo scroll, quindi la barra si muove con essa. Su Chrome la toolbar è in alto. Si risolve installando la PWA. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
CrAPP 🏐
CrAPP è una Progressive Web App sviluppata per digitalizzare completamente la gestione di una squadra di pallavolo.
Funzionalità principali
- Gestione squadra
- Gestione presenze
- Calendario allenamenti e partite
- Scout Live
- Badge e gamification
- Statistiche
- Notifiche intelligenti
- Gestione amministrativa
- AI per la pianificazione degli allenamenti (in sviluppo)
Stack tecnologico
React 19, TypeScript, TanStack Start (SSR), Vite 8, Tailwind CSS 4, motion, vaul, Supabase (PostgreSQL, Auth, Storage), Vercel, GitHub. Dettagli in docs/ARCHITECTURE.md.
Avvio locale
Le dipendenze si installano con bun (bun.lock):
bun install
npm run dev # http://localhost:8080
Comandi
npm run build # build di produzione
npm run lint # eslint (include prettier)
npm run test # test unit; npm run test:all per la suite completa
Chi aggiunge o modifica una funzione scrive anche il test e lo lascia verde (test/README.md).
Deploy
Deploy automatico su Vercel a ogni push su main, che è anche il branch di lavoro corrente.
develop pubblica un Preview Deployment, ma oggi è indietro rispetto a main. Su quale branch
committare lo decide chi sviluppa (DD-019).
Variabili d'ambiente
Il progetto richiede le seguenti variabili:
SUPABASE_URLSUPABASE_PUBLISHABLE_KEYVITE_SUPABASE_URLVITE_SUPABASE_PUBLISHABLE_KEY
Documentazione
Indice in docs/README.md. Le regole per gli assistenti AI stanno in AGENTS.md, lo stato corrente del lavoro in PROJECT_STATE.md.