feat: melhorar barra de pesquisa com cor premium e botão limpar (#101)

* fix: corrigir navegação e ajustar cor da barra

- Remove chamada a applyQuery() em handleFindNext/Prev que estava resetando para o primeiro match
- Apenas chama findNext/Previous e atualiza índice com setTimeout para sincronização
- Ajusta cor do input de bg-surface-elevated/40 para bg-input/60 para look mais clean e premium
- Corrige bug onde navegação travava a partir do terceiro match

* feat: melhorar barra de pesquisa

- Mudar background da barra de pesquisa para bg-input/15 (cinza/chumbo premium clean)
- Adicionar botão 'x' no input de busca para limpar texto rapidamente
- Botão 'x' aparece quando há texto digitado
- Hover effect para melhor feedback visual

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: vilpessoa

src/components/SearchBar.tsx

@@ -212,7 +212,7 @@ export function SearchBar({ editorRef, onClose }: SearchBarProps) {
         animate={{ opacity: 1, y: 0 }}
         exit={{ opacity: 0, y: -6 }}
         transition={{ duration: 0.15 }}
-        className="flex-shrink-0 border-b border-border bg-surface px-3 py-2"
+        className="flex-shrink-0 border-b border-border bg-input/15 px-3 py-2"
       >
         {/* Search row */}
         <div className="flex items-center gap-1.5">
@@ -256,12 +256,22 @@ export function SearchBar({ editorRef, onClose }: SearchBarProps) {
               className="min-w-0 flex-1 bg-transparent text-xs outline-none placeholder:text-muted-foreground/50"
             />
             {searchText && (
-              <span className={cn(
-                'ml-1 flex-shrink-0 whitespace-nowrap text-[10px] tabular-nums',
-                matchCount > 0 ? 'text-muted-foreground' : 'text-destructive/70',
-              )}>
-                {matchCount > 0 ? `${currentMatchIndex + 1}/${matchCount}` : 'Nenhum resultado'}
-              </span>
+              <>
+                <span className={cn(
+                  'ml-1 flex-shrink-0 whitespace-nowrap text-[10px] tabular-nums',
+                  matchCount > 0 ? 'text-muted-foreground' : 'text-destructive/70',
+                )}>
+                  {matchCount > 0 ? `${currentMatchIndex + 1}/${matchCount}` : 'Nenhum resultado'}
+                </span>
+                <button
+                  type="button"
+                  onClick={() => setSearchText('')}
+                  className="ml-1 inline-flex h-4 w-4 flex-shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+                  title="Limpar pesquisa"
+                >
+                  <X className="h-3 w-3" />
+                </button>
+              </>
             )}
           </div>