req-232 — Refinamento de UI V3.0: Grade Livre de Widgets (Drag & Resize), Proporções dos Cards/Capas, Topbar e Largura Dinâmica do Painel

• Status: ready-for-intake

• Modo de Autonomia: autonomo_monitorado

• Lote Alvo: BATCH-241

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

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

• Origem: Engenheiro Chefe / Arquiteto Master: Feedback direto do Humano nos testes da V3.0.

• Aviso de Concorrência: Isolar na branch feat/req-232 via worktree temporário (conn2flow-req232). Não usar git add -A.

1. Contexto e Apontamentos do Humano

Após a integração inicial da V3.0 e testes no Lab, o Engenheiro Chefe identificou 6 pontos de acabamento e ergonomia essenciais:

1. Card de Módulo e Capa (Densidade M):

   • A imagem de capa ficou muito estreita/curta verticalmente ("muito wide"), dificultando o reconhecimento visual.

   • O botão de arrastar (grip handle) está sobrepondo ou deslocando o ícone SVG/capa para o lado.

   • A imagem não está cobrindo harmoniosamente o cabeçalho.

2. Aba de Widgets & Métricas (Seleção Ativa de Widgets, Catálogo e Grade Interativa Real):

   • O usuário não encontrou onde selecionar qual widget vai estar ativo no grid; parece que está ativo, mas não há como selecionar ou trocar qual widget vai rodar naquele bloco.

   • O seletor simplificado de 3 colunas (dropdown 1 Col, 2 Cols, Full) foi uma solução provisória tipo esqueleto que não atende à visão de produto.

   • O usuário exige poder clicar e arrastar com o mouse nos cantos de cada painel (alça de redimensionamento nos cantos/bordas) para mudar livremente tanto a largura quanto a altura, operando sobre uma malha modular mais granular (ex.: grade de até 12 a 24 blocos modulares), com liberdade total de layout.

   • No próprio cabeçalho do card de cada widget, deve haver um seletor evidente (ou botão de engrenagem/configuração com menu seletor) para trocar diretamente qual widget roda naquele espaço sem precisar remover e reabrir outro.

   • O catálogo de widgets precisa ser facilmente acessível e deixar claro quais widgets estão disponíveis e quais já estão ativos na tela.

3. Topbar Administrativa e Personalização de Atalhos:

   • O dropdown do perfil de usuário à direita ficou muito verticalizado/estreito e precisa de mais amplitude lateral (largura balanceada, w-80 a w-84).

   • O diálogo/modal de "Personalizar Atalhos" está com espaçamento quebrado e botões sobrepostos.

   • Os tooltips (data-c2f-dica) dos botões da topbar estão abrindo para cima (top), ficando ocultos atrás do iframe da editbar; devem abrir para baixo (bottom).

   • O modal de atalhos precisa permitir arrastar e reordenar a posição dos favoritos diretamente na interface.

4. Logomarca do Painel:

   • A logo images/logo-principal.png na barra superior ficou muito pequena; deve ser ampliada em cerca de 30% a 40% (aproveitando a altura da barra h-16).

5. Controle de Largura Máxima dos Módulos (Container Centralizado):

   • Atualmente, as telas do painel usam max-w-7xl fixo no <main>. Em monitores ultrawide ou telas grandes, o usuário quer poder expandir a largura lateral útil (ex.: alternar entre max-w-7xl, max-w-screen-2xl, max-w-[1600px] ou max-w-full).

2. Escopo Detalhado

2.1. Ajuste Visual dos Cards de Módulos (Dashboard)

• Em dashboard-cards-tailwind.css e HTML:

  • Aumentar a altura do cabeçalho do card em 35%:

  • Densidade M: de h-24 (6rem) para h-32 ou h-36 (8.5rem a 9rem), dando destaque real à ilustração 3D.

  • Densidade G: de h-38 para h-48 (12rem).

  • Ajuste de Enquadramento: A classe .dashboard-module-cover deve usar object-fit: cover preenchendo 100% da largura e altura do wrapper sem sobras brancas.

  • Posicionamento da Alça de Arraste: Fixar a alça de drag (.dashboard-card-drag-handle) com posição absoluta discreta no canto superior esquerdo (top-2.5 left-2.5) com fundo translúcido suave (bg-white/80 backdrop-blur-sm shadow-sm), sem deslocar o centro do SVG quando não houver cover.

2.2. Grade Livre, Catálogo e Seleção Ativa de Widgets (Aba Widgets)

• Em dashboard.js e dashboard-cards-tailwind.html:

  • Seleção e Troca Direta de Widget no Card:

  • No cabeçalho de cada card de widget, incluir um seletor visual evidente ou botão de troca rápida (Trocar Widget / ícone de configuração) que permita selecionar diretamente outro widget do catálogo para rodar naquele bloco, atualizando seu conteúdo de imediato via AJAX.

  • Suporte a adicionar um "Novo Bloco" que já nasce com um estado de seleção inicial intuitivo para o usuário escolher o widget desejado.

  • Catálogo de Widgets Ativos vs Disponíveis:

  • O modal ou drawer de catálogo deve indicar com clareza o status de cada widget (ex.: "Ativo no painel" vs "Disponível para adicionar").

  • Permitir adicionar widgets diretamente à grade com um clique ou arrasto.

  • Grade Modular Flexível (Drag & Resize nos Cantos):

  • Substituir o <select> estático de 3 opções (col-span-1, col-span-2, col-span-full) por um sistema de grade modular com suporte a malha de até 12 a 24 colunas/linhas proporcionais.

  • Implementar uma alça de redimensionamento no canto inferior direito de cada card de widget (dashboard-widget-resize-handle), permitindo ao usuário clicar e arrastar com o mouse para expandir ou contrair livremente a largura (colunas) e altura (linhas/pixels mínimos).

  • Exibir contorno visual/snap durante o redimensionamento.

  • A alça de movimentação (grip) no topo continua permitindo reordenar os cards no grid.

  • Persistência Completa:

  • Persistir no backend (via dashboard_ajax_preferencia_salvar() em dashboard_widgets_layout) a lista de widgets ativos com suas posições, larguras e alturas configuradas.

2.3. Topbar, Dropdowns, Dicas e Reordenação de Atalhos

• No admin-topbar-tailwind.html e admin-topbar.js:

  • Largura do Dropdown do Usuário: Aumentar de w-72 para w-80 ou w-84, ajustando o padding interno para visual espaçoso e premium.

  • Posição dos Tooltips: Mudar as dicas dos botões da topbar para posição inferior: data-c2f-dica-pos="bottom" (evitando colisão com iframe do editbar superior).

  • Modal de Personalização de Atalhos:

  • Corrigir os estilos do diálogo topbar-customize para que a lista de módulos tenha espaçamento respirado (gap-2), sem sobreposição de textos.

  • Adicionar alça de ordenação (grip-vertical) na lista de favoritos ativos para que o usuário possa reordenar arrastando e soltando.

  • Logomarca: Aumentar o tamanho visual da tag <img> da logo na topbar de h-8 para h-10 a h-11 (max-w-[190px]), preenchendo a altura da barra com elegância.

2.4. Seletor de Largura da Interface do Painel

• No componente do layout administrativo (layout-administrativo-tailwind.html):

  • Substituir a classe estática max-w-7xl no <main data-admin-main> por uma classe dinâmica baseada na preferência do usuário ou controlada por atributo data-admin-max-width.

  • Adicionar controle de largura (ex.: Normal 1280px, Expandido 1600px, Total 100%) no menu do usuário ou na barra de preferências, persistindo a escolha no banco de dados.

3. Critérios de Aceite (Definition of Done)

• [ ] CA-1 (Capas Visíveis e Proporcionais): No Dashboard densidade M, as capas dos módulos possuem altura suficiente (~35% maior) para exibição nítida das ilustrações 3D, com preenchimento completo e alça de arrasto não intrusiva.

• [ ] CA-2 (Seleção e Troca Ativa de Widgets): Na aba de Widgets, o usuário consegue ver claramente quais widgets estão ativos, trocar qual widget roda em cada bloco diretamente pelo card ou adicionar novos blocos com facilidade.

• [ ] CA-3 (Redimensionamento Livre por Arrasto - Drag & Resize): Cada card de widget possui alça de redimensionamento nos cantos/bordas, permitindo ao usuário arrastar com o mouse para alterar largura e altura sobre a grade modular com persistência das dimensões e ordem no backend.

• [ ] CA-4 (Topbar & Dropdown Estilizados): O menu de usuário tem largura adequada (w-80), o modal de favoritos está limpo e sem sobreposição de textos com suporte a reordenação por arrasto, e os tooltips abrem para baixo (bottom).

• [ ] CA-5 (Logomarca em Destaque): A logomarca no cabeçalho tem tamanho proporcional à barra (~35% maior) e excelente legibilidade.

• [ ] CA-6 (Controle de Largura do Painel): O usuário consegue alternar o limite de largura útil da área de conteúdo do painel sem quebrar o layout.

• [ ] CA-7 (Regressão & Validação): Nenhuma quebra no PHPUnit, minificação JS de autoria executada com sucesso e zero erros de console no navegador.