Sidebar Esquerda Persistente e Layout de Dashboard com Múltiplas Páginas
- dashboard
- navigation
Em 2026-06-05, reconstruímos heatmapx.com/dashboard com um layout completo de sidebar persistente no estilo Supabase/Vercel (um complemento estrutural ao redesign completo do dashboard publicado no mesmo dia).
Novo Layout
┌──────────────────────────────────────────────────────┐
│ [icon] HeatMapX [☀💻🌙] [JA/EN] │ ← header fixo
├──────────────┬───────────────────────────────────────┤
│ MENU │ │
│ ▸ ⌂ Home │ Home │
│ ▤ Heatmaps │ │
│ │ Sites / Eventos de Hoje / Plano │
│ ⌘ CLI&Skills│ │
│ $ Plano&Cobrança│ Uso de Análise de IA [████░] │
│ ⚙ Config. │ Uso de PV [██░░░] │
│ │ │
│ EM BREVE │ Ações Rápidas │
│ 🧪 A/B Tests │ [▤ Ver Heatmaps] [＋Adicionar] │
│ ✨ Dynamic UI│ │
├──────────────┤ │
│ Sair │ │
└──────────────┴───────────────────────────────────────┘
Cinco Páginas Dedicadas
| Rota | Página | Conteúdo |
|---|---|---|
/dashboard |
⌂ Home | Cards de estatísticas (sites / eventos de hoje / plano atual), barras de uso (análises de IA / PV), ações rápidas |
/dashboard/sites |
▤ Heatmaps | Lista tabular de sites registrados. Adicione novos sites a partir daqui |
/dashboard/cli |
⌘ CLI & Skills | Guias de instalação lado a lado para o CLI de terminal e o Claude Code Skill |
/dashboard/billing |
$ Plano & Cobrança | Resumo do uso atual + tabela completa de comparação de planos (Free / Pro / Team / Enterprise) |
/dashboard/settings |
⚙ Configurações | Seletor de idioma (English / 日本語) — mais configurações em breve |
O Que Mudou
▤ Sidebar esquerda persistente no estilo Supabase
Todos os cinco itens de navegação primária ficam sempre visíveis na sidebar esquerda, fixada durante a rolagem para que você possa navegar entre páginas de qualquer lugar.
- Destaque da página ativa: a página atual é visualmente enfatizada no menu
- Ícones: cada item do menu tem um identificador visual
- Sair: fixado na parte inferior da sidebar, reduzindo o risco de cliques acidentais
⌂ Home como visão geral de relance
/dashboard — a primeira tela após o login — foi projetada para oferecer uma imagem completa do status da sua conta em uma única visualização.
- Cards de estatísticas mostrando contagem de sites, total de eventos de hoje e seu plano atual
- Barras de progresso para uso de análise de IA e PV mensal (âmbar acima de 80%, vermelho acima de 100%)
- Ações rápidas: "Ver Heatmaps", "Adicionar Site", "Fazer Upgrade" e "Configurar CLI"
⌘ CLI & Skills lado a lado
As duas formas de usar o HeatMapX — o CLI de terminal e o Claude Code Skill — estão documentadas em uma única página em layout de duas colunas.
- CLI: passo a passo do
npm install -g heatmapxatéheatmapx analyze - Claude Code Skill: instale com
/plugin install heatmapx-skill@xtv-llc/heatmapx-clie chame o HeatMapX diretamente da conversa - Comandos de exemplo mostrados em inglês e japonês
$ Comparação completa de planos integrada
A página de Plano & Cobrança agora inclui a tabela completa de comparação Free / Pro / Team / Enterprise para que você possa revisar as opções e fazer upgrade sem sair do dashboard.
- Toggle mensal / anual (anual como padrão; cobrança anual oferece desconto significativo em relação ao mensal). Para preços atuais, consulte a página de preços
- Seu plano atual está marcado com um badge verde "Atual"
- Pro está destacado em laranja como a opção recomendada
- Enterprise redireciona para
heatmapx@xtv.co.jppara contato direto
⚙ Seleção de idioma em Configurações
A troca de idioma estava disponível anteriormente apenas como um toggle de dois estados no cabeçalho. Agora também está exposta como um seletor de radio explícito em Configurações. As alterações são aplicadas instantaneamente e persistidas no navegador.
Em Breve
Uma seção "Em Breve" na parte inferior da sidebar exibe funcionalidades que chegarão nos próximos lançamentos:
| Funcionalidade | Descrição |
|---|---|
| 🧪 A/B Tests | Testes A/B de um clique para alterações de texto e layout baseadas em insights de heatmap |
| ✨ Dynamic UI | Motor de personalização que adapta a UI com base em atributos e padrões de comportamento do usuário |
Outras Melhorias
- Header fixo: logo, seletor de tema e toggle de idioma permanecem visíveis durante a rolagem
- Sidebar fixo: a navegação fica acessível o tempo todo durante a rolagem do conteúdo da página
- Sair realocado: movido do canto superior direito do cabeçalho para a parte inferior da sidebar (ação importante mas de baixa frequência movida para baixo)
- Retrocompatível: bookmarks existentes de
/dashboardchegam à nova tela Home — sem redirecionamentos necessários
Escopo do Impacto
Esta versão é somente UI/UX — a lógica de rastreamento, as estruturas de dados e as APIs não foram alteradas. As tags de rastreamento incorporadas existentes continuam funcionando normalmente. Nenhum redirecionamento é necessário para bookmarks existentes de /dashboard.