UI: tab-bar navigation — drop the hamburger

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.

ui/src/components/Header.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
-  import type { Snippet } from 'svelte';
   import { navigate } from '../lib/router.svelte';
   import { insideTelegram } from '../lib/telegram';
   import { connection } from '../lib/connection.svelte';
   import { t } from '../lib/i18n/index.svelte';
   import Spinner from './Spinner.svelte';
 
-  let { title, back, menu, grow = false }: { title: string; back?: string; menu?: Snippet; grow?: boolean } =
-    $props();
+  let { title, back, grow = false }: { title: string; back?: string; grow?: boolean } = $props();
 
   // Inside Telegram the native header back button (App.svelte) is the back control, so
   // the app's own chevron is hidden to avoid two back affordances.
@@ -28,7 +26,8 @@
     {:else}
       <h1 class="connecting"><Spinner /> <span>{t('connection.connecting')}</span></h1>
     {/if}
-    <div class="end">{#if menu}{@render menu()}{/if}</div>
+    <!-- A right-hand spacer balances the back button so the title stays centred. -->
+    <span class="spacer"></span>
   </div>
 </header>
 
@@ -75,18 +74,13 @@
     font-weight: 500;
   }
   .icon,
-  .spacer,
-  .end {
+  .spacer {
     min-width: 40px;
     height: 36px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
   }
-  .end {
-    width: auto;
-    justify-content: flex-end;
-  }
   .back {
     background: none;
     border: none;
@@ -108,9 +102,8 @@
   }
   /* Telegram fullscreen: TG's native nav occupies the band between the device notch
      (--tg-safe-top) and --tg-content-top. Our header spans that full band (so the layout below
-     is unchanged) and centres the title + menu as a pair (hamburger right of the title) within
-     it, BELOW the notch — lining them up vertically with Telegram's own back/menu controls,
-     which sit in the band's corners. */
+     is unchanged) and centres the title within it, BELOW the notch — lining it up vertically
+     with Telegram's own back/menu controls, which sit in the band's corners. */
   :global(html.tg-fullscreen) .bar {
     min-height: var(--tg-content-top);
     box-sizing: border-box;
@@ -129,7 +122,4 @@
   :global(html.tg-fullscreen) h1 {
     flex: 0 1 auto;
   }
-  :global(html.tg-fullscreen) .end {
-    min-width: 0;
-  }
 </style>