UI: fix the lobby slide on Telegram cold launch (correct the cause)

The first attempt (the App.svelte `started` gate) targeted the first pane mount,
but the slide is a second render. On a Telegram cold launch the URL fragment is
Telegram's #tgWebAppData=... launch params, which the router parsed as notfound;
bootstrap's navigate('/') then corrected it to the lobby asynchronously, re-keying
the route pane (notfound -> lobby) and sliding the lobby in as if returning from a
screen. A reload was static because the hash was already #/.

Treat a Telegram launch fragment as the lobby root in the router, so the route is
correct from the first pane (no re-key, no slide). Extract the pure hash->Route
parsing into routeparse.ts so it unit-tests without a DOM, and revert the gate
(the first pane never slid — local transitions skip the initial mount, as clean
browser launches showed).

Tests: routeparse unit tests (incl. the tgWebApp fragment); an e2e that launches
with the fragment in the URL and asserts the lobby plus the normalised #/ hash.

ui/src/lib/routeparse.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest';
+import { parse } from './routeparse';
+
+describe('parse', () => {
+  it('maps the empty hash and the root to the lobby', () => {
+    expect(parse('').name).toBe('lobby');
+    expect(parse('#/').name).toBe('lobby');
+  });
+
+  it('maps known paths to their routes', () => {
+    expect(parse('#/login').name).toBe('login');
+    expect(parse('#/new').name).toBe('new');
+    expect(parse('#/settings').name).toBe('settings');
+    expect(parse('#/stats').name).toBe('stats');
+    expect(parse('#/game/abc')).toEqual({ name: 'game', params: { id: 'abc' } });
+    expect(parse('#/game/abc/chat')).toEqual({ name: 'gameChat', params: { id: 'abc' } });
+    expect(parse('#/game/abc/check')).toEqual({ name: 'gameCheck', params: { id: 'abc' } });
+  });
+
+  it('maps an unknown path and a game without an id to notfound', () => {
+    expect(parse('#/bogus').name).toBe('notfound');
+    expect(parse('#/game').name).toBe('notfound');
+  });
+
+  it('treats a Telegram launch fragment as the lobby root, not notfound', () => {
+    // Telegram appends its Mini App launch params to the URL fragment on a cold launch; they
+    // are launch metadata, not a route. Parsing them as notfound made bootstrap's navigate('/')
+    // re-key the route pane (notfound -> lobby) and slide the lobby in on launch.
+    expect(parse('#tgWebAppData=query_id%3Dx&tgWebAppVersion=7.0&tgWebAppPlatform=ios').name).toBe(
+      'lobby',
+    );
+    expect(parse('#tgWebAppStartParam=foo').name).toBe('lobby');
+  });
+});

ui/src/lib/routeparse.ts

@@ -0,0 +1,61 @@
+// Pure hash-path -> Route parsing for the router. Kept dependency-free and free of any
+// reactive state so it unit-tests in the node environment; router.svelte.ts wraps it with
+// the reactive route rune and navigation.
+
+export type RouteName =
+  | 'login'
+  | 'lobby'
+  | 'new'
+  | 'game'
+  | 'gameChat'
+  | 'gameCheck'
+  | 'profile'
+  | 'settings'
+  | 'about'
+  | 'friends'
+  | 'stats'
+  | 'notfound';
+
+export interface Route {
+  name: RouteName;
+  params: Record<string, string>;
+}
+
+/**
+ * parse maps a location hash to a Route. An empty hash is the lobby root. A Telegram Mini
+ * App cold launch appends its launch params to the URL fragment (#tgWebAppData=...&
+ * tgWebAppVersion=...); those are launch metadata, not a route, so the fragment is treated
+ * as the lobby root. Otherwise it would parse as notfound, and bootstrap's navigate('/')
+ * would then re-key the route pane (notfound -> lobby), sliding the lobby in on launch as if
+ * returning from another screen.
+ */
+export function parse(hash: string): Route {
+  const raw = hash.replace(/^#/, '');
+  if (raw === '' || raw.startsWith('tgWebApp')) return { name: 'lobby', params: {} };
+  const path = raw.split('?')[0];
+  const seg = path.split('/').filter(Boolean);
+  if (seg.length === 0) return { name: 'lobby', params: {} };
+  switch (seg[0]) {
+    case 'login':
+      return { name: 'login', params: {} };
+    case 'new':
+      return { name: 'new', params: {} };
+    case 'game':
+      if (!seg[1]) return { name: 'notfound', params: {} };
+      if (seg[2] === 'chat') return { name: 'gameChat', params: { id: seg[1] } };
+      if (seg[2] === 'check') return { name: 'gameCheck', params: { id: seg[1] } };
+      return { name: 'game', params: { id: seg[1] } };
+    case 'profile':
+      return { name: 'profile', params: {} };
+    case 'settings':
+      return { name: 'settings', params: {} };
+    case 'about':
+      return { name: 'about', params: {} };
+    case 'friends':
+      return { name: 'friends', params: {} };
+    case 'stats':
+      return { name: 'stats', params: {} };
+    default:
+      return { name: 'notfound', params: {} };
+  }
+}

ui/src/lib/router.svelte.ts

@@ -1,54 +1,11 @@
 // Minimal dependency-free hash router. Hash routing survives a reload and works on
 // a file:// origin (Capacitor native packaging), where there is no server to honour
-// deep paths. The route is a reactive rune so screens re-render on navigation.
+// deep paths. The route is a reactive rune so screens re-render on navigation. The pure
+// hash->Route parsing lives in routeparse.ts (unit-tested without a DOM).
 
-export type RouteName =
-  | 'login'
-  | 'lobby'
-  | 'new'
-  | 'game'
-  | 'gameChat'
-  | 'gameCheck'
-  | 'profile'
-  | 'settings'
-  | 'about'
-  | 'friends'
-  | 'stats'
-  | 'notfound';
+import { parse, type Route, type RouteName } from './routeparse';
 
-export interface Route {
-  name: RouteName;
-  params: Record<string, string>;
-}
-
-function parse(hash: string): Route {
-  const path = (hash.replace(/^#/, '') || '/').split('?')[0];
-  const seg = path.split('/').filter(Boolean);
-  if (seg.length === 0) return { name: 'lobby', params: {} };
-  switch (seg[0]) {
-    case 'login':
-      return { name: 'login', params: {} };
-    case 'new':
-      return { name: 'new', params: {} };
-    case 'game':
-      if (!seg[1]) return { name: 'notfound', params: {} };
-      if (seg[2] === 'chat') return { name: 'gameChat', params: { id: seg[1] } };
-      if (seg[2] === 'check') return { name: 'gameCheck', params: { id: seg[1] } };
-      return { name: 'game', params: { id: seg[1] } };
-    case 'profile':
-      return { name: 'profile', params: {} };
-    case 'settings':
-      return { name: 'settings', params: {} };
-    case 'about':
-      return { name: 'about', params: {} };
-    case 'friends':
-      return { name: 'friends', params: {} };
-    case 'stats':
-      return { name: 'stats', params: {} };
-    default:
-      return { name: 'notfound', params: {} };
-  }
-}
+export type { Route, RouteName };
 
 export const router = $state<{ route: Route }>({
   route: parse(typeof location !== 'undefined' ? location.hash : ''),