feat(app): scrollback search bar (⌘F) on the focused panel

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-10 12:42:14 +07:00
parent 52a502c38b
commit ac3f0886d5
4 changed files with 153 additions and 4 deletions
@@ -0,0 +1,133 @@
+import { useEffect, useRef, useState } from "react";
+import { ChevronUp, ChevronDown, X } from "lucide-react";
+import { COLORS, FONT } from "./theme";
+import { getSearch } from "./searchRegistry";
+import type { ISearchOptions } from "@xterm/addon-search";
+
+const SEARCH_OPTS: ISearchOptions = {
+  decorations: {
+    matchBackground: COLORS.searchMatch,
+    matchOverviewRuler: COLORS.stWait,
+    activeMatchBackground: COLORS.stWait,
+    activeMatchColorOverviewRuler: COLORS.stWait,
+  },
+};
+
+export function SearchBar({
+  surfaceId,
+  reopenNonce,
+  onClose,
+}: {
+  surfaceId: string | null;
+  reopenNonce: number;
+  onClose: () => void;
+}) {
+  const [term, setTerm] = useState("");
+  const [count, setCount] = useState({ index: -1, total: 0 });
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+    inputRef.current?.select();
+  }, [reopenNonce]);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+    if (!surfaceId) return;
+    const addon = getSearch(surfaceId);
+    if (!addon) return;
+    const sub = addon.onDidChangeResults((r) =>
+      setCount({ index: r.resultIndex, total: r.resultCount })
+    );
+    return () => {
+      sub.dispose();
+      addon.clearDecorations();
+    };
+  }, [surfaceId]);
+
+  function run(forward: boolean) {
+    if (!surfaceId) return;
+    const addon = getSearch(surfaceId);
+    if (!addon || !term) {
+      addon?.clearDecorations();
+      setCount({ index: -1, total: 0 });
+      return;
+    }
+    if (forward) addon.findNext(term, SEARCH_OPTS);
+    else addon.findPrevious(term, SEARCH_OPTS);
+  }
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        top: 8,
+        right: 16,
+        zIndex: 50,
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        height: 32,
+        padding: "0 8px",
+        background: COLORS.bgElevated,
+        border: `1px solid ${COLORS.borderStrong}`,
+        borderRadius: 8,
+        boxShadow: "0 4px 16px rgba(0,0,0,0.4)",
+      }}
+    >
+      <input
+        ref={inputRef}
+        value={term}
+        onChange={(e) => setTerm(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            run(!e.shiftKey);
+          } else if (e.key === "Escape") {
+            e.preventDefault();
+            onClose();
+          }
+        }}
+        placeholder="Search scrollback"
+        style={{
+          width: 200,
+          background: "transparent",
+          border: "none",
+          outline: "none",
+          color: COLORS.textPrimary,
+          fontFamily: FONT.ui,
+          fontSize: 13,
+        }}
+      />
+      <span
+        style={{
+          fontFamily: FONT.mono,
+          fontSize: 11,
+          color: COLORS.textMuted,
+          minWidth: 40,
+          textAlign: "right",
+        }}
+      >
+        {count.total > 0 ? `${count.index + 1}/${count.total}` : "0/0"}
+      </span>
+      <ChevronUp
+        size={15}
+        color={COLORS.textSecondary}
+        style={{ cursor: "pointer" }}
+        onClick={() => run(false)}
+      />
+      <ChevronDown
+        size={15}
+        color={COLORS.textSecondary}
+        style={{ cursor: "pointer" }}
+        onClick={() => run(true)}
+      />
+      <X
+        size={15}
+        color={COLORS.textMuted}
+        style={{ cursor: "pointer" }}
+        onClick={onClose}
+      />
+    </div>
+  );
+}