Merge pull request #96 from vilpessoa/claude/great-sagan-N3baa

feat: 4 melhorias no componente SearchBar

Author: vilpessoa

src/components/SearchBar.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState, type RefObject } from 'react';
+import { EditorView } from '@codemirror/view';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Search, X, ChevronUp, ChevronDown, ChevronRight, CaseSensitive, Regex } from 'lucide-react';
 import {
@@ -36,13 +37,32 @@ function countMatches(view: ReturnType<DaxEditorHandle['getView']>, query: Searc
   }
 }
 
+function getCurrentMatchIndex(view: ReturnType<DaxEditorHandle['getView']>, query: SearchQuery): number {
+  if (!view || !query.search) return 0;
+  try {
+    const cursorPos = view.state.selection.main.from;
+    const cursor = query.getCursor(view.state.doc);
+    let index = 0;
+    let result = cursor.next();
+    while (!result.done) {
+      if (result.value.from >= cursorPos) return index;
+      index++;
+      result = cursor.next();
+    }
+    return 0;
+  } catch {
+    return 0;
+  }
+}
+
 export function SearchBar({ editorRef, onClose }: SearchBarProps) {
   const [searchText, setSearchText] = useState('');
   const [replaceText, setReplaceText] = useState('');
   const [caseSensitive, setCaseSensitive] = useState(false);
   const [useRegex, setUseRegex] = useState(false);
   const [showReplace, setShowReplace] = useState(false);
   const [matchCount, setMatchCount] = useState(0);
+  const [currentMatchIndex, setCurrentMatchIndex] = useState(0);
   const [regexError, setRegexError] = useState(false);
 
   const searchInputRef = useRef<HTMLInputElement>(null);
@@ -78,13 +98,37 @@ export function SearchBar({ editorRef, onClose }: SearchBarProps) {
     const view = editorRef.current?.getView();
     if (!view) return;
     const q = buildQuery(search);
-    if (!q) { setMatchCount(0); return; }
+    if (!q) { setMatchCount(0); setCurrentMatchIndex(0); return; }
     view.dispatch({ effects: setSearchQuery.of(q) });
-    setMatchCount(countMatches(view, q));
+    const count = countMatches(view, q);
+    setMatchCount(count);
+
+    if (count > 0) {
+      const cursor = q.getCursor(view.state.doc);
+      const result = cursor.next();
+      if (!result.done) {
+        const { from, to } = result.value;
+        view.dispatch({
+          selection: { anchor: from, head: to },
+          effects: EditorView.scrollIntoView(from)
+        });
+        setCurrentMatchIndex(0);
+      }
+    } else {
+      setCurrentMatchIndex(0);
+    }
   }
 
   useEffect(() => {
-    applyQuery(searchText);
+    const timer = setTimeout(() => {
+      if (searchText) {
+        applyQuery(searchText);
+      } else {
+        setMatchCount(0);
+        setCurrentMatchIndex(0);
+      }
+    }, 150);
+    return () => clearTimeout(timer);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchText, caseSensitive, useRegex]);
 
@@ -93,13 +137,17 @@ export function SearchBar({ editorRef, onClose }: SearchBarProps) {
     if (!view || !searchText) return;
     applyQuery(searchText);
     findNext(view);
+    const q = buildQuery(searchText);
+    if (q) setCurrentMatchIndex(getCurrentMatchIndex(view, q));
   }
 
   function handleFindPrev() {
     const view = editorRef.current?.getView();
     if (!view || !searchText) return;
     applyQuery(searchText);
     findPrevious(view);
+    const q = buildQuery(searchText);
+    if (q) setCurrentMatchIndex(getCurrentMatchIndex(view, q));
   }
 
   function handleReplaceAll() {
@@ -174,14 +222,14 @@ export function SearchBar({ editorRef, onClose }: SearchBarProps) {
                 type="button"
                 onClick={() => setShowReplace((v) => !v)}
                 className={cn(
-                  'inline-flex h-6 w-6 flex-shrink-0 items-center justify-center rounded border transition-all',
+                  'group inline-flex h-6 w-6 flex-shrink-0 items-center justify-center rounded border transition-all',
                   showReplace
-                    ? 'border-primary/40 bg-primary/15 text-primary'
-                    : 'border-border/60 bg-background/60 text-muted-foreground hover:border-border hover:bg-accent hover:text-foreground',
+                    ? 'border-primary/60 bg-primary/25 text-primary drop-shadow-sm'
+                    : 'border-border/50 bg-input/40 text-foreground/60 drop-shadow-sm hover:bg-surface-elevated/50 hover:text-primary',
                 )}
               >
                 <ChevronRight
-                  className={cn('h-3.5 w-3.5 transition-transform duration-150', showReplace && 'rotate-90')}
+                  className={cn('h-3.5 w-3.5 transition-transform duration-150 group-hover:scale-110', showReplace && 'rotate-90')}
                 />
               </button>
             </TooltipTrigger>
@@ -192,7 +240,7 @@ export function SearchBar({ editorRef, onClose }: SearchBarProps) {
 
           {/* Search input */}
           <div className={cn(
-            'relative flex h-7 flex-1 items-center rounded border bg-background/60 px-2',
+            'relative flex h-7 flex-1 items-center rounded border bg-surface-elevated/40 px-2',
             regexError ? 'border-destructive' : 'border-border/60 focus-within:border-primary/60',
           )}>
             <Search className="mr-1.5 h-3 w-3 flex-shrink-0 text-muted-foreground" />
@@ -207,10 +255,10 @@ export function SearchBar({ editorRef, onClose }: SearchBarProps) {
             />
             {searchText && (
               <span className={cn(
-                'ml-1 flex-shrink-0 text-[10px] tabular-nums',
+                'ml-1 flex-shrink-0 whitespace-nowrap text-[10px] tabular-nums',
                 matchCount > 0 ? 'text-muted-foreground' : 'text-destructive/70',
               )}>
-                {matchCount > 0 ? `${matchCount}` : 'Nenhum resultado'}
+                {matchCount > 0 ? `${currentMatchIndex + 1}/${matchCount}` : 'Nenhum resultado'}
               </span>
             )}
           </div>
@@ -324,7 +372,7 @@ export function SearchBar({ editorRef, onClose }: SearchBarProps) {
               {/* Spacer to align with search input */}
               <span className="h-6 w-6 flex-shrink-0" />
 
-              <div className="flex h-7 flex-1 items-center rounded border border-border/60 bg-background/60 px-2 focus-within:border-primary/60">
+              <div className="flex h-7 flex-1 items-center rounded border border-border/60 bg-surface-elevated/40 px-2 focus-within:border-primary/60">
                 <input
                   ref={replaceInputRef}
                   type="text"