Merge pull request 'feat(ui): friends list as lobby-style rows with kebab + confirm modals' (#123) from feature/friends-list-kebab-confirm into development

Cover the reworked Settings -> Friends interactions in the mock e2e
(Chromium + WebKit): the row kebab slides open the block/remove icons and an
outside tap collapses it; blocking confirms (naming the friend) and moves them
to Blocked; removing confirms and drops the friendship.

docs/FUNCTIONAL.md

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

ui/e2e/social.spec.ts

@@ -44,6 +44,60 @@ 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,6 +227,9 @@ 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,6 +228,9 @@ 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,5 +1,6 @@
 <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';
@@ -16,6 +17,11 @@
   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 {
@@ -52,6 +58,41 @@
   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();
@@ -152,30 +193,39 @@
     {#if incoming.length}
       <section>
         <h3>{t('friends.incoming')}</h3>
-        {#each incoming as r (r.accountId)}
+        <div class="list">
-          <div class="item">
+          {#each incoming as r (r.accountId)}
-            <span class="who">{r.displayName}</span>
+            <div class="rowwrap">
-            <span class="acts">
+              <div class="row">
-              <button class="btn" onclick={() => respond(r.accountId, true)} disabled={!connection.online}>{t('friends.accept')}</button>
+                <span class="who">{r.displayName}</span>
-              <button class="ghost" onclick={() => respond(r.accountId, false)} disabled={!connection.online}>{t('friends.decline')}</button>
+                <span class="btns">
-            </span>
+                  <button class="btn" onclick={() => respond(r.accountId, true)} disabled={!connection.online}>{t('friends.accept')}</button>
-          </div>
+                  <button class="ghost" onclick={() => respond(r.accountId, false)} disabled={!connection.online}>{t('friends.decline')}</button>
-        {/each}
+                </span>
+              </div>
+            </div>
+          {/each}
+        </div>
       </section>
     {/if}
 
     <section>
       <h3>{t('friends.yours')}</h3>
       {#if friends.length}
-        {#each friends as f (f.accountId)}
+        <div class="list">
-          <div class="item">
+          {#each friends as f (f.accountId)}
-            <span class="who">{f.displayName}</span>
+            <div class="rowwrap" class:revealed={revealedId === f.accountId}>
-            <span class="acts">
+              <div class="acts">
-              <button class="ghost" onclick={() => remove(f.accountId)} disabled={!connection.online}>{t('friends.unfriend')}</button>
+                <button class="iconbtn" onclick={() => (blockTarget = f)} disabled={!connection.online} aria-label={t('friends.block')}>🚫</button>
-              <button class="ghost danger" onclick={() => blockUser(f.accountId)} disabled={!connection.online}>{t('friends.block')}</button>
+                <button class="iconbtn" onclick={() => (unfriendTarget = f)} disabled={!connection.online} aria-label={t('friends.unfriend')}>✖️</button>
-            </span>
+              </div>
-          </div>
+              <div class="row">
-        {/each}
+                <span class="who">{f.displayName}</span>
+                <button class="kebab" onclick={() => toggleReveal(f.accountId)} aria-label={t('friends.actions')}>⋮</button>
+              </div>
+            </div>
+          {/each}
+        </div>
       {:else}
         <p class="muted">{t('friends.none')}</p>
       {/if}
@@ -184,20 +234,49 @@
     {#if blocked.length || robotBlocks.length}
       <section>
         <h3>{t('friends.blockedList')}</h3>
-        {#each blocked as b (b.accountId)}
+        <div class="list">
-          <div class="item">
+          {#each blocked as b (b.accountId)}
-            <span class="who">{b.displayName}</span>
+            <div class="rowwrap">
-            <button class="ghost" onclick={() => unblock(b.accountId)} disabled={!connection.online}>{t('friends.unblock')}</button>
+              <div class="row">
-          </div>
+                <span class="who">{b.displayName}</span>
-        {/each}
+                <span class="btns">
-        {#each robotBlocks as r (r.id)}
+                  <button class="ghost" onclick={() => unblock(b.accountId)} disabled={!connection.online}>{t('friends.unblock')}</button>
-          <div class="item">
+                </span>
-            <span class="who">{r.displayName}</span>
+              </div>
-            <button class="ghost" onclick={() => unblock(r.id)} disabled={!connection.online}>{t('friends.unblock')}</button>
+            </div>
-          </div>
+          {/each}
-        {/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>
       </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>
 
@@ -279,28 +358,76 @@
     padding: 4px 0;
     text-align: left;
   }
-  .item {
+  .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;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
     padding: 10px 12px;
-    border: 1px solid var(--border);
+    background: var(--bg);
-    background: var(--surface);
+    transform: translateX(0);
-    border-radius: var(--radius-sm);
+    transition: transform 0.18s ease;
-    margin-bottom: 8px;
+  }
+  .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;
   }
   .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);
@@ -315,7 +442,27 @@
     color: var(--text);
     border-radius: var(--radius-sm);
   }
-  .ghost.danger {
+  .confirm-name {
-    color: var(--danger, #c0392b);
+    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);
   }
 </style>