From 27a9e704f4324eb5b85f29428a3de03c6a5b28ed Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 13 Apr 2026 14:59:53 +0000
Subject: [PATCH 1/4] Initial plan


From fa92f36b98dcf6f54215ece27453ccb3ceedc76f Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 13 Apr 2026 15:01:31 +0000
Subject: [PATCH 2/4] fix: use live location.hash instead of useState in
 learn.tsx

Agent-Logs-Url: https://github.com/ut-code/hitori-mahjong/sessions/f631166b-5d09-4665-944f-8859f3bf899a

Co-authored-by: tknkaa <145080781+tknkaa@users.noreply.github.com>
---
 app/routes/learn.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/routes/learn.tsx b/app/routes/learn.tsx
index e9743f7..7cbdc8b 100644
--- a/app/routes/learn.tsx
+++ b/app/routes/learn.tsx
@@ -1,11 +1,10 @@
-import { useState } from "react";
 import { Link, useLocation } from "react-router";
 import BasicRule from "~/lib/components/BasicRule";
 import LocalRule from "~/lib/components/LocalRule";
 
 export default function Page() {
 	const location = useLocation();
-	const [currentHash] = useState(location.hash);
+	const currentHash = location.hash || "#basic";
 	const contents = ["basic", "local"];
 	return (
 		<div className="drawer drawer-open bg-[#1A472A] font-serif">

From 6cf131ff06c89a033059935e47a30a586b9fe587 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 13 Apr 2026 16:22:43 +0000
Subject: [PATCH 3/4] fix: remove #basic default so no sidebar item is active
 on initial load

Agent-Logs-Url: https://github.com/ut-code/hitori-mahjong/sessions/d1cd6786-2f4a-4a1f-b011-a72fb1586c0a

Co-authored-by: tknkaa <145080781+tknkaa@users.noreply.github.com>
---
 app/routes/learn.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/routes/learn.tsx b/app/routes/learn.tsx
index 7cbdc8b..1d0183f 100644
--- a/app/routes/learn.tsx
+++ b/app/routes/learn.tsx
@@ -4,7 +4,7 @@ import LocalRule from "~/lib/components/LocalRule";
 
 export default function Page() {
 	const location = useLocation();
-	const currentHash = location.hash || "#basic";
+	const currentHash = location.hash;
 	const contents = ["basic", "local"];
 	return (
 		<div className="drawer drawer-open bg-[#1A472A] font-serif">

From e5d5d33b038269909c355794ab2a4c7dcf1a12aa Mon Sep 17 00:00:00 2001
From: tknkaa <tknkaa@users.noreply.github.com>
Date: Tue, 14 Apr 2026 08:29:44 +0800
Subject: [PATCH 4/4] fix

---
 app/routes/learn.tsx | 49 +++++++++++++++++++++-----------------------
 1 file changed, 23 insertions(+), 26 deletions(-)

diff --git a/app/routes/learn.tsx b/app/routes/learn.tsx
index 1d0183f..a9c2304 100644
--- a/app/routes/learn.tsx
+++ b/app/routes/learn.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import { Link, useLocation } from "react-router";
 import BasicRule from "~/lib/components/BasicRule";
 import LocalRule from "~/lib/components/LocalRule";
@@ -5,7 +6,14 @@ import LocalRule from "~/lib/components/LocalRule";
 export default function Page() {
 	const location = useLocation();
 	const currentHash = location.hash;
-	const contents = ["basic", "local"];
+	const contents = ["basic", "local"] as const;
+
+	useEffect(() => {
+		if (!currentHash) return;
+		const el = document.querySelector(currentHash);
+		el?.scrollIntoView({ behavior: "smooth" });
+	}, [currentHash]);
+
 	return (
 		<div className="drawer drawer-open bg-[#1A472A] font-serif">
 			<input id="my-drawer-4" type="checkbox" className="drawer-toggle" />
@@ -23,39 +31,28 @@ export default function Page() {
 					<LocalRule />
 				</div>
 			</div>
-
 			<div className="hidden md:block drawer-side is-drawer-close:overflow-visible">
 				<label
 					htmlFor="my-drawer-4"
 					aria-label="close sidebar"
 					className="drawer-overlay"
-				></label>
+				/>
 				<div className="is-drawer-close:w-14 is-drawer-open:w-48 bg-[#0F2918] flex flex-col items-start min-h-full">
 					<ul className="menu w-full grow">
-						{contents.map((content) => {
-							if (currentHash === `#${content}`) {
-								return (
-									<li key={content}>
-										<span className="is-drawer-close:hidden text-yellow-400">
-											<Link to={`#${content}`}>
-												{content === "basic" ? "基本ルール" : "ローカルルール"}
-											</Link>
-										</span>
-									</li>
-								);
-							} else {
-								return (
-									<li key={content}>
-										<span className="is-drawer-close:hidden">
-											<Link to={`#${content}`}>
-												{content === "basic" ? "基本ルール" : "ローカルルール"}
-											</Link>
-										</span>
-									</li>
-								);
-							}
-						})}
+						{contents.map((content) => (
+							<li key={content}>
+								<Link
+									to={`#${content}`}
+									className={`is-drawer-close:hidden ${
+										currentHash === `#${content}` ? "text-yellow-400" : ""
+									}`}
+								>
+									{content === "basic" ? "基本ルール" : "ローカルルール"}
+								</Link>
+							</li>
+						))}
 					</ul>
+
 					<div
 						className="m-2 is-drawer-close:tooltip is-drawer-close:tooltip-right"
 						data-tip="Open"