req-081: CodeMirror no Assistente IA, Correção no Save, Novos Dropdowns na Toolbar e Melhoria no Painel "+"

CodeMirror e Redimensionamento no Assistente IA: * Problema: As caixas de texto de instrução do prompt (c2f-ai-instruction) e de texto do modo prompt (c2f-ai-mode-text) no…

Descrição do Problema / Contexto

Esta requisição (BATCH-081) reúne melhorias funcionais, correções e novas interfaces para refinar a experiência do Live Editor e do Dashboard Site Toolbar.

CodeMirror e Redimensionamento no Assistente IA:
- Problema: As caixas de texto de instrução do prompt (c2f-ai-instruction) e de texto do modo prompt (c2f-ai-mode-text) no assistente IA não estão instanciando o CodeMirror. Além disso, a caixa flutuante do assistente por IA (c2f-he-live-box) precisa ser redimensionável da mesma forma que os modelos.
- Comportamento Esperado: Instanciar instâncias do CodeMirror (com modo Markdown ou similar) para essas duas textareas. Permitir que o contêiner do assistente (c2f-he-live-box) seja redimensionável por arrasto no canto inferior direito (resize: both; overflow: auto;).
Deseleção de Elementos ao Salvar (c2f-editbar-save):
- Problema: Ao clicar no botão de salvar, se houver um elemento selecionado (com a borda azul e controles ativos) ou com hover ativo, o editor pode falhar no mapeamento e gerar o erro "Erro ao salvar a página.".
- Comportamento Esperado: O fluxo de salvamento deve, de forma determinística, limpar qualquer seleção ativa, hover ou contorno do editor antes de prosseguir com a reconstrução e submissão do HTML.
Novos Dropdowns na Toolbar (Menu Usuário & Página):
- Problema: Os botões de edição rápida da página na toolbar (c2f-toolbar-edit e c2f-toolbar-edit-advanced) ficam expostos diretamente. Queremos reorganizá-los e criar dois menus dropdowns robustos (semelhantes ao menu de módulos c2f-toolbar-menu).
- Menu do Usuário:
  - Exibir ícone de usuário + nome do usuário (utilizando a variável do template @[[usuario#nome]]@).
  - Ao clicar, abre o menu contendo: um ícone maior de perfil, o nome completo, e links para Perfil (@[[pagina#url-raiz]]@perfil-usuario/) e Sair (@[[pagina#url-raiz]]@signout/).
- Menu da Página:
  - Exibir ícone de página + texto "Página".
  - Ao clicar, abre o menu contendo: o título da página atual, e links para:
    1. Editar Página (link c2f-toolbar-edit existente).
    2. Editar Avançado (link c2f-toolbar-edit-advanced existente).
    3. Criar Nova Página: link dinâmico; se a página atual for um publisher (/publisher-pages/...), aponta para /publisher-pages/adicionar/, caso contrário para /admin-paginas/adicionar/.
    4. Clonar Página: link dinâmico (/publisher-pages/clonar/?id={id} ou /admin-paginas/clonar/?id={id}).
CRUD de Prompts no Assistente IA:
- Problema: O assistente IA clássico possui ações para gerenciar prompts personalizados: limpar (ai-prompt-clear), editar (ai-prompt-edit), deletar (ai-prompt-del) e criar novo (ai-prompt-new). Estas operações não foram trazidas para o painel de IA do Live Editor.
- Comportamento Esperado: Integrar esses 4 botões e suas respectivas ações AJAX no painel do assistente IA do Live Editor (c2f-he-live-box), permitindo o gerenciamento completo de prompts do usuário.
Código Customizado no Painel de Inserção ("+"):
- Problema: O painel de adição de elementos (c2f-add-panel) permite inserir apenas elementos e widgets pré-definidos. O usuário precisa de uma opção para injetar código customizado livremente.
- Comportamento Esperado: Adicionar a opção "Código Customizado" no menu de elementos. Ao clicar, exibir uma área de CodeMirror para edição livre de HTML/CSS. Ao confirmar, inserir o bloco de código no DOM vivo como um elemento padrão (estilo c2f-add-el) e fechar o painel.
Nova Estrutura em Duas Colunas do Painel "+":
- Problema: O painel "+" lista todos os elementos e widgets misturados, dificultando a busca.
- Comportamento Esperado:
  - Dividir o painel em duas colunas principais: Elementos HTML (coluna da esquerda) e Widgets (coluna da direita).
  - A coluna de Widgets deve ser dividida em subcolunas: Grupos de widgets à esquerda (c2f-add-widget-groups) e Itens do grupo selecionado à direita (c2f-add-widget-item).
  - Ao clicar em um grupo, a lista de itens deve ser atualizada para exibir apenas os widgets pertencentes àquele grupo.
  - Adicionar paginação ("Carregar Mais") no final da lista de itens quando o total exceder N itens (N deve ser configurável no módulo dashboard, com padrão de 10).
  - Adicionar um campo de entrada de texto no topo da lista de widgets para busca autocomplete inteligente com filtragem via AJAX.

Proposta de Alterações Detalhada

1. CodeMirror e Resizing no Assistente IA

No frontend (html-editor.js):
- Ao criar o painel do assistente IA, localizar os textareas #c2f-ai-instruction e #c2f-ai-mode-text.
- Instanciar o CodeMirror para ambos usando o modo "markdown" (semelhante ao editor clássico em ia.js).
- Adicionar resize: both; overflow: auto; no estilo CSS de #c2f-ai-panel (ou .c2f-he-live-box genérico) para permitir o redimensionamento fluído pelo canto.

2. Deseleção Segura no Save

No frontend (dashboard.toolbar.js):
- No início da rotina de salvamento (antes de extrair o HTML limpo com getCleanHtml), invocar o método de deseleção do editor visual (c2fEditor.deselect() ou equivalente que remove a seleção ativa e oculta os overlays do editor).
- Assegurar que nenhum elemento com classes temporárias ou atributos de hover temporários persista no DOM durante a reconstrução.

No template HTML (dashboard-site-toolbar.html - pt-br e en):
- Adicionar a estrutura dos dois novos dropdowns na barra direita da toolbar:
  1. Dropdown do Usuário (ícone + @[[usuario#nome]]@).
  2. Dropdown da Página (ícone + "Página").
- Implementar a renderização dos submenus com as opções descritas.
No JS da toolbar (dashboard.iframe-toolbar.js / dashboard.toolbar.js):
- Adicionar a lógica de toggle dos dropdowns (semelhante ao menu de módulos, fechando ao clicar fora ou ao abrir outro dropdown).
- Preencher dinamicamente os caminhos e parâmetros das URLs de Adicionar e Clonar.

4. CRUD de Prompts

No frontend (html-editor.js):
- Adicionar os botões #ai-prompt-clear, #ai-prompt-edit, #ai-prompt-del e #ai-prompt-new no painel de IA.
- Mapear os eventos de clique para realizar as chamadas AJAX correspondentes (reusando as ações ia-prompt-edit, ia-prompt-new, ia-prompt-del no backend do dashboard).
- Atualizar o select de prompts após as modificações.

5. Código Customizado no "+" Panel

No frontend (html-editor.js):
- Incluir a opção de elemento "Código Customizado" no menu.
- Implementar a abertura de um painel de CodeMirror flutuante para digitação do HTML.
- Ao confirmar, invocar o método de inserção padrão no DOM vivo da página e resetar a interface.

6. Painel "+" em Duas Colunas, Grupos de Widgets e Autocomplete

No frontend e backend (html-editor.js / dashboard.php):
- Reestruturar o HTML e CSS do painel de adição para exibir a estrutura de duas colunas (Elementos à esquerda, Widgets em subcolunas à direita).
- Carregar a lista de grupos de widgets via AJAX e atualizar a lista de itens ao clicar em um grupo.
- Implementar paginação com botão "Carregar Mais" controlado pela variável de limite configurada nas opções do módulo dashboard.
- Adicionar o input de autocomplete no topo do painel de widgets e integrar com busca AJAX no backend.

Validação e Testes

Validação de Sintaxe:
- Executar php -l nos arquivos PHP e node --check nos JS.
- Garantir que composer test e npm run test rodem com sucesso.
Testes Unitários:
- Adicionar novos testes em html-editor.live.test.js para garantir:
  - Que o CodeMirror é instanciado para os campos de prompt/modo do assistente.
  - Que os dropdowns de Usuário e Página são criados na toolbar.
  - Que a opção de código customizado insere o HTML no local correto.
  - Que a listagem de widgets com grupos e paginação funciona.
Validação Visual e Manual:
- Homologar no navegador que a caixa do assistente IA pode ser redimensionada e que os campos de texto possuem CodeMirror.
- Testar o salvamento de uma página com um elemento selecionado e confirmar que a página salva sem erros.
- Clicar no menu da página e testar a clonagem e criação de nova página.
- Clicar no menu do usuário e validar o link de perfil e logout.
- Validar o autocomplete e a divisão em colunas e grupos no painel "+".

# req-081: CodeMirror no Assistente IA, Correção no Save, Novos Dropdowns na Toolbar e Melhoria no Painel "+"
## Descrição do Problema / Contexto
Esta requisição (BATCH-081) reúne melhorias funcionais, correções e novas interfaces para refinar a experiência do Live Editor e do Dashboard Site Toolbar.
1. **CodeMirror e Redimensionamento no Assistente IA**:
   * *Problema*: As caixas de texto de instrução do prompt (`c2f-ai-instruction`) e de texto do modo prompt (`c2f-ai-mode-text`) no assistente IA não estão instanciando o CodeMirror. Além disso, a caixa flutuante do assistente por IA (`c2f-he-live-box`) precisa ser redimensionável da mesma forma que os modelos.
   * *Comportamento Esperado*: Instanciar instâncias do CodeMirror (com modo Markdown ou similar) para essas duas textareas. Permitir que o contêiner do assistente (`c2f-he-live-box`) seja redimensionável por arrasto no canto inferior direito (`resize: both; overflow: auto;`).
2. **Deseleção de Elementos ao Salvar (`c2f-editbar-save`)**:
   * *Problema*: Ao clicar no botão de salvar, se houver um elemento selecionado (com a borda azul e controles ativos) ou com hover ativo, o editor pode falhar no mapeamento e gerar o erro `"Erro ao salvar a página."`.
   * *Comportamento Esperado*: O fluxo de salvamento deve, de forma determinística, limpar qualquer seleção ativa, hover ou contorno do editor antes de prosseguir com a reconstrução e submissão do HTML.
3. **Novos Dropdowns na Toolbar (Menu Usuário & Página)**:
   * *Problema*: Os botões de edição rápida da página na toolbar (`c2f-toolbar-edit` e `c2f-toolbar-edit-advanced`) ficam expostos diretamente. Queremos reorganizá-los e criar dois menus dropdowns robustos (semelhantes ao menu de módulos `c2f-toolbar-menu`).
   * *Menu do Usuário*:
     * Exibir ícone de usuário + nome do usuário (utilizando a variável do template `@[[usuario#nome]]@`).
     * Ao clicar, abre o menu contendo: um ícone maior de perfil, o nome completo, e links para Perfil (`@[[pagina#url-raiz]]@perfil-usuario/`) e Sair (`@[[pagina#url-raiz]]@signout/`).
   * *Menu da Página*:
     * Exibir ícone de página + texto "Página".
     * Ao clicar, abre o menu contendo: o título da página atual, e links para:
       1. Editar Página (link `c2f-toolbar-edit` existente).
       2. Editar Avançado (link `c2f-toolbar-edit-advanced` existente).
       3. Criar Nova Página: link dinâmico; se a página atual for um publisher (`/publisher-pages/...`), aponta para `/publisher-pages/adicionar/`, caso contrário para `/admin-paginas/adicionar/`.
       4. Clonar Página: link dinâmico (`/publisher-pages/clonar/?id={id}` ou `/admin-paginas/clonar/?id={id}`).
4. **CRUD de Prompts no Assistente IA**:
   * *Problema*: O assistente IA clássico possui ações para gerenciar prompts personalizados: limpar (`ai-prompt-clear`), editar (`ai-prompt-edit`), deletar (`ai-prompt-del`) e criar novo (`ai-prompt-new`). Estas operações não foram trazidas para o painel de IA do Live Editor.
   * *Comportamento Esperado*: Integrar esses 4 botões e suas respectivas ações AJAX no painel do assistente IA do Live Editor (`c2f-he-live-box`), permitindo o gerenciamento completo de prompts do usuário.
5. **Código Customizado no Painel de Inserção ("+")**:
   * *Problema*: O painel de adição de elementos (`c2f-add-panel`) permite inserir apenas elementos e widgets pré-definidos. O usuário precisa de uma opção para injetar código customizado livremente.
   * *Comportamento Esperado*: Adicionar a opção "Código Customizado" no menu de elementos. Ao clicar, exibir uma área de CodeMirror para edição livre de HTML/CSS. Ao confirmar, inserir o bloco de código no DOM vivo como um elemento padrão (estilo `c2f-add-el`) e fechar o painel.
6. **Nova Estrutura em Duas Colunas do Painel "+"**:
   * *Problema*: O painel "+" lista todos os elementos e widgets misturados, dificultando a busca.
   * *Comportamento Esperado*:
     * Dividir o painel em **duas colunas principais**: Elementos HTML (coluna da esquerda) e Widgets (coluna da direita).
     * A coluna de Widgets deve ser dividida em **subcolunas**: Grupos de widgets à esquerda (`c2f-add-widget-groups`) e Itens do grupo selecionado à direita (`c2f-add-widget-item`).
     * Ao clicar em um grupo, a lista de itens deve ser atualizada para exibir apenas os widgets pertencentes àquele grupo.
     * Adicionar paginação ("Carregar Mais") no final da lista de itens quando o total exceder N itens (N deve ser configurável no módulo dashboard, com padrão de 10).
     * Adicionar um campo de entrada de texto no topo da lista de widgets para busca autocomplete inteligente com filtragem via AJAX.
---
## Proposta de Alterações Detalhada
### 1. CodeMirror e Resizing no Assistente IA
* **No frontend (`html-editor.js`)**:
  * Ao criar o painel do assistente IA, localizar os textareas `#c2f-ai-instruction` e `#c2f-ai-mode-text`.
  * Instanciar o CodeMirror para ambos usando o modo "markdown" (semelhante ao editor clássico em `ia.js`).
  * Adicionar `resize: both; overflow: auto;` no estilo CSS de `#c2f-ai-panel` (ou `.c2f-he-live-box` genérico) para permitir o redimensionamento fluído pelo canto.
### 2. Deseleção Segura no Save
* **No frontend (`dashboard.toolbar.js`)**:
  * No início da rotina de salvamento (antes de extrair o HTML limpo com `getCleanHtml`), invocar o método de deseleção do editor visual (`c2fEditor.deselect()` ou equivalente que remove a seleção ativa e oculta os overlays do editor).
  * Assegurar que nenhum elemento com classes temporárias ou atributos de hover temporários persista no DOM durante a reconstrução.
### 3. Dropdowns da Toolbar (Usuário & Página)
* **No template HTML (`dashboard-site-toolbar.html` - pt-br e en)**:
  * Adicionar a estrutura dos dois novos dropdowns na barra direita da toolbar:
    1. Dropdown do Usuário (ícone + `@[[usuario#nome]]@`).
    2. Dropdown da Página (ícone + "Página").
  * Implementar a renderização dos submenus com as opções descritas.
* **No JS da toolbar (`dashboard.iframe-toolbar.js` / `dashboard.toolbar.js`)**:
  * Adicionar a lógica de toggle dos dropdowns (semelhante ao menu de módulos, fechando ao clicar fora ou ao abrir outro dropdown).
  * Preencher dinamicamente os caminhos e parâmetros das URLs de Adicionar e Clonar.
### 4. CRUD de Prompts
* **No frontend (`html-editor.js`)**:
  * Adicionar os botões `#ai-prompt-clear`, `#ai-prompt-edit`, `#ai-prompt-del` e `#ai-prompt-new` no painel de IA.
  * Mapear os eventos de clique para realizar as chamadas AJAX correspondentes (reusando as ações `ia-prompt-edit`, `ia-prompt-new`, `ia-prompt-del` no backend do dashboard).
  * Atualizar o select de prompts após as modificações.
### 5. Código Customizado no "+" Panel
* **No frontend (`html-editor.js`)**:
  * Incluir a opção de elemento "Código Customizado" no menu.
  * Implementar a abertura de um painel de CodeMirror flutuante para digitação do HTML.
  * Ao confirmar, invocar o método de inserção padrão no DOM vivo da página e resetar a interface.
### 6. Painel "+" em Duas Colunas, Grupos de Widgets e Autocomplete
* **No frontend e backend (`html-editor.js` / `dashboard.php`)**:
  * Reestruturar o HTML e CSS do painel de adição para exibir a estrutura de duas colunas (Elementos à esquerda, Widgets em subcolunas à direita).
  * Carregar a lista de grupos de widgets via AJAX e atualizar a lista de itens ao clicar em um grupo.
  * Implementar paginação com botão "Carregar Mais" controlado pela variável de limite configurada nas opções do módulo dashboard.
  * Adicionar o input de autocomplete no topo do painel de widgets e integrar com busca AJAX no backend.
---
## Validação e Testes
1. **Validação de Sintaxe**:
   * Executar `php -l` nos arquivos PHP e `node --check` nos JS.
   * Garantir que `composer test` e `npm run test` rodem com sucesso.
2. **Testes Unitários**:
   * Adicionar novos testes em `html-editor.live.test.js` para garantir:
     * Que o CodeMirror é instanciado para os campos de prompt/modo do assistente.
     * Que os dropdowns de Usuário e Página são criados na toolbar.
     * Que a opção de código customizado insere o HTML no local correto.
     * Que a listagem de widgets com grupos e paginação funciona.
3. **Validação Visual e Manual**:
   * Homologar no navegador que a caixa do assistente IA pode ser redimensionada e que os campos de texto possuem CodeMirror.
   * Testar o salvamento de uma página com um elemento selecionado e confirmar que a página salva sem erros.
   * Clicar no menu da página e testar a clonagem e criação de nova página.
   * Clicar no menu do usuário e validar o link de perfil e logout.
   * Validar o autocomplete e a divisão em colunas e grupos no painel "+".