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/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;