Redesign del Dashboard — Modalità Chiara/Scura e Densità Informativa Migliorata
- dashboard
Il 2026-06-05 abbiamo rilasciato un redesign completo del dashboard di HeatMapX (heatmapx.com/dashboard). Visibilità e usabilità sono entrambe migliorate significativamente.
Cosa è cambiato
☀ Tema a tre posizioni: Chiaro / Scuro / Sistema
Un toggle a tre posizioni — "☀ Chiaro", "💻 Sistema", "🌙 Scuro" — è stato aggiunto in alto a destra nell'header.
- Sistema (predefinito): Segue automaticamente le impostazioni di aspetto del tuo sistema operativo. Su macOS impostato su "Auto", passa al tema scuro di notte senza alcuna azione manuale.
- Override manuale: Puoi fissare chiaro o scuro in qualsiasi momento. La preferenza viene salvata nel browser.
- Il flash di contenuto non stilizzato (FOUC) al caricamento iniziale è prevenuto, quindi il tema corretto viene renderizzato immediatamente al ricaricamento.
▤ Siti registrati riprogettati come lista tabulare
La precedente griglia a due colonne di card è stata sostituita con un layout a tabella su riga singola, migliorando significativamente la scansionabilità quando hai più siti registrati.
- Le colonne sono allineate verticalmente su tutte le righe, rendendo facile confrontare stato e conteggi eventi a colpo d'occhio
- Nome sito, URL, chiave API e tracker tag sono tutti mostrati compattamente su una singola riga
- I dettagli di configurazione si contraggono sotto "▸ Info setup" (espandi per copiare chiave API e tracker tag)
- Nomi e URL lunghi vengono automaticamente troncati con "…" così il layout non si rompe mai
＋ Pulsante "Aggiungi sito" accanto all'intestazione della sezione
Un pulsante compatto "＋ Aggiungi sito" appare ora accanto all'intestazione "Siti Registrati", permettendoti di aggiungere un nuovo sito senza scorrere (il pulsante originale in fondo alla lista rimane comunque).
◐ Design flat unificato stile GitHub
La palette colori è stata semplificata, riducendo sostanzialmente il rumore visivo.
- Sfondo pagina: grigio neutro (
#f5f5f5), in linea con il tono dei prodotti SaaS moderni come Linear e Supabase - Card: base bianca + bordo sottile, nessuna ombra, border radius 6px
- Arancione come unico accento brand (in precedenza: blu, verde, viola e ambra mischiati)
- Colori di stato semantici preservati: verde (attivo) / ambra (avviso) / rosso (errore)
Prima / Dopo
| Aspetto | Prima | Dopo |
|---|---|---|
| Tema colore | Dashboard scuro fisso | Tre posizioni: Chiaro / Scuro / Sistema |
| Layout | Griglia a due colonne di card (bassa densità informativa) | Lista tabulare a colonna singola (colonne allineate verticalmente) |
| Visualizzazione siti | Impilati verticalmente, occupano molto spazio | Un sito = una riga + dettagli espandibili |
| Pulsante aggiungi | Solo in fondo alla pagina | Sia accanto all'intestazione che in fondo |
| Colore brand | Blu / verde / viola / ambra mischiati | Asse singolo accento arancione unificato |
Miglioramenti aggiuntivi
- Limiti lunghezza nome sito e URL: 60 caratteri per i nomi / 512 caratteri per gli URL, prevenendo la rottura del layout.
- Placeholder aggiungi sito aggiornati: Sostituito
e.g. in-gol/https://in-gol.comcone.g. My site/https://example.comin tutte le 15 lingue supportate. - Modal di onboarding: Appare in dissolvenza 1 secondo dopo aver raggiunto il dashboard, attenuando la sensazione di "pop improvviso".
- Snippet di codice: Le visualizzazioni del tracker tag e del comando CLI sono state aggiornate da sfondi scuri a uno stile pillola grigio chiaro, in armonia con il tema chiaro.
Portata dell'impatto
Questa release è solo UI/UX — la logica di misurazione, le strutture dati e l'API sono invariate. I tracker tag incorporati esistenti continuano a funzionare come prima.