opencode suggestions for inputs

src/components/SelectLichessStudy.tsx

@@ -8,9 +8,14 @@ interface IProps {
 
 const SelectLichessStudy = ({ setSelectedStudyId }: IProps) => {
 	const [isOpen, setIsOpen] = useState(false);
+	const [search, setSearch] = useState("");
 	const { getLichessUserStudies, userStudies } = useLichess();
 	const dropdownRef = useRef<HTMLDivElement>(null);
 
+	const filteredStudies = userStudies.filter((study) =>
+		study.name.toLowerCase().includes(search.toLowerCase()),
+	);
+
 	const onClickHandler = async () => {
 		setIsOpen(!isOpen);
 
@@ -22,6 +27,7 @@ const SelectLichessStudy = ({ setSelectedStudyId }: IProps) => {
 	const handleStudyClick = async (studyId: string) => {
 		setSelectedStudyId(studyId);
 		setIsOpen(false);
+		setSearch("");
 	};
 
 	useEffect(() => {
@@ -32,6 +38,7 @@ const SelectLichessStudy = ({ setSelectedStudyId }: IProps) => {
 				!dropdownRef.current.contains(event.target as Node)
 			) {
 				setIsOpen(false);
+				setSearch("");
 			}
 		};
 
@@ -53,21 +60,54 @@ const SelectLichessStudy = ({ setSelectedStudyId }: 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>
-						{userStudies.map((study) => (
-							<li key={study.id}>
-								<button
-									type="button"
-									className="p-2 cursor-pointer hover:bg-(--neutral-content)/20 text-left w-full"
-									onClick={() => handleStudyClick(study.id)}
-								>
-									{study.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"
+							>
+								<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" />
+
+					{filteredStudies.length > 0 ? (
+						<ul>
+							{filteredStudies.map((study) => (
+								<li key={study.id}>
+									<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={() => handleStudyClick(study.id)}
+									>
+										{study.name}
+									</button>
+								</li>
+							))}
+						</ul>
+					) : (
+						<p className="text-(--neutral-content) text-sm text-center py-4">
+							No results found
+						</p>
+					)}
 				</div>
 			) : null}
 		</div>