req-054: Ajustes Visuais de Margem e Tooltip com Detalhe de Perfis no Módulo Menus

Este lote de trabalho (BATCH-054) visa refinar a interface de usuário (UI) do CRUD de visibilidade condicional no módulo menus com foco em usabilidade e espaçamento visual. As correções envolvem adicionar espaçamento vertical para evitar colisão entre as tags de perfis de usuário selecionados e os botões de ação do formulário, e exibir um tooltip dinâmico (usando Fomantic-UI) nas abas das condições do tipo perfil_usuario com os nomes dos perfis vinculados.

1. Modificações na Interface Administrativa (JS e CSS de Menus)

1.1 Margem nas Tags de Perfis de Usuário (condition-profile-tag)

• No arquivo gestor/modulos/menus/menus.js (ou estilos injetados/CSS do módulo):

  • Certificar-se de adicionar margem de espaçamento (ex: margin-bottom: 12px; ou margin-top: 8px;) no contêiner ou nas tags de perfis selecionados (.condition-profile-tag ou similar).

  • Garantir que haja um distanciamento adequado e legível entre a lista de tags e o botão #btn-confirm-condition (ou .btn-confirm-condition) localizado logo abaixo, eliminando a colisão visual.

1.2 Tooltip Dinâmico e Contador nas Abas de Visibilidade Condicional

• Ao renderizar ou atualizar o menu de abas (.menu-condition-tabs ou similar) na interface administrativa para condições do tipo perfil_usuario:

  • O link/item da aba (<a>) deve receber os seguintes atributos de tooltip do Fomantic-UI para exibir a listagem dos perfis selecionados:

  • data-tooltip="Usuário Perfis: [Lista de Nomes de Perfis separados por vírgula]" (Exemplo: data-tooltip="Usuário Perfis: Perfil Nome 1, Perfil Nome 2")

  • data-position="top center"

  • data-inverted=""

  • Atualizar o rótulo de texto interno da aba (<span>) para exibir a quantidade de perfis vinculados no seguinte formato:

  • [SLUG_DA_CONDICAO] (Perfil de usuário - [COUNT])

  • Exemplo: <span>perfil_usuario (Perfil de usuário - 2)</span>

  • Certificar-se de atualizar este tooltip e contador dinamicamente sempre que a seleção de perfis for alterada no formulário de edição da condição.

2. Validação e Testes

1. Testes Estáticos / Sintaxe:

   • Rodar verificações estáticas de PHP e JS para validar a integridade dos arquivos:

     • php -l gestor/modulos/menus/menus.php

     • node --check gestor/modulos/menus/menus.js

2. Validação Visual (Pendente com o operador):

   • Adicionar uma condição do tipo perfil_usuario e selecionar múltiplos perfis (ex: Perfil Nome 1, Perfil Nome 2).

   • Confirmar se as tags exibem margem vertical e não encostam no botão de confirmação.

   • Confirmar se o tooltip do Fomantic-UI é renderizado corretamente ao passar o mouse sobre a aba correspondente, listando os nomes dos perfis.

   • Confirmar se o rótulo da aba exibe o sufixo com o número correto de perfis selecionados.