Stage 17 #5: hide finished games from your own lobby list

A player can remove a finished game from their own 'my games' list. The action is
per-account, finished-only and irreversible (the game stays for the other players;
there is no un-hide).

- backend: migration 00012 game_hidden(account_id, game_id); store HideGame +
  hiddenGameIDs + ListGamesForAccount filtering; service HideGame (seat + finished
  checks, reusing ErrNotAPlayer / ErrGameActive); POST /api/v1/user/games/:id/hide.
- gateway: game.hide edge op (reuses GameActionRequest -> Ack) + backendclient.HideGame.
- ui: finished rows reveal a delete via swipe-left (touch) or a kebab tap (desktop),
  active rows get an inert chevron for icon alignment; optimistic removal + lobby-cache
  sync; mock + transport + client wiring; lobby.hideGame label (en/ru).
- tests: integration (active->ErrGameActive, outsider->ErrNotAPlayer, per-account,
  idempotent), gateway transcode round-trip, mock e2e (kebab -> delete); hardened a
  pre-existing chat-screen .back transition flake surfaced by the new test's timing.
- docs: ARCHITECTURE persistence list, FUNCTIONAL (+ _ru) lobby story, PLAN tracker.

ui/e2e/game.spec.ts

@@ -170,6 +170,9 @@ test('chat and word-check open as their own screens and back to the game (Stage
   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.
+  await expect(page.locator('.back')).toHaveCount(1);
   await page.locator('.back').click(); // header back chevron returns to the game
   await expect(page).toHaveURL(/\/game\/g1$/);
   await expect(page.locator('.pane')).toHaveCount(1);

ui/e2e/social.spec.ts

@@ -86,6 +86,27 @@ test('finished game draws an inert footer and trims the live-only menu', async (
   await expect(page.getByRole('button', { name: 'Drop game' })).toHaveCount(0);
 });
 
+test('lobby: hiding a finished game removes it (kebab → ❌), keeping the others', async ({ page }) => {
+  await loginLobby(page);
+
+  // Both seeded finished games are listed; the active row carries the inert chevron, not a kebab.
+  await expect(page.locator('.rowwrap', { hasText: 'Kaya' })).toBeVisible();
+  await expect(page.locator('.rowwrap', { hasText: 'Rick' })).toBeVisible();
+  const annRow = page.locator('.rowwrap', { hasText: 'Ann' });
+  await expect(annRow.locator('.kebab')).toHaveCount(0);
+  await expect(annRow.locator('.chev')).toBeVisible();
+
+  // The kebab reveals the delete action in place (no dropdown menu); tapping ❌ hides the game.
+  const kayaRow = page.locator('.rowwrap', { hasText: 'Kaya' });
+  await kayaRow.locator('.kebab').click();
+  await expect(kayaRow).toHaveClass(/revealed/);
+  await kayaRow.locator('.del').click();
+
+  // The hidden game is gone from the list; the other finished game remains.
+  await expect(page.locator('.rowwrap', { hasText: 'Kaya' })).toHaveCount(0);
+  await expect(page.locator('.rowwrap', { hasText: 'Rick' })).toBeVisible();
+});
+
 test('lobby hamburger shows the pending notification count', async ({ page }) => {
   await loginLobby(page);
   // One incoming friend request (Rick) + one invitation (Kaya) = 2.

ui/src/lib/client.ts

@@ -82,6 +82,8 @@ export interface GatewayClient {
   evaluate(gameId: string, dir: 'H' | 'V', tiles: PlacedTile[], variant: Variant): Promise<EvalResult>;
   checkWord(gameId: string, word: string, variant: Variant): Promise<WordCheckResult>;
   complaint(gameId: string, word: string, note: string): Promise<void>;
+  /** Hide a finished game from the caller's own lobby list (Stage 17); per-account, irreversible. */
+  hideGame(gameId: string): Promise<void>;
 
   // --- draft (Stage 17) ---
   /** The player's server-persisted client-side composition (rack order + board tiles), so a

ui/src/lib/i18n/en.ts

@@ -35,6 +35,7 @@ export const en = {
   'lobby.about': 'About',
   'lobby.yourTurn': 'Your turn',
   'lobby.theirTurn': 'Their turn',
+  'lobby.hideGame': 'Remove from list',
   'lobby.vs': 'vs {opponents}',
   'lobby.soon': 'Coming soon',
 

ui/src/lib/i18n/ru.ts

@@ -36,6 +36,7 @@ export const ru: Record<MessageKey, string> = {
   'lobby.about': 'О программе',
   'lobby.yourTurn': 'Ваш ход',
   'lobby.theirTurn': 'Ход соперника',
+  'lobby.hideGame': 'Убрать из списка',
   'lobby.vs': 'против {opponents}',
   'lobby.soon': 'Скоро',
 

ui/src/lib/mock/client.ts

@@ -324,6 +324,15 @@ export class MockGateway implements GatewayClient {
   }
   async complaint(): Promise<void> {}
 
+  // Hide a finished game from the caller's list (Stage 17): drop it from the in-memory store so a
+  // subsequent gamesList omits it, mirroring the backend's per-account, finished-only rule.
+  async hideGame(gameId: string): Promise<void> {
+    const g = this.game(gameId);
+    if (g.view.status !== 'finished') throw new GatewayError('game_active');
+    this.games.delete(gameId);
+    this.drafts.delete(gameId);
+  }
+
   // --- draft (Stage 17): an in-memory composition store, so the reload/off-turn flow is
   // exercised without a backend. A committed move clears the actor's own draft, as on the server.
   async draftGet(gameId: string): Promise<string> {

ui/src/lib/transport.ts

@@ -114,6 +114,9 @@ export function createTransport(baseUrl: string): GatewayClient {
     async complaint(id, word, note) {
       await exec('game.complaint', codec.encodeComplaint(id, word, note));
     },
+    async hideGame(id) {
+      await exec('game.hide', codec.encodeGameAction(id));
+    },
     async draftGet(id) {
       return codec.decodeDraftView(await exec('draft.get', codec.encodeGameAction(id)));
     },

ui/src/screens/Lobby.svelte

@@ -61,6 +61,58 @@
     return `${me?.score ?? 0} : ${opp.join(', ')}`;
   }
 
+  // Hiding a finished game (Stage 17). The delete action sits behind each finished row and is
+  // revealed by swiping the row left (touch) or tapping its kebab (any pointer); the action is
+  // per-account and irreversible. Only one row is revealed at a time.
+  let revealedId = $state<string | null>(null);
+  let drag: { id: string; x0: number; y0: number } | null = null;
+  // A horizontal swipe must not also count as a tap that opens the game; armed on swipe,
+  // consumed by the next tap, and reset on the next pointerdown so a later tap is never eaten.
+  let swiped = false;
+
+  function onRowDown(e: PointerEvent, id: string): void {
+    swiped = false;
+    if (e.pointerType === 'mouse') return; // desktop reveals via the kebab, not a swipe
+    drag = { id, x0: e.clientX, y0: e.clientY };
+  }
+  function onRowUp(e: PointerEvent, finished: boolean): void {
+    if (!drag) return;
+    const dx = e.clientX - drag.x0;
+    const dy = e.clientY - drag.y0;
+    if (Math.abs(dx) > 40 && Math.abs(dx) > Math.abs(dy) * 1.4) {
+      swiped = true;
+      revealedId = dx < 0 && finished ? drag.id : null;
+    }
+    drag = null;
+  }
+  function openGame(g: GameView): void {
+    if (swiped) {
+      swiped = false;
+      return;
+    }
+    if (revealedId === g.id) {
+      revealedId = null;
+      return;
+    }
+    navigate(`/game/${g.id}`);
+  }
+  function toggleReveal(id: string): void {
+    revealedId = revealedId === id ? null : id;
+  }
+  async function hide(id: string): Promise<void> {
+    revealedId = null;
+    const prev = games;
+    games = games.filter((g) => g.id !== id); // optimistic; the backend already filters it out
+    setLobby({ games, invitations, incoming });
+    try {
+      await gateway.hideGame(id);
+    } catch (e) {
+      games = prev;
+      setLobby({ games, invitations, incoming });
+      handleError(e);
+    }
+  }
+
   const menuItems = $derived([
     ...(guest ? [] : [{ label: t('lobby.friends'), onclick: () => navigate('/friends'), badge: incoming.length }]),
     { label: t('lobby.profile'), onclick: () => navigate('/profile') },
@@ -129,19 +181,36 @@
       </section>
     {/if}
 
-    {#each [{ h: 'lobby.yourTurn', list: groups.yourTurn }, { h: 'lobby.theirTurn', list: groups.theirTurn }, { h: 'lobby.finishedGames', list: groups.finished }] as group (group.h)}
+    {#each [{ h: 'lobby.yourTurn', list: groups.yourTurn, finished: false }, { h: 'lobby.theirTurn', list: groups.theirTurn, finished: false }, { h: 'lobby.finishedGames', list: groups.finished, finished: true }] as group (group.h)}
       {#if group.list.length}
         <section>
           <h2>{t(group.h as 'lobby.yourTurn')}</h2>
           <div class="list">
             {#each group.list as g (g.id)}
-              <button class="row" onclick={() => navigate(`/game/${g.id}`)}>
-                <span class="info">
-                  <span class="who">{opponents(g) || '—'}</span>
-                  <span class="sub">{scoreline(g)}</span>
-                </span>
-                <span class="emoji">{resultBadge(g, myId).emoji}</span>
-              </button>
+              <div class="rowwrap" class:revealed={group.finished && revealedId === g.id}>
+                {#if group.finished}
+                  <button class="del" onclick={() => hide(g.id)} aria-label={t('lobby.hideGame')}>❌</button>
+                {/if}
+                <div class="row">
+                  <button
+                    class="open"
+                    onpointerdown={(e) => onRowDown(e, g.id)}
+                    onpointerup={(e) => onRowUp(e, group.finished)}
+                    onclick={() => openGame(g)}
+                  >
+                    <span class="info">
+                      <span class="who">{opponents(g) || '—'}</span>
+                      <span class="sub">{scoreline(g)}</span>
+                    </span>
+                    <span class="emoji">{resultBadge(g, myId).emoji}</span>
+                  </button>
+                  {#if group.finished}
+                    <button class="kebab" onclick={() => toggleReveal(g.id)} aria-label={t('lobby.hideGame')}>⋮</button>
+                  {:else}
+                    <span class="chev" aria-hidden="true">›</span>
+                  {/if}
+                </div>
+              </div>
             {/each}
           </div>
         </section>
@@ -208,25 +277,75 @@
     display: flex;
     flex-direction: column;
   }
+  /* Each finished row can slide left to reveal a delete action sitting behind it; the row's
+     own opaque background hides that action until revealed (Stage 17). */
+  .rowwrap {
+    position: relative;
+    overflow: hidden;
+  }
+  .rowwrap + .rowwrap {
+    border-top: 1px solid var(--border);
+  }
+  .del {
+    position: absolute;
+    inset: 0 0 0 auto;
+    width: 64px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: var(--danger);
+    color: #fff;
+    font-size: 1.1rem;
+  }
   .row {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    background: var(--bg);
+    transform: translateX(0);
+    transition: transform 0.18s ease;
+  }
+  .rowwrap.revealed .row {
+    transform: translateX(-64px);
+  }
+  .open {
+    flex: 1 1 auto;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
-    width: 100%;
+    min-width: 0;
     text-align: left;
     padding: 10px 6px;
     border: none;
     background: none;
     color: var(--text);
     user-select: none;
+    touch-action: pan-y; /* keep vertical list scroll; we only read horizontal swipes */
   }
-  .row + .row {
-    border-top: 1px solid var(--border);
-  }
-  .row:active {
+  .open:active {
     background: var(--surface-2);
   }
+  .kebab {
+    flex: 0 0 auto;
+    width: 30px;
+    padding: 10px 0;
+    border: none;
+    background: none;
+    color: var(--text-muted);
+    font-size: 1.4rem;
+    line-height: 1;
+  }
+  .chev {
+    flex: 0 0 auto;
+    width: 30px;
+    text-align: center;
+    color: var(--text-muted);
+    font-size: 1.4rem;
+    line-height: 1;
+  }
   .info {
     display: flex;
     flex-direction: column;