-

CLAUDE.md

@@ -46,12 +46,56 @@ XX. **Nome Problema (FIX/IMPLEMENTATO DATA):** - **Problema:** Descrizione breve
 
 ## Quick Start - Session Recovery
 
-**Ultima sessione:** 28 Novembre 2025 (sera)
+**Ultima sessione:** 28 Novembre 2025 (tarda notte)
 
 **Stato progetto:** Migrazione Oracle APEX → .NET + React TypeScript in corso
 
 **Lavoro completato nell'ultima sessione:**
 
+- **NUOVA FEATURE: Toolbar Report Designer Migliorata Drasticamente** - COMPLETATO
+  - Design moderno stile Canva/Figma con gradient buttons e animazioni fluide
+  - **Sezioni etichettate** su desktop (INSERISCI, MODIFICA, CRONOLOGIA, VISTA, ZOOM, PAGINA)
+  - **Toolbar contestuale** dinamica che appare quando un elemento è selezionato:
+    - Per testo: formattazione (grassetto, corsivo, sottolineato), allineamento, color picker
+    - Per forme/linee: color picker riempimento/bordo, spessore bordo
+    - Per immagini: indicatore mantieni proporzioni
+    - Mostra tipo elemento, nome e dimensioni in tempo reale
+  - **Color Picker integrato** con palette di 20 colori predefiniti
+  - **Indicatore stato salvataggio** visivo: Salvato (verde), Non salvato (arancione), Salvataggio... (spinner)
+  - **Badge** sul pulsante Snap che mostra quante opzioni sono attive
+  - **Zoom esteso** fino al 300% con pulsante "Adatta alla finestra"
+  - Pannello scorciatoie tastiera ampliato
+  - Aggiunto `textDecoration` a `AprtStyle` per supportare sottolineato
+
+- **FIX: Indicatore "Non Salvato" errato** - RISOLTO
+  - Prima usava `canUndo` che indicava solo presenza di history
+  - Ora usa `undoCount` confrontato con `lastSavedUndoCount` per tracking accurato
+
+- **NUOVA FEATURE: Auto-Save con Toggle** - COMPLETATO
+  - Salvataggio automatico dopo 1 secondo di inattività (debounce)
+  - **Abilitato di default**
+  - Toggle nella toolbar (icona AutoMode) per attivare/disattivare
+  - Quando auto-save è attivo, il pulsante "Salva" manuale è nascosto
+  - Quando auto-save è disattivo, il pulsante "Salva" appare
+  - Non si attiva per template nuovi (richiede primo salvataggio manuale)
+  - Non si attiva durante salvataggio in corso
+
+**Lavoro completato nelle sessioni precedenti (28 Novembre 2025 notte):**
+
+- **NUOVA FEATURE: Responsive Design Completo** - COMPLETATO
+  - Tutta l'applicazione è ora responsive per mobile, tablet e desktop
+  - Breakpoints: mobile (<600px), tablet (600-900px), desktop (>900px)
+  - **Layout.tsx**: Sidebar collassata con icone su tablet, drawer mobile
+  - **ReportTemplatesPage**: Header stackato su mobile, FAB per nuovo template, dialog fullScreen
+  - **ReportEditorPage**: BottomNavigation + SwipeableDrawer (70vh) per pannelli su mobile, auto-zoom
+  - **EditorToolbar**: 3 varianti (mobile compatta con riga collassabile, tablet media, desktop completa)
+  - **Pannelli laterali** (DataBindingPanel, PropertiesPanel, PageNavigator): larghezza piena su mobile
+  - **DatasetSelector**: Header collassabile su mobile
+  - **PreviewDialog**: fullScreen su mobile con navigazione step-by-step (dataset → entity)
+  - **ImageUploadDialog**: fullScreen su mobile, area drag-drop ottimizzata, bottoni stacked
+
+**Lavoro completato nelle sessioni precedenti (28 Novembre 2025 sera):**
+
 - **FIX: Variabili Globali Report ({{$pageNumber}}, {{$totalPages}}, ecc.)** - RISOLTO
   - Le variabili speciali ora vengono correttamente risolte nel PDF finale
   - Aggiunta classe `PageContext` per passare numero pagina e totale pagine durante il rendering
@@ -625,9 +669,9 @@ Formato JSON esportabile/importabile per portabilità template:
 
 - [x] Editor visuale drag-and-drop con Fabric.js
 - [x] Supporto elementi: testo, forme, linee, tabelle, immagini (placeholder)
-- [x] Gestione zoom (25% - 200%)
+- [x] Gestione zoom (25% - 300%)
 - [x] Griglia e snap to grid
-- [x] Undo/Redo (max 20 stati)
+- [x] Undo/Redo (max 100 stati)
 - [x] Shortcuts tastiera (Ctrl+Z, Ctrl+Y, Ctrl+S, Delete)
 - [x] Pannello proprietà con posizione, stile, contenuto
 - [x] Data binding con browser campi disponibili
@@ -638,6 +682,12 @@ Formato JSON esportabile/importabile per portabilità template:
 - [x] Clone template
 - [x] Generazione PDF default per eventi
 - [x] Formattazione campi (valuta, data, numero, percentuale)
+- [x] **Responsive design completo** (mobile, tablet, desktop)
+- [x] **Toolbar professionale** stile Canva/Figma con sezioni etichettate
+- [x] **Toolbar contestuale** per formattazione rapida (testo, forme, immagini)
+- [x] **Color picker integrato** con palette preset
+- [x] **Auto-save** con toggle (abilitato di default, 1s debounce)
+- [x] **Indicatore stato salvataggio** accurato (Salvato/Non salvato/Salvataggio...)
 
 ### Cosa Manca per Completare
 
@@ -700,6 +750,7 @@ Formato JSON esportabile/importabile per portabilità template:
 - [x] Keyboard shortcuts
 - [x] PageNavigator (gestione multi-pagina)
 - [x] Navigazione pagine in toolbar
+- [x] **Responsive design** (mobile/tablet/desktop)
 - [ ] Upload e gestione immagini nell'editor
 - [ ] Editor tabelle avanzato (colonne, binding dati)
 - [ ] UI relazioni tra dataset
@@ -943,6 +994,62 @@ frontend/src/
       ```
     - **File:** `ReportGeneratorService.cs` - Metodi `GeneratePdfAsync()`, `RenderContentToBitmap()`, `RenderElementToCanvas()`, `RenderTextToCanvas()`, `ResolveContent()`, `ResolveBindingWithFormat()`, `ResolveBinding()`, `ResolveExpression()`, `ResolveBindingPath()`
 
+16. **Responsive Design Completo (IMPLEMENTATO 28/11/2025 notte):**
+    - **Obiettivo:** Rendere tutta l'applicazione responsive per mobile, tablet e desktop
+    - **Breakpoints MUI utilizzati:**
+      - Mobile: `theme.breakpoints.down("sm")` → < 600px
+      - Tablet: `theme.breakpoints.between("sm", "md")` → 600-900px
+      - Desktop: `theme.breakpoints.up("md")` → > 900px
+    - **Pattern principale per Report Editor su mobile:**
+      - `BottomNavigation` per switch tra pannelli (Pagine, Dati, Proprietà)
+      - `SwipeableDrawer` con `anchor="bottom"` e altezza 70vh per contenuto pannelli
+      - Auto-zoom canvas: 0.5 mobile, 0.75 tablet, 1 desktop
+    - **Pattern per toolbar mobile:**
+      - Riga primaria con azioni essenziali sempre visibili
+      - Riga secondaria collassabile con `<Collapse>` per azioni secondarie
+    - **Pattern per dialog mobile:**
+      - `fullScreen` prop su Dialog
+      - AppBar con pulsante back invece di DialogTitle
+      - Navigazione step-by-step invece di layout side-by-side
+    - **File modificati:**
+      - `Layout.tsx` - Sidebar collassata su tablet
+      - `ReportTemplatesPage.tsx` - FAB, fullScreen dialogs
+      - `ReportEditorPage.tsx` - BottomNavigation + SwipeableDrawer
+      - `EditorToolbar.tsx` - 3 varianti layout (mobile/tablet/desktop)
+      - `DataBindingPanel.tsx`, `PropertiesPanel.tsx`, `PageNavigator.tsx` - Width responsive
+      - `DatasetSelector.tsx` - Header collapsible
+      - `PreviewDialog.tsx`, `ImageUploadDialog.tsx` - fullScreen + step navigation
+
+17. **Indicatore "Non Salvato" Errato (FIX 28/11/2025 tarda notte):**
+    - **Problema:** Dopo il salvataggio, l'indicatore continuava a mostrare "Non salvato"
+    - **Causa:** `hasUnsavedChanges` era basato su `templateHistory.canUndo` che indica solo se c'è history disponibile, non se ci sono modifiche non salvate
+    - **Soluzione:** Introdotto `lastSavedUndoCount` che viene aggiornato dopo ogni salvataggio riuscito. `hasUnsavedChanges` ora confronta `templateHistory.undoCount !== lastSavedUndoCount`
+    - **File:** `ReportEditorPage.tsx`
+
+18. **Auto-Save Feature (IMPLEMENTATO 28/11/2025 tarda notte):**
+    - **Funzionalità:** Salvataggio automatico dopo 1 secondo di inattività
+    - **Implementazione:**
+      - Stato `autoSaveEnabled` (default: true) in `ReportEditorPage.tsx`
+      - `useEffect` con debounce di 1000ms che triggera `saveMutation.mutate()`
+      - Non si attiva se: `isNew`, `!hasUnsavedChanges`, `saveMutation.isPending`
+      - Toggle nella toolbar con icona `AutoSaveIcon` (da @mui/icons-material)
+      - Pulsante "Salva" nascosto quando auto-save è attivo
+    - **Props toolbar:** `autoSaveEnabled`, `onAutoSaveToggle`
+    - **File:** `ReportEditorPage.tsx`, `EditorToolbar.tsx`
+
+19. **Toolbar Migliorata Stile Canva/Figma (IMPLEMENTATO 28/11/2025 tarda notte):**
+    - **Miglioramenti:**
+      - Design moderno con gradient buttons e animazioni fluide
+      - Sezioni etichettate su desktop (INSERISCI, MODIFICA, CRONOLOGIA, VISTA, ZOOM, PAGINA)
+      - Toolbar contestuale dinamica basata su tipo elemento selezionato
+      - Color picker integrato con 20 colori preset
+      - Indicatore stato salvataggio visivo
+      - Badge su pulsante Snap
+      - Zoom esteso fino a 300%
+    - **Componenti aggiunti:** `ToolbarSection`, `StyledIconButton`, `ColorPickerButton`
+    - **Type aggiunto:** `textDecoration` in `AprtStyle`
+    - **File:** `EditorToolbar.tsx`, `types/report.ts`
+
 ### Schema Database Report System
 
 Le tabelle sono già nel DbContext (`AppollinareDbContext.cs`):