Stage 17 round 6 (#16/#17, PR C): lobby sort + server-derived in-game friend state

Lobby: group the my-games list into your-turn / opponent-turn / finished
(empty sections hidden), ordered by last activity (your-turn oldest-first,
the other two newest-first), as a compact line-separated list. gameDTO and
FB GameView gain last_activity_unix (turn start while active, finish time
once finished); a pure lib/lobbysort.ts holds the grouping/ordering.

Friends: the in-game 'add to friends' item is now server-derived via a new
GET /user/friends/outgoing (+ friends.outgoing op), returning addressees with
a pending OR declined request (both read as 'request sent'), so it is correct
across reloads; it shows a disabled '✓ in friends' once accepted. It
live-updates when the opponent answers: RespondFriendRequest now publishes
friend_added (accept) / friend_declined (new notify sub-kind, decline) to the
original requester, whose open game re-derives its friend state.

Tests: lobbysort unit test; gateway outgoing + last_activity transcode tests;
backend integration ListOutgoingRequests + respond-publishes-to-requester;
e2e updated for the new lobby section labels + a non-friend active opponent.
Docs: ARCHITECTURE notify catalog, FUNCTIONAL(+ru) lobby/friends, PLAN.

ui/src/game/Game.svelte

@@ -189,6 +189,7 @@
       rackIds = cached.view.rack.map((_, i) => i);
     }
     void load();
+    void loadFriends();
   });
 
   $effect(() => {
@@ -201,6 +202,9 @@
     } else if (e.kind === 'your_turn' && e.gameId === id) void load();
     else if (e.kind === 'chat_message' && e.message.gameId === id && panel === 'chat') void loadChat();
     else if (e.kind === 'nudge' && e.gameId === id && panel === 'chat') void loadChat();
+    // A request the player sent was answered (accepted -> now friends; declined -> stays
+    // "request sent"): re-derive the in-game friend state.
+    else if (e.kind === 'notify' && (e.sub === 'friend_added' || e.sub === 'friend_declined')) void loadFriends();
   });
 
   // Tick the nudge cooldown while the chat is open so the control re-enables on time.
@@ -681,13 +685,31 @@
     }
   }
 
+  // Friend state for the in-game "add to friends" item, derived from the server so it is
+  // correct across reloads and live-updates when a request is answered (Stage 17):
+  // `friends` are the caller's accepted friends; `requested` are the addressees already
+  // requested (pending or declined — both block a re-send and read as "request sent").
+  let friends = $state(new Set<string>());
   let requested = $state(new Set<string>());
   const noop = () => {};
 
+  // loadFriends refreshes the friend/outgoing sets for a non-guest; guests have no social
+  // surfaces, so the sets stay empty. Best-effort — a failure leaves the previous sets.
+  async function loadFriends() {
+    if (app.profile?.isGuest) return;
+    try {
+      const [fl, out] = await Promise.all([gateway.friendsList(), gateway.friendsOutgoing()]);
+      friends = new Set(fl.map((f) => f.accountId));
+      requested = new Set(out.map((f) => f.accountId));
+    } catch {
+      /* best-effort */
+    }
+  }
+
   async function addFriend(accountId: string) {
     try {
       await gateway.friendRequest(accountId);
-      requested = new Set([...requested, accountId]);
+      requested = new Set([...requested, accountId]); // optimistic; reconciled by loadFriends
       showToast(t('friends.requestSent'));
     } catch (e) {
       handleError(e);
@@ -707,9 +729,11 @@
     ...(view?.game.status === 'finished' ? [{ label: t('game.exportGcg'), onclick: exportGcg }] : []),
     ...(!app.profile?.isGuest
       ? opponents.map((s) =>
-          requested.has(s.accountId)
-            ? { label: t('game.requestSent'), onclick: noop, disabled: true }
-            : { label: `${t('friends.addFromGame')}: ${s.displayName}`, onclick: () => addFriend(s.accountId) },
+          friends.has(s.accountId)
+            ? { label: t('game.alreadyFriends'), onclick: noop, disabled: true }
+            : requested.has(s.accountId)
+              ? { label: t('game.requestSent'), onclick: noop, disabled: true }
+              : { label: `${t('friends.addFromGame')}: ${s.displayName}`, onclick: () => addFriend(s.accountId) },
         )
       : []),
     ...(gameOver ? [] : [{ label: t('game.dropGame'), onclick: () => (resignOpen = true) }]),

ui/src/gen/fbs/scrabblefb.ts

@@ -44,6 +44,7 @@ export { MoveResult } from './scrabblefb/move-result.js';
 export { NotificationEvent } from './scrabblefb/notification-event.js';
 export { NudgeEvent } from './scrabblefb/nudge-event.js';
 export { OpponentMovedEvent } from './scrabblefb/opponent-moved-event.js';
+export { OutgoingRequestList } from './scrabblefb/outgoing-request-list.js';
 export { PlayTile } from './scrabblefb/play-tile.js';
 export { Profile } from './scrabblefb/profile.js';
 export { RedeemCodeRequest } from './scrabblefb/redeem-code-request.js';

ui/src/gen/fbs/scrabblefb/game-view.ts

@@ -88,8 +88,13 @@ seatsLength():number {
   return offset ? this.bb!.__vector_len(this.bb_pos + offset) : 0;
 }
 
+lastActivityUnix():bigint {
+  const offset = this.bb!.__offset(this.bb_pos, 24);
+  return offset ? this.bb!.readInt64(this.bb_pos + offset) : BigInt('0');
+}
+
 static startGameView(builder:flatbuffers.Builder) {
-  builder.startObject(10);
+  builder.startObject(11);
 }
 
 static addId(builder:flatbuffers.Builder, idOffset:flatbuffers.Offset) {
@@ -144,12 +149,16 @@ static startSeatsVector(builder:flatbuffers.Builder, numElems:number) {
   builder.startVector(4, numElems, 4);
 }
 
+static addLastActivityUnix(builder:flatbuffers.Builder, lastActivityUnix:bigint) {
+  builder.addFieldInt64(10, lastActivityUnix, BigInt('0'));
+}
+
 static endGameView(builder:flatbuffers.Builder):flatbuffers.Offset {
   const offset = builder.endObject();
   return offset;
 }
 
-static createGameView(builder:flatbuffers.Builder, idOffset:flatbuffers.Offset, variantOffset:flatbuffers.Offset, dictVersionOffset:flatbuffers.Offset, statusOffset:flatbuffers.Offset, players:number, toMove:number, turnTimeoutSecs:number, moveCount:number, endReasonOffset:flatbuffers.Offset, seatsOffset:flatbuffers.Offset):flatbuffers.Offset {
+static createGameView(builder:flatbuffers.Builder, idOffset:flatbuffers.Offset, variantOffset:flatbuffers.Offset, dictVersionOffset:flatbuffers.Offset, statusOffset:flatbuffers.Offset, players:number, toMove:number, turnTimeoutSecs:number, moveCount:number, endReasonOffset:flatbuffers.Offset, seatsOffset:flatbuffers.Offset, lastActivityUnix:bigint):flatbuffers.Offset {
   GameView.startGameView(builder);
   GameView.addId(builder, idOffset);
   GameView.addVariant(builder, variantOffset);
@@ -161,6 +170,7 @@ static createGameView(builder:flatbuffers.Builder, idOffset:flatbuffers.Offset,
   GameView.addMoveCount(builder, moveCount);
   GameView.addEndReason(builder, endReasonOffset);
   GameView.addSeats(builder, seatsOffset);
+  GameView.addLastActivityUnix(builder, lastActivityUnix);
   return GameView.endGameView(builder);
 }
 }

ui/src/gen/fbs/scrabblefb/outgoing-request-list.ts

@@ -0,0 +1,66 @@
+// automatically generated by the FlatBuffers compiler, do not modify
+
+import * as flatbuffers from 'flatbuffers';
+
+import { AccountRef } from '../scrabblefb/account-ref.js';
+
+
+export class OutgoingRequestList {
+  bb: flatbuffers.ByteBuffer|null = null;
+  bb_pos = 0;
+  __init(i:number, bb:flatbuffers.ByteBuffer):OutgoingRequestList {
+  this.bb_pos = i;
+  this.bb = bb;
+  return this;
+}
+
+static getRootAsOutgoingRequestList(bb:flatbuffers.ByteBuffer, obj?:OutgoingRequestList):OutgoingRequestList {
+  return (obj || new OutgoingRequestList()).__init(bb.readInt32(bb.position()) + bb.position(), bb);
+}
+
+static getSizePrefixedRootAsOutgoingRequestList(bb:flatbuffers.ByteBuffer, obj?:OutgoingRequestList):OutgoingRequestList {
+  bb.setPosition(bb.position() + flatbuffers.SIZE_PREFIX_LENGTH);
+  return (obj || new OutgoingRequestList()).__init(bb.readInt32(bb.position()) + bb.position(), bb);
+}
+
+requests(index: number, obj?:AccountRef):AccountRef|null {
+  const offset = this.bb!.__offset(this.bb_pos, 4);
+  return offset ? (obj || new AccountRef()).__init(this.bb!.__indirect(this.bb!.__vector(this.bb_pos + offset) + index * 4), this.bb!) : null;
+}
+
+requestsLength():number {
+  const offset = this.bb!.__offset(this.bb_pos, 4);
+  return offset ? this.bb!.__vector_len(this.bb_pos + offset) : 0;
+}
+
+static startOutgoingRequestList(builder:flatbuffers.Builder) {
+  builder.startObject(1);
+}
+
+static addRequests(builder:flatbuffers.Builder, requestsOffset:flatbuffers.Offset) {
+  builder.addFieldOffset(0, requestsOffset, 0);
+}
+
+static createRequestsVector(builder:flatbuffers.Builder, data:flatbuffers.Offset[]):flatbuffers.Offset {
+  builder.startVector(4, data.length, 4);
+  for (let i = data.length - 1; i >= 0; i--) {
+    builder.addOffset(data[i]!);
+  }
+  return builder.endVector();
+}
+
+static startRequestsVector(builder:flatbuffers.Builder, numElems:number) {
+  builder.startVector(4, numElems, 4);
+}
+
+static endOutgoingRequestList(builder:flatbuffers.Builder):flatbuffers.Offset {
+  const offset = builder.endObject();
+  return offset;
+}
+
+static createOutgoingRequestList(builder:flatbuffers.Builder, requestsOffset:flatbuffers.Offset):flatbuffers.Offset {
+  OutgoingRequestList.startOutgoingRequestList(builder);
+  OutgoingRequestList.addRequests(builder, requestsOffset);
+  return OutgoingRequestList.endOutgoingRequestList(builder);
+}
+}

ui/src/lib/client.ts

@@ -98,6 +98,8 @@ export interface GatewayClient {
   // --- friends (Stage 8) ---
   friendsList(): Promise<AccountRef[]>;
   friendsIncoming(): Promise<AccountRef[]>;
+  /** Addressees the caller has already requested (pending or declined); cannot re-request. */
+  friendsOutgoing(): Promise<AccountRef[]>;
   friendRequest(accountId: string): Promise<void>;
   friendRespond(requesterId: string, accept: boolean): Promise<void>;
   friendCancel(accountId: string): Promise<void>;

ui/src/lib/codec.ts

@@ -249,6 +249,7 @@ function decodeGameView(g: fb.GameView): GameView {
     turnTimeoutSecs: g.turnTimeoutSecs(),
     moveCount: g.moveCount(),
     endReason: s(g.endReason()),
+    lastActivityUnix: Number(g.lastActivityUnix()),
     seats,
   };
 }
@@ -587,6 +588,16 @@ export function decodeIncomingList(buf: Uint8Array): AccountRef[] {
   return out;
 }
 
+export function decodeOutgoingList(buf: Uint8Array): AccountRef[] {
+  const l = fb.OutgoingRequestList.getRootAsOutgoingRequestList(new ByteBuffer(buf));
+  const out: AccountRef[] = [];
+  for (let i = 0; i < l.requestsLength(); i++) {
+    const r = l.requests(i);
+    if (r) out.push(decodeAccountRef(r));
+  }
+  return out;
+}
+
 export function decodeBlockList(buf: Uint8Array): AccountRef[] {
   const l = fb.BlockList.getRootAsBlockList(new ByteBuffer(buf));
   const out: AccountRef[] = [];
@@ -678,6 +689,7 @@ function emptyGame(): GameView {
     turnTimeoutSecs: 0,
     moveCount: 0,
     endReason: '',
+    lastActivityUnix: 0,
     seats: [],
   };
 }

ui/src/lib/i18n/en.ts

@@ -241,6 +241,7 @@ export const en = {
   'game.exportGcg': 'Export GCG',
   'game.gcgActiveOnly': 'Available once the game is finished.',
   'game.requestSent': 'Request sent',
+  'game.alreadyFriends': '✓ In friends',
 
   'time.minutes': '{n} min',
   'time.hours': '{n} h',

ui/src/lib/i18n/ru.ts

@@ -242,6 +242,7 @@ export const ru: Record<MessageKey, string> = {
   'game.exportGcg': 'Экспорт GCG',
   'game.gcgActiveOnly': 'Доступно после завершения игры.',
   'game.requestSent': 'Запрос отправлен',
+  'game.alreadyFriends': '✓ В друзьях',
 
   'time.minutes': '{n} мин',
   'time.hours': '{n} ч',

ui/src/lib/lobbysort.test.ts

@@ -0,0 +1,68 @@
+import { describe, expect, it } from 'vitest';
+import { groupGames, isMyTurn } from './lobbysort';
+import type { GameView, Seat } from './model';
+
+const ME = 'me';
+const seat = (s: number, accountId: string): Seat => ({
+  seat: s,
+  accountId,
+  displayName: accountId,
+  score: 0,
+  hintsUsed: 0,
+  isWinner: false,
+});
+
+function game(id: string, status: GameView['status'], toMove: number, lastActivityUnix: number): GameView {
+  return {
+    id,
+    variant: 'english',
+    dictVersion: 'v1',
+    status,
+    players: 2,
+    toMove,
+    turnTimeoutSecs: 0,
+    moveCount: 0,
+    endReason: '',
+    lastActivityUnix,
+    seats: [seat(0, ME), seat(1, 'opp')],
+  };
+}
+
+describe('groupGames', () => {
+  it('partitions into your-turn, their-turn and finished', () => {
+    const g = groupGames(
+      [
+        game('a', 'active', 0, 100), // toMove 0 == my seat -> my turn
+        game('b', 'active', 1, 100), // their turn
+        game('c', 'finished', 0, 100),
+      ],
+      ME,
+    );
+    expect(g.yourTurn.map((x) => x.id)).toEqual(['a']);
+    expect(g.theirTurn.map((x) => x.id)).toEqual(['b']);
+    expect(g.finished.map((x) => x.id)).toEqual(['c']);
+  });
+
+  it('orders your-turn oldest-first, the other two newest-first', () => {
+    const g = groupGames(
+      [
+        game('y_new', 'active', 0, 200),
+        game('y_old', 'active', 0, 100),
+        game('t_new', 'active', 1, 200),
+        game('t_old', 'active', 1, 100),
+        game('f_new', 'finished', 0, 200),
+        game('f_old', 'finished', 0, 100),
+      ],
+      ME,
+    );
+    expect(g.yourTurn.map((x) => x.id)).toEqual(['y_old', 'y_new']);
+    expect(g.theirTurn.map((x) => x.id)).toEqual(['t_new', 't_old']);
+    expect(g.finished.map((x) => x.id)).toEqual(['f_new', 'f_old']);
+  });
+
+  it('isMyTurn is false for a finished game even at my seat', () => {
+    expect(isMyTurn(game('x', 'finished', 0, 0), ME)).toBe(false);
+    expect(isMyTurn(game('x', 'active', 0, 0), ME)).toBe(true);
+    expect(isMyTurn(game('x', 'active', 1, 0), ME)).toBe(false);
+  });
+});

ui/src/lib/lobbysort.ts

@@ -0,0 +1,39 @@
+// Pure grouping + ordering of the lobby's game list (Stage 17). The lobby shows three
+// sections — games awaiting the caller's move, games awaiting the opponent, and finished
+// games — each ordered by last activity: your-turn oldest-first (the longest-neglected on
+// top), the other two newest-first.
+
+import type { GameView } from './model';
+
+/** isMyTurn reports whether an active game's seat-to-move belongs to the caller. */
+export function isMyTurn(game: GameView, myId: string): boolean {
+  const me = game.seats.find((s) => s.accountId === myId);
+  return game.status === 'active' && !!me && game.toMove === me.seat;
+}
+
+/** LobbyGroups holds the three ordered lobby sections. */
+export interface LobbyGroups {
+  yourTurn: GameView[];
+  theirTurn: GameView[];
+  finished: GameView[];
+}
+
+/**
+ * groupGames partitions games for myId into the three lobby sections and orders each: the
+ * your-turn games by ascending last activity (the longest-waiting first), the opponent-turn
+ * and finished games by descending last activity (the most recent first).
+ */
+export function groupGames(games: GameView[], myId: string): LobbyGroups {
+  const yourTurn: GameView[] = [];
+  const theirTurn: GameView[] = [];
+  const finished: GameView[] = [];
+  for (const g of games) {
+    if (g.status !== 'active') finished.push(g);
+    else if (isMyTurn(g, myId)) yourTurn.push(g);
+    else theirTurn.push(g);
+  }
+  yourTurn.sort((a, b) => a.lastActivityUnix - b.lastActivityUnix);
+  theirTurn.sort((a, b) => b.lastActivityUnix - a.lastActivityUnix);
+  finished.sort((a, b) => b.lastActivityUnix - a.lastActivityUnix);
+  return { yourTurn, theirTurn, finished };
+}

ui/src/lib/mock/client.ts

@@ -90,6 +90,7 @@ export class MockGateway implements GatewayClient {
   private pendingMatch: string | null = null;
   private friends: AccountRef[] = MOCK_FRIENDS.map((f) => ({ ...f }));
   private incoming: AccountRef[] = MOCK_INCOMING.map((f) => ({ ...f }));
+  private outgoing: AccountRef[] = [];
   private blocks: AccountRef[] = [];
   private invitations: Invitation[] = mockInvitations();
   private readonly stats: Stats = { ...MOCK_STATS };
@@ -155,6 +156,7 @@ export class MockGateway implements GatewayClient {
         turnTimeoutSecs: 86400,
         moveCount: 0,
         endReason: '',
+        lastActivityUnix: Math.floor(Date.now() / 1000),
         seats: [
           { seat: 0, accountId: ME, displayName: 'You', score: 0, hintsUsed: 0, isWinner: false },
           { seat: 1, accountId: 'robot', displayName: 'Robo', score: 0, hintsUsed: 0, isWinner: false },
@@ -372,8 +374,15 @@ export class MockGateway implements GatewayClient {
   async friendsIncoming(): Promise<AccountRef[]> {
     return this.incoming.map((f) => ({ ...f }));
   }
-  async friendRequest(_accountId: string): Promise<void> {
-    // The real backend requires a shared game; the mock simply acknowledges.
+  async friendsOutgoing(): Promise<AccountRef[]> {
+    return this.outgoing.map((f) => ({ ...f }));
+  }
+  async friendRequest(accountId: string): Promise<void> {
+    // The real backend requires a shared game; the mock records the outgoing request so
+    // the game's "add to friends" item reads as sent across reloads.
+    if (!this.outgoing.some((o) => o.accountId === accountId)) {
+      this.outgoing.push({ accountId, displayName: this.nameFor(accountId) });
+    }
   }
   async friendRespond(requesterId: string, accept: boolean): Promise<void> {
     const i = this.incoming.findIndex((r) => r.accountId === requesterId);

ui/src/lib/mock/data.ts

@@ -43,10 +43,9 @@ export const PROFILE: Profile = {
 
 // Seed social/account data for the mock (pnpm start + Playwright). The mock profile
 // is a durable account so the Stage 8 surfaces (friends, stats, history) are reachable.
-export const MOCK_FRIENDS: AccountRef[] = [
-  { accountId: 'ann', displayName: 'Ann' },
-  { accountId: 'kaya', displayName: 'Kaya' },
-];
+// Ann is the active game's opponent but deliberately not a friend, so the in-game
+// "add to friends" flow is demonstrable; Kaya (a finished-game opponent) is the friend.
+export const MOCK_FRIENDS: AccountRef[] = [{ accountId: 'kaya', displayName: 'Kaya' }];
 
 export const MOCK_INCOMING: AccountRef[] = [{ accountId: 'rick', displayName: 'Rick' }];
 
@@ -144,6 +143,7 @@ function activeGame(): MockGame {
       turnTimeoutSecs: 86400,
       moveCount: G1_MOVES.length,
       endReason: '',
+      lastActivityUnix: Math.floor(Date.now() / 1000) - 7200,
       seats: [seat(0, ME, 'You', 19), seat(1, 'ann', 'Ann', 13)],
     },
     moves: G1_MOVES,
@@ -177,6 +177,7 @@ function finishedG2(): MockGame {
       turnTimeoutSecs: 86400,
       moveCount: 2,
       endReason: 'normal',
+      lastActivityUnix: Math.floor(Date.now() / 1000) - 86400,
       seats: [seat(0, ME, 'You', 320, true), seat(1, 'kaya', 'Kaya', 281)],
     },
     moves: [
@@ -211,6 +212,7 @@ function finishedG3(): MockGame {
       turnTimeoutSecs: 86400,
       moveCount: 1,
       endReason: 'resignation',
+      lastActivityUnix: Math.floor(Date.now() / 1000) - 172800,
       seats: [seat(0, ME, 'You', 150), seat(1, 'rick', 'Rick', 212, true)],
     },
     moves: [

ui/src/lib/model.ts

@@ -40,6 +40,8 @@ export interface GameView {
   turnTimeoutSecs: number;
   moveCount: number;
   endReason: string;
+  /** Lobby sort key: the current turn's start (active) or the finish time (finished), Unix seconds. */
+  lastActivityUnix: number;
   seats: Seat[];
 }
 

ui/src/lib/result.test.ts

@@ -22,6 +22,7 @@ function game(seats: Seat[], status = 'finished', toMove = 0): GameView {
     turnTimeoutSecs: 0,
     moveCount: 0,
     endReason: '',
+    lastActivityUnix: 0,
     seats,
   };
 }

ui/src/lib/transport.ts

@@ -137,6 +137,9 @@ export function createTransport(baseUrl: string): GatewayClient {
     async friendsIncoming() {
       return codec.decodeIncomingList(await exec('friends.incoming', codec.empty()));
     },
+    async friendsOutgoing() {
+      return codec.decodeOutgoingList(await exec('friends.outgoing', codec.empty()));
+    },
     async friendRequest(accountId) {
       await exec('friends.request', codec.encodeTarget(accountId));
     },

ui/src/screens/Lobby.svelte

@@ -9,6 +9,7 @@
   import { t, type MessageKey } from '../lib/i18n/index.svelte';
   import { resultBadge } from '../lib/result';
   import { getLobby, setLobby } from '../lib/lobbycache';
+  import { groupGames } from '../lib/lobbysort';
   import type { AccountRef, GameView, Invitation } from '../lib/model';
 
   let games = $state<GameView[]>([]);
@@ -46,8 +47,7 @@
   });
 
   const myId = $derived(app.session?.userId ?? '');
-  const active = $derived(games.filter((g) => g.status === 'active'));
-  const finished = $derived(games.filter((g) => g.status !== 'active'));
+  const groups = $derived(groupGames(games, myId));
 
   function opponents(g: GameView): string {
     return g.seats
@@ -129,25 +129,26 @@
       </section>
     {/if}
 
-    {#each [{ h: 'lobby.activeGames', list: active }, { h: 'lobby.finishedGames', list: finished }] as group (group.h)}
+    {#each [{ h: 'lobby.yourTurn', list: groups.yourTurn }, { h: 'lobby.theirTurn', list: groups.theirTurn }, { h: 'lobby.finishedGames', list: groups.finished }] as group (group.h)}
       {#if group.list.length}
         <section>
-          <h2>{t(group.h as 'lobby.activeGames')}</h2>
-          {#each group.list as g (g.id)}
-            {@const b = resultBadge(g, myId)}
-            <button class="row" onclick={() => navigate(`/game/${g.id}`)}>
-              <span class="info">
-                <span class="who">{opponents(g) || '—'}</span>
-                <span class="sub">{t(b.key)} · {scoreline(g)}</span>
-              </span>
-              <span class="emoji">{b.emoji}</span>
-            </button>
-          {/each}
+          <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>
+            {/each}
+          </div>
         </section>
       {/if}
     {/each}
 
-    {#if !active.length && !finished.length && !invitations.length}
+    {#if !games.length && !invitations.length}
       <p class="empty">{t('lobby.noActive')}</p>
     {/if}
   </div>
@@ -186,7 +187,6 @@
     font-size: 0.9rem;
     margin: 0;
   }
-  .row,
   .invite {
     display: flex;
     align-items: center;
@@ -202,6 +202,31 @@
     border-radius: var(--radius);
     user-select: none;
   }
+  /* Game rows are a compact, flat list: no per-card frame, a hairline divider between
+     consecutive rows (Stage 17). */
+  .list {
+    display: flex;
+    flex-direction: column;
+  }
+  .row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    width: 100%;
+    text-align: left;
+    padding: 10px 6px;
+    border: none;
+    background: none;
+    color: var(--text);
+    user-select: none;
+  }
+  .row + .row {
+    border-top: 1px solid var(--border);
+  }
+  .row:active {
+    background: var(--surface-2);
+  }
   .info {
     display: flex;
     flex-direction: column;