Add site filters for manual connection selection (#328)

src/web/components/ModernSelect.test.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { create } from 'react-test-renderer';
+import { act, create, type ReactTestInstance } from 'react-test-renderer';
 import ModernSelect from './ModernSelect.js';
 
 function collectText(node: ReturnType<typeof create>['root']): string {
@@ -9,6 +9,14 @@ function collectText(node: ReturnType<typeof create>['root']): string {
     .join('');
 }
 
+function collectInstanceText(node: ReactTestInstance): string {
+  const children = node.children || [];
+  return children.map((child) => {
+    if (typeof child === 'string') return child;
+    return collectInstanceText(child);
+  }).join('');
+}
+
 describe('ModernSelect', () => {
   it('renders icon nodes for the selected option', () => {
     const root = create(
@@ -29,4 +37,57 @@ describe('ModernSelect', () => {
     expect(collectText(root.root)).toContain('🟢');
     expect(collectText(root.root)).toContain('NVIDIA');
   });
+
+  it('filters searchable options by label and description keywords', async () => {
+    const root = create(
+      <ModernSelect
+        searchable
+        searchPlaceholder="筛选站点"
+        value=""
+        onChange={() => {}}
+        options={[
+          { value: 'alpha', label: 'Alpha Mirror', description: 'https://alpha.example.com' },
+          { value: 'beta', label: 'Beta Relay (codex)', description: 'https://beta.example.com' },
+          { value: 'gamma', label: 'Gamma API', description: 'https://third.example.com' },
+        ]}
+      />,
+    );
+
+    const trigger = root.root.find((node) => (
+      node.type === 'button'
+      && typeof node.props.className === 'string'
+      && node.props.className.includes('modern-select-trigger')
+    ));
+
+    await act(async () => {
+      trigger.props.onClick();
+    });
+
+    const searchInput = root.root.find((node) => (
+      node.type === 'input'
+      && node.props.placeholder === '筛选站点'
+    ));
+
+    await act(async () => {
+      searchInput.props.onChange({ target: { value: 'codex' } });
+    });
+
+    let optionButtons = root.root.findAll((node) => (
+      node.type === 'button'
+      && typeof node.props.className === 'string'
+      && node.props.className.includes('modern-select-option')
+    ));
+    expect(optionButtons.map((node) => collectInstanceText(node))).toEqual(['Beta Relay (codex)https://beta.example.com']);
+
+    await act(async () => {
+      searchInput.props.onChange({ target: { value: 'third.example.com' } });
+    });
+
+    optionButtons = root.root.findAll((node) => (
+      node.type === 'button'
+      && typeof node.props.className === 'string'
+      && node.props.className.includes('modern-select-option')
+    ));
+    expect(optionButtons.map((node) => collectInstanceText(node))).toEqual(['Gamma APIhttps://third.example.com']);
+  });
 });

src/web/components/ModernSelect.tsx

@@ -20,6 +20,8 @@ type ModernSelectProps = {
   menuMaxHeight?: number;
   className?: string;
   size?: 'md' | 'sm';
+  searchable?: boolean;
+  searchPlaceholder?: string;
 };
 
 export default function ModernSelect({
@@ -32,8 +34,11 @@ export default function ModernSelect({
   menuMaxHeight = 280,
   className = '',
   size = 'md',
+  searchable = false,
+  searchPlaceholder = 'Search...',
 }: ModernSelectProps) {
   const [open, setOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
   const rootRef = useRef<HTMLDivElement>(null);
 
   const selected = useMemo(
@@ -41,8 +46,26 @@ export default function ModernSelect({
     [options, value],
   );
 
+  const visibleOptions = useMemo(() => {
+    const query = searchQuery.trim().toLowerCase();
+    if (!searchable || !query) return options;
+
+    return options.filter((item) => {
+      const haystack = [
+        item.label,
+        item.description,
+        item.value,
+      ]
+        .filter((value): value is string => typeof value === 'string' && value.trim().length > 0)
+        .join(' ')
+        .toLowerCase();
+      return haystack.includes(query);
+    });
+  }, [options, searchQuery, searchable]);
+
   useEffect(() => {
     if (!open) return;
+    if (typeof document === 'undefined') return;
 
     const handleOutsideClick = (event: MouseEvent) => {
       if (!rootRef.current) return;
@@ -67,6 +90,12 @@ export default function ModernSelect({
     if (disabled) setOpen(false);
   }, [disabled]);
 
+  useEffect(() => {
+    if (!open && searchQuery) {
+      setSearchQuery('');
+    }
+  }, [open, searchQuery]);
+
   const renderOptionIcon = (item: ModernSelectOption) => {
     if (item.iconNode) {
       return item.iconNode;
@@ -117,10 +146,22 @@ export default function ModernSelect({
       </button>
 
       <div className="modern-select-panel" style={{ maxHeight: menuMaxHeight }}>
-        {options.length === 0 ? (
+        {searchable && (
+          <div className="modern-select-search-shell">
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(event) => setSearchQuery(event.target.value)}
+              placeholder={searchPlaceholder}
+              className="modern-select-search-input"
+            />
+          </div>
+        )}
+
+        {visibleOptions.length === 0 ? (
           <div className="modern-select-empty">{emptyLabel}</div>
         ) : (
-          options.map((item) => {
+          visibleOptions.map((item) => {
             const active = item.value === value;
             return (
               <button