UI: tab-bar navigation — drop the hamburger

Replace Menu.svelte (hamburger) everywhere with tab-bar navigation:
- Settings hub (SettingsHub) from the lobby ⚙️ tab: Settings/Profile/
  Friends/About as in-place tabs, back → lobby; the lobby ⚙️ badge counts
  incoming friend requests (invitations keep their own lobby section).
- Comms hub (CommsHub) from the move-history 💬: Chat/Dictionary tabs,
  back → game; Dictionary only while the game is active.
- Game menu items relocate into the open history: 🏁 leave / 📤 export in
  the header, 🤝 add-friend per opponent card, 💬 comms; unread chat is
  badged on the score bar + the 💬.
- TapConfirm (tap → fading ✅ → tap) replaces the Skip/Hint press-and-hold
  popovers and drives the add-friend confirm.
- Fix the move-history "jump": the slid board is inert and the stage can't
  scroll, so a swipe up genuinely closes the history.

Remove Menu.svelte + HoldConfirm.svelte. Docs: UI_DESIGN, FUNCTIONAL(+ru),
PRERELEASE. UI check/unit/build/bundle/e2e (Chromium+WebKit) all green.

ui/e2e/game.spec.ts

@@ -10,9 +10,8 @@ async function openGame(page: Page): Promise<void> {
   await page.getByRole('button', { name: /guest/i }).click();
   await page.getByRole('button', { name: /Ann/ }).click(); // the seeded active game vs Ann
   await expect(page.locator('[data-cell]').first()).toBeVisible();
-  // Wait for the screen-slide transition to settle so only the game pane remains;
-  // until it does, the leaving lobby pane's header (its menu button) is also in the
-  // DOM, which would make shared locators like .burger ambiguous.
+  // Wait for the screen-slide transition to settle so only the game pane remains; until it
+  // does, the leaving lobby pane is also in the DOM, which would make shared locators ambiguous.
   await expect(page.locator('.pane')).toHaveCount(1);
 }
 
@@ -115,17 +114,38 @@ test('shuffle reorders the rack but keeps the same tiles', async ({ page }) => {
   expect([...after].sort()).toEqual([...before].sort());
 });
 
-test('history slides the board down and closes on a board tap', async ({ page }) => {
+test('history slides the board down on a score tap and closes on a board tap', async ({ page }) => {
   await openGame(page);
-  await page.locator('.burger').click();
-  await page.locator('.dropdown button').nth(0).click(); // History
+  await page.locator('.scoreboard').click(); // tapping the score bar opens the history
   await expect(page.locator('.history')).toBeVisible();
   await expect(page.locator('.boardwrap.slid')).toBeVisible();
 
-  await page.locator('.boardwrap').click(); // tapping the board closes it
+  // Tap the (now inert) board's visible top strip below the history to close it.
+  await page.locator('.boardwrap').click({ position: { x: 30, y: 12 } });
   await expect(page.locator('.history')).toBeHidden();
 });
 
+test('history: a swipe-up close does not make a follow-up score tap jump', async ({ page }) => {
+  await openGame(page);
+  await page.locator('.scoreboard').click();
+  await expect(page.locator('.boardwrap.slid')).toBeVisible();
+
+  // Swipe up on the inert board to close it. Dispatched on the board so the gesture is
+  // engine-deterministic — a mouse swipe over a pointer-events:none child is simulated
+  // inconsistently across engines, whereas a real touch swipe lands the same way this does.
+  const bw = page.locator('.boardwrap');
+  const box = (await bw.boundingBox())!;
+  const cx = box.x + box.width / 2;
+  await bw.dispatchEvent('pointerdown', { clientX: cx, clientY: 500, bubbles: true });
+  await bw.dispatchEvent('pointermove', { clientX: cx, clientY: 450, bubbles: true });
+  await expect(page.locator('.history')).toBeHidden();
+
+  // A score tap now cleanly reopens the history — the stale-open "jump" no longer happens.
+  await page.locator('.scoreboard').click();
+  await expect(page.locator('.history')).toBeVisible();
+  await expect(page.locator('.boardwrap.slid')).toBeVisible();
+});
+
 test('Draw opens the exchange dialog and confirms a selection', async ({ page }) => {
   await openGame(page);
   await page.locator('button:has-text("🔄")').click(); // Draw tab
@@ -137,10 +157,22 @@ test('Draw opens the exchange dialog and confirms a selection', async ({ page })
   await expect(page.locator('.exch')).toBeHidden();
 });
 
+test('pass confirms with a tap on the fading ✅ instead of a popup', async ({ page }) => {
+  await openGame(page);
+  const pass = page.getByRole('button', { name: 'Skip' }); // the 🥺 tab (aria-label)
+  await expect(pass).toBeEnabled();
+  await pass.click(); // arm: 🥺 -> a fading ✅
+  await pass.click(); // tap the ✅ to confirm within the window
+  // The pass hands the turn over, so the control goes inert.
+  await expect(pass).toBeDisabled();
+});
+
 test('check-word sanitises input and shows a verdict', async ({ page }) => {
   await openGame(page);
-  await page.locator('.burger').click();
-  await page.locator('.dropdown button').nth(2).click(); // Check word
+  await page.locator('.scoreboard').click(); // open the history
+  await page.getByRole('button', { name: 'Chat' }).click(); // 💬 -> comms hub
+  await expect(page.locator('.pane')).toHaveCount(1);
+  await page.getByRole('button', { name: 'Check word' }).click(); // 🔎 -> dictionary tab
 
   const input = page.locator('.check input');
   await input.fill('qz9!a'); // digits/punctuation dropped, letters upper-cased
@@ -152,8 +184,8 @@ test('check-word sanitises input and shows a verdict', async ({ page }) => {
 
 test('dropping the game ends it and shows the result', async ({ page }) => {
   await openGame(page);
-  await page.locator('.burger').click();
-  await page.getByRole('button', { name: 'Drop game' }).click(); // robust against menu growth
+  await page.locator('.scoreboard').click(); // open the history
+  await page.getByRole('button', { name: 'Drop game' }).click(); // 🏁 in the history header
   await page.locator('button.danger').click(); // confirm in the modal
   await expect(page.locator('.status .over')).toBeVisible();
 });
@@ -181,26 +213,23 @@ test('a placed tile drags from one board cell to another (relocation)', async ({
   expect(to).not.toBe(from);
 });
 
-test('chat and word-check open as their own screens and back to the game', async ({ page }) => {
+test('comms hub: chat and dictionary share a screen, back returns to the game', async ({ page }) => {
   await openGame(page);
-
-  await page.locator('.burger').click();
-  await page.getByRole('button', { name: /^Chat$/ }).click();
+  await page.locator('.scoreboard').click(); // open the history
+  await page.getByRole('button', { name: 'Chat' }).click(); // 💬 in the history header
   await expect(page).toHaveURL(/\/game\/g1\/chat$/);
   await expect(page.locator('.pane')).toHaveCount(1); // let the slide transition settle
   await expect(page.locator('.chat')).toBeVisible();
-  // The outgoing game header and the incoming chat header both carry a .back mid-slide; wait
-  // for the game's to unmount so the click targets a single, settled button.
+
+  // The Dictionary tab switches in place (same screen, no navigation).
+  await page.getByRole('button', { name: 'Check word' }).click();
+  await expect(page.locator('.check input')).toBeVisible();
+
+  // The header back chevron returns to the game.
   await expect(page.locator('.back')).toHaveCount(1);
-  await page.locator('.back').click(); // header back chevron returns to the game
+  await page.locator('.back').click();
   await expect(page).toHaveURL(/\/game\/g1$/);
   await expect(page.locator('.pane')).toHaveCount(1);
-
-  await page.locator('.burger').click();
-  await page.getByRole('button', { name: /Check word/ }).click();
-  await expect(page).toHaveURL(/\/game\/g1\/check$/);
-  await expect(page.locator('.pane')).toHaveCount(1);
-  await expect(page.locator('.check input')).toBeVisible();
 });
 
 test('the board-label mode in Settings changes the on-board labels', async ({ page }) => {

ui/e2e/social.spec.ts

@@ -10,9 +10,18 @@ async function loginLobby(page: Page): Promise<void> {
   await expect(page.getByText('Your turn')).toBeVisible();
 }
 
-async function openFriends(page: Page): Promise<void> {
-  await page.locator('.burger').first().click();
-  await page.getByRole('button', { name: /Friends/ }).click();
+// The Settings hub (the lobby ⚙️ tab) hosts Settings / Profile / Friends / About as in-place
+// tabs; the back control always returns to the lobby. Tabs are icon-only with an aria-label.
+async function openSettingsTab(page: Page, tab: 'Profile' | 'Friends' | 'About'): Promise<void> {
+  await page.getByRole('button', { name: /Settings/ }).click(); // lobby ⚙️ tab
+  await expect(page.locator('.pane')).toHaveCount(1); // let the slide settle
+  await page.getByRole('button', { name: tab, exact: true }).click();
+}
+function openFriends(page: Page): Promise<void> {
+  return openSettingsTab(page, 'Friends');
+}
+function openProfile(page: Page): Promise<void> {
+  return openSettingsTab(page, 'Profile');
 }
 
 test('friends: issue a code, accept an incoming request, redeem a code', async ({ page }) => {
@@ -50,10 +59,28 @@ test('stats screen shows the metrics', async ({ page }) => {
   await expect(page.getByText('Best move')).toBeVisible();
 });
 
+test('settings hub: tabs switch in place and back returns to the lobby', async ({ page }) => {
+  await loginLobby(page);
+  await page.getByRole('button', { name: /Settings/ }).click(); // lobby ⚙️ tab
+  await expect(page.locator('.pane')).toHaveCount(1);
+  await expect(page.locator('.seg').first()).toBeVisible(); // default Settings tab
+
+  // Switching tabs is in place (no navigation): the Friends body appears, still one pane.
+  await page.getByRole('button', { name: 'Friends', exact: true }).click();
+  await expect(page.getByText('Friend requests')).toBeVisible();
+  await expect(page.locator('.pane')).toHaveCount(1);
+
+  await page.getByRole('button', { name: 'About', exact: true }).click();
+  await expect(page.getByText(/Version/)).toBeVisible();
+
+  // Back returns to the lobby from any tab.
+  await page.locator('.back').click();
+  await expect(page.getByText('Your turn')).toBeVisible();
+});
+
 test('profile edit saves a new display name', async ({ page }) => {
   await loginLobby(page);
-  await page.locator('.burger').first().click();
-  await page.getByRole('button', { name: /Profile/ }).click();
+  await openProfile(page);
   await page.locator('.edit input').first().fill('Kaya Test');
   await page.getByRole('button', { name: /^Save$/ }).click();
   await expect(page.locator('.name')).toHaveText('Kaya Test');
@@ -61,29 +88,33 @@ test('profile edit saves a new display name', async ({ page }) => {
 
 test('GCG export appears only for a finished game', async ({ page }) => {
   await loginLobby(page);
-  // The finished game vs Kaya exposes the export; the menu carries the item.
+  // The finished game vs Kaya exposes export 📤 in the history header.
   await page.getByRole('button', { name: /Kaya/ }).click();
-  await page.locator('.burger').first().click();
-  await expect(page.getByRole('button', { name: /Export GCG/ })).toBeVisible();
+  await page.locator('.scoreboard').click(); // open the history
+  await expect(page.getByRole('button', { name: 'Export GCG' })).toBeVisible();
 });
 
 test('GCG export is hidden for an active game', async ({ page }) => {
   await loginLobby(page);
   await page.getByRole('button', { name: /Ann/ }).click();
-  await page.locator('.burger').first().click();
-  await expect(page.getByRole('button', { name: /Export GCG/ })).toHaveCount(0);
+  await page.locator('.scoreboard').click(); // open the history (shows 🏁 leave, not 📤 export)
+  await expect(page.getByRole('button', { name: 'Export GCG' })).toHaveCount(0);
 });
 
-test('finished game draws an inert footer and trims the live-only menu', async ({ page }) => {
+test('finished game draws an inert footer and trims live-only controls', async ({ page }) => {
   await loginLobby(page);
   await page.getByRole('button', { name: /Kaya/ }).click(); // finished game vs Kaya
   await expect(page.locator('[data-cell]').first()).toBeVisible();
   // The footer (tab bar) is drawn but its controls are disabled in a finished game.
   await expect(page.locator('.tab').first()).toBeDisabled();
-  // The menu drops Check word and Drop game once the game is over.
-  await page.locator('.burger').first().click();
-  await expect(page.getByRole('button', { name: 'Check word' })).toHaveCount(0);
+  // The history header offers Export GCG, not Drop game, once the game is over.
+  await page.locator('.scoreboard').click();
+  await expect(page.getByRole('button', { name: 'Export GCG' })).toBeVisible();
   await expect(page.getByRole('button', { name: 'Drop game' })).toHaveCount(0);
+  // The comms hub offers Chat only — the Dictionary tab is hidden for a finished game.
+  await page.getByRole('button', { name: 'Chat' }).click(); // 💬
+  await expect(page.locator('.pane')).toHaveCount(1);
+  await expect(page.getByRole('button', { name: 'Check word' })).toHaveCount(0);
 });
 
 test('lobby: hiding a finished game removes it (kebab → ❌), keeping the others', async ({ page }) => {
@@ -114,10 +145,11 @@ test('lobby: the active-row chevron opens the game (not a no-op)', async ({ page
   await expect(page.locator('[data-cell]').first()).toBeVisible();
 });
 
-test('lobby hamburger shows the pending notification count', async ({ page }) => {
+test('lobby ⚙️ tab shows the pending friend-request count', async ({ page }) => {
   await loginLobby(page);
-  // One incoming friend request (Rick) + one invitation (Kaya) = 2.
-  await expect(page.getByTestId('menu-badge')).toHaveText('2');
+  // The ⚙️ badge counts incoming friend requests only (Rick = 1); invitations have their
+  // own lobby section, so they are not summed into it.
+  await expect(page.getByRole('button', { name: /Settings/ }).locator('.badge')).toHaveText('1');
 });
 
 test('play with friends: a game type is required to send an invitation', async ({ page }) => {
@@ -138,34 +170,28 @@ test('play with friends: a game type is required to send an invitation', async (
   await expect(page.getByText('Your turn')).toBeVisible();
 });
 
-test('game: add-to-friends flips to a disabled "request sent"', async ({ page }) => {
+test('game: the add-friend 🤝 confirms with a tap and then reads as sent', async ({ page }) => {
   await loginLobby(page);
   await page.getByRole('button', { name: /Ann/ }).click(); // active game vs Ann
-  await page.locator('.burger').first().click();
-  await page.getByRole('button', { name: /Add to friends: Ann/ }).click();
-  // Reopening the menu shows the item as a disabled "request sent".
-  await page.locator('.burger').first().click();
-  const sent = page.getByRole('button', { name: 'Request sent' });
-  await expect(sent).toBeVisible();
-  await expect(sent).toBeDisabled();
+  await page.locator('.scoreboard').click(); // open the history -> 🤝 appears on Ann's card
+  const add = page.getByRole('button', { name: 'Add to friends' });
+  await add.click(); // arm: 🤝 -> a fading ✅
+  await add.click(); // tap the ✅ to confirm within the window
+  // The request is sent, so the control is now disabled.
+  await expect(add).toBeDisabled();
 });
 
-test('game: an opponent who is already a friend shows a disabled "in friends"', async ({ page }) => {
+test('game: an opponent who is already a friend shows no add-friend 🤝', async ({ page }) => {
   await loginLobby(page);
-  await page.getByRole('button', { name: /Kaya/ }).click(); // the finished game vs Kaya, a seeded friend
-  await page.locator('.burger').first().click();
-  // The in-game friend item is derived from the server's friend list: a friend reads
-  // a disabled "✓ in friends", not the addable "Add to friends".
-  const inFriends = page.getByRole('button', { name: /in friends/i });
-  await expect(inFriends).toBeVisible();
-  await expect(inFriends).toBeDisabled();
-  await expect(page.getByRole('button', { name: /Add to friends: Kaya/ })).toHaveCount(0);
+  await page.getByRole('button', { name: /Kaya/ }).click(); // finished game vs Kaya, a seeded friend
+  await page.locator('.scoreboard').click(); // open the history
+  // Kaya is already a friend, so no add-friend control is offered on her card.
+  await expect(page.getByRole('button', { name: 'Add to friends' })).toHaveCount(0);
 });
 
 test('profile edit disables Save and flags an invalid display name', async ({ page }) => {
   await loginLobby(page);
-  await page.locator('.burger').first().click();
-  await page.getByRole('button', { name: /Profile/ }).click();
+  await openProfile(page);
 
   const name = page.locator('.edit input').first();
   const save = page.getByRole('button', { name: /^Save$/ });
@@ -179,8 +205,7 @@ test('profile edit disables Save and flags an invalid display name', async ({ pa
 
 test('link account: a taken email opens the irreversible merge confirmation', async ({ page }) => {
   await loginLobby(page);
-  await page.locator('.burger').first().click();
-  await page.getByRole('button', { name: /Profile/ }).click();
+  await openProfile(page);
 
   // The linking section is shown to everyone (guests upgrade by linking).
   await expect(page.getByRole('heading', { name: 'Link an account' })).toBeVisible();
@@ -200,16 +225,16 @@ test('link account: a taken email opens the irreversible merge confirmation', as
 
 test('link account: the Telegram web sign-in control is offered in a browser', async ({ page }) => {
   await loginLobby(page);
-  await page.locator('.burger').first().click();
-  await page.getByRole('button', { name: /Profile/ }).click();
+  await openProfile(page);
   await expect(page.getByRole('button', { name: 'Link Telegram' })).toBeVisible();
 });
 
 test('chat: the message field shows on your turn, the nudge replaces it otherwise', async ({ page }) => {
   await loginLobby(page);
   await page.getByRole('button', { name: /Ann/ }).click(); // g1: your turn
-  await page.locator('.burger').first().click();
-  await page.getByRole('button', { name: 'Chat' }).click();
+  await page.locator('.scoreboard').click(); // open the history
+  await page.getByRole('button', { name: 'Chat' }).click(); // 💬 -> comms hub
+  await expect(page.locator('.pane')).toHaveCount(1);
   // On your turn the message field + Send are shown and the nudge is hidden;
   // chat and nudge are mutually exclusive by turn. Icon-only controls expose their action
   // through the aria-label.