Barre latérale persistante et mise en page multi-pages du tableau de bord
- dashboard
- navigation
Le 2026-06-05, nous avons reconstruit heatmapx.com/dashboard avec une mise en page à barre latérale persistante de style Supabase/Vercel (suite structurelle à la refonte complète du tableau de bord livrée le même jour).
Nouvelle mise en page
┌──────────────────────────────────────────────────────┐
│ [icon] HeatMapX [☀💻🌙] [JA/EN] │ ← en-tête sticky
├──────────────┬───────────────────────────────────────┤
│ MENU │ │
│ ▸ ⌂ Accueil │ Accueil │
│ ▤ Heatmaps │ │
│ │ Sites / Événements du jour / Plan │
│ ⌘ CLI&Skills│ │
│ $ Plan&Fact.│ Utilisation IA [████░] │
│ ⚙ Paramètres│ Utilisation PV [██░░░] │
│ │ │
│ COMING SOON │ Actions rapides │
│ 🧪 A/B Tests │ [▤ Voir Heatmaps] [＋Ajouter] │
│ ✨ UI Dyn. │ │
├──────────────┤ │
│ Déconnexion │ │
└──────────────┴───────────────────────────────────────┘
Cinq pages dédiées
| Route | Page | Contenu |
|---|---|---|
/dashboard |
⌂ Accueil | Cartes de stats (sites / événements du jour / plan actuel), barres d'utilisation (analyses IA / PV), actions rapides |
/dashboard/sites |
▤ Heatmaps | Liste tabulaire des sites enregistrés. Ajoutez de nouveaux sites depuis ici |
/dashboard/cli |
⌘ CLI & Skills | Guides d'installation côte à côte pour le CLI terminal et le Claude Code Skill |
/dashboard/billing |
$ Plan & Facturation | Résumé d'utilisation actuel + tableau de comparaison complet des plans (Free / Pro / Team / Enterprise) |
/dashboard/settings |
⚙ Paramètres | Sélecteur de langue (Français / English / 日本語) — plus de paramètres à venir |
Ce qui a changé
▤ Barre latérale gauche persistante façon Supabase
Les cinq éléments de navigation principaux sont toujours visibles dans la barre latérale gauche, fixée au défilement pour que vous puissiez naviguer entre les pages depuis n'importe où.
- Mise en évidence de la page active : la page en cours est visuellement soulignée dans le menu
- Icônes : chaque élément de menu dispose d'un identifiant visuel
- Déconnexion : épinglée en bas de la barre latérale, réduisant le risque de clics accidentels
⌂ Accueil comme aperçu en un coup d'œil
/dashboard — le premier écran après connexion — est désormais conçu pour vous donner une image complète de l'état de votre compte en une seule vue.
- Cartes de stats affichant le nombre de sites, le total d'événements du jour et votre plan actuel
- Barres de progression pour l'utilisation des analyses IA et les PV mensuels (ambre au-dessus de 80 %, rouge au-dessus de 100 %)
- Actions rapides : « Voir les Heatmaps », « Ajouter un site », « Passer au plan supérieur » et « Configuration CLI »
⌘ CLI & Skills côte à côte
Les deux façons d'utiliser HeatMapX — le CLI terminal et le Claude Code Skill — sont documentées sur une seule page en mise en page à deux colonnes.
- CLI : étape par étape de
npm install -g heatmapxjusqu'àheatmapx analyze - Claude Code Skill : installation avec
/plugin install heatmapx-skill@xtv-llc/heatmapx-cliet appel de HeatMapX directement depuis la conversation - Exemples de commandes affichés en anglais et en japonais
$ Comparaison complète des plans intégrée
La page Plan & Facturation inclut désormais le tableau de comparaison complet Free / Pro / Team / Enterprise pour que vous puissiez consulter les options et passer à un plan supérieur sans quitter le tableau de bord.
- Bascule mensuel / annuel (annuel par défaut ; la facturation annuelle offre une remise significative par rapport au mensuel). Pour les tarifs actuels, voir la page de tarification
- Votre plan actuel est indiqué par un badge vert « Actuel »
- Pro est mis en évidence en orange comme option recommandée
- Enterprise redirige vers
heatmapx@xtv.co.jppour un contact direct
⚙ Sélection de langue dans les Paramètres
Le changement de langue était auparavant uniquement disponible comme bascule à deux états dans l'en-tête. Il est désormais également exposé comme un sélecteur radio explicite dans les Paramètres. Les modifications s'appliquent instantanément et sont persistées dans le navigateur.
À venir
Une section « Coming Soon » en bas de la barre latérale présente les fonctionnalités qui arriveront dans les prochaines versions :
| Fonctionnalité | Description |
|---|---|
| 🧪 A/B Tests | Tests A/B en un clic pour les modifications de contenu et de mise en page basées sur les insights heatmap |
| ✨ Dynamic UI | Moteur de personnalisation qui adapte l'interface en fonction des attributs et des schémas de comportement des utilisateurs |
Autres améliorations
- En-tête sticky : le logo, le sélecteur de thème et la bascule de langue restent visibles pendant le défilement
- Barre latérale sticky : la navigation reste accessible à tout moment pendant le défilement du contenu de la page
- Déconnexion déplacée : déplacée du coin supérieur droit de l'en-tête vers le bas de la barre latérale (action importante mais peu fréquente renvoyée vers le bas)
- Rétrocompatible : les marque-pages
/dashboardexistants arrivent sur le nouvel écran d'accueil — aucune redirection nécessaire
Périmètre d'impact
Cette version est exclusivement UI/UX — la logique de tracking, les structures de données et les API sont inchangées. Les tags tracker déjà intégrés continuent de fonctionner tels quels. Aucune redirection n'est nécessaire pour les marque-pages /dashboard existants.