Merge pull request 'Promote development → master: banner tip set + banner/push language fix' (#114) from development into master

deploy/README.md

@@ -150,9 +150,7 @@ Re-run `ansible/` after a host resize — it is idempotent.
 workflow manually (Gitea → Actions → prod-deploy → run from `master`, input
 `confirm=deploy`). It builds + pushes the images to the registry, ships the
 compose/config/certs/env over SSH, deploys the main host with `prod-deploy.sh` (rolling,
-health-gated, **auto-rollback to the previous tag**; caddy is force-recreated on its roll so
-a bind-mounted `Caddyfile` change applies — its image is pinned and admin is off, so neither a
-new tag nor a hot reload would pick it up), then the bot host, then probes the
+health-gated, **auto-rollback to the previous tag**), then the bot host, then probes the
 public site. After `master` is green this workflow is the **only** thing that touches
 prod — nothing auto-deploys there. It runs four visible jobs: **build → deploy-main →
 deploy-bot → verify** (the per-service rolling shows in the deploy-main log).

deploy/caddy/Caddyfile

@@ -21,18 +21,6 @@
 }
 
 {$CADDY_SITE_ADDRESS::80} {
-	# HTTP/3 is advertised by default whenever this caddy terminates TLS (prod:
-	# CADDY_SITE_ADDRESS is the domain). But UDP/443 is never reachable — the prod
-	# compose maps only "443:443" (TCP) and ufw opens 443/tcp — so a client that cached
-	# the `Alt-Svc: h3` advert (sticky for ma=2592000s) stalls on the dead QUIC path
-	# before falling back to h2, which surfaced as the Telegram Mini App intermittently
-	# hanging on load. `Alt-Svc: clear` actively drops any cached alternative and pins
-	# clients to h2/h1; it is applied site-wide so every route is covered. In the test
-	# contour this caddy serves plain :80 (no h3 to advertise) and the host caddy
-	# re-stamps its own Alt-Svc, so the live test fix lives in the host caddy — here it
-	# is the prod fix. Background + alternatives (incl. serving h3 for real): docs/EDGE_HTTP3.md.
-	header Alt-Svc clear
-
 	# Operator surfaces under /_gm: a single shared Basic-Auth, then route.
 	@gm path /_gm /_gm/*
 	handle @gm {

deploy/grafana/dashboards/resources.json

@@ -36,21 +36,7 @@
       "type": "stat",
       "title": "Database size",
       "gridPos": { "h": 5, "w": 6, "x": 18, "y": 0 },
-      "fieldConfig": {
-        "defaults": {
-          "unit": "bytes",
-          "color": { "mode": "thresholds" },
-          "thresholds": {
-            "mode": "absolute",
-            "steps": [
-              { "color": "green", "value": null },
-              { "color": "yellow", "value": 8589934592 },
-              { "color": "red", "value": 17179869184 }
-            ]
-          }
-        },
-        "overrides": []
-      },
+      "fieldConfig": { "defaults": { "unit": "bytes" }, "overrides": [] },
       "datasource": { "type": "prometheus", "uid": "prometheus" },
       "targets": [{ "refId": "A", "expr": "max(pg_database_size_bytes{datname=\"scrabble\"})" }]
     },

deploy/prod-deploy.sh

@@ -74,13 +74,7 @@ health_running() { # health_running <container>: running, not restarting, stable
 roll() { # roll <service> <health-cmd...>
   local svc="$1"; shift
   echo ">>> rolling $svc -> $TAG"
-  # caddy's image is pinned (caddy:2-alpine, no $TAG) and its Caddyfile is bind-mounted, so a
-  # config-only change leaves the compose definition unchanged: `up -d` treats the container as
-  # current and does not recreate it, and admin is off so there is no hot reload — the new
-  # Caddyfile would never load. Force a recreate for caddy so config changes always apply; every
-  # other service already recreates on its new $TAG image.
-  local recreate=(); [ "$svc" = caddy ] && recreate=(--force-recreate)
-  dc up -d --no-build --no-deps "${recreate[@]}" "$svc" || return 1
+  dc up -d --no-build --no-deps "$svc" || return 1
   "$@" || { echo "!!! $svc failed health check"; return 1; }
   echo "<<< $svc healthy"
 }

docs/ARCHITECTURE.md

@@ -1098,10 +1098,7 @@ Two contours, two secret/variable prefixes (`TEST_` / `PROD_`):
   the **main host** runs the full stack (`docker-compose.yml` + `docker-compose.prod.yml`),
   the **bot host** runs only the bot (`docker-compose.bot.yml`, no VPN — native Bot API
   egress, telemetry off). There is no host caddy, so the contour caddy terminates TLS —
-  `CADDY_SITE_ADDRESS` is the domain and caddy does its own ACME. Caddy advertises HTTP/3 by default, but UDP/443 is not exposed (the
-  compose maps only TCP and ufw opens 443/tcp), so the edge emits `Alt-Svc: clear` to keep
-  clients on h2/h1 rather than stall on a dead QUIC path — see [`EDGE_HTTP3.md`](EDGE_HTTP3.md).
-  The gateway **publishes**
+  `CADDY_SITE_ADDRESS` is the domain and caddy does its own ACME. The gateway **publishes**
   the bot-link `:9443`; the remote bot dials it over mTLS (certs from `PROD_BOTLINK_*`,
   ServerName `gateway`, so TLS validation is independent of the public dial address), holds
   no inbound port, and login is unaffected if that host or the link is down.

docs/EDGE_HTTP3.md

@@ -1,111 +0,0 @@
-# Edge HTTP/3 (`Alt-Svc`) policy
-
-## TL;DR
-
-The edge **advertises HTTP/3 but does not actually serve it** (UDP/443 is not exposed),
-so we suppress the advert with `Alt-Svc: clear`. Advertising QUIC on `:443/udp` while
-that port is unreachable makes clients — notably the Telegram Mini App webview — stall
-on a dead QUIC connection before falling back to h2, which shows up as the app "hanging
-on load".
-
-## Symptom
-
-Opening the Mini App intermittently hangs on load: from a barely-noticeable pause to
-several seconds, sometimes a blank window that never finishes downloading `index.html`.
-Intermittent, worse after the first successful visit, reproduced on both the test
-contour and prod.
-
-## Root cause
-
-Caddy enables HTTP/3 by default on any TLS listener and emits
-`Alt-Svc: h3=":443"; ma=2592000` — telling every client "reach me over QUIC/UDP 443"
-and to cache that for 30 days. But UDP/443 is **never reachable end to end**:
-
-- **Test contour**: the host caddy publishes only `:443/tcp` (`docker port caddy` shows
-  no `udp`); QUIC packets from the internet are dropped.
-- **Prod**: `deploy/docker-compose.prod.yml` maps `"443:443"` (Docker = **TCP only**)
-  and `deploy/ansible/roles/main/tasks/main.yml` opens 443 `proto: tcp`. UDP/443 is
-  dropped at both the publish and the firewall.
-
-Caddy *does* bind `udp/443` inside the container and h3 works container-to-container
-(verified `http=3 code=200`), so the listener is healthy — it is simply not exposed.
-
-A client that cached the advert tries QUIC first on later opens, gets no response, and
-waits for the QUIC attempt to time out before falling back to TCP/h2. That wait is the
-stall. The very first visit (no cached `Alt-Svc`) uses h2 and is fast.
-
-The h2/TCP serving path itself is healthy: 30 fresh-TLS requests through the full path
-(host caddy -> contour caddy -> gateway) measured TTFB ~9.5 ms, total ~9.8 ms, no tail;
-`index.html` is ~1 KB.
-
-## Fix in place (option A — suppress the advert)
-
-Emit `Alt-Svc: clear`, which actively drops any cached alternative (better than merely
-deleting the header, which leaves the sticky 30-day cache in place):
-
-- **Prod / repo**: `deploy/caddy/Caddyfile` — a site-level `header Alt-Svc clear` (this
-  caddy terminates TLS in prod).
-- **Test contour**: the host caddy terminates TLS, so the fix lives there (homelab
-  config, outside this repo): `header Alt-Svc clear` on the `scrabble.*` site. The
-  in-compose caddy serves plain `:80` in test and never advertises h3, so the repo
-  directive is a harmless no-op there (the host caddy re-stamps the header).
-
-`header Alt-Svc clear` overrides Caddy's auto-advert (verified) and is site-scoped.
-
-### Verify
-
-The runner/prod host shell cannot reach the Docker bridge IPs directly, so probe from a
-container on the relevant network, using `--resolve` to hit the TLS-terminating caddy by
-its bridge IP (this also bypasses the public-IP NAT hairpin):
-
-```sh
-# <edge-ip> = the TLS-terminating caddy's IP on its network (docker inspect ... )
-docker run --rm --network edge curlimages/curl:latest -sS -D - -o /dev/null \
-  --resolve <host>:443:<edge-ip> https://<host>/telegram/ | grep -iE '^HTTP|^alt-svc'
-# expect: HTTP/2 200, and NO `alt-svc: h3=...` (the header is absent or `alt-svc: clear`)
-```
-
-## If it recurs — alternatives to try
-
-So we do not re-derive the diagnosis from scratch:
-
-1. **Re-confirm the advert is actually suppressed** with the verify command above. A
-   redeploy or a Caddy upgrade could regress it, or a client may still hold a cached
-   `h3` entry that has not yet been replaced by a `clear` (it needs one successful h2
-   response to receive the `clear`).
-2. **Option B — serve HTTP/3 for real** instead of suppressing it. Worth it only if we
-   actually want QUIC (the benefit is marginal for a ~1 KB shell plus hash-immutable
-   cached assets, and it adds UDP/QUIC attack surface):
-   - Publish UDP: add `"443:443/udp"` next to the TCP map in
-     `deploy/docker-compose.prod.yml` (and publish udp/443 on the test host caddy too).
-   - Open the firewall: add a `443 proto: udp` rule in
-     `deploy/ansible/roles/main/tasks/main.yml`.
-   - Drop the `header Alt-Svc clear` so Caddy advertises h3 again.
-   - Verify with an h3 client from inside the network:
-     `docker run --rm --network edge ymuski/curl-http3 curl --http3-only ...` should
-     return `http=3 code=200`.
-3. **Look past the edge** if the advert is suppressed and stalls persist. The h2 path is
-   fast server-side, so a remaining stall is most likely the client network / RTT / the
-   provider, not our stack. Re-run the timing loop (below) to confirm the server is
-   still <~10 ms TTFB before chasing the client side.
-
-## How this was diagnosed (method, to repeat)
-
-- The runner/prod host shell cannot reach the Docker bridge subnets, so all probing runs
-  from a throwaway container on the target network (`docker run --network <net>
-  curlimages/curl`), using `--resolve <host>:443:<edge-ip>` to bypass the public-IP NAT
-  hairpin and exercise the real TLS path.
-- Compare a fresh-connection timing loop (worst case, full TLS each time) against a
-  keepalive batch to separate handshake cost from serving cost:
-
-  ```sh
-  docker run --rm --network edge curlimages/curl:latest sh -c '
-    for i in $(seq 1 30); do
-      curl -sS -o /dev/null --resolve <host>:443:<edge-ip> \
-        -w "http=%{http_version} code=%{http_code} tls=%{time_appconnect} ttfb=%{time_starttransfer} total=%{time_total}\n" \
-        https://<host>/telegram/
-    done'
-  ```
-
-- `docker port <caddy>` shows whether `udp/443` is actually published; the response
-  `Alt-Svc` header shows what the edge advertises. The two disagreeing is the bug.

docs/FUNCTIONAL.md

@@ -213,9 +213,6 @@ block **overrides but does not delete** an existing friendship (so you may block
 they keep seeing you as one); active games are never interrupted — you can finish them, with
 the blocked opponent's chat composer hidden (only the log remains). Blocking from a game card
 mirrors the block in **Settings → Friends**; **unblock** and **unfriend** live there only.
-On Settings → Friends each friend is a one-line row whose right-hand kebab (⋮) slides open
-**block 🚫** and **remove ✖️** icon actions, and each action is gated by a confirmation
-that names the friend (*Block this player?* / *Remove from friends?*).
 Blocking an **auto-match opponent who is secretly a robot** behaves the same in that game
 (struck name, hidden composer) and lists the blocked opponent under the name you saw, but is
 recorded only against that game — the disguise holds, the shared robot is never globally

docs/FUNCTIONAL_ru.md

@@ -218,9 +218,6 @@ _Вход сейчас только через провайдера, поэто
 заблокированного соперника «подвал» чата скрыт (остаётся только лог). Блокировка с карточки в
 партии повторяет блокировку в **Настройках → Друзья**; **разблокировка** и **удаление из друзей**
 есть только там.
-В **Настройках → Друзья** каждый друг — однострочник, чей правый кебаб (⋮) выдвигает
-иконки-действия **заблокировать 🚫** и **удалить ✖️**, и каждое действие подтверждается
-диалогом с именем друга (*Заблокировать?* / *Удалить из друзей?*).
 Блокировка **авто-матч соперника, который втайне робот**, в этой партии ведёт себя так же
 (зачёркнутое имя, скрытый «подвал») и в списке заблокированных показывается под тем именем,
 которое ты видел, но записывается только для этой партии — маскировка сохраняется, общий

ui/e2e/social.spec.ts

@@ -44,60 +44,6 @@ test('friends: issue a code, accept an incoming request, redeem a code', async (
   await expect(page.locator('.who', { hasText: 'Friend 111111' })).toBeVisible();
 });
 
-test('friends: the row kebab reveals block/remove and an outside tap closes it', async ({ page }) => {
-  await loginLobby(page);
-  await openFriends(page);
-
-  // A friend row slides open on its kebab (like the lobby), exposing two icon actions.
-  const kaya = page.locator('.rowwrap', { hasText: 'Kaya' });
-  await kaya.locator('.kebab').click();
-  await expect(kaya).toHaveClass(/revealed/);
-  await expect(kaya.locator('.acts').getByRole('button', { name: 'Block' })).toBeVisible();
-  await expect(kaya.locator('.acts').getByRole('button', { name: 'Remove' })).toBeVisible();
-
-  // A tap anywhere outside the action buttons collapses the row again.
-  await page.getByRole('heading', { name: 'Your friends' }).click();
-  await expect(kaya).not.toHaveClass(/revealed/);
-});
-
-test('friends: blocking from the list confirms (naming the friend) and moves them to Blocked', async ({ page }) => {
-  await loginLobby(page);
-  await openFriends(page);
-
-  const kaya = page.locator('.rowwrap', { hasText: 'Kaya' });
-  await kaya.locator('.kebab').click();
-  await kaya.locator('.acts').getByRole('button', { name: 'Block' }).click();
-
-  // The confirmation keeps a generic title and names the friend in the body.
-  const dialog = page.getByRole('dialog');
-  await expect(dialog.getByText('Block this player?')).toBeVisible();
-  await expect(dialog.locator('.confirm-name')).toHaveText('Kaya');
-  await dialog.getByRole('button', { name: 'Block' }).click();
-
-  // The block applied: Kaya leaves the friends list and shows under Blocked players.
-  await expect(page.getByText('No friends yet.')).toBeVisible();
-  const blocked = page.locator('.rowwrap', { hasText: 'Kaya' });
-  await expect(blocked.getByRole('button', { name: 'Unblock' })).toBeVisible();
-});
-
-test('friends: removing from the list confirms (naming the friend) and drops them', async ({ page }) => {
-  await loginLobby(page);
-  await openFriends(page);
-
-  const kaya = page.locator('.rowwrap', { hasText: 'Kaya' });
-  await kaya.locator('.kebab').click();
-  await kaya.locator('.acts').getByRole('button', { name: 'Remove' }).click();
-
-  const dialog = page.getByRole('dialog');
-  await expect(dialog.getByText('Remove from friends?')).toBeVisible();
-  await expect(dialog.locator('.confirm-name')).toHaveText('Kaya');
-  await dialog.getByRole('button', { name: 'Remove' }).click();
-
-  // Unfriending just drops the friendship — Kaya is gone and not blocked.
-  await expect(page.getByText('No friends yet.')).toBeVisible();
-  await expect(page.locator('.rowwrap', { hasText: 'Kaya' })).toHaveCount(0);
-});
-
 test('invitations: the lobby shows an invitation and accepting clears it', async ({ page }) => {
   await loginLobby(page);
   await expect(page.getByText('Invitations')).toBeVisible();

ui/src/lib/i18n/en.ts

@@ -227,9 +227,6 @@ export const en = {
   'friends.decline': 'Decline',
   'friends.unfriend': 'Remove',
   'friends.block': 'Block',
-  'friends.actions': 'Actions',
-  'friends.blockConfirm': 'Block this player?',
-  'friends.unfriendConfirm': 'Remove from friends?',
   'friends.add': 'Add a friend',
   'friends.addFromGame': 'Add to friends',
   'friends.blockFromGame': 'Block player',

ui/src/lib/i18n/ru.ts

@@ -228,9 +228,6 @@ export const ru: Record<MessageKey, string> = {
   'friends.decline': 'Отклонить',
   'friends.unfriend': 'Удалить',
   'friends.block': 'Заблокировать',
-  'friends.actions': 'Действия',
-  'friends.blockConfirm': 'Заблокировать?',
-  'friends.unfriendConfirm': 'Удалить из друзей?',
   'friends.add': 'Добавить друга',
   'friends.addFromGame': 'В друзья',
   'friends.blockFromGame': 'Заблокировать',

ui/src/screens/Friends.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import Modal from '../components/Modal.svelte';
   import { app, handleError, refreshNotifications, showToast } from '../lib/app.svelte';
   import { connection } from '../lib/connection.svelte';
   import { gateway } from '../lib/gateway';
@@ -17,11 +16,6 @@
   let robotBlocks = $state<RobotBlockEntry[]>([]);
   let code = $state<FriendCode | null>(null);
   let redeemInput = $state('');
-  // The friend row whose kebab actions are slid open, like the lobby list.
-  let revealedId = $state<string | null>(null);
-  // Pending confirmation targets: the friend account awaiting a block / unfriend confirm.
-  let blockTarget = $state<AccountRef | null>(null);
-  let unfriendTarget = $state<AccountRef | null>(null);
 
   async function load() {
     try {
@@ -58,41 +52,6 @@
   const blockUser = (id: string) => act(() => gateway.block(id));
   const unblock = (id: string) => act(() => gateway.unblock(id));
 
-  // toggleReveal slides one friend row open (closing any other), exposing its
-  // block / unfriend icon actions; tapping the same kebab again closes it.
-  function toggleReveal(id: string): void {
-    revealedId = revealedId === id ? null : id;
-  }
-
-  // confirmBlock / confirmUnfriend run the pending action once its modal is
-  // accepted, then clear the target and the revealed row.
-  function confirmBlock(): void {
-    const target = blockTarget;
-    blockTarget = null;
-    revealedId = null;
-    if (target) void blockUser(target.accountId);
-  }
-
-  function confirmUnfriend(): void {
-    const target = unfriendTarget;
-    unfriendTarget = null;
-    revealedId = null;
-    if (target) void remove(target.accountId);
-  }
-
-  // While a friend row is slid open, a tap anywhere outside its action buttons
-  // closes it again. Taps on a kebab are skipped so its own toggle stays in charge.
-  $effect(() => {
-    if (revealedId === null) return;
-    function onDown(e: PointerEvent) {
-      const el = e.target as Element | null;
-      if (el?.closest('.acts') || el?.closest('.kebab')) return;
-      revealedId = null;
-    }
-    window.addEventListener('pointerdown', onDown, true);
-    return () => window.removeEventListener('pointerdown', onDown, true);
-  });
-
   async function getCode() {
     try {
       code = await gateway.friendCodeIssue();
@@ -193,39 +152,30 @@
     {#if incoming.length}
       <section>
         <h3>{t('friends.incoming')}</h3>
-        <div class="list">
-          {#each incoming as r (r.accountId)}
-            <div class="rowwrap">
-              <div class="row">
-                <span class="who">{r.displayName}</span>
-                <span class="btns">
-                  <button class="btn" onclick={() => respond(r.accountId, true)} disabled={!connection.online}>{t('friends.accept')}</button>
-                  <button class="ghost" onclick={() => respond(r.accountId, false)} disabled={!connection.online}>{t('friends.decline')}</button>
-                </span>
-              </div>
-            </div>
-          {/each}
-        </div>
+        {#each incoming as r (r.accountId)}
+          <div class="item">
+            <span class="who">{r.displayName}</span>
+            <span class="acts">
+              <button class="btn" onclick={() => respond(r.accountId, true)} disabled={!connection.online}>{t('friends.accept')}</button>
+              <button class="ghost" onclick={() => respond(r.accountId, false)} disabled={!connection.online}>{t('friends.decline')}</button>
+            </span>
+          </div>
+        {/each}
       </section>
     {/if}
 
     <section>
       <h3>{t('friends.yours')}</h3>
       {#if friends.length}
-        <div class="list">
-          {#each friends as f (f.accountId)}
-            <div class="rowwrap" class:revealed={revealedId === f.accountId}>
-              <div class="acts">
-                <button class="iconbtn" onclick={() => (blockTarget = f)} disabled={!connection.online} aria-label={t('friends.block')}>🚫</button>
-                <button class="iconbtn" onclick={() => (unfriendTarget = f)} disabled={!connection.online} aria-label={t('friends.unfriend')}>✖️</button>
-              </div>
-              <div class="row">
-                <span class="who">{f.displayName}</span>
-                <button class="kebab" onclick={() => toggleReveal(f.accountId)} aria-label={t('friends.actions')}>⋮</button>
-              </div>
-            </div>
-          {/each}
-        </div>
+        {#each friends as f (f.accountId)}
+          <div class="item">
+            <span class="who">{f.displayName}</span>
+            <span class="acts">
+              <button class="ghost" onclick={() => remove(f.accountId)} disabled={!connection.online}>{t('friends.unfriend')}</button>
+              <button class="ghost danger" onclick={() => blockUser(f.accountId)} disabled={!connection.online}>{t('friends.block')}</button>
+            </span>
+          </div>
+        {/each}
       {:else}
         <p class="muted">{t('friends.none')}</p>
       {/if}
@@ -234,49 +184,20 @@
     {#if blocked.length || robotBlocks.length}
       <section>
         <h3>{t('friends.blockedList')}</h3>
-        <div class="list">
-          {#each blocked as b (b.accountId)}
-            <div class="rowwrap">
-              <div class="row">
-                <span class="who">{b.displayName}</span>
-                <span class="btns">
-                  <button class="ghost" onclick={() => unblock(b.accountId)} disabled={!connection.online}>{t('friends.unblock')}</button>
-                </span>
-              </div>
-            </div>
-          {/each}
-          {#each robotBlocks as r (r.id)}
-            <div class="rowwrap">
-              <div class="row">
-                <span class="who">{r.displayName}</span>
-                <span class="btns">
-                  <button class="ghost" onclick={() => unblock(r.id)} disabled={!connection.online}>{t('friends.unblock')}</button>
-                </span>
-              </div>
-            </div>
-          {/each}
-        </div>
+        {#each blocked as b (b.accountId)}
+          <div class="item">
+            <span class="who">{b.displayName}</span>
+            <button class="ghost" onclick={() => unblock(b.accountId)} disabled={!connection.online}>{t('friends.unblock')}</button>
+          </div>
+        {/each}
+        {#each robotBlocks as r (r.id)}
+          <div class="item">
+            <span class="who">{r.displayName}</span>
+            <button class="ghost" onclick={() => unblock(r.id)} disabled={!connection.online}>{t('friends.unblock')}</button>
+          </div>
+        {/each}
       </section>
     {/if}
-
-    {#if blockTarget}
-      <Modal title={t('friends.blockConfirm')} onclose={() => (blockTarget = null)}>
-        <p class="confirm-name">{blockTarget.displayName}</p>
-        <div class="confirm-row">
-          <button class="cancel" onclick={() => (blockTarget = null)}>{t('common.cancel')}</button>
-          <button class="danger" onclick={confirmBlock} disabled={!connection.online}>{t('friends.block')}</button>
-        </div>
-      </Modal>
-    {/if}
-    {#if unfriendTarget}
-      <Modal title={t('friends.unfriendConfirm')} onclose={() => (unfriendTarget = null)}>
-        <p class="confirm-name">{unfriendTarget.displayName}</p>
-        <div class="confirm-row">
-          <button class="cancel" onclick={() => (unfriendTarget = null)}>{t('common.cancel')}</button>
-          <button class="danger" onclick={confirmUnfriend} disabled={!connection.online}>{t('friends.unfriend')}</button>
-        </div>
-      </Modal>
-    {/if}
   {/if}
 </div>
 
@@ -358,76 +279,28 @@
     padding: 4px 0;
     text-align: left;
   }
-  .list {
-    display: flex;
-    flex-direction: column;
-  }
-  /* One-line rows split by hairlines, mirroring the lobby list. */
-  .rowwrap {
-    position: relative;
-    overflow: hidden;
-  }
-  .rowwrap + .rowwrap {
-    border-top: 1px solid var(--border);
-  }
-  /* Block / unfriend icon actions sit behind the friend row, exposed when it slides left. */
-  .acts {
-    position: absolute;
-    inset: 0 0 0 auto;
-    display: flex;
-    align-items: stretch;
-  }
-  .iconbtn {
-    flex: 0 0 auto;
-    width: 48px;
-    border: none;
-    background: var(--bg-elev);
-    color: var(--text);
-    font-size: 1.1rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .iconbtn + .iconbtn {
-    border-left: 1px solid var(--border); /* the vertical divider between 🚫 and ✖️ */
-  }
-  .row {
-    position: relative;
+  .item {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
     padding: 10px 12px;
-    background: var(--bg);
-    transform: translateX(0);
-    transition: transform 0.18s ease;
-  }
-  .rowwrap.revealed .row {
-    transform: translateX(-96px); /* 2 × 48px icon buttons */
-  }
-  .kebab {
-    flex: 0 0 auto;
-    width: 30px;
-    padding: 6px 0;
-    border: none;
-    background: none;
-    color: var(--text-muted);
-    font-size: 1.4rem;
-    line-height: 1;
-  }
-  .btns {
-    display: flex;
-    gap: 8px;
-    flex: 0 0 auto;
+    border: 1px solid var(--border);
+    background: var(--surface);
+    border-radius: var(--radius-sm);
+    margin-bottom: 8px;
   }
   .who {
-    flex: 1;
-    min-width: 0;
     font-weight: 600;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  .acts {
+    display: flex;
+    gap: 8px;
+    flex: 0 0 auto;
+  }
   .btn {
     padding: 8px 12px;
     border: 1px solid var(--accent);
@@ -442,27 +315,7 @@
     color: var(--text);
     border-radius: var(--radius-sm);
   }
-  .confirm-name {
-    margin: 0 0 12px;
-    font-weight: 600;
-    overflow-wrap: anywhere; /* a long display name wraps instead of stretching the sheet */
-  }
-  .confirm-row {
-    display: flex;
-    gap: 8px;
-  }
-  .confirm-row button {
-    flex: 1;
-    padding: 11px;
-    border-radius: var(--radius-sm);
-    border: 1px solid var(--border);
-    background: var(--surface);
-    color: var(--text);
-    font-weight: 600;
-  }
-  .confirm-row .danger {
-    background: var(--danger);
-    color: #fff;
-    border-color: var(--danger);
+  .ghost.danger {
+    color: var(--danger, #c0392b);
   }
 </style>