UI: tab-bar navigation — drop the hamburger #39

Merged

developer merged 4 commits from feature/ui-tabbar-nav into development 2026-06-11 13:46:41 +00:00

Conversation 0 Commits 4 Files Changed 29

+1078 -753

developer commented 2026-06-11 12:14:19 +00:00

Owner

Copy Link

Copy Source

Replace the hamburger menu (Menu.svelte) everywhere with tab-bar navigation. It clashed with the Telegram-fullscreen layout (the menu had to be re-centred under the notch).

What changed

• Settings hub (SettingsHub) from the lobby ⚙️ tab — Settings / Profile / Friends / About as in-place tabs, back always → lobby. The ⚙️ badge counts incoming friend requests (invitations keep their own lobby section).
• Comms hub (CommsHub) from the move-history 💬 — Chat / Dictionary tabs, back → game; Dictionary only while the game is active.
• The game's menu items move into the open move history: 🏁 leave / 📤 export (header), 🤝 add-friend per opponent card, 💬 comms; unread chat is badged on the score bar + the 💬.
• TapConfirm (tap → fading ✅ → tap) replaces the Skip/Hint press-and-hold popovers and drives the add-friend confirm.
• Move-history "jump" bug fixed: while open the slid board is inert and the stage can't scroll, so a swipe up genuinely closes the history (no stale-open re-toggle).
• Removed Menu.svelte + HoldConfirm.svelte.

Interview decisions

• In-Settings sub-nav = bottom TabBar with the active tab highlighted (icon-only).
• Export GCG → the now-free left slot of the history header (finished games).
• Lobby ⚙️ badge = incoming friend requests only.
• Unread chat → score bar and 💬.

Verification (local)

check 0/0, unit 144 ✓ (incl. tapconfirm), build ✓, bundle budget ✓ (app 74.8/100 KB), e2e 78 ✓ on Chromium + WebKit.

UI-only — no schema/wire change, no contour DB wipe. Docs baked: UI_DESIGN.md, FUNCTIONAL.md (+_ru), PRERELEASE.md.

Replace the hamburger menu (`Menu.svelte`) everywhere with tab-bar navigation. It clashed with the Telegram-fullscreen layout (the menu had to be re-centred under the notch). ### What changed - **Settings hub** (`SettingsHub`) from the lobby **⚙️** tab — Settings / Profile / Friends / About as in-place tabs, back always → lobby. The ⚙️ badge counts incoming friend requests (invitations keep their own lobby section). - **Comms hub** (`CommsHub`) from the move-history **💬** — Chat / Dictionary tabs, back → game; Dictionary only while the game is active. - The game's menu items move into the open move history: **🏁 leave** / **📤 export** (header), **🤝 add-friend** per opponent card, **💬 comms**; unread chat is badged on the score bar + the 💬. - **TapConfirm** (tap → fading ✅ → tap) replaces the Skip/Hint press-and-hold popovers and drives the add-friend confirm. - **Move-history "jump" bug** fixed: while open the slid board is inert and the stage can't scroll, so a swipe up genuinely closes the history (no stale-open re-toggle). - Removed `Menu.svelte` + `HoldConfirm.svelte`. ### Interview decisions - In-Settings sub-nav = bottom TabBar with the active tab highlighted (icon-only). - Export GCG → the now-free left slot of the history header (finished games). - Lobby ⚙️ badge = incoming friend requests only. - Unread chat → score bar **and** 💬. ### Verification (local) `check` 0/0, unit 144 ✓ (incl. `tapconfirm`), build ✓, bundle budget ✓ (app 74.8/100 KB), e2e **78 ✓** on Chromium + WebKit. UI-only — no schema/wire change, no contour DB wipe. Docs baked: `UI_DESIGN.md`, `FUNCTIONAL.md` (+`_ru`), `PRERELEASE.md`.

developer added 1 commit 2026-06-11 12:14:19 +00:00

UI: tab-bar navigation — drop the hamburger ... fc1261e078

Replace Menu.svelte (hamburger) everywhere with tab-bar navigation:
- Settings hub (SettingsHub) from the lobby ⚙️ tab: Settings/Profile/
  Friends/About as in-place tabs, back → lobby; the lobby ⚙️ badge counts
  incoming friend requests (invitations keep their own lobby section).
- Comms hub (CommsHub) from the move-history 💬: Chat/Dictionary tabs,
  back → game; Dictionary only while the game is active.
- Game menu items relocate into the open history: 🏁 leave / 📤 export in
  the header, 🤝 add-friend per opponent card, 💬 comms; unread chat is
  badged on the score bar + the 💬.
- TapConfirm (tap → fading ✅ → tap) replaces the Skip/Hint press-and-hold
  popovers and drives the add-friend confirm.
- Fix the move-history "jump": the slid board is inert and the stage can't
  scroll, so a swipe up genuinely closes the history.

Remove Menu.svelte + HoldConfirm.svelte. Docs: UI_DESIGN, FUNCTIONAL(+ru),
PRERELEASE. UI check/unit/build/bundle/e2e (Chromium+WebKit) all green.

developer added 1 commit 2026-06-11 13:12:46 +00:00

UI: taller tg-fullscreen header + labelled hub tabs ... ad91bc728b

- tg-fullscreen: +20px header height — without the (removed) hamburger the
  title bar lost its bulk and sat flush on Telegram's native nav band.
- Settings/Comms hub tabs gain text labels under the icons (Settings /
  Profile / Friends / Info and Chat / Dictionary); the icon is aria-hidden
  so the label names the button. New i18n keys about.tab, game.dictionary.

developer added 1 commit 2026-06-11 13:27:50 +00:00

UI: fix tg-fullscreen header height via padding-top ... 1b3d7dc256

min-height was the wrong lever: in Telegram the title is the bar's only
child (the back chevron is hidden), so the bar is sized by padding+content
and min-height (the nav-band height) never binds — the earlier bump did
nothing. Drop the title clear of the native nav band with padding-top
instead (notch + a 20px gap, was +6), and revert the min-height change.

developer added 1 commit 2026-06-11 13:37:13 +00:00

UI: tg-fullscreen header gap +10px (was +20) + font-scale regression test ... 29f655aacd

The +20px gap was too far; use +10px (padding-top safe-top+16). The gap is
fixed px, so the clearance from Telegram's native nav stays constant when
the user scales the font up — the title grows downward and the bar with it,
no overflow. Locked by a new e2e test that asserts the title top is
unchanged across font sizes and never overflows the bar.

owner approved these changes 2026-06-11 13:46:00 +00:00

developer merged commit 7b85f4bd68 into development 2026-06-11 13:46:41 +00:00

developer deleted branch feature/ui-tabbar-nav 2026-06-11 13:46:41 +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#39