From 0f1cb4ff34011cd455992f8595176f1d691c0211 Mon Sep 17 00:00:00 2001
From: Joey Yakimowich-Payne <jyapayne@pm.me>
Date: Fri, 17 Apr 2026 11:44:08 -0600
Subject: [PATCH] fix(chess): preserve RulesDrawer scroll position on toggle

---
 packages/chess/src/ui/RulesDrawer.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/chess/src/ui/RulesDrawer.tsx b/packages/chess/src/ui/RulesDrawer.tsx
index f80f287..20e4777 100644
--- a/packages/chess/src/ui/RulesDrawer.tsx
+++ b/packages/chess/src/ui/RulesDrawer.tsx
@@ -15,11 +15,13 @@ import { PRESET_REGISTRY } from '../presets/index.js';
  */
 export function RulesDrawer() {
   const [open, setOpen] = useState(false);
-  // Force-refresh trigger. The registry itself has no event emitter so we
-  // re-read on every open and every toggle click.
-  const [tick, setTick] = useState(0);
+  // Force-refresh trigger. The registry itself has no event emitter, so we
+  // bump this counter on every open and every toggle click to re-read the
+  // active set. The value is never read directly — only the setter is used
+  // to trigger a re-render of this component.
+  const [, setTick] = useState(0);
 
-  // Re-read active set on every open/close so external changes reflect.
+  // Re-read active set on every open so external changes reflect.
   useEffect(() => {
     if (open) setTick((t) => t + 1);
   }, [open]);
@@ -95,7 +97,7 @@ export function RulesDrawer() {
               </button>
             </header>
 
-            <div className="flex-1 overflow-y-auto p-5 space-y-3" key={tick}>
+            <div className="flex-1 overflow-y-auto p-5 space-y-3">
               {presets.map((preset) => {
                 const isOn = activeIds.has(preset.id);
                 const blockedBy = preset.incompatibleWith.filter((id) =>