opencode suggestions for inputs

2026-07-23 01:46:57 +00:00 · 2026-06-09 14:37:55 +02:00
parent 63fffb11de
commit 07068ab4fa
3 changed files with 236 additions and 32 deletions
@@ -1,5 +1,110 @@
+import { useState } from "react";
+import { useLichess } from "#/hooks/useLichess.ts";
+
+const parseStudyId = (url: string): string | null => {
+	const match = url.match(
+		/(?:https?:\/\/)?(?:www\.)?lichess\.org\/study\/([a-zA-Z0-9]+)/,
+	);
+	return match?.[1] ?? null;
+};
+
 const LichessStudyUrlInput = () => {
-	return <input placeholder="Lichess Study URL" className="" />;
+	const [url, setUrl] = useState("");
+	const [feedback, setFeedback] = useState<{
+		type: "success" | "error";
+		message: string;
+	} | null>(null);
+
+	const { setSelectedStudyId, selectedStudyId } = useLichess();
+
+	const handleSubmit = () => {
+		if (!url.trim()) {
+			setFeedback({ type: "error", message: "Please enter a study URL" });
+			return;
+		}
+
+		const studyId = parseStudyId(url.trim());
+
+		if (!studyId) {
+			setFeedback({
+				type: "error",
+				message: "Invalid Lichess study URL",
+			});
+			return;
+		}
+
+		if (studyId === selectedStudyId) {
+			setFeedback({
+				type: "success",
+				message: "Study already selected",
+			});
+			return;
+		}
+
+		setSelectedStudyId(studyId);
+		setFeedback({ type: "success", message: "Study loaded — pick a chapter" });
+	};
+
+	const handleKeyDown = (e: React.KeyboardEvent) => {
+		if (e.key === "Enter") handleSubmit();
+	};
+
+	return (
+		<div className="flex items-center gap-2 min-w-[500px]">
+			<div className="relative flex-1">
+				<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"
+						aria-hidden="true"
+					>
+						<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+						<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+					</svg>
+				</span>
+				<input
+					type="url"
+					placeholder="Lichess Study URL"
+					value={url}
+					onChange={(e) => {
+						setUrl(e.target.value);
+						if (feedback) setFeedback(null);
+					}}
+					onKeyDown={handleKeyDown}
+					className={`w-full h-12 pl-10 pr-4 rounded-lg border 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 ${
+						feedback?.type === "error"
+							? "border-red-500"
+							: "border-(--neutral-content)"
+					}`}
+				/>
+			</div>
+
+			<button
+				type="button"
+				className="btn btn-secondary px-6 whitespace-nowrap"
+				onClick={handleSubmit}
+			>
+				Load Study
+			</button>
+
+			{feedback ? (
+				<span
+					className={`text-sm whitespace-nowrap ${
+						feedback.type === "error" ? "text-red-500" : "text-(--accent)"
+					}`}
+				>
+					{feedback.message}
+				</span>
+			) : null}
+		</div>
+	);
 };

 export default LichessStudyUrlInput;