[WIP] Adicionar funcionalidade de drag-and-drop para reordenar queries salvas

[Copilot]

Plan: Implementar funcionalidade de drag-and-drop para reordenar queries

• Adicionar atributo order à estrutura de dados das queries
• Migrar queries existentes no localStorage para incluir o atributo order
• Ordenar queries por order ao exibir a lista
• Adicionar HTML para ícone de drag em cada item da lista
• Adicionar CSS para ícone de drag e feedback visual durante o arraste
• Implementar eventos de drag-and-drop usando HTML5 Drag API
• Atualizar propriedade order das queries após reordenação
• Manter query selecionada após reordenação
• Salvar automaticamente a nova ordem no localStorage
• Testar funcionalidade manualmente no navegador

Original prompt

Objetivo

Implementar funcionalidade de drag-and-drop para permitir que o usuário reordene as queries salvas de acordo com sua prioridade/importância.

Funcionalidades a implementar

1. Estrutura de dados

• Adicionar atributo order aos objetos de query para controlar a posição
• Migrar queries existentes para incluir o novo atributo
• Ordenar queries por este atributo na exibição

2. Interface do usuário

• Mostrar ícone de drag (⋮⋮ ou similar) quando o mouse passa sobre uma query na lista
• Aplicar cursor de grab/grabbing durante o drag
• Feedback visual durante o arraste (highlighting, ghost element)

3. Funcionalidade de drag-and-drop

• Implementar eventos de drag-and-drop usando HTML5 Drag API
• Permitir reordenação através de arrastar e soltar
• Atualizar a propriedade order das queries afetadas
• Manter a query atualmente selecionada após reordenação

4. Persistência

• Salvar nova ordem no localStorage automaticamente
• Garantir que a ordem seja mantida entre sessões

Requisitos técnicos

• Usar HTML5 Drag and Drop API nativo
• Manter compatibilidade com funcionalidades existentes
• CSS responsivo para o ícone de drag
• Feedback visual adequado durante a operação

Arquivos a modificar

• script.js: Adicionar lógica de drag-and-drop e gerenciamento de ordem
• style.css: Estilos para ícones de drag e feedback visual
• Possivelmente index.html se necessário para estrutura HTML

Comportamento esperado

1. Ao passar o mouse sobre uma query na lista, um ícone de drag aparece
2. Usuário pode clicar e arrastar uma query para nova posição
3. Durante o drag, há feedback visual da operação
4. Ao soltar, a query é movida para nova posição
5. Lista é reordenada e salva automaticamente
6. Query selecionada permanece ativa após reordenação

*This pull request was created as a result of the following prompt from Copilot chat.* > ## Objetivo > Implementar funcionalidade de drag-and-drop para permitir que o usuário reordene as queries salvas de acordo com sua prioridade/importância. > > ## Funcionalidades a implementar > > ### 1. Estrutura de dados > - Adicionar atributo `order` aos objetos de query para controlar a posição > - Migrar queries existentes para incluir o novo atributo > - Ordenar queries por este atributo na exibição > > ### 2. Interface do usuário > - Mostrar ícone de drag (⋮⋮ ou similar) quando o mouse passa sobre uma query na lista > - Aplicar cursor de grab/grabbing durante o drag > - Feedback visual durante o arraste (highlighting, ghost element) > > ### 3. Funcionalidade de drag-and-drop > - Implementar eventos de drag-and-drop usando HTML5 Drag API > - Permitir reordenação através de arrastar e soltar > - Atualizar a propriedade `order` das queries afetadas > - Manter a query atualmente selecionada após reordenação > > ### 4. Persistência > - Salvar nova ordem no localStorage automaticamente > - Garantir que a ordem seja mantida entre sessões > > ## Requisitos técnicos > - Usar HTML5 Drag and Drop API nativo > - Manter compatibilidade com funcionalidades existentes > - CSS responsivo para o ícone de drag > - Feedback visual adequado durante a operação > > ## Arquivos a modificar > - `script.js`: Adicionar lógica de drag-and-drop e gerenciamento de ordem > - `style.css`: Estilos para ícones de drag e feedback visual > - Possivelmente `index.html` se necessário para estrutura HTML > > ## Comportamento esperado > 1. Ao passar o mouse sobre uma query na lista, um ícone de drag aparece > 2. Usuário pode clicar e arrastar uma query para nova posição > 3. Durante o drag, há feedback visual da operação > 4. Ao soltar, a query é movida para nova posição > 5. Lista é reordenada e salva automaticamente > 6. Query selecionada permanece ativa após reordenação

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.