Stage 17: UI defect fixes (russian variant, Telegram theme/nav/banner, reconnect, hint zoom, plaque, history, transitions, per-game cache)

- #6 align the UI variant id to the backend canonical 'russian_scrabble' (type, variants, Lobby, mock, tests) — fixes the New->Russian 400
- #11/#12 inside Telegram force the colour scheme from WebApp.colorScheme (over OS prefers-color-scheme, fixing the Telegram Desktop breakage) and hide the theme switcher
- #14/#15 nav bar takes Telegram's bg; announcement banner gets a dedicated subtle --ad-bg accent token
- #16 suppress the reconnect banner while backgrounded and silently reconnect the live stream on return to the foreground
- #17 hint zoom scrolls to the placement's bounding box, not the top-left
- #19/#20 players plaque: active seat raised with side shadows, others sunk; tap toggles history
- #21/#23 history: scrollbar-gutter:stable (no word jitter); fixed-height drawer pins the bottom shadow to the board
- #3 (UI) disable nudge on the player's own turn
- #18a directional screen slide transitions (forward in from the right, back reveals the lobby)
- #13 per-game in-memory cache: instant render on re-entry + background refresh
- e2e: openGame waits for the slide transition to settle

ui/src/lib/app.svelte.ts

@@ -9,9 +9,10 @@ import { GatewayError } from './client';
 import { navigate, router } from './router.svelte';
 import { errorKey, localeFrom, setLocale, t, type Locale } from './i18n/index.svelte';
 import { applyReduceMotion, applyTelegramTheme, applyTheme, type ThemePref } from './theme';
-import { insideTelegram, onTelegramPath, telegramLaunch } from './telegram';
+import { insideTelegram, onTelegramPath, telegramColorScheme, telegramLaunch } from './telegram';
 import { parseStartParam } from './deeplink';
 import { clearSession, loadPrefs, loadSession, saveSession, savePrefs } from './session';
+import { clearGameCache } from './gamecache';
 import type { BoardLabelMode } from './boardlabels';
 
 export interface Toast {
@@ -47,8 +48,15 @@ export const app = $state<{
 });
 
 let unsubscribeStream: (() => void) | null = null;
+let streamAlive = false;
+let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
 let toastTimer: ReturnType<typeof setTimeout> | null = null;
 
+/** documentHidden reports whether the app is currently backgrounded. */
+function documentHidden(): boolean {
+  return typeof document !== 'undefined' && document.visibilityState === 'hidden';
+}
+
 export function showToast(text: string, kind: Toast['kind'] = 'info'): void {
   app.toast = { kind, text };
   if (toastTimer) clearTimeout(toastTimer);
@@ -70,6 +78,7 @@ export function handleError(err: unknown): void {
 
 function openStream(): void {
   closeStream();
+  streamAlive = true;
   unsubscribeStream = gateway.subscribe(
     (e) => {
       app.lastEvent = e;
@@ -85,10 +94,30 @@ function openStream(): void {
         void refreshNotifications();
       }
     },
-    () => showToast(t('error.unavailable'), 'error'),
+    () => {
+      streamAlive = false;
+      // A background suspend (iOS / Telegram) drops the single-shot stream. Don't
+      // alarm the user with the connection banner while hidden — reconnect silently
+      // on return (the visibilitychange handler). Show the banner only on a failure
+      // seen in the foreground, and retry it.
+      if (!documentHidden()) {
+        showToast(t('error.unavailable'), 'error');
+        scheduleReconnect();
+      }
+    },
   );
 }
 
+/** scheduleReconnect reopens a dropped stream once, after a short delay, while the
+ * app is in the foreground (a single pending attempt at a time). */
+function scheduleReconnect(): void {
+  if (reconnectTimer || !app.session) return;
+  reconnectTimer = setTimeout(() => {
+    reconnectTimer = null;
+    if (app.session && !streamAlive && !documentHidden()) openStream();
+  }, 4000);
+}
+
 /**
  * refreshNotifications recomputes the lobby badge count (incoming friend requests
  * plus open invitations). Authoritative poll, complementing the live 'notify' push.
@@ -111,8 +140,13 @@ export async function refreshNotifications(): Promise<void> {
 }
 
 function closeStream(): void {
+  if (reconnectTimer) {
+    clearTimeout(reconnectTimer);
+    reconnectTimer = null;
+  }
   unsubscribeStream?.();
   unsubscribeStream = null;
+  streamAlive = false;
 }
 
 async function adoptSession(s: Session): Promise<void> {
@@ -170,6 +204,10 @@ export async function bootstrap(): Promise<void> {
   if (insideTelegram()) {
     const launch = telegramLaunch();
     if (launch.theme) applyTelegramTheme(launch.theme);
+    // Inside Telegram the colour scheme is Telegram's to decide; force it explicitly
+    // so the OS prefers-color-scheme (which leaks into the Telegram Desktop webview)
+    // cannot fight it. Falls back to the stored preference when the SDK omits it.
+    applyTheme(telegramColorScheme() ?? app.theme);
     try {
       await adoptSession(await gateway.authTelegram(launch.initData));
       await routeStartParam(launch.startParam);
@@ -249,6 +287,7 @@ export async function loginEmail(email: string, code: string): Promise<void> {
 
 export async function logout(): Promise<void> {
   closeStream();
+  clearGameCache();
   gateway.setToken(null);
   await clearSession();
   app.session = null;
@@ -314,10 +353,14 @@ export function setBoardLabels(mode: BoardLabelMode): void {
   persistPrefs();
 }
 
-// Refresh the lobby badge when the app returns to the foreground — a push 'notify'
-// may have been missed while the client was hidden/closed (poll + push, see §10).
+// On return to the foreground: silently re-establish a stream dropped while the app
+// was backgrounded (iOS/Telegram suspend it), and refresh the lobby badge for any
+// push 'notify' missed while hidden (poll + push, see §10).
 if (typeof document !== 'undefined') {
   document.addEventListener('visibilitychange', () => {
-    if (document.visibilityState === 'visible' && app.session) void refreshNotifications();
+    if (document.visibilityState === 'visible' && app.session) {
+      if (!streamAlive) openStream();
+      void refreshNotifications();
+    }
   });
 }