Refonte du tableau de bord — Mode clair/sombre & densité d'information améliorée
- dashboard
Le 2026-06-05, nous avons livré une refonte complète du tableau de bord HeatMapX (heatmapx.com/dashboard). La visibilité et l'ergonomie ont toutes deux été considérablement améliorées.
Ce qui a changé
☀ Thème à trois positions : Clair / Sombre / Système
Une bascule à trois positions — « ☀ Clair », « 💻 Système », « 🌙 Sombre » — a été ajoutée en haut à droite de l'en-tête.
- Système (par défaut) : suit automatiquement les préférences d'apparence de votre système d'exploitation. Sur macOS réglé sur « Auto », bascule en sombre le soir sans aucune action manuelle.
- Remplacement manuel : vous pouvez fixer le mode clair ou sombre à tout moment. La préférence est sauvegardée dans votre navigateur.
- Le flash of unstyled content (FOUC) au chargement initial est évité, de sorte que le thème correct s'affiche immédiatement au rechargement.
▤ Sites enregistrés redessinés en liste tabulaire
L'ancienne grille de cartes à deux colonnes a été remplacée par un tableau à une seule ligne, améliorant considérablement la lisibilité lorsque plusieurs sites sont enregistrés.
- Les colonnes sont alignées verticalement sur toutes les lignes, ce qui facilite la comparaison des statuts et des compteurs d'événements en un coup d'œil
- Le nom du site, l'URL, la clé API et le tag tracker sont tous affichés de manière compacte sur une seule ligne
- Les détails de configuration se replient sous « ▸ Infos de configuration » (développer pour copier la clé API et le tag tracker)
- Les noms et URL longs sont automatiquement tronqués avec « … » pour que la mise en page ne se casse jamais
＋ Bouton « Ajouter un site » à côté de l'en-tête de section
Un bouton compact « ＋ Ajouter un site » apparaît désormais à côté de l'en-tête « Sites enregistrés », vous permettant d'ajouter un nouveau site sans faire défiler (le bouton d'origine en bas de la liste est également conservé).
◐ Design plat unifié façon GitHub
La palette de couleurs a été simplifiée, réduisant considérablement le bruit visuel.
- Arrière-plan de la page : gris neutre (
#f5f5f5), dans le même ton que les produits SaaS modernes comme Linear et Supabase - Cartes : base blanche + bordure fine, sans ombre, border radius de 6px
- L'orange comme unique couleur d'accentuation de marque (auparavant : bleu, vert, violet et ambre en mélange)
- Couleurs de statut sémantiques préservées : vert (actif) / ambre (avertissement) / rouge (erreur)
Avant / Après
| Aspect | Avant | Après |
|---|---|---|
| Thème de couleur | Tableau de bord sombre fixe | À trois positions : Clair / Sombre / Système |
| Mise en page | Grille de cartes à deux colonnes (faible densité d'information) | Liste tabulaire à une colonne (colonnes alignées verticalement) |
| Affichage des sites | Empilés verticalement, occupe beaucoup d'espace | Un site = une ligne + détails repliables |
| Bouton d'ajout | En bas de la page uniquement | À la fois à côté de l'en-tête et en bas |
| Couleur de marque | Bleu / vert / violet / ambre en mélange | Axe orange unique unifié |
Améliorations supplémentaires
- Limites de longueur pour le nom et l'URL du site : 60 caractères pour les noms / 512 caractères pour les URL, évitant les problèmes de mise en page.
- Textes de substitution du formulaire d'ajout mis à jour : remplacement de
ex. in-gol/https://in-gol.comparex. Mon site/https://example.comdans les 15 langues prises en charge. - Modal d'onboarding : apparaît en fondu 1 seconde après l'arrivée sur le tableau de bord, adoucissant l'effet de « pop soudain ».
- Extraits de code : les affichages du tag tracker et de la commande CLI ont été mis à jour d'un fond sombre vers un style de pastille gris clair, en harmonie avec le thème clair.
Périmètre d'impact
Cette version est exclusivement UI/UX — la logique de mesure, les structures de données et l'API sont inchangées. Les tags tracker déjà intégrés continuent de fonctionner tels quels.