|
| 1 | +import React, { useState, useEffect, useRef, useCallback } from "react"; |
| 2 | +import { useAPI } from "@/browser/contexts/API"; |
| 3 | + |
| 4 | +interface SSHHostInputProps { |
| 5 | + value: string; |
| 6 | + onChange: (value: string) => void; |
| 7 | + disabled: boolean; |
| 8 | +} |
| 9 | + |
| 10 | +/** |
| 11 | + * SSH host input with dropdown of hosts from SSH config. |
| 12 | + * Shows dropdown above the input when focused and there are matching hosts. |
| 13 | + */ |
| 14 | +export function SSHHostInput(props: SSHHostInputProps) { |
| 15 | + const { api } = useAPI(); |
| 16 | + const [hosts, setHosts] = useState<string[]>([]); |
| 17 | + const [showDropdown, setShowDropdown] = useState(false); |
| 18 | + const [highlightedIndex, setHighlightedIndex] = useState(-1); |
| 19 | + const inputRef = useRef<HTMLInputElement>(null); |
| 20 | + const containerRef = useRef<HTMLDivElement>(null); |
| 21 | + const itemRefs = useRef<Array<HTMLDivElement | null>>([]); |
| 22 | + |
| 23 | + // Fetch SSH config hosts on mount |
| 24 | + useEffect(() => { |
| 25 | + if (!api) return; |
| 26 | + api.ssh |
| 27 | + .getConfigHosts() |
| 28 | + .then(setHosts) |
| 29 | + .catch(() => setHosts([])); |
| 30 | + }, [api]); |
| 31 | + |
| 32 | + // Filter hosts based on current input |
| 33 | + const filteredHosts = hosts.filter((host) => |
| 34 | + host.toLowerCase().includes(props.value.toLowerCase()) |
| 35 | + ); |
| 36 | + |
| 37 | + // Handle clicking outside to close dropdown |
| 38 | + useEffect(() => { |
| 39 | + function handleClickOutside(e: MouseEvent) { |
| 40 | + if (containerRef.current && !containerRef.current.contains(e.target as Node)) { |
| 41 | + setShowDropdown(false); |
| 42 | + } |
| 43 | + } |
| 44 | + document.addEventListener("mousedown", handleClickOutside); |
| 45 | + return () => document.removeEventListener("mousedown", handleClickOutside); |
| 46 | + }, []); |
| 47 | + |
| 48 | + const { onChange } = props; |
| 49 | + const selectHost = useCallback( |
| 50 | + (host: string) => { |
| 51 | + onChange(host); |
| 52 | + setShowDropdown(false); |
| 53 | + setHighlightedIndex(-1); |
| 54 | + inputRef.current?.focus(); |
| 55 | + }, |
| 56 | + [onChange] |
| 57 | + ); |
| 58 | + |
| 59 | + const handleKeyDown = useCallback( |
| 60 | + (e: React.KeyboardEvent) => { |
| 61 | + if (!showDropdown || filteredHosts.length === 0) { |
| 62 | + return; |
| 63 | + } |
| 64 | + |
| 65 | + switch (e.key) { |
| 66 | + case "ArrowDown": |
| 67 | + e.preventDefault(); |
| 68 | + setHighlightedIndex((prev) => (prev < filteredHosts.length - 1 ? prev + 1 : 0)); |
| 69 | + break; |
| 70 | + case "ArrowUp": |
| 71 | + e.preventDefault(); |
| 72 | + setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : filteredHosts.length - 1)); |
| 73 | + break; |
| 74 | + case "Enter": |
| 75 | + if (highlightedIndex >= 0) { |
| 76 | + e.preventDefault(); |
| 77 | + selectHost(filteredHosts[highlightedIndex]); |
| 78 | + } |
| 79 | + break; |
| 80 | + case "Escape": |
| 81 | + e.preventDefault(); |
| 82 | + setShowDropdown(false); |
| 83 | + setHighlightedIndex(-1); |
| 84 | + break; |
| 85 | + } |
| 86 | + }, |
| 87 | + [showDropdown, filteredHosts, highlightedIndex, selectHost] |
| 88 | + ); |
| 89 | + |
| 90 | + const handleFocus = () => { |
| 91 | + if (filteredHosts.length > 0) { |
| 92 | + setShowDropdown(true); |
| 93 | + } |
| 94 | + }; |
| 95 | + |
| 96 | + const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { |
| 97 | + props.onChange(e.target.value); |
| 98 | + // Show dropdown when typing if there are matches |
| 99 | + if (hosts.length > 0) { |
| 100 | + setShowDropdown(true); |
| 101 | + } |
| 102 | + setHighlightedIndex(-1); |
| 103 | + }; |
| 104 | + |
| 105 | + // Scroll highlighted item into view |
| 106 | + useEffect(() => { |
| 107 | + if (highlightedIndex >= 0 && itemRefs.current[highlightedIndex]) { |
| 108 | + itemRefs.current[highlightedIndex]?.scrollIntoView({ |
| 109 | + block: "nearest", |
| 110 | + behavior: "smooth", |
| 111 | + }); |
| 112 | + } |
| 113 | + }, [highlightedIndex]); |
| 114 | + |
| 115 | + // Show dropdown when there are filtered hosts |
| 116 | + const shouldShowDropdown = showDropdown && filteredHosts.length > 0 && !props.disabled; |
| 117 | + |
| 118 | + return ( |
| 119 | + <div ref={containerRef} className="relative"> |
| 120 | + <input |
| 121 | + ref={inputRef} |
| 122 | + type="text" |
| 123 | + value={props.value} |
| 124 | + onChange={handleChange} |
| 125 | + onFocus={handleFocus} |
| 126 | + onKeyDown={handleKeyDown} |
| 127 | + placeholder="user@host" |
| 128 | + disabled={props.disabled} |
| 129 | + className="bg-separator text-foreground border-border-medium focus:border-accent w-32 rounded border px-1 py-0.5 text-xs focus:outline-none disabled:opacity-50" |
| 130 | + autoComplete="off" |
| 131 | + /> |
| 132 | + {shouldShowDropdown && ( |
| 133 | + <div className="bg-separator border-border-light absolute bottom-full left-0 z-[1000] mb-1 max-h-[150px] min-w-32 overflow-y-auto rounded border shadow-[0_4px_12px_rgba(0,0,0,0.3)]"> |
| 134 | + {filteredHosts.map((host, index) => ( |
| 135 | + <div |
| 136 | + key={host} |
| 137 | + ref={(el) => (itemRefs.current[index] = el)} |
| 138 | + onClick={() => selectHost(host)} |
| 139 | + onMouseEnter={() => setHighlightedIndex(index)} |
| 140 | + className={`cursor-pointer px-2 py-1 text-xs ${ |
| 141 | + index === highlightedIndex |
| 142 | + ? "bg-accent text-white" |
| 143 | + : "text-foreground hover:bg-border-medium" |
| 144 | + }`} |
| 145 | + > |
| 146 | + {host} |
| 147 | + </div> |
| 148 | + ))} |
| 149 | + </div> |
| 150 | + )} |
| 151 | + </div> |
| 152 | + ); |
| 153 | +} |
0 commit comments