opencode suggestions for inputs

src/components/SelectStudyChapter.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState, type Dispatch } from "react";
+import { type Dispatch, useEffect, useRef, useState } from "react";
 import { type IUserStudyChapter, useLichess } from "#/hooks/useLichess.ts";
 import type { GameAction } from "#/reducers/gameReducer.ts";
 
@@ -10,10 +10,34 @@ interface IProps {
 const SelectStudyChapter = ({ selectedStudyId, gameDispatch }: IProps) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const [studyChapters, setStudyChapters] = useState<IUserStudyChapter[]>([]);
+	const [search, setSearch] = useState("");
 	const dropdownRef = useRef<HTMLDivElement>(null);
 
 	const { getLichessStudyChapters, loadLichessStudyChapter } = useLichess();
 
+	const filteredChapters = studyChapters.filter((chapter) =>
+		chapter.name.toLowerCase().includes(search.toLowerCase()),
+	);
+
+	useEffect(() => {
+		const handleClickOutside = (event: MouseEvent) => {
+			if (
+				isOpen &&
+				dropdownRef.current &&
+				!dropdownRef.current.contains(event.target as Node)
+			) {
+				setIsOpen(false);
+				setSearch("");
+			}
+		};
+
+		document.addEventListener("mousedown", handleClickOutside);
+
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+		};
+	}, [isOpen]);
+
 	const onClickHandler = async () => {
 		const studies = await getLichessStudyChapters({ studyId: selectedStudyId });
 		if (!studies) return;
@@ -27,6 +51,7 @@ const SelectStudyChapter = ({ selectedStudyId, gameDispatch }: IProps) => {
 		gameDispatch({ type: "SET_GAME", payload: { pgn, headers } });
 
 		setIsOpen(false);
+		setSearch("");
 	};
 
 	return (
@@ -40,21 +65,55 @@ const SelectStudyChapter = ({ selectedStudyId, gameDispatch }: IProps) => {
 			</button>
 
 			{isOpen ? (
-				<div className="absolute z-3 bg-(--bg-base) mt-2 max-h-75 border rounded-lg p-2 overflow-y-scroll">
-					<input type="text" placeholder="Search..." />
-					<ul>
-						{studyChapters?.map((chapter) => (
-							<li key={`${chapter.chapterId}${chapter.name}`}>
-								<button
-									type="button"
-									className="p-2 cursor-pointer hover:bg-(--neutral-content)/20 text-left w-full"
-									onClick={() => handleChapterClick(chapter)}
-								>
-									{chapter.name}
-								</button>
-							</li>
-						))}
-					</ul>
+				<div className="absolute z-3 bg-(--bg-base) mt-2 max-h-80 border border-(--neutral-content)/30 rounded-lg p-3 overflow-y-scroll transition-all duration-300 ease-in-out opacity-100 scale-100 shadow-lg">
+					<div className="relative">
+						<span className="absolute left-3 top-1/2 -translate-y-1/2 text-(--neutral-content) pointer-events-none">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="16"
+								height="16"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								strokeWidth="2"
+								strokeLinecap="round"
+								strokeLinejoin="round"
+							>
+								<title>link</title>
+								<circle cx="11" cy="11" r="8" />
+								<path d="m21 21-4.3-4.3" />
+							</svg>
+						</span>
+						<input
+							type="text"
+							placeholder="Search..."
+							value={search}
+							onChange={(e) => setSearch(e.target.value)}
+							className="w-full h-12 pl-10 pr-4 rounded-lg border border-(--neutral-content) text-(--base-content) placeholder-(--neutral-content)/50 outline-hidden transition-all duration-200 focus:border-(--accent) focus:outline-3 focus:outline-offset-2 focus:outline-(--accent)/50"
+						/>
+					</div>
+
+					<hr className="border-(--neutral-content)/15 my-2" />
+
+					{filteredChapters.length > 0 ? (
+						<ul>
+							{filteredChapters.map((chapter) => (
+								<li key={`${chapter.chapterId}${chapter.name}`}>
+									<button
+										type="button"
+										className="p-2 cursor-pointer hover:bg-(--neutral-content)/15 focus-visible:outline-2 focus-visible:outline-(--accent) focus-visible:outline-offset-2 rounded text-left w-full transition-colors duration-200"
+										onClick={() => handleChapterClick(chapter)}
+									>
+										{chapter.name}
+									</button>
+								</li>
+							))}
+						</ul>
+					) : (
+						<p className="text-(--neutral-content) text-sm text-center py-4">
+							No results found
+						</p>
+					)}
 				</div>
 			) : null}
 		</div>