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 <[email protected]>

docs/DESIGN.md

@@ -637,7 +637,8 @@ legend on the same baseline as "Next: …".
 - **Settings.** About, Changelog, Data & sources (list options first), Region & time, Appearance
   (interface, theme, scheme, urgency colours, default view, game order, timeline design, focus bar,
   checklist group), Your own events and games, Backup (tiers plus a manual "Your backups" list), and
-  per-game Setup / Codes / About.
+  per-game Setup / Codes / About. Switching to another game keeps the open tab (2026-10-20, owner):
+  Codes in one game opens Codes in the next.
 - **Redeem codes (2026-10-18, owner).** A game's Codes tab lists the codes still to use first. A
   code redeemed on every server the reader plays, or past its stated expiry, is greyed and struck
   through in a "Redeemed or expired" section below, with its Redeemed box still there to undo. A

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}

test/game-settings.test.tsx

@@ -58,3 +58,24 @@ test("Appearance orders only the games being tracked, with up and down buttons",
   expect(html).not.toContain("Move Zenless Zone Zero");
   expect(html).not.toContain("Sort A–Z");
 });
+
+test("game settings shows the tab the parent holds, so switching games keeps it", () => {
+  const at = "2026-10-16T12:00:00.000Z",
+    ids = ["account:one", "account:two"],
+    state = migrateLegacy({}, ["genshin", "zzz"], at, () => ids.shift()!);
+  const html = (game: string) =>
+    render(
+      <GameSettings
+        state={state}
+        initialGame={game}
+        tab="codes"
+        onTab={() => {}}
+        sources={[]}
+        onAction={async () => ({ ok: true })}
+      />,
+    );
+  for (const game of ["genshin", "zzz"]) {
+    expect(html(game)).toContain('data-tab="codes" aria-pressed="true"');
+    expect(html(game)).toContain("Redeem codes");
+  }
+});