Human Request: Diagnóstico de Select Vazio, Melhorias no Mapeamento e Conteúdo em Abas (req-007)

Após a validação do Batch-005, o usuário identificou que o dropdown de itens selecionados (regra manual) continua vazio, e solicitou melhorias na usabilidade do mapeamento de…

Após a validação do Batch-005, o usuário identificou que o dropdown de itens selecionados (regra manual) continua vazio, e solicitou melhorias na usabilidade do mapeamento de variáveis, além de uma reestruturação visual do editor e visualizador em abas dinâmicas que renderizam o widget real do backend "on the fly".

Detalhes das Alterações e Melhorias Solicitadas

1. Diagnóstico e Ajuste do Select Vazio (`selected_items`) na Curadoria Manual

Problema: O dropdown .ui.multiple.search.selection.dropdown para a regra de alimentação Manual exibe uma lista vazia, impedindo a seleção de páginas do publicador selecionado, mesmo quando há registros ativos correspondentes no banco de dados.
Ajuste:
- Em gestor/modulos/publisher-highlights/publisher-highlights.php, nas funções de AJAX publisher_highlights_ajax_publisher_pages_search e publisher_highlights_ajax_publisher_pages_fetch, ajustar a consulta SQL.
- Em vez de fazer uma seleção isolada na tabela paginas (onde o publisher_id pode não estar preenchido ou estar desalinhado), realizar um INNER JOIN com a tabela publisher_pages usando a correlação pp.page_id = p.id AND pp.language = p.language.
- Filtrar no WHERE usando pp.publisher_id para garantir o vínculo correto da página ao publicador e verificar o status ativo (p.status = 'A') na linguagem atual.

2. Ocultar Itens Mapeados na Interface de Mapeamento de Variáveis

Problema: A exibição redundante de variáveis e campos nas colunas da esquerda e do meio após terem sido vinculados polui o visual e prejudica a experiência do usuário.
Ajuste:
- No arquivo publisher-highlights.js, nas funções de renderização renderItemVars() e renderPublisherFields():
- Se uma variável de modelo (ex: titulo) já estiver presente como chave no objeto schema.variable_mapping, ela não deve ser renderizada na primeira coluna ("Variáveis do Modelo").
- Se um campo do publicador (ex: titulo ou url) já estiver associado a qualquer variável de modelo (ou seja, seu valor estiver no mapeamento), ele não deve ser renderizado na segunda coluna ("Campos do Publicador").
- Ao clicar no ícone de remoção "x" na coluna da direita ("Vinculados"), o vínculo é removido do mapeamento e, automaticamente, a variável e o campo voltam a ser exibidos nas colunas correspondentes.

3. Diferenciação e Coloração dos Campos do Publicador (Padrões vs. Dinâmicos)

Problema: Os campos do publicador misturam as propriedades estruturais da página (como título da página, URL e data) com os campos personalizados baseados no modelo.
Ajuste:
- Na coluna "Campos do Publicador", criar duas seções/sub-listas distintas com subtítulos:
  1. Campos Padrões: Exibe os botões dos campos estruturais da página (titulo, url, data). Estes botões devem usar uma cor cinza (ex: class ui basic grey button).
  2. Campos Dinâmicos: Exibe os botões dos campos personalizados do modelo (ex: subtitulo, conteudo, etc.). Estes botões devem usar uma cor teal/azul (ex: class ui basic teal button).
- As duas seções devem ser atualizadas respeitando a regra de ocultação de itens já mapeados.

4. Conteúdo do Destaque em Abas (Visualizador ao Vivo e Editor HTML / CSS)

Problema: O editor e o visualizador aparecem empilhados verticalmente por padrão. O usuário deseja uma interface mais compacta e interativa baseada em abas.
Ajuste:
- Renomear a seção de cabeçalho Editor HTML / CSS do Bloco para Conteúdo do Destaque.
- Logo abaixo, criar duas abas utilizando o Fomantic UI (ui top attached tabular menu):
  1. Visualizador ao Vivo: Contém o iframe do visualizador (#iframe-visualizacao-pagina) de forma isolada, além dos botões de variáveis/simulação.
  2. Editor HTML / CSS: Contém os editores CodeMirror de código HTML e CSS e a barra lateral de mapeamento de variáveis.
- O Visualizador ao Vivo deve renderizar a prévia do widget com registros reais do banco:
- Implementar no PHP do módulo (publisher-highlights.php) uma rota AJAX de preview (ex: widget-preview) que recebe html, css, publisher_id e fields_schema.
- Esse endpoint executa o processamento do widget (chamando a lógica interna do publisher-highlights.widget.php) e retorna o HTML completo renderizado com os registros reais correspondentes às regras atuais.
- No JS, quando o editor sofrer alterações (salvar, mudança de regras, mapeamento ou troca de modelo), disparar essa requisição AJAX para atualizar o visualizador com a prévia real do widget "on the fly".

# Human Request: Diagnóstico de Select Vazio, Melhorias no Mapeamento e Conteúdo em Abas (req-007)
Após a validação do Batch-005, o usuário identificou que o dropdown de itens selecionados (regra manual) continua vazio, e solicitou melhorias na usabilidade do mapeamento de variáveis, além de uma reestruturação visual do editor e visualizador em abas dinâmicas que renderizam o widget real do backend "on the fly".
---
## Detalhes das Alterações e Melhorias Solicitadas
### 1. Diagnóstico e Ajuste do Select Vazio (`selected_items`) na Curadoria Manual
* **Problema**: O dropdown `.ui.multiple.search.selection.dropdown` para a regra de alimentação `Manual` exibe uma lista vazia, impedindo a seleção de páginas do publicador selecionado, mesmo quando há registros ativos correspondentes no banco de dados.
* **Ajuste**:
  * Em `gestor/modulos/publisher-highlights/publisher-highlights.php`, nas funções de AJAX `publisher_highlights_ajax_publisher_pages_search` e `publisher_highlights_ajax_publisher_pages_fetch`, ajustar a consulta SQL.
  * Em vez de fazer uma seleção isolada na tabela `paginas` (onde o `publisher_id` pode não estar preenchido ou estar desalinhado), realizar um `INNER JOIN` com a tabela `publisher_pages` usando a correlação `pp.page_id = p.id AND pp.language = p.language`.
  * Filtrar no `WHERE` usando `pp.publisher_id` para garantir o vínculo correto da página ao publicador e verificar o status ativo (`p.status = 'A'`) na linguagem atual.
---
### 2. Ocultar Itens Mapeados na Interface de Mapeamento de Variáveis
* **Problema**: A exibição redundante de variáveis e campos nas colunas da esquerda e do meio após terem sido vinculados polui o visual e prejudica a experiência do usuário.
* **Ajuste**:
  * No arquivo `publisher-highlights.js`, nas funções de renderização `renderItemVars()` e `renderPublisherFields()`:
    * Se uma variável de modelo (ex: `titulo`) já estiver presente como chave no objeto `schema.variable_mapping`, ela **não deve** ser renderizada na primeira coluna ("Variáveis do Modelo").
    * Se um campo do publicador (ex: `titulo` ou `url`) já estiver associado a qualquer variável de modelo (ou seja, seu valor estiver no mapeamento), ele **não deve** ser renderizado na segunda coluna ("Campos do Publicador").
    * Ao clicar no ícone de remoção "x" na coluna da direita ("Vinculados"), o vínculo é removido do mapeamento e, automaticamente, a variável e o campo voltam a ser exibidos nas colunas correspondentes.
---
### 3. Diferenciação e Coloração dos Campos do Publicador (Padrões vs. Dinâmicos)
* **Problema**: Os campos do publicador misturam as propriedades estruturais da página (como título da página, URL e data) com os campos personalizados baseados no modelo.
* **Ajuste**:
  * Na coluna "Campos do Publicador", criar duas seções/sub-listas distintas com subtítulos:
    1. **Campos Padrões**: Exibe os botões dos campos estruturais da página (`titulo`, `url`, `data`). Estes botões devem usar uma cor cinza (ex: class `ui basic grey button`).
    2. **Campos Dinâmicos**: Exibe os botões dos campos personalizados do modelo (ex: `subtitulo`, `conteudo`, etc.). Estes botões devem usar uma cor teal/azul (ex: class `ui basic teal button`).
  * As duas seções devem ser atualizadas respeitando a regra de ocultação de itens já mapeados.
---
### 4. Conteúdo do Destaque em Abas (Visualizador ao Vivo e Editor HTML / CSS)
* **Problema**: O editor e o visualizador aparecem empilhados verticalmente por padrão. O usuário deseja uma interface mais compacta e interativa baseada em abas.
* **Ajuste**:
  * Renomear a seção de cabeçalho `Editor HTML / CSS do Bloco` para `Conteúdo do Destaque`.
  * Logo abaixo, criar duas abas utilizando o Fomantic UI (`ui top attached tabular menu`):
    1. **Visualizador ao Vivo**: Contém o iframe do visualizador (`#iframe-visualizacao-pagina`) de forma isolada, além dos botões de variáveis/simulação.
    2. **Editor HTML / CSS**: Contém os editores CodeMirror de código HTML e CSS e a barra lateral de mapeamento de variáveis.
  * O **Visualizador ao Vivo** deve renderizar a prévia do widget com registros reais do banco:
    * Implementar no PHP do módulo (`publisher-highlights.php`) uma rota AJAX de preview (ex: `widget-preview`) que recebe `html`, `css`, `publisher_id` e `fields_schema`.
    * Esse endpoint executa o processamento do widget (chamando a lógica interna do `publisher-highlights.widget.php`) e retorna o HTML completo renderizado com os registros reais correspondentes às regras atuais.
    * No JS, quando o editor sofrer alterações (salvar, mudança de regras, mapeamento ou troca de modelo), disparar essa requisição AJAX para atualizar o visualizador com a prévia real do widget "on the fly".