[Init] Initial commit - NetMesh terminal manager

components/settings/SettingsSearchControl.tsx

@@ -0,0 +1,220 @@
+import { Search, X } from "lucide-react";
+import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { useI18n } from "../../application/i18n/I18nProvider";
+import { filterSettingsSearchCatalog, type SettingsSearchHit } from "../../domain/settingsSearch";
+import { cn } from "../../lib/utils";
+import { Input } from "../ui/input";
+import { useSettingsFocus } from "./SettingsFocusContext";
+
+type SettingsSearchControlProps = {
+  includePlugins?: boolean;
+  className?: string;
+};
+
+export function SettingsSearchControl({
+  includePlugins = true,
+  className,
+}: SettingsSearchControlProps) {
+  const { t } = useI18n();
+  const { requestFocus, registerOpenSearch } = useSettingsFocus();
+  const listId = useId();
+  const optionIdPrefix = useId();
+  const rootRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const openButtonRef = useRef<HTMLButtonElement>(null);
+  const [expanded, setExpanded] = useState(false);
+  const [query, setQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [restoreOpenFocus, setRestoreOpenFocus] = useState(false);
+
+  const hits = useMemo(
+    () => filterSettingsSearchCatalog(query, t, { includePlugins, limit: 12 }),
+    [query, t, includePlugins],
+  );
+
+  const collapseSearch = useCallback((restoreFocus = false) => {
+    setExpanded(false);
+    setQuery("");
+    if (restoreFocus) setRestoreOpenFocus(true);
+  }, []);
+
+  useEffect(() => {
+    setActiveIndex(0);
+  }, [query, hits.length]);
+
+  useEffect(() => {
+    const open = () => {
+      setExpanded(true);
+      window.requestAnimationFrame(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+      });
+    };
+    registerOpenSearch(open);
+    return () => registerOpenSearch(null);
+  }, [registerOpenSearch]);
+
+  useEffect(() => {
+    if (!expanded) return;
+    const handlePointerDown = (event: MouseEvent) => {
+      if (!rootRef.current?.contains(event.target as Node)) {
+        collapseSearch(false);
+      }
+    };
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.isComposing) return;
+      if (event.key === "Escape") {
+        event.preventDefault();
+        collapseSearch(true);
+      }
+    };
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [expanded, collapseSearch]);
+
+  useEffect(() => {
+    if (expanded) {
+      inputRef.current?.focus();
+      return;
+    }
+    if (restoreOpenFocus) {
+      openButtonRef.current?.focus();
+      setRestoreOpenFocus(false);
+    }
+  }, [expanded, restoreOpenFocus]);
+
+  const selectHit = (hit: SettingsSearchHit) => {
+    requestFocus({
+      tab: hit.entry.tab,
+      aiSubTab: hit.entry.aiSubTab,
+      syncSubTab: hit.entry.syncSubTab,
+      anchorId: hit.entry.id,
+    });
+    collapseSearch(false);
+  };
+
+  const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    // Avoid stealing IME candidate navigation / composition confirm (CJK).
+    if (event.nativeEvent.isComposing || event.keyCode === 229) return;
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      if (hits.length === 0) return;
+      setActiveIndex((index) => (index + 1) % hits.length);
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      if (hits.length === 0) return;
+      setActiveIndex((index) => (index - 1 + hits.length) % hits.length);
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      const hit = hits[activeIndex];
+      if (hit) selectHit(hit);
+    }
+  };
+
+  const activeOptionId = hits[activeIndex]
+    ? `${optionIdPrefix}-${hits[activeIndex].entry.id}`
+    : undefined;
+
+  if (!expanded) {
+    return (
+      <div className={cn("px-0 pb-2", className)} ref={rootRef}>
+        <button
+          id="settings-search-open"
+          ref={openButtonRef}
+          type="button"
+          onClick={() => setExpanded(true)}
+          className={cn(
+            "app-no-drag flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm",
+            "text-muted-foreground transition-colors hover:bg-background/60 hover:text-foreground",
+          )}
+          aria-label={t("settings.search.open")}
+          title={t("settings.search.open")}
+        >
+          <Search size={14} className="shrink-0" />
+          <span className="min-w-0 truncate">{t("settings.search.open")}</span>
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("relative px-0 pb-2", className)} ref={rootRef}>
+      <div className="app-no-drag relative">
+        <Search
+          size={14}
+          className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground"
+        />
+        <Input
+          ref={inputRef}
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+          onKeyDown={onKeyDown}
+          placeholder={t("settings.search.placeholder")}
+          aria-label={t("settings.search.placeholder")}
+          aria-controls={listId}
+          aria-expanded={true}
+          aria-autocomplete="list"
+          aria-haspopup="listbox"
+          aria-activedescendant={activeOptionId}
+          role="combobox"
+          className="h-9 pl-8 pr-8 text-sm"
+        />
+        <button
+          type="button"
+          onClick={() => collapseSearch(true)}
+          className="absolute right-1.5 top-1/2 -translate-y-1/2 rounded-sm p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
+          aria-label={t("common.close")}
+        >
+          <X size={14} />
+        </button>
+      </div>
+
+      <div
+        id={listId}
+        role="listbox"
+        className={cn(
+          "absolute left-0 right-0 top-[calc(100%+4px)] z-40 max-h-72 overflow-y-auto",
+          "rounded-md border border-border bg-popover text-popover-foreground shadow-md",
+        )}
+      >
+        {hits.length === 0 ? (
+          <div className="px-3 py-3 text-xs text-muted-foreground">
+            {t("settings.search.noResults")}
+          </div>
+        ) : (
+          hits.map((hit, index) => {
+            const path = [hit.tabLabel, hit.section].filter(Boolean).join(" · ");
+            return (
+              <button
+                key={hit.entry.id}
+                id={`${optionIdPrefix}-${hit.entry.id}`}
+                type="button"
+                role="option"
+                aria-selected={index === activeIndex}
+                className={cn(
+                  "flex w-full flex-col items-start gap-0.5 px-3 py-2 text-left transition-colors",
+                  index === activeIndex ? "bg-primary/15" : "hover:bg-muted/50",
+                )}
+                onMouseEnter={() => setActiveIndex(index)}
+                onClick={() => selectHit(hit)}
+              >
+                <span className="text-sm font-medium text-foreground">{hit.label}</span>
+                {path ? (
+                  <span className="text-[11px] text-muted-foreground">{path}</span>
+                ) : null}
+              </button>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+}