feat(ui): friends list as lobby-style rows with kebab + confirm modals #123

Merged

developer merged 3 commits from feature/friends-list-kebab-confirm into development 2026-06-22 22:28:25 +00:00

Conversation 1 Commits 3 Files Changed 6

+255 -42

developer commented 2026-06-22 22:10:07 +00:00

Owner

Copy Link

Copy Source

What

Rework Settings → Friends into the lobby's visual language.

• All three sections (friends, incoming requests, blocked) become one-line rows split by hairline separators.
• Each friend row gets a right-hand kebab ⋮ that slides the row open (like the lobby) to reveal two icon actions split by a vertical divider — block 🚫 │ remove ✖️.
• Both actions now require a confirmation modal. The slide moves a short name off-screen, so the modal keeps a generic title (Block this player? / Remove from friends?) and shows the friend's name in the body, above the buttons — a long name wraps instead of stretching the sheet.
• Incoming keeps Accept/Decline; blocked keeps Unblock, inline on their rows (no kebab/slide).

Why

The old cards fired Remove/Block immediately, with no confirmation, and looked inconsistent with the lobby list.

Files

• ui/src/screens/Friends.svelte — markup, slide-reveal + kebab, confirm modals, scoped CSS (reuses the lobby .rowwrap/.row pattern and the Modal confirm-row pattern).
• ui/src/lib/i18n/{en,ru}.ts — friends.actions, friends.blockConfirm, friends.unfriendConfirm.
• docs/FUNCTIONAL.md (+_ru) — §Social note.

Tests

• pnpm check (0/0), pnpm test:unit (312 pass, incl. i18n parity), pnpm build (green).
• Local Playwright (mock): kebab slides open 🚫│✖️ with divider; both confirm modals show the name in the body; Remove executes and the list reloads. Verified single + two-friend (separator) and a long name (no sheet stretch).
• Owner sign-off pending on the test contour.

## What Rework **Settings → Friends** into the lobby's visual language. - All three sections (**friends**, **incoming requests**, **blocked**) become one-line rows split by hairline separators. - Each **friend** row gets a right-hand **kebab ⋮** that slides the row open (like the lobby) to reveal two icon actions split by a vertical divider — **block 🚫 │ remove ✖️**. - Both actions now require a **confirmation modal**. The slide moves a short name off-screen, so the modal keeps a generic title (*Block this player?* / *Remove from friends?*) and shows the **friend's name in the body**, above the buttons — a long name wraps instead of stretching the sheet. - Incoming keeps **Accept/Decline**; blocked keeps **Unblock**, inline on their rows (no kebab/slide). ## Why The old cards fired Remove/Block immediately, with no confirmation, and looked inconsistent with the lobby list. ## Files - `ui/src/screens/Friends.svelte` — markup, slide-reveal + kebab, confirm modals, scoped CSS (reuses the lobby `.rowwrap`/`.row` pattern and the `Modal` confirm-row pattern). - `ui/src/lib/i18n/{en,ru}.ts` — `friends.actions`, `friends.blockConfirm`, `friends.unfriendConfirm`. - `docs/FUNCTIONAL.md` (+`_ru`) — §Social note. ## Tests - `pnpm check` (0/0), `pnpm test:unit` (312 pass, incl. i18n parity), `pnpm build` (green). - Local Playwright (mock): kebab slides open 🚫│✖️ with divider; both confirm modals show the name in the body; **Remove** executes and the list reloads. Verified single + two-friend (separator) and a long name (no sheet stretch). - Owner sign-off pending on the test contour.

developer added 1 commit 2026-06-22 22:10:07 +00:00

feat(ui): friends list as lobby-style rows with kebab + confirm modals ... 5a80696fe8

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).

developer added 1 commit 2026-06-22 22:20:18 +00:00

feat(ui): close the friends kebab on an outside tap ... 12ff6dad86

A slid-open friend row now collapses when the user taps anywhere outside its
action buttons (taps on a kebab are skipped so its own toggle still drives the
open/close). Uses the same capture-phase window pointerdown idiom as Screen,
active only while a row is revealed.

developer added 1 commit 2026-06-22 22:24:41 +00:00

test(ui): e2e for the friends-list kebab, confirm modals and outside-tap ... d4e34efa80

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.

owner approved these changes 2026-06-22 22:26:23 +00:00

developer merged commit 18db62e19d into development 2026-06-22 22:28:25 +00:00

developer deleted branch feature/friends-list-kebab-confirm 2026-06-22 22:28:25 +00:00

developer referenced this pull request 2026-06-22 22:34:42 +00:00

Release: development → master #125

Sign in to join this conversation.

Reviewers

No Reviewers

owner

Labels

No items

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

owner (Ilia) developer

No Assignees

2 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: developer/scrabble-game#123