storkit/frontend/src/components/selection/ProjectPathInput.tsx

export interface ProjectPathMatch {
	name: string;
	path: string;
}

export interface ProjectPathInputProps {
	value: string;
	onChange: (value: string) => void;
	onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
	suggestionTail: string;
	matchList: ProjectPathMatch[];
	selectedMatch: number;
	onSelectMatch: (index: number) => void;
	onAcceptMatch: (path: string) => void;
	onCloseSuggestions: () => void;
	currentPartial: string;
}

function renderHighlightedMatch(text: string, query: string) {
	if (!query) return text;
	let qIndex = 0;
	const lowerQuery = query.toLowerCase();
	const counts = new Map<string, number>();
	return text.split("").map((char) => {
		const isMatch =
			qIndex < lowerQuery.length && char.toLowerCase() === lowerQuery[qIndex];
		if (isMatch) {
			qIndex += 1;
		}
		const count = counts.get(char) ?? 0;
		counts.set(char, count + 1);
		return (
			<span
				key={`${char}-${count}`}
				style={isMatch ? { fontWeight: 600, color: "#222" } : undefined}
			>
				{char}
			</span>
		);
	});
}

export function ProjectPathInput({
	value,
	onChange,
	onKeyDown,
	suggestionTail,
	matchList,
	selectedMatch,
	onSelectMatch,
	onAcceptMatch,
	onCloseSuggestions,
	currentPartial,
}: ProjectPathInputProps) {
	return (
		<div
			style={{
				position: "relative",
				marginTop: "12px",
				marginBottom: "170px",
			}}
		>
			<div
				style={{
					position: "absolute",
					inset: 0,
					padding: "10px",
					color: "#aaa",
					fontFamily: "monospace",
					whiteSpace: "pre",
					overflow: "hidden",
					textOverflow: "ellipsis",
					pointerEvents: "none",
				}}
			>
				{value}
				{suggestionTail}
			</div>
			<input
				type="text"
				value={value}
				placeholder="/path/to/project"
				onChange={(event) => onChange(event.target.value)}
				onKeyDown={onKeyDown}
				style={{
					width: "100%",
					padding: "10px",
					fontFamily: "monospace",
					background: "transparent",
					position: "relative",
					zIndex: 1,
				}}
			/>
			{matchList.length > 0 && (
				<div
					style={{
						position: "absolute",
						top: "100%",
						left: 0,
						right: 0,
						marginTop: "6px",
						border: "1px solid #ddd",
						borderRadius: "6px",
						overflow: "hidden",
						background: "#fff",
						fontFamily: "monospace",
						height: "160px",
						overflowY: "auto",
						boxSizing: "border-box",
						zIndex: 2,
					}}
				>
					<div
						style={{
							display: "flex",
							justifyContent: "flex-end",
							alignItems: "center",
							padding: "4px 6px",
							borderBottom: "1px solid #eee",
							background: "#fafafa",
						}}
					>
						<button
							type="button"
							aria-label="Close suggestions"
							onClick={onCloseSuggestions}
							style={{
								width: "24px",
								height: "24px",
								borderRadius: "4px",
								border: "1px solid #ddd",
								background: "#fff",
								cursor: "pointer",
								lineHeight: 1,
							}}
						>
							×
						</button>
					</div>
					{matchList.map((match, index) => {
						const isSelected = index === selectedMatch;
						return (
							<button
								key={match.path}
								type="button"
								onMouseEnter={() => onSelectMatch(index)}
								onMouseDown={(event) => {
									event.preventDefault();
									onSelectMatch(index);
									onAcceptMatch(match.path);
								}}
								style={{
									width: "100%",
									textAlign: "left",
									padding: "6px 8px",
									border: "none",
									background: isSelected ? "#f0f0f0" : "transparent",
									cursor: "pointer",
									fontFamily: "inherit",
								}}
							>
								{renderHighlightedMatch(match.name, currentPartial)}/
							</button>
						);
					})}
				</div>
			)}
		</div>
	);
}