Refactor modal system: BaseModal renders shell, unified open(args) API (#3923)

## Description

Refactors the modal system so that `BaseModal` owns the `<o-modal>`
shell rendering, tab state, and lifecycle. Modal subclasses now provide
content via small hook methods (`renderHeaderSlot()`, `renderBody(tab)`,
`modalConfig()`) instead of each rebuilding the `<o-modal>` template and
inline-mode branching.

This sets up the foundation for a future modal URL router (e.g.
`#modal=store&tab=flags`), which will be a follow-up PR.

### What changed

**`BaseModal`** — `src/client/components/BaseModal.ts`
- Now renders the `<o-modal>` shell itself; subclasses no longer
duplicate it
- Owns `activeTab` state and dispatches per-tab rendering via
`renderBody(tab)`
- Single `modalConfig()` method returns `{ title?, tabs?, hideHeader?,
hideCloseButton?, alwaysMaximized?, maxWidth? }`
- Uniform `open(args?)` / `close(args?)` interface; subclasses interpret
args in `onOpen(args)` / `onClose(args)`
- Tabbed modals can lazy-load via `onTabEnter(tab)` lifecycle hook
- Re-entrancy guard on `open()` so `showPage()` re-invocations don't
clobber state set by the outer call
- Initial tab defaults to first entry in `modalConfig().tabs` so the
active tab is highlighted on first open

**17 modals migrated** to the new shape:
- Tabbed: Store, UserSetting, Leaderboard, Clan
- Non-tabbed: FlagInput, Account, TokenLogin, News, TerritoryPatterns,
Troubleshooting, SinglePlayer, Matchmaking, RankedModal, Help, Language
- Lobby: JoinLobbyModal, HostLobbyModal (kept their `confirmBeforeClose`
/ `closeAndLeave` / `closeWithoutLeaving` methods)

Per-modal diffs are mostly mechanical:
- Drop the `<o-modal>` wrapper template and the `if (this.inline) return
content` branch
- Drop the inner `<div class="${this.modalContainerClass}">` wrapper
(shell styling now lives on `<o-modal>`)
- Move header content into `renderHeaderSlot()` so it lives in the
sticky header area
- Convert `super.open()`/`super.close()` overrides into
`onOpen(args)`/`onClose(args)` hooks
- For tabbed modals: drop subclass `@state activeTab`, manual
`handleTabChange`, and the `render()` switch — all owned by BaseModal
now

**Other changes:**
- `Store`: in affiliate mode (`#affiliate=X`), tabs are hidden and a
single combined grid of purchasable affiliate items is shown
- `Main.ts`: `joinModal.open(lobbyId, lobbyInfo)` callsites converted to
the new `open({ lobbyId, lobbyInfo })` shape

### Follow-up

Modal URL router (`#modal=X&tab=Y&...`) is a separate PR on top of this
foundation.

## Please complete the following:

- [x] I have added screenshots for all UI updates _(no visual changes;
smoke-tested in dev)_
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file _(no new user-visible strings)_
- [ ] I have added relevant tests to the test directory _(no test
coverage; tested in browser)_
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

evan

src/client/UserSettingModal.ts

@@ -17,8 +17,6 @@ export class UserSettingModal extends BaseModal {
   private userSettings: UserSettings = new UserSettings();
   private readonly defaultKeybinds = getDefaultKeybinds(Platform.isMac);
 
-  @state() private activeTab: "basic" | "keybinds" = "basic";
-
   @state() private keySequence: string[] = [];
   @state() private showEasterEggSettings = false;
 
@@ -322,40 +320,31 @@ export class UserSettingModal extends BaseModal {
     this.userSettings.togglePerformanceOverlay();
   }
 
-  render() {
-    const activeContent =
-      this.activeTab === "basic"
-        ? this.renderBasicSettings()
-        : this.renderKeybindSettings();
+  protected modalConfig() {
+    return {
+      tabs: [
+        { key: "basic", label: translateText("user_setting.tab_basic") },
+        { key: "keybinds", label: translateText("user_setting.tab_keybinds") },
+      ],
+    };
+  }
 
-    const tabs = [
-      { key: "basic", label: translateText("user_setting.tab_basic") },
-      { key: "keybinds", label: translateText("user_setting.tab_keybinds") },
-    ];
+  protected renderHeaderSlot() {
+    return modalHeader({
+      title: translateText("user_setting.title"),
+      onBack: () => this.close(),
+      ariaLabel: translateText("common.back"),
+      showDivider: true,
+    });
+  }
 
+  protected renderBody(tab: string) {
+    const body =
+      tab === "keybinds"
+        ? this.renderKeybindSettings()
+        : this.renderBasicSettings();
     return html`
-      <o-modal
-        title="${translateText("user_setting.title")}"
-        ?inline=${this.inline}
-        hideCloseButton
-        hideHeader
-        .tabs=${tabs}
-        .activeTab=${this.activeTab}
-        .onTabChange=${(key: string) =>
-          (this.activeTab = key as "basic" | "keybinds")}
-      >
-        <div slot="header">
-          ${modalHeader({
-            title: translateText("user_setting.title"),
-            onBack: () => this.close(),
-            ariaLabel: translateText("common.back"),
-            showDivider: true,
-          })}
-        </div>
-        <div class="flex flex-col gap-2 p-4 lg:p-[1.4rem]">
-          ${activeContent}
-        </div>
-      </o-modal>
+      <div class="flex flex-col gap-2 p-4 lg:p-[1.4rem]">${body}</div>
     `;
   }
 
@@ -944,8 +933,4 @@ export class UserSettingModal extends BaseModal {
     window.addEventListener("keydown", this.handleEasterEggKey);
     this.loadKeybindsFromStorage();
   }
-
-  public open() {
-    super.open();
-  }
 }