Sidebar Izquierdo Persistente y Layout de Dashboard con Múltiples Páginas
- dashboard
- navigation
El 2026-06-05, reconstruimos heatmapx.com/dashboard con un layout de sidebar persistente al estilo Supabase/Vercel (una continuación estructural del rediseño completo del dashboard lanzado el mismo día).
Nuevo Layout
┌──────────────────────────────────────────────────────┐
│ [icon] HeatMapX [☀💻🌙] [JA/EN] │ ← header sticky
├──────────────┬───────────────────────────────────────┤
│ MENÚ │ │
│ ▸ ⌂ Inicio │ Inicio │
│ ▤ Heatmaps │ │
│ │ Sitios / Eventos de Hoy / Plan │
│ ⌘ CLI&Skills│ │
│ $ Plan&Billing│ Uso de Análisis IA [████░] │
│ ⚙ Config │ Uso de PV [██░░░] │
│ │ │
│ PRÓXIMAMENTE │ Acciones Rápidas │
│ 🧪 A/B Tests │ [▤ Ver Heatmaps] [＋Añadir] │
│ ✨ Dynamic UI│ │
├──────────────┤ │
│ Cerrar sesión│ │
└──────────────┴───────────────────────────────────────┘
Cinco Páginas Dedicadas
| Ruta | Página | Contenido |
|---|---|---|
/dashboard |
⌂ Inicio | Tarjetas de estadísticas (sitios / eventos de hoy / plan actual), barras de uso (análisis IA / PV), acciones rápidas |
/dashboard/sites |
▤ Heatmaps | Lista tabular de sitios registrados. Añade nuevos sitios desde aquí |
/dashboard/cli |
⌘ CLI & Skills | Guías de instalación en paralelo para el CLI de terminal y el Claude Code Skill |
/dashboard/billing |
$ Plan & Facturación | Resumen de uso actual + tabla comparativa completa de planes (Free / Pro / Team / Enterprise) |
/dashboard/settings |
⚙ Configuración | Selector de idioma (English / 日本語) — más configuraciones próximamente |
Qué ha cambiado
▤ Sidebar izquierdo persistente al estilo Supabase
Los cinco elementos de navegación principales están siempre visibles en el sidebar izquierdo, fijo al hacer scroll para que puedas saltar entre páginas desde cualquier lugar.
- Resaltado de página activa: la página actual se enfatiza visualmente en el menú
- Iconos: cada elemento del menú tiene un identificador visual
- Cerrar sesión: anclado al fondo del sidebar, reduciendo el riesgo de clics accidentales
⌂ Inicio como resumen de un vistazo
/dashboard — la primera pantalla tras iniciar sesión — está ahora diseñada para darte una imagen completa del estado de tu cuenta en una sola vista.
- Tarjetas de estadísticas que muestran el número de sitios, el total de eventos de hoy y tu plan actual
- Barras de progreso para el uso de análisis IA y PV mensual (ámbar por encima del 80%, rojo por encima del 100%)
- Acciones rápidas: "Ver Heatmaps", "Añadir Sitio", "Mejorar Plan" y "Configurar CLI"
⌘ CLI & Skills uno al lado del otro
Ambas formas de usar HeatMapX — el CLI de terminal y el Claude Code Skill — están documentadas en una sola página en un layout de dos columnas.
- CLI: paso a paso desde
npm install -g heatmapxhastaheatmapx analyze - Claude Code Skill: instala con
/plugin install heatmapx-skill@xtv-llc/heatmapx-cliy llama a HeatMapX directamente desde la conversación - Comandos de ejemplo mostrados en inglés y japonés
$ Comparativa completa de planes integrada
La página de Plan & Facturación incluye ahora la tabla comparativa completa Free / Pro / Team / Enterprise para que puedas revisar opciones y mejorar tu plan sin salir del dashboard.
- Toggle mensual / anual (anual por defecto; la facturación anual ofrece un descuento significativo vs. mensual). Para precios actuales, consulta la página de precios
- Tu plan actual está marcado con una insignia verde "Actual"
- Pro está resaltado en naranja como la opción recomendada
- Enterprise enlaza a
heatmapx@xtv.co.jppara contacto directo
⚙ Selección de idioma en Configuración
El cambio de idioma anteriormente solo estaba disponible como un toggle de dos estados en el header. Ahora también se expone como un selector de radio explícito en Configuración. Los cambios se aplican instantáneamente y se guardan en el navegador.
Próximamente
Una sección "Próximamente" al fondo del sidebar muestra las funcionalidades que llegarán en próximas versiones:
| Funcionalidad | Descripción |
|---|---|
| 🧪 A/B Tests | Testing A/B con un clic para cambios de copy y layout basados en insights de heatmap |
| ✨ Dynamic UI | Motor de personalización que adapta la UI según atributos y patrones de comportamiento del usuario |
Otras mejoras
- Header sticky: el logo, el selector de tema y el toggle de idioma permanecen visibles al hacer scroll
- Sidebar sticky: la navegación permanece accesible en todo momento al hacer scroll por el contenido de la página
- Cerrar sesión reubicado: movido desde la esquina superior derecha del header al fondo del sidebar (acción importante pero de baja frecuencia, desplazada hacia abajo)
- Compatible hacia atrás: los marcadores existentes de
/dashboardaterrizan en la nueva pantalla Inicio — sin redirects necesarios
Alcance del impacto
Esta versión es solo UI/UX — la lógica de seguimiento, las estructuras de datos y las APIs no han cambiado. Los tracker tags embebidos existentes continúan funcionando tal como están. No se requieren redirects para los marcadores existentes de /dashboard.