claude-code

web/components/file-viewer/SearchBar.tsx

@@ -0,0 +1,250 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { X, ChevronUp, ChevronDown, Regex, CaseSensitive } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface SearchBarProps {
+  content: string;
+  containerRef: React.RefObject<HTMLDivElement>;
+  onClose: () => void;
+}
+
+export function SearchBar({ content, containerRef, onClose }: SearchBarProps) {
+  const [query, setQuery] = useState("");
+  const [isRegex, setIsRegex] = useState(false);
+  const [caseSensitive, setCaseSensitive] = useState(false);
+  const [currentMatch, setCurrentMatch] = useState(0);
+  const [totalMatches, setTotalMatches] = useState(0);
+  const [hasError, setHasError] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  // Compute matches
+  useEffect(() => {
+    if (!query) {
+      setTotalMatches(0);
+      setCurrentMatch(0);
+      clearHighlights();
+      return;
+    }
+
+    try {
+      const flags = caseSensitive ? "g" : "gi";
+      const pattern = isRegex ? new RegExp(query, flags) : new RegExp(escapeRegex(query), flags);
+      const matches = Array.from(content.matchAll(pattern));
+      setTotalMatches(matches.length);
+      setCurrentMatch(matches.length > 0 ? 1 : 0);
+      setHasError(false);
+    } catch {
+      setHasError(true);
+      setTotalMatches(0);
+      setCurrentMatch(0);
+    }
+  }, [query, isRegex, caseSensitive, content]);
+
+  // Apply DOM highlights
+  useEffect(() => {
+    if (!containerRef.current) return;
+    clearHighlights();
+
+    if (!query || hasError || totalMatches === 0) return;
+
+    try {
+      const flags = caseSensitive ? "g" : "gi";
+      const pattern = isRegex ? new RegExp(query, flags) : new RegExp(escapeRegex(query), flags);
+
+      const walker = document.createTreeWalker(
+        containerRef.current,
+        NodeFilter.SHOW_TEXT,
+        {
+          acceptNode: (node) => {
+            // Skip nodes inside already-marked elements
+            if ((node.parentElement as HTMLElement)?.tagName === "MARK") {
+              return NodeFilter.FILTER_REJECT;
+            }
+            return NodeFilter.FILTER_ACCEPT;
+          },
+        }
+      );
+
+      const textNodes: Text[] = [];
+      let node: Text | null;
+      while ((node = walker.nextNode() as Text | null)) {
+        textNodes.push(node);
+      }
+
+      let matchIdx = 0;
+      // Process in reverse order to avoid position shifting
+      const replacements: { node: Text; ranges: { start: number; end: number; idx: number }[] }[] = [];
+
+      for (const textNode of textNodes) {
+        const text = textNode.textContent ?? "";
+        pattern.lastIndex = 0;
+        const nodeRanges: { start: number; end: number; idx: number }[] = [];
+        let m: RegExpExecArray | null;
+        while ((m = pattern.exec(text)) !== null) {
+          nodeRanges.push({ start: m.index, end: m.index + m[0].length, idx: matchIdx++ });
+          if (m[0].length === 0) break; // prevent infinite loop on zero-width matches
+        }
+        if (nodeRanges.length > 0) {
+          replacements.push({ node: textNode, ranges: nodeRanges });
+        }
+      }
+
+      // Apply replacements in document order but process ranges in reverse
+      for (const { node: textNode, ranges } of replacements) {
+        const text = textNode.textContent ?? "";
+        const fragment = document.createDocumentFragment();
+        let lastEnd = 0;
+
+        for (const { start, end, idx } of ranges) {
+          if (start > lastEnd) {
+            fragment.appendChild(document.createTextNode(text.slice(lastEnd, start)));
+          }
+          const mark = document.createElement("mark");
+          mark.className = cn(
+            "search-highlight",
+            idx === currentMatch - 1 ? "search-highlight-current" : ""
+          );
+          mark.textContent = text.slice(start, end);
+          fragment.appendChild(mark);
+          lastEnd = end;
+        }
+        if (lastEnd < text.length) {
+          fragment.appendChild(document.createTextNode(text.slice(lastEnd)));
+        }
+        textNode.parentNode?.replaceChild(fragment, textNode);
+      }
+
+      // Scroll current match into view
+      const currentEl = containerRef.current?.querySelector(".search-highlight-current");
+      currentEl?.scrollIntoView({ block: "center", behavior: "smooth" });
+    } catch {
+      // Ignore DOM errors
+    }
+
+    return () => {
+      if (containerRef.current) clearHighlights();
+    };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [query, isRegex, caseSensitive, currentMatch, totalMatches]);
+
+  function clearHighlights() {
+    if (!containerRef.current) return;
+    const marks = containerRef.current.querySelectorAll("mark.search-highlight");
+    marks.forEach((mark) => {
+      mark.replaceWith(mark.textContent ?? "");
+    });
+    // Normalize text nodes
+    containerRef.current.normalize();
+  }
+
+  const goNext = () => {
+    setCurrentMatch((c) => (c >= totalMatches ? 1 : c + 1));
+  };
+
+  const goPrev = () => {
+    setCurrentMatch((c) => (c <= 1 ? totalMatches : c - 1));
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      e.shiftKey ? goPrev() : goNext();
+    }
+    if (e.key === "Escape") {
+      clearHighlights();
+      onClose();
+    }
+  };
+
+  return (
+    <div className="flex items-center gap-1 px-2 py-1.5 border-b border-surface-800 bg-surface-900/90 backdrop-blur-sm">
+      <div
+        className={cn(
+          "flex items-center gap-1 flex-1 bg-surface-800 rounded px-2 py-1",
+          hasError && "ring-1 ring-red-500/50"
+        )}
+      >
+        <input
+          ref={inputRef}
+          type="text"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="Search..."
+          className="flex-1 bg-transparent text-xs text-surface-100 placeholder-surface-500 outline-none min-w-0"
+        />
+
+        {/* Match count */}
+        {query && (
+          <span className={cn(
+            "text-xs flex-shrink-0",
+            hasError ? "text-red-400" : totalMatches === 0 ? "text-red-400" : "text-surface-400"
+          )}>
+            {hasError ? "Invalid regex" : totalMatches === 0 ? "No results" : `${currentMatch}/${totalMatches}`}
+          </span>
+        )}
+
+        {/* Toggles */}
+        <button
+          onClick={() => setCaseSensitive((v) => !v)}
+          className={cn(
+            "p-0.5 rounded transition-colors flex-shrink-0",
+            caseSensitive
+              ? "text-brand-400 bg-brand-900/40"
+              : "text-surface-500 hover:text-surface-300"
+          )}
+          title="Case sensitive"
+        >
+          <CaseSensitive className="w-3.5 h-3.5" />
+        </button>
+        <button
+          onClick={() => setIsRegex((v) => !v)}
+          className={cn(
+            "p-0.5 rounded transition-colors flex-shrink-0",
+            isRegex
+              ? "text-brand-400 bg-brand-900/40"
+              : "text-surface-500 hover:text-surface-300"
+          )}
+          title="Use regular expression"
+        >
+          <Regex className="w-3.5 h-3.5" />
+        </button>
+      </div>
+
+      {/* Navigation */}
+      <button
+        onClick={goPrev}
+        disabled={totalMatches === 0}
+        className="p-1 rounded text-surface-500 hover:text-surface-200 hover:bg-surface-800 disabled:opacity-30 transition-colors"
+        title="Previous match (Shift+Enter)"
+      >
+        <ChevronUp className="w-3.5 h-3.5" />
+      </button>
+      <button
+        onClick={goNext}
+        disabled={totalMatches === 0}
+        className="p-1 rounded text-surface-500 hover:text-surface-200 hover:bg-surface-800 disabled:opacity-30 transition-colors"
+        title="Next match (Enter)"
+      >
+        <ChevronDown className="w-3.5 h-3.5" />
+      </button>
+
+      <button
+        onClick={() => { clearHighlights(); onClose(); }}
+        className="p-1 rounded text-surface-500 hover:text-surface-200 hover:bg-surface-800 transition-colors"
+        title="Close (Escape)"
+      >
+        <X className="w-3.5 h-3.5" />
+      </button>
+    </div>
+  );
+}
+
+function escapeRegex(str: string): string {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}