Sidebar Sinistra Persistente e Layout Dashboard Multi-Pagina

Il 2026-06-05 abbiamo ricostruito heatmapx.com/dashboard con un layout completo a sidebar persistente in stile Supabase/Vercel (un follow-up strutturale al redesign completo del dashboard rilasciato lo stesso giorno).

Nuovo Layout

┌──────────────────────────────────────────────────────┐
│ [icon] HeatMapX                  [☀💻🌙]  [JA/EN]    │ ← header sticky
├──────────────┬───────────────────────────────────────┤
│ MENU          │                                       │
│ ▸ ⌂ Home      │   Home                                │
│   ▤ Heatmaps  │                                       │
│               │   Siti / Eventi Oggi / Piano          │
│   ⌘ CLI&Skills│                                       │
│   $ Piano&Fattura│  Utilizzo Analisi AI [████░]       │
│   ⚙ Impostaz. │   Utilizzo PV         [██░░░]         │
│               │                                       │
│ COMING SOON   │   Azioni Rapide                       │
│   🧪 A/B Tests │   [▤ Vedi Heatmaps] [＋Aggiungi]    │
│   ✨ Dynamic UI│                                       │
├──────────────┤                                       │
│   Disconnetti │                                       │
└──────────────┴───────────────────────────────────────┘

Cinque Pagine Dedicate

Route	Pagina	Contenuto
`/dashboard`	⌂ Home	Stats card (siti / eventi oggi / piano attuale), barre utilizzo (analisi AI / PV), azioni rapide
`/dashboard/sites`	▤ Heatmaps	Lista tabulare dei siti registrati. Aggiungi nuovi siti da qui
`/dashboard/cli`	⌘ CLI & Skills	Guide di installazione affiancate per la CLI da terminale e la Claude Code Skill
`/dashboard/billing`	$ Piano & Fatturazione	Riepilogo utilizzo attuale + tabella comparativa piani completa (Free / Pro / Team / Enterprise)
`/dashboard/settings`	⚙ Impostazioni	Selettore lingua (English / 日本語) — altre impostazioni in arrivo

Cosa è Cambiato

▤ Sidebar sinistra persistente in stile Supabase

Tutti e cinque gli elementi di navigazione principali sono sempre visibili nella sidebar sinistra, fissa allo scroll così puoi passare tra le pagine da qualsiasi punto.

Evidenziazione pagina attiva: la pagina corrente è visivamente enfatizzata nel menu
Icone: ogni elemento del menu ha un identificatore visivo
Disconnetti: ancorato in fondo alla sidebar, riducendo il rischio di click accidentali

⌂ Home come panoramica a colpo d'occhio

/dashboard — la prima schermata dopo il login — è ora progettata per darti un quadro completo dello stato del tuo account in un'unica vista.

Stats card che mostrano conteggio siti, totale eventi di oggi e il tuo piano attuale
Barre di avanzamento per utilizzo analisi AI e PV mensili (ambra sopra l'80%, rosso sopra il 100%)
Azioni rapide: "Visualizza Heatmaps", "Aggiungi Sito", "Upgrade" e "Setup CLI"

⌘ CLI & Skills affiancati

Entrambi i modi di usare HeatMapX — la CLI da terminale e la Claude Code Skill — sono documentati su una singola pagina in un layout a due colonne.

CLI: passo dopo passo da npm install -g heatmapx fino a heatmapx analyze
Claude Code Skill: installa con /plugin install heatmapx-skill@xtv-llc/heatmapx-cli e richiama HeatMapX direttamente dalla conversazione
Comandi di esempio mostrati sia in inglese che in giapponese

$ Confronto piani completo integrato

La pagina Piano & Fatturazione ora include la tabella comparativa completa Free / Pro / Team / Enterprise così puoi esaminare le opzioni e fare upgrade senza lasciare il dashboard.

Toggle mensile / annuale (annuale predefinito; la fatturazione annuale offre uno sconto significativo rispetto al mensile). Per i prezzi attuali, consulta la pagina prezzi
Il tuo piano attuale è contrassegnato con un badge verde "Attuale"
Pro è evidenziato in arancione come opzione consigliata
Enterprise rimanda a heatmapx@xtv.co.jp per il contatto diretto

⚙ Selezione lingua nelle Impostazioni

Il cambio lingua era in precedenza disponibile solo come toggle a due stati nell'header. È ora esposto anche come selettore radio esplicito nelle Impostazioni. Le modifiche vengono applicate istantaneamente e persistono nel browser.

Coming Soon

Una sezione "Coming Soon" in fondo alla sidebar mostra le funzionalità in arrivo nelle prossime release:

Funzionalità	Descrizione
🧪 A/B Tests	Test A/B con un click per modifiche a testi e layout basate sulle analisi heatmap
✨ Dynamic UI	Motore di personalizzazione che adatta l'interfaccia in base agli attributi e ai pattern di comportamento degli utenti

Altri Miglioramenti

Header sticky: logo, cambio tema e toggle lingua rimangono visibili durante lo scroll
Sidebar sticky: la navigazione rimane accessibile in qualsiasi momento durante lo scroll del contenuto della pagina
Logout ricollocato: spostato dall'angolo in alto a destra dell'header al fondo della sidebar (azione importante ma poco frequente portata in basso)
Retrocompatibile: i segnalibri /dashboard esistenti atterrano sulla nuova schermata Home — nessun redirect necessario

Portata dell'Impatto

Questa release è solo UI/UX — la logica di tracciamento, le strutture dati e le API sono invariate. I tracker tag incorporati esistenti continuano a funzionare come prima. Non sono richiesti redirect per i segnalibri /dashboard esistenti.