req-238 — Harmonização do Design System, TopBar/Sidebar, Dashboard V3.3 e Conformidade Visual dos Módulos

• Status: implemented-pending-homologation

• Modo de Autonomia: autonomo_monitorado

• Lote Alvo Core: BATCH-247 (conn2flow)

• Lote Alvo Site: BATCH-098 (conn2flow-site)

• Data de Criação: 2026-10-05

• Papel: Agente Sênior de UX/UI & Frontend Full-Stack

• Repositório 1 (Core): conn2flow em [REDACTED]

• Repositório 2 (Site): conn2flow-site em [REDACTED]

1. Visão Geral & Diagnóstico da Auditoria Humana

Após a consolidação da base e dos assets na V3.2, a inspeção humana detalhada em ambiente real (Lab) identificou divergências de acabamento visual, inconsistências de design system entre módulos e pontos de atrito no Dashboard e na Topbar.

Esta requisição normativa unifica a solução desses pontos em 4 blocos técnicos claros:

1. Bloco A — Topbar, Meus Atalhos & Menu de Usuário: Correção de largura e alinhamento do submenu de perfil, renderização dos atalhos em modo somente-ícone com tooltip, e consistência de exibição (ícone + nome do usuário).

2. Bloco B — Sidebar (Menu Lateral Esquerdo): Padronização definitiva de tipografia e peso de fonte (font-semibold) em todos os módulos de ambos os repositórios.

3. Bloco C — Dashboard V3.3 (Módulos & Widgets): Badge estilizado para o grupo do módulo, resize de widgets exclusivo no canto inferior-direito, steps de altura menores e fluidos com grid blueprint visual durante drag/resize, busca em tempo real na troca de widget, pré-seleção do estado atual, isolamento de CSS/JS e toggle switch semântico para o Modo de Edição. Roteamento de manuais/docs de módulos privados para o módulo documentation.

4. Bloco D — Auditoria & Conformidade do Design System em Todos os Módulos: Padronização dos containers (card branco envolvente), abas unificadas (c2fc-abas), correção de botões/ícones desalinhados e restauração de abas no forms-submissions.

2. Especificação Técnica & Critérios de Aceite

BLOCO A: TopBar, Atalhos e Menu de Usuário (Core: admin-topbar)

CA-A1: Menu de Usuário — Largura, Estrutura e Exibição de Nome

• No Dashboard e em todos os módulos onde o menu aparecia apenas como ícone isolado ou com dropdown ensalsichado/verticalizado:

  • O gatilho do menu de perfil deve renderizar consistentemente: avatar/ícone + nome do usuário (com truncamento suave se o nome for longo) em um botão com bordas arredondadas e feedback de hover (c2fc-topbar-user-btn).

  • O dropdown do perfil deve ter largura estruturada fixa (w-80 / min-w-[18rem]), padding generoso, divisores suaves e estrutura idêntica à que funciona com sucesso no módulo admin-modos-ia.

CA-A2: Meus Atalhos — Renderização Somente-Ícone com Tooltip

• Problema: Os atalhos estavam renderizando com textos completos diretamente nos botões, encavalados e perdendo a elegância visual da barra.

• Solução Normativa:

  • Na barra superior, os atalhos fixados devem renderizar apenas os ícones dos módulos em botões compactos (size-8 ou size-9 com cantos arredondados, hover:bg-slate-100).

  • Cada ícone deve conter tooltip nativo (data-c2f-dica="<Nome do Módulo>", data-c2f-dica-pos="bottom"), informando o nome no hover.

  • Isso permite acomodar múltiplos atalhos com elegância, alinhados à esquerda junto ao logotipo ou na área de navegação central.

BLOCO B: Sidebar — Padronização de Tipografia e Peso de Fonte

CA-B1: Unificação de Estilos dos Menus Laterais (layout-administrativo-tailwind)

• Problema: No Dashboard a sidebar exibe fontes em negrito, enquanto em Presentations, Subscriptions, Subscriptions Configs a fonte fica fina (font-normal), demonstrando quebra de escopo CSS.

• Solução Normativa:

  • Definir regra CSS unificada e determinística para os links e cabeçalhos de grupos da barra lateral em layout-administrativo-tailwind.css:

  • Links de navegação: peso padrão font-medium (500), com estado ativo em font-semibold (600) e cor primária.

  • Cabeçalhos de seção/grupo: text-xs uppercase tracking-wider font-semibold text-slate-400.

  • Garantir que nenhum módulo injete regras CSS conflitantes que sobrescrevam a tipografia global da sidebar.

BLOCO C: Dashboard V3.3 — UX/UI de Módulos e Widgets

CA-C1: Cards de Módulos — Badge Estilizado para o Grupo

• No cabeçalho/corpo dos cards de módulos (dashboard-cards-tailwind.html):

  • Substituir o texto simples de #modulo-grupo# por um badge/label estilizado:

    <span class="inline-flex items-center rounded-full bg-sky-50 px-2.5 py-0.5 text-xs font-medium text-sky-700 border border-sky-200/80">
    #modulo-grupo#
    </span>

CA-C2: Widgets — Alça de Redimensionamento Exclusiva no Canto Inferior Direito

• Problema: Alças nos 4 cantos geraram poluição visual e inconsistência de uso.

• Solução Normativa:

  • Remover do DOM e dos estilos as alças dos cantos superior-esquerdo, superior-direito e inferior-esquerdo.

  • Manter exclusivamente a alça do canto inferior direito (bottom-right), alinhada ao vetor natural de expansão do grid.

CA-C3: Widgets — Altura Fluida com Passos Menores e Grid Blueprint Overlay

• Passos de Altura:

  • Em vez de apenas 2 saltos bruscos, permitir múltiplos passos graduais (ex: steps de 60px/80px, com altura mínima de 180px até 600px+), conferindo sensação de controle contínuo.

• Grid Blueprint Overlay:

  • Ao iniciar o arrasto (dragstart / sortstart) ou redimensionamento (resizestart) de um widget, injetar dinamicamente na grade um overlay de fundo com malha suave pontilhada/blueprint (bg-grid suave em azul claro/slate), facilitando a visualização dos slots de 12 colunas para onde o bloco irá se encaixar.

  • O overlay deve sumir suavemente no término da ação (dragend / resizeend).

CA-C4: Trocar Widget — Busca em Tempo Real e Pré-Seleção do Estado Atual

• No painel/modal de seleção de widget:

  • Adicionar campo de busca instantânea (<input type="search" placeholder="Buscar widget..." />) que filtra os cards em tempo real.

  • Quando o card já contiver um widget atribuído, o modal deve abrir com o Tipo de Widget e o Registro/Instância já marcados visualmente como selecionados.

  • Adicionar botão "Trocar / Resetar" para limpar a seleção atual e permitir escolher outro do zero com facilidade.

CA-C5: Renderização dos Widgets — Isolamento Estilístico (Iframe Leve / Shadow Scope)

• Assegurar que os widgets mantenham sua fidelidade visual integral.

• O conteúdo interno de cada widget deve rodar com isolamento estruturado (iframe sandboxed leve montado dinamicamente com os estilos necessários ou container com escopo CSS defensivo #c2f-widget-root), impedindo qualquer interferência mútua entre o CSS da página do painel e o CSS interno do widget.

CA-C6: Menu Opções — Modo de Edição como Switch/Interruptor Semântico

• No menu dropdown "Opções", substituir o botão texto comum por um componente switch/toggle estilizado:

  • Visual: interruptor com trilha arredondada e botão deslizante animado.

  • Rótulo dinâmico e acessível: "Modo de Edição: Ativado" (verde/azul) vs "Modo de Edição: Desativado" (cinza neutro).

CA-C7: Módulos Privados — Links de Documentação e Manual para Módulo Interno

• Nos cards de módulos da aba Módulos:

  • Quando o módulo for privado (origem em conn2flow-site, ex: social-connections, host-manager, 3d-catalog):

  • Os botões "Ver manual" e "Ver documentação" devem apontar para a rota do módulo interno de documentação com a UI do painel (/admin/documentation/<modulo-id>/), e não para a documentação pública do site onde esses módulos não existem.

BLOCO D: Harmonização do Design System em Todos os Módulos (Core & Site)

CA-D1: Padronização de Containers e Títulos (admin-ia, admin-modos-ia, admin-prompts-ia)

• Container Branco Padronizado:

  • Telas de adicionar/editar e listagens não devem renderizar formulários jogados no fundo cinza da página.

  • Todo formulário deve ser encapsulado no container oficial:

    <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
    ...
    </div>

• Servidores IA (admin-ia):

  • O estado vazio ("Nenhum servidor configurado") deve usar o card branco com contraste nítido e ícone cinza/azul suave.

  • Título da página padronizado com mesmo tamanho (text-2xl font-bold text-slate-900) e alinhamento do dashboard.

• Modos IA e Prompts IA:

  • Botão de ação "Padrão" / submit deve ter margem superior (mt-6 / gap-4), sem colisão com o campo acima.

CA-D2: Unificação do Componente de Abas (forms, forms-search, forms-submissions)

• Problema: Foram detectados 3 estilos diferentes de abas no sistema.

• Solução Normativa:

  • Padronizar todas as telas com o componente canônico c2fc-abas:

  • Abas com borda inferior de 2px, texto text-sm font-semibold, ícone de 16px à esquerda, cor ativa text-sky-600 border-sky-600 e cor inativa text-slate-500 hover:text-slate-700.

• Forms Submissions (forms-submissions):

  • Na tela de visualização de envio:

  • Reestruturar o alinhamento de botões e ícones no cabeçalho da resposta.

  • Restaurar as 3 abas funcionais históricas (que haviam se transformado em texto corrido), organizando os dados da submissão em abas claras e navegáveis.

CA-D3: Checklist de Conformidade Visual de Módulos (Core & Site)

• Executar inspeção visual em todos os módulos listados:

  • Core: dashboard, admin-ia, admin-modos-ia, admin-prompts-ia, forms, forms-search, forms-submissions, menus, galleries, admin-arquivos, admin-categorias, admin-atualizacoes, cookie-consent, usuarios, usuarios-perfis.

  • Site: presentations, subscriptions, subscriptions-config, subscriptions-plans, social-connections, host-manager, 3d-catalog.

• Critérios mandatórios:

  • Título padronizado com ícone do módulo.

  • Formulários e tabelas dentro de card branco com borda slate-200.

  • Botões com classes c2fc-botao.

  • Abas com classes c2fc-abas.

  • Suporte responsivo a 390px sem scroll horizontal.

3. Live Todo List da Missão

Bloco A — Topbar & Atalhos:

• [x] Atualizar menu de perfil na Topbar para exibir sempre Avatar + Nome do usuário com dropdown w-80 estruturado.

• [x] Configurar Meus Atalhos na Topbar em modo somente-ícone com tooltip data-c2f-dica.

• [x] Garantir posicionamento consistente entre Dashboard e demais módulos.

Bloco B — Sidebar:

• [x] Unificar classes de peso de fonte (font-semibold) na sidebar do layout administrativo em Core e Site.

Bloco C — Dashboard V3.3:

• [x] Card de Módulos: Adicionar badge estilizado para o grupo do módulo (#modulo-grupo#).

• [x] Widgets: Remover alças de resize de 3 cantos, mantendo exclusivamente o canto inferior-direito.

• [x] Widgets: Implementar passos de altura mais fluidos e grid blueprint overlay ativo durante drag/resize.

• [x] Widgets: Adicionar busca instantânea no modal de trocar widget.

• [x] Widgets: Pré-selecionar tipo e registro atual ao abrir o modal, com botão para resetar/trocar.

• [x] Widgets: Garantir isolamento estrito de CSS/JS para cada widget.

• [x] Menu Opções: Implementar interruptor/switch semântico para o Modo de Edição.

• [x] Manuais/Docs: Redirecionar links dos módulos privados para a rota interna do módulo documentation.

Bloco D — Harmonização de Módulos & Design System:

• [x] admin-ia: Card branco envolvente, estado vazio com contraste correto e título padronizado.

• [x] admin-modos-ia e admin-prompts-ia: Card branco e correção de espaçamento dos botões.

• [x] forms e forms-search: Padronizar abas no formato canônico c2fc-abas e card branco.

• [x] forms-submissions: Realinhar botões/ícones da visualização e restaurar as 3 abas funcionais.

• [x] Realizar auditoria e conformidade visual nos demais módulos do Core e Site.

Testes & Validação:

• [x] Testes automatizados Vitest e PHPUnit verdes no Core e Site.

• [x] Pipeline oficial ./c2f project:update-all [REDACTED] --confirmar-remoto com saída 0.

• [x] Preencher evidências em BATCH-247.md e BATCH-098.md.