feat(ui): UI polish batch (toast, gestures, lobby, settings, admin count) #84

Merged

developer merged 4 commits from feature/ui-polish-batch into development 2026-06-19 08:17:51 +00:00

Conversation 1 Commits 4 Files Changed 26

+435 -140

developer commented 2026-06-19 06:56:57 +00:00

Owner

Copy Link

Copy Source

Batch of small UI refinements, one PR for one contour deploy.

1. Admin dashboard — the Users count now excludes robots (CountUsers, humans only).
2. Lobby — finished-game delete reveal background matches the header / tab-bar (--bg-elev).
3. Mobile gesture — an upward swipe on the zoom-out board with no staged tiles shuffles the rack (reuses the history-drawer pointer plumbing, opposite direction).
4. Lobby — status icons −25%, game-row top/bottom padding halved.
5. Toast — info tier drifts up ~a tab-bar height while fading over 2s and dismisses on tap; error tier unchanged.
6. Confirm-move button — stays pinned at the right edge; rack tiles now shrink to fit so a full rack never overflows onto it (the real cause of the overlap).
7. Telegram — a successful invite-link redeem shows a welcome window pointing at the bot (twin of the stale-invite modal; current user's name).
8. Settings — the grid-lines toggle is removed; the board is always a gapless checkerboard (gridless folded into the base styles, setting purged across state/prefs/i18n).
9. Settings / Comms hubs — the selected tab highlight wraps icon and label as a pill (unwrapped action tabs unaffected).

Docs: UI_DESIGN (toast, board surface, selected tab) + PLAN updated; the grid-lines e2e was rewritten for the removed toggle.

Verified locally: go build/vet/test ./backend/..., gofmt clean; UI pnpm check (0/0), test:unit (282), build, test:e2e (146, Chromium+WebKit) all green. The Telegram welcome modal and the new swipe gesture are mobile-only and will be reviewed on the contour.

Batch of small UI refinements, one PR for one contour deploy. 1. **Admin dashboard** — the Users count now excludes robots (`CountUsers`, humans only). 2. **Lobby** — finished-game delete reveal background matches the header / tab-bar (`--bg-elev`). 3. **Mobile gesture** — an upward swipe on the zoom-out board with no staged tiles shuffles the rack (reuses the history-drawer pointer plumbing, opposite direction). 4. **Lobby** — status icons −25%, game-row top/bottom padding halved. 5. **Toast** — info tier drifts up ~a tab-bar height while fading over 2s and dismisses on tap; error tier unchanged. 6. **Confirm-move button** — stays pinned at the right edge; rack tiles now shrink to fit so a full rack never overflows onto it (the real cause of the overlap). 7. **Telegram** — a successful invite-link redeem shows a welcome window pointing at the bot (twin of the stale-invite modal; current user's name). 8. **Settings** — the grid-lines toggle is removed; the board is always a gapless checkerboard (gridless folded into the base styles, setting purged across state/prefs/i18n). 9. **Settings / Comms hubs** — the selected tab highlight wraps icon **and** label as a pill (unwrapped action tabs unaffected). Docs: UI_DESIGN (toast, board surface, selected tab) + PLAN updated; the grid-lines e2e was rewritten for the removed toggle. Verified locally: `go build/vet/test ./backend/...`, gofmt clean; UI `pnpm check` (0/0), `test:unit` (282), `build`, `test:e2e` (146, Chromium+WebKit) all green. The Telegram welcome modal and the new swipe gesture are mobile-only and will be reviewed on the contour.

developer added 1 commit 2026-06-19 06:56:57 +00:00

feat(ui): batch of UI polish tweaks ... ab1ad998aa

- admin dashboard "Users" count excludes robots (CountUsers, humans only)
- lobby finished-game delete reveal: background matches header/tab-bar (--bg-elev)
- mobile: swipe up on the zoom-out board (no staged tiles) shuffles the rack
- lobby: status icons -25%, game-row top/bottom padding halved
- toast: info tier drifts up ~a tab-bar height while fading over 2s and dismisses
  on tap; error tier unchanged
- game: confirm-move button stays pinned at the right edge; rack tiles shrink to
  fit so a full rack never overflows onto it
- telegram: a successful invite-link redeem shows a welcome window pointing at the bot
- settings: remove the grid-lines toggle; the board is always a gapless checkerboard
- settings/comms hubs: the selected tab highlight wraps icon + label as a pill

Docs: UI_DESIGN (toast, board surface, selected tab), PLAN; e2e updated for the
removed grid-lines toggle.

developer added 1 commit 2026-06-19 07:17:40 +00:00

fix(ui): right-align the confirm-move glyph under the preview caption ... b5688d4848

The ✅ box already ended at var(--pad) from the screen edge, but place-items:
center centred the glyph inside the 56px box, so it sat ~14px left of the green
preview caption (.scores, text-align:right at the same var(--pad)). Right-align
the glyph (place-items: center end) so its right edge lands under the caption's.

developer added 1 commit 2026-06-19 07:54:38 +00:00

feat(ui): vs-AI comms trim, overlay confirm button, recall-to-slot drag ... 4adb608ad1

- vs-AI: the comms hub drops the Chat tab (Dictionary only); a finished AI
  game has no comms at all, so its 💬 history-header entry is hidden too.
- Confirm-move ✅: redone as an absolute overlay pinned to the right edge (its
  right edge sits under the preview caption), so the rack keeps a fixed tile
  size — this reverts the tile-shrink that resized the letters at 6 tiles.
- Recall: dragging a placed tile back to the rack now drops it at the slot the
  pointer is over (drag-to-position, a gap opens), instead of snapping to its
  original slot; double-tap still recalls to the origin. New pure recallToSlot.

Tests: placement recallToSlot units; e2e recall-to-position; vs-AI comms e2e
updated. Docs: UI_DESIGN + FUNCTIONAL (+ru).

developer added 1 commit 2026-06-19 08:12:49 +00:00

fix(ui): polish board→rack recall drag and its gesture interplay ... b156d3403c

- The rack now animates the opening drop gap for a board-tile recall drag too
  (the reorder transition was gated on a rack-source drag only).
- While a board tile is dragged over the rack (a recall, gap shown), the ✅
  confirm and its preview caption are hidden so they don't sit over the gap;
  they return if the tile is dragged back out over the board.
- A recall drop lands off the boardwrap, so its pointerup never reached the
  boardwrap handler and left a stale id in the active-pointer set — the next
  board swipe then read as multi-touch and the shuffle / history pull went dead.
  Reconcile the pointer when a drag ends or cancels. Regression e2e added.

owner approved these changes 2026-06-19 08:17:16 +00:00

developer merged commit b65a3ecc9c into development 2026-06-19 08:17:51 +00:00

developer deleted branch feature/ui-polish-batch 2026-06-19 08:17:51 +00:00

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#84