From 0f1ae77a36db84b7e2758e863d609de45cd8a488 Mon Sep 17 00:00:00 2001
From: EmanueleAlfano <emanuele.alfano@enel.com>
Date: Sat, 28 Feb 2026 10:01:33 +0100
Subject: [PATCH] feat: enhance documentation and UI for FullscreenButton and
 dev.sh commands

---
 ai-prompts/00-welcome-agent.md               |  7 +++++--
 ai-prompts/02-frontend-plan.md               | 21 ++++++++++++++++++--
 frontend/src/components/FullscreenButton.tsx |  6 +++---
 3 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/ai-prompts/00-welcome-agent.md b/ai-prompts/00-welcome-agent.md
index 659a5ca..7ee27dc 100644
--- a/ai-prompts/00-welcome-agent.md
+++ b/ai-prompts/00-welcome-agent.md
@@ -30,7 +30,7 @@ Applicazione web ottimizzata per **tablet in orizzontale** che gestisce i varchi
 
 ```
 VotoFocolari/
-├── dev.sh                    # Script di sviluppo (install, dev, server, ...)
+├── dev.sh                    # Script di sviluppo (install, dev, server, check, ...)
 ├── README.md
 ├── ai-prompts/               # Documentazione sviluppo
 │   ├── 00-welcome-agent.md   # Questo file
@@ -51,7 +51,7 @@ VotoFocolari/
     └── src/
         ├── App.tsx           # State machine principale
         ├── hooks/            # useRFIDScanner
-        ├── components/       # UI components
+        ├── components/       # UI components (Logo, UserCard, FullscreenButton, ...)
         ├── screens/          # Schermate
         ├── services/         # API client
         └── types/            # TypeScript types
@@ -95,6 +95,9 @@ VotoFocolari/
 # Frontend: http://localhost:5173
 # Backend: http://localhost:8000
 
+# Type-check TypeScript (senza build)
+./dev.sh check
+
 # Produzione locale
 ./dev.sh server
 # App completa: http://localhost:8000
diff --git a/ai-prompts/02-frontend-plan.md b/ai-prompts/02-frontend-plan.md
index 8777c9b..4c09bc6 100644
--- a/ai-prompts/02-frontend-plan.md
+++ b/ai-prompts/02-frontend-plan.md
@@ -69,21 +69,23 @@ Ottimizzata per tablet in orizzontale.
 - [x] `Input.tsx` - campo input styled + **toggle password visibility**
 - [x] `Modal.tsx` - modale base
 - [x] `RFIDStatus.tsx` - indicatore stato scanner
-- [x] `UserCard.tsx` - card utente con foto e ruolo
+- [x] `UserCard.tsx` - card utente con foto e ruolo (compatta per tablet)
 - [x] `CountdownTimer.tsx` - timer con progress bar
 - [x] `WelcomeCarousel.tsx` - carosello messaggi multilingua con **animazione smooth sliding**
 - [x] `NumLockBanner.tsx` - avviso NumLock per desktop
+- [x] `FullscreenButton.tsx` - toggle schermo intero (Fullscreen API)
 
 ### 7. Schermate (`screens/`)
 
 - [x] `LoadingScreen.tsx` - caricamento iniziale + ping automatico
-- [x] `ValidatorLoginScreen.tsx` - attesa badge + password + NumLockBanner
+- [x] `ValidatorLoginScreen.tsx` - attesa badge + password + NumLockBanner + **FullscreenButton**
 - [x] `ActiveGateScreen.tsx` - varco attivo:
     - [x] Card utente (layout largo per tablet)
     - [x] **Schermata "badge non trovato"** con countdown barra visiva (30s)
     - [x] **Pulsante "Annulla" nella schermata badge non trovato**
     - [x] **Badge diverso durante errore "non trovato" → ricarica nuovo utente/errore**
     - [x] **Notifica badge validatore ignorato**
+    - [x] **Pulsante FullscreenButton nell'header**
     - [x] NumLockBanner
 - [x] `SuccessModal.tsx` - conferma ingresso con carosello:
     - [x] **Carosello fullwidth** (nessun troncamento testo)
@@ -260,6 +262,21 @@ npm run test:e2e:headed  # Test con browser visibile
 npm run test:e2e:report  # Mostra report HTML
 ```
 
+### 12. Ottimizzazione Tablet (1080x560)
+
+- [x] Layout `h-screen` con `overflow-hidden` (no scroll) su tutte le schermate
+- [x] Header compatti: padding `p-3`, Logo `size="sm"`, testo ridotto
+- [x] Footer compatti: padding `p-2`, testo `text-xs`
+- [x] Card utente ridotta: foto `h-24/w-24` → `h-28/w-28`, testo `text-2xl/3xl`
+- [x] Spaziature e padding ridotti in tutti i box (meno `mb-`, `py-`, `p-`)
+- [x] Icone ridotte (da `w-24/h-24` a `w-16/h-16` ecc.)
+- [x] **Pulsante Fullscreen** nell'header di tutte le schermate (Fullscreen API)
+
+### 13. Comandi Dev
+
+- [x] `./dev.sh check` — Type-check TypeScript standalone (`tsc --noEmit`)
+- [x] `npm run check` — Script npm corrispondente
+
 ---
 
 ## ✅ FRONTEND COMPLETATO
diff --git a/frontend/src/components/FullscreenButton.tsx b/frontend/src/components/FullscreenButton.tsx
index 65c2bd1..3fddcc5 100644
--- a/frontend/src/components/FullscreenButton.tsx
+++ b/frontend/src/components/FullscreenButton.tsx
@@ -28,18 +28,18 @@ export function FullscreenButton() {
     return (
         <button
             onClick={toggleFullscreen}
-            className="p-2 rounded-lg text-gray-500 hover:text-focolare-blue hover:bg-focolare-blue/10 transition-colors"
+            className="w-9 h-9 flex items-center justify-center rounded-lg text-gray-500 hover:text-focolare-blue hover:bg-focolare-blue/10 transition-colors"
             title={isFullscreen ? 'Esci da schermo intero' : 'Schermo intero'}
         >
             {isFullscreen ? (
                 // Exit fullscreen icon
-                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <svg className="w-5 h-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                     <path strokeLinecap="round" strokeLinejoin="round"
                           d="M9 9V4.5M9 9H4.5M9 9L3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5l5.25 5.25"/>
                 </svg>
             ) : (
                 // Enter fullscreen icon
-                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <svg className="w-5 h-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                     <path strokeLinecap="round" strokeLinejoin="round"
                           d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"/>
                 </svg>