-
Status:
ready-for-intake -
Modo de Autonomia:
autonomo_monitorado -
Lote Alvo:
BATCH-237 -
Data de Criação: 2026-10-04
-
Repositório:
conn2flow(Core) em[REDACTED] -
Origem: Engenheiro Chefe / Arquiteto Master: Evolução da barra superior do layout administrativo para maior ergonomia e flexibilidade de atalhos.
-
Aviso de Concorrência: Outros agentes atuando no repositório. Manter alterações isoladas no layout administrativo e componentes de topbar, sem tocar nos formulários ou na listagem da
req-220/req-222.
1. Contexto e Objetivos
Atualmente, o cabeçalho superior do painel (<header> no layout-administrativo-tailwind.html) é muito simplificado: exibe apenas o botão de abrir menu lateral (mobile), o logotipo central/esquerdo e o avatar estático com o nome do usuário à direita.
Para modernizar a experiência de uso do sistema:
-
Menu Dropdown de Usuário: Substituir o indicador estático por um dropdown ergonômico e completo de perfil (com atalhos para Editar Perfil, Configurações de Segurança, Alterar Senha, Alternar Tema e Sign Out).
-
Barra de Atalhos e Favoritos Rápidos: Permitir que o operador favorite módulos ou ações frequentes (ex.: "Nova Página", "Novo Post", "Ver Pedidos") e os fixe na topbar superior para acesso em 1 clique.
-
Harmonia com o Padrão da Editbar: Alinhar os tokens visuais, alturas, espaçamentos, hovers e sombras da topbar com o padrão de alta produtividade já estabelecido na barra de edição (
editbar).
2. Escopo Detalhado
2.1. Menu Dropdown de Usuário (Top-Right)
-
Ao clicar no avatar/nome do usuário, abrir um menu suspenso nativo Tailwind com fechamento automático ao clicar fora (click outside) e suporte a teclado (ESC).
-
Opções do Menu:
-
Cabeçalho do menu com nome completo, e-mail e perfil de acesso (badge com nível de privilégio).
-
Divisor sutil.
-
Link: ? Meu Perfil (
/perfil-usuario/). -
Link: ?️ Segurança e Senha (
/perfil-usuario/#seguranca). -
Toggle / Ação: ? Idioma da Interface (seletor rápido PT-BR / EN).
-
Divisor sutil.
-
Link com destaque de atenção: ? Sair / Encerrar Sessão (
/signout/).
-
2.2. Barra de Favoritos do Usuário (Top-Center / Top-Left)
-
Adicionar área flexível entre o logotipo e o menu de usuário para exibição de ícones de atalho favoritos:
-
Suporte a adicionar/remover o módulo atual dos favoritos diretamente na tela do módulo ou via modal de customização da topbar.
-
Exibição de até 4-6 atalhos favoritos no desktop com tooltip (
data-c2f-dica), recolhendo para menu "Mais..." em telas menores. -
Persistência dos atalhos favoritos vinculada ao usuário logado no banco de dados.
-
2.3. Padronização Visual e Transição com a Editbar
-
Estilizar a topbar com altura equilibrada (
h-14ouh-16), borda inferior sutil (border-slate-200), fundo translúcido opcional com blur (bg-white/95 backdrop-blur-sm) e sombras discretas (shadow-sm). -
Garantir que, quando o usuário estiver em uma página que também possua a barra de edição ativa (
editbar), as duas barras coexistam perfeitamente sem sobreposição indesejada ou salto de layout.
3. Critérios de Aceite (Definition of Done)
-
[ ] CA-1 (Dropdown de Usuário Completo): Dropdown acessível via clique e teclado, com todas as opções de perfil, idioma e logout funcionando sem Fomantic UI.
-
[ ] CA-2 (Gerenciamento de Favoritos): Usuário consegue favoritar módulos e visualizá-los diretamente na barra superior, com clique direto abrindo a respectiva tela.
-
[ ] CA-3 (Persistência no Backend): Os favoritos do usuário são salvos no banco de dados e restaurados em qualquer navegador logado.
-
[ ] CA-4 (Coexistência com Editbar): Nenhuma sobreposição de z-index ou espaçamento quebrado quando a topbar e a editbar estão ativas simultaneamente.
-
[ ] CA-5 (Responsividade Mobile): Em telas estreitas (< 768px), os favoritos colapsam graciosamente e a barra mantém usabilidade total sem overflow horizontal.