feat(settings): keep the game tab when switching games

Codes in one game now opens Codes in the next. The reader app holds the
tab and GameSettings reads it, instead of each game page minting its own.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/client/ReaderApp.tsx

@@ -88,7 +88,10 @@ import {
   type SettingsPage,
 } from "./components/redesign/SettingsLayout.tsx";
 import { ChangelogPage } from "./components/redesign/ChangelogPage.tsx";
-import { GameSettings } from "./components/redesign/GameSettings.tsx";
+import {
+  GameSettings,
+  type GameTab,
+} from "./components/redesign/GameSettings.tsx";
 import { RoutinesPage } from "./components/redesign/RoutinesPage.tsx";
 import { DailyPanel } from "./components/redesign/DailyPanel.tsx";
 import { RoutineGroup } from "./components/redesign/RoutineGroup.tsx";
@@ -292,7 +295,7 @@ function ReaderContent({
   }, [tour]);
   const touring = tour === "new" || tour === "returning" || tour === "replay";
   const tourForced = tour === "new" || tour === "returning";
-  const [gameTab, setGameTab] = useState<"setup" | "codes">("setup");
+  const [gameTab, setGameTab] = useState<GameTab>("setup");
   const [codesGame, setCodesGame] = useState<string | undefined>(
     startRoute?.game,
   );
@@ -1021,8 +1024,8 @@ function ReaderContent({
                         setSettingsPage(p);
                       }}
                       onGame={(g) => {
+                        // The tab stays: Codes in one game opens Codes in the next.
                         setCodesGame(g);
-                        setGameTab("setup");
                         setSettingsPage("games");
                       }}
                     >
@@ -1041,8 +1044,9 @@ function ReaderContent({
                         />
                       ) : settingsPage === "games" && codesGame ? (
                         <GameSettings
-                          key={`${codesGame}-${gameTab}`}
-                          initialTab={gameTab}
+                          key={codesGame}
+                          tab={gameTab}
+                          onTab={setGameTab}
                           codes={codes}
                           initialGame={codesGame}
                           state={state}

src/client/components/redesign/GameSettings.tsx

@@ -29,6 +29,8 @@ import { DisplayTimeContext, formatInZone } from "../../state/displayTime.ts";
 import { resolveReaderClock } from "../../../shared/readerClock.ts";
 import { DAY, formatRemaining, resetShiftMs } from "../../../shared/time.ts";
 export type ActionHandler = (action: ReaderAction) => Promise<SaveResult>;
+export const GAME_TABS = ["setup", "codes", "about"] as const;
+export type GameTab = (typeof GAME_TABS)[number];
 const hostOf = (url: string) => {
   try {
     return new URL(url).hostname.replace(/^www\./, "");
@@ -42,14 +44,17 @@ export function GameSettings({
   onAction,
   codes = null,
   initialGame,
-  initialTab = "setup",
+  tab: heldTab,
+  onTab,
 }: {
   state: ReaderState;
   sources: SourceHealth[];
   onAction: ActionHandler;
   codes?: CodesFeed | null;
   initialGame?: string | undefined;
-  initialTab?: "setup" | "codes";
+  // When the parent holds the tab, switching games keeps the reader on it.
+  tab?: GameTab;
+  onTab?: (tab: GameTab) => void;
 }) {
   const renderedMeta = useGameMeta();
   const games = orderGames(
@@ -72,7 +77,9 @@ export function GameSettings({
       games[0] ??
       "",
   );
-  const [tab, setTab] = useState<string>(initialTab);
+  const [ownTab, setOwnTab] = useState<GameTab>("setup");
+  const tab = heldTab ?? ownTab,
+    setTab = onTab ?? setOwnTab;
   const [trackingAccount, setTrackingAccount] = useState<string | null>(null);
   const [addingServer, setAddingServer] = useState(false);
   const [server, setServer] = useState<Region>("asia");
@@ -138,7 +145,7 @@ export function GameSettings({
       ) : null}
 
       <div className="subtabs">
-        {["setup", "codes", "about"].map((id) => (
+        {GAME_TABS.map((id) => (
           <button
             type="button"
             key={id}