From 5a80696fe8d2092b7f0e48d0e7fd26912be2c874 Mon Sep 17 00:00:00 2001
From: Ilia Denisov <evilcart@gmail.com>
Date: Tue, 23 Jun 2026 00:09:39 +0200
Subject: [PATCH] feat(ui): friends list as lobby-style rows with kebab +
 confirm modals

Settings -> Friends previously rendered each friend as a bordered card with
two always-visible text buttons (Remove / Block) that fired immediately. Rework
the whole screen to the lobby's visual language: one-line rows split by
hairline separators across all three sections (friends, incoming requests,
blocked).

Each friend row gains a right-hand kebab that slides the row open to reveal two
icon actions split by a vertical divider -- block (no-entry) and remove (cross)
-- mirroring the lobby's slide-to-reveal. Both actions now require a
confirmation modal; since the slide moves a short name off-screen, the modal
keeps a generic title and shows the friend's name in the body, above the
buttons, so a long name cannot stretch the sheet. Incoming keeps its
accept/decline buttons and blocked keeps unblock, inline on their rows.

Add the friends.actions / friends.blockConfirm / friends.unfriendConfirm keys
to both i18n catalogs and document the flow in FUNCTIONAL (+_ru).
---
 docs/FUNCTIONAL.md            |   3 +
 docs/FUNCTIONAL_ru.md         |   3 +
 ui/src/lib/i18n/en.ts         |   3 +
 ui/src/lib/i18n/ru.ts         |   3 +
 ui/src/screens/Friends.svelte | 218 +++++++++++++++++++++++++++-------
 5 files changed, 188 insertions(+), 42 deletions(-)

diff --git a/docs/FUNCTIONAL.md b/docs/FUNCTIONAL.md
index 38260fe..11e580e 100644
--- a/docs/FUNCTIONAL.md
+++ b/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
diff --git a/docs/FUNCTIONAL_ru.md b/docs/FUNCTIONAL_ru.md
index fa1dcd6..3fc7c05 100644
--- a/docs/FUNCTIONAL_ru.md
+++ b/docs/FUNCTIONAL_ru.md
@@ -218,6 +218,9 @@ _Вход сейчас только через провайдера, поэто
 заблокированного соперника «подвал» чата скрыт (остаётся только лог). Блокировка с карточки в
 партии повторяет блокировку в **Настройках → Друзья**; **разблокировка** и **удаление из друзей**
 есть только там.
+В **Настройках → Друзья** каждый друг — однострочник, чей правый кебаб (⋮) выдвигает
+иконки-действия **заблокировать 🚫** и **удалить ✖️**, и каждое действие подтверждается
+диалогом с именем друга (*Заблокировать?* / *Удалить из друзей?*).
 Блокировка **авто-матч соперника, который втайне робот**, в этой партии ведёт себя так же
 (зачёркнутое имя, скрытый «подвал») и в списке заблокированных показывается под тем именем,
 которое ты видел, но записывается только для этой партии — маскировка сохраняется, общий
diff --git a/ui/src/lib/i18n/en.ts b/ui/src/lib/i18n/en.ts
index db0cad9..6f7cb9e 100644
--- a/ui/src/lib/i18n/en.ts
+++ b/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',
diff --git a/ui/src/lib/i18n/ru.ts b/ui/src/lib/i18n/ru.ts
index 4321efd..bd5b5a6 100644
--- a/ui/src/lib/i18n/ru.ts
+++ b/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': 'Заблокировать',
diff --git a/ui/src/screens/Friends.svelte b/ui/src/screens/Friends.svelte
index 4471ef4..831f3d2 100644
--- a/ui/src/screens/Friends.svelte
+++ b/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,28 @@
   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);
+  }
+
   async function getCode() {
     try {
       code = await gateway.friendCodeIssue();
@@ -152,30 +180,39 @@
     {#if incoming.length}
       <section>
         <h3>{t('friends.incoming')}</h3>
-        {#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}
+        <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>
       </section>
     {/if}
 
     <section>
       <h3>{t('friends.yours')}</h3>
       {#if friends.length}
-        {#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}
+        <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>
       {:else}
         <p class="muted">{t('friends.none')}</p>
       {/if}
@@ -184,20 +221,49 @@
     {#if blocked.length || robotBlocks.length}
       <section>
         <h3>{t('friends.blockedList')}</h3>
-        {#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}
+        <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>
       </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 +345,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(--surface);
-    border-radius: var(--radius-sm);
-    margin-bottom: 8px;
+    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;
   }
   .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 +429,27 @@
     color: var(--text);
     border-radius: var(--radius-sm);
   }
-  .ghost.danger {
-    color: var(--danger, #c0392b);
+  .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);
   }
 </style>