From eb49b6248df0f3acaffd8dbf45d215f9ca91ffaa Mon Sep 17 00:00:00 2001
From: Owen <owenrees.dev@gmail.com>
Date: Wed, 10 Jun 2026 11:53:33 +0200
Subject: [PATCH] remove unused LichessStudyUrlInput and hide lichess buttons
 when no user or study loaded

---
 TODO                                    |   4 +-
 src/components/LichessStudyUrlInput.tsx | 110 ------------------------
 src/hooks/useLichess.ts                 |   1 +
 src/pages/Chessboard.tsx                |  26 +++---
 4 files changed, 20 insertions(+), 121 deletions(-)
 delete mode 100644 src/components/LichessStudyUrlInput.tsx

diff --git a/TODO b/TODO
index 5ed093e..dbc39f1 100644
--- a/TODO
+++ b/TODO
@@ -9,4 +9,6 @@
 429 lichess error handling
 
 add throw errors or return errors in server code
-try/catch where needed in client code
\ No newline at end of file
+try/catch where needed in client code
+on logout reset selectedStudyid
+make login lichess button as wide as logout - full width?
\ No newline at end of file
diff --git a/src/components/LichessStudyUrlInput.tsx b/src/components/LichessStudyUrlInput.tsx
deleted file mode 100644
index 5ef1f5f..0000000
--- a/src/components/LichessStudyUrlInput.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-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 = () => {
-	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;
diff --git a/src/hooks/useLichess.ts b/src/hooks/useLichess.ts
index be58284..5641dbc 100644
--- a/src/hooks/useLichess.ts
+++ b/src/hooks/useLichess.ts
@@ -77,6 +77,7 @@ export const useLichess = () => {
 
 	const lichessLogout = async () => {
 		await logoutFn();
+		setSelectedStudyId(null);
 		setUser(null);
 	};
 
diff --git a/src/pages/Chessboard.tsx b/src/pages/Chessboard.tsx
index 19818d4..ba76a32 100644
--- a/src/pages/Chessboard.tsx
+++ b/src/pages/Chessboard.tsx
@@ -2,10 +2,10 @@ import { lazy, Suspense } from "react";
 import CustomHeaders from "#/components/CustomHeaders.tsx";
 import HeaderFields from "#/components/HeaderFields.tsx";
 import LichessButton from "#/components/LichessButton.tsx";
-import LichessStudyUrlInput from "#/components/LichessStudyUrlInput.tsx";
 import Section from "#/components/Section.tsx";
 import SelectLichessStudy from "#/components/SelectLichessStudy.tsx";
 import SelectStudyChapter from "#/components/SelectStudyChapter.tsx";
+import { useLichessUser } from "#/context/LichessUserContext.tsx";
 import { useChessGame } from "#/hooks/useChessGame.ts";
 import { useLichess } from "#/hooks/useLichess.ts";
 
@@ -41,6 +41,8 @@ const Chessboard = () => {
 	const { selectedStudyId, setSelectedStudyId, setStudyChapters } =
 		useLichess();
 
+	const { user } = useLichessUser();
+
 	return (
 		<main className="px-4 pb-8 place-self-center min-h-[calc(100vh-226px)]">
 			<Section title="Convert PGN to PDF">
@@ -52,15 +54,19 @@ const Chessboard = () => {
 					className="file-input max-w-xs"
 					onChange={handleLoadPgn}
 				/>
-				<SelectLichessStudy
-					setSelectedStudyId={setSelectedStudyId}
-					setStudyChapters={setStudyChapters}
-				/>{" "}
-				or <LichessStudyUrlInput />
-				<SelectStudyChapter
-					selectedStudyId={selectedStudyId || ""}
-					gameDispatch={gameDispatch}
-				/>
+				{user ? (
+					<SelectLichessStudy
+						setSelectedStudyId={setSelectedStudyId}
+						setStudyChapters={setStudyChapters}
+					/>
+				) : null}
+				<div />
+				{selectedStudyId && user ? (
+					<SelectStudyChapter
+						selectedStudyId={selectedStudyId || ""}
+						gameDispatch={gameDispatch}
+					/>
+				) : null}
 			</Section>
 
 			<div className="grid lg:grid-cols-2 gap-4">