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/screens/About.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import Screen from '../components/Screen.svelte';
   import { t } from '../lib/i18n/index.svelte';
   import { app } from '../lib/app.svelte';
   import { aboutContent } from '../lib/aboutContent';
@@ -10,31 +9,29 @@
   const c = $derived(aboutContent(app.locale, AUTO_MATCH_HOURS));
 </script>
 
-<Screen title={t('about.title')} back="/">
-  <div class="page">
-    <h1>{c.title}</h1>
-    <p>
-      {c.rulesPrefix}<a href={c.rulesUrl} target="_blank" rel="noopener noreferrer">{c.rulesLink}</a>.
-    </p>
+<div class="page">
+  <h1>{c.title}</h1>
+  <p>
+    {c.rulesPrefix}<a href={c.rulesUrl} target="_blank" rel="noopener noreferrer">{c.rulesLink}</a>.
+  </p>
 
-    <section>
-      <h2>{c.randomTitle}</h2>
-      <p class="respect">❗️{c.randomRespect}</p>
-      <ul>
-        {#each c.random as item (item)}<li>{item}</li>{/each}
-      </ul>
-    </section>
+  <section>
+    <h2>{c.randomTitle}</h2>
+    <p class="respect">❗️{c.randomRespect}</p>
+    <ul>
+      {#each c.random as item (item)}<li>{item}</li>{/each}
+    </ul>
+  </section>
 
-    <section>
-      <h2>{c.friendsTitle}</h2>
-      <ul>
-        {#each c.friends as item (item)}<li>{item}</li>{/each}
-      </ul>
-    </section>
+  <section>
+    <h2>{c.friendsTitle}</h2>
+    <ul>
+      {#each c.friends as item (item)}<li>{item}</li>{/each}
+    </ul>
+  </section>
 
-    <p class="muted">{t('about.version', { v: version })}</p>
-  </div>
-</Screen>
+  <p class="muted">{t('about.version', { v: version })}</p>
+</div>
 
 <style>
   .page {

ui/src/screens/Friends.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import Screen from '../components/Screen.svelte';
   import { app, handleError, refreshNotifications, showToast } from '../lib/app.svelte';
   import { connection } from '../lib/connection.svelte';
   import { gateway } from '../lib/gateway';
@@ -81,88 +80,86 @@
   }
 </script>
 
-<Screen title={t('friends.title')} back="/">
-  <div class="page">
-    {#if app.profile?.isGuest}
-      <p class="muted">{t('profile.guestLocked')}</p>
-    {:else}
-      <section>
-        <h3>{t('friends.add')}</h3>
-        <div class="addrow">
-          <input
-            class="codein"
-            bind:value={redeemInput}
-            placeholder={t('friends.codePlaceholder')}
-            inputmode="numeric"
-            maxlength="6"
-          />
-          <button class="btn" onclick={redeem} disabled={!connection.online}>{t('friends.redeem')}</button>
-        </div>
-        {#if code}
-          {@const tg = shareLink(friendCodeParam(code.code))}
-          <div class="code" data-testid="friend-code">
-            <div class="coderow">
-              <button class="codeval" onclick={copyCode}>{code.code}</button>
-              <button class="copy" onclick={copyCode} aria-label={t('friends.copy')}>📋</button>
-            </div>
-            <span class="codehint">
-              {t('friends.codeHint')} · {t('friends.codeExpires', { time: codeTime(code.expiresAtUnix) })}
-            </span>
-            {#if tg}
-              <a class="link tgshare" href={tg} target="_blank" rel="noopener">{t('friends.shareTelegram')}</a>
-            {/if}
+<div class="page">
+  {#if app.profile?.isGuest}
+    <p class="muted">{t('profile.guestLocked')}</p>
+  {:else}
+    <section>
+      <h3>{t('friends.add')}</h3>
+      <div class="addrow">
+        <input
+          class="codein"
+          bind:value={redeemInput}
+          placeholder={t('friends.codePlaceholder')}
+          inputmode="numeric"
+          maxlength="6"
+        />
+        <button class="btn" onclick={redeem} disabled={!connection.online}>{t('friends.redeem')}</button>
+      </div>
+      {#if code}
+        {@const tg = shareLink(friendCodeParam(code.code))}
+        <div class="code" data-testid="friend-code">
+          <div class="coderow">
+            <button class="codeval" onclick={copyCode}>{code.code}</button>
+            <button class="copy" onclick={copyCode} aria-label={t('friends.copy')}>📋</button>
           </div>
-        {:else}
-          <button class="link" onclick={getCode} disabled={!connection.online}>{t('friends.getCode')}</button>
-        {/if}
-      </section>
-
-      {#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}
-        </section>
+          <span class="codehint">
+            {t('friends.codeHint')} · {t('friends.codeExpires', { time: codeTime(code.expiresAtUnix) })}
+          </span>
+          {#if tg}
+            <a class="link tgshare" href={tg} target="_blank" rel="noopener">{t('friends.shareTelegram')}</a>
+          {/if}
+        </div>
+      {:else}
+        <button class="link" onclick={getCode} disabled={!connection.online}>{t('friends.getCode')}</button>
       {/if}
+    </section>
 
+    {#if incoming.length}
       <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}
-        {:else}
-          <p class="muted">{t('friends.none')}</p>
-        {/if}
+        <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}
       </section>
-
-      {#if blocked.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}
-        </section>
-      {/if}
     {/if}
-  </div>
-</Screen>
+
+    <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}
+      {:else}
+        <p class="muted">{t('friends.none')}</p>
+      {/if}
+    </section>
+
+    {#if blocked.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}
+      </section>
+    {/if}
+  {/if}
+</div>
 
 <style>
   .page {

ui/src/screens/Lobby.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import Screen from '../components/Screen.svelte';
-  import Menu from '../components/Menu.svelte';
   import TabBar from '../components/TabBar.svelte';
   import { app, handleError, showToast } from '../lib/app.svelte';
   import { connection } from '../lib/connection.svelte';
@@ -24,7 +23,9 @@
       games = (await gateway.gamesList()).games;
       if (!guest) {
         [invitations, incoming] = await Promise.all([gateway.invitationsList(), gateway.friendsIncoming()]);
-        app.notifications = invitations.length + incoming.length;
+        // The ⚙️ badge counts only what lives behind it (incoming friend requests);
+        // invitations surface in their own lobby section above.
+        app.notifications = incoming.length;
       }
       setLobby({ games, invitations, incoming });
     } catch (e) {
@@ -116,13 +117,6 @@
     }
   }
 
-  const menuItems = $derived([
-    ...(guest ? [] : [{ label: t('lobby.friends'), onclick: () => navigate('/friends'), badge: incoming.length }]),
-    { label: t('lobby.profile'), onclick: () => navigate('/profile') },
-    { label: t('lobby.settings'), onclick: () => navigate('/settings') },
-    { label: t('lobby.about'), onclick: () => navigate('/about') },
-  ]);
-
   async function acceptInvite(inv: Invitation) {
     try {
       const r = await gateway.invitationAccept(inv.id);
@@ -151,10 +145,6 @@
 </script>
 
 <Screen title={app.profile?.displayName ?? t('app.title')}>
-  {#snippet menu()}
-    <Menu items={menuItems} badge={app.notifications} />
-  {/snippet}
-
   <div class="lobby">
     {#if invitations.length}
       <section>
@@ -238,6 +228,10 @@
       <button class="tab" onclick={() => showToast(t('lobby.soon'))}>
         <span class="sq">🏆</span><span class="lbl">{t('lobby.tournaments')}</span>
       </button>
+      <button class="tab" onclick={() => navigate('/settings')}>
+        <span class="sq">⚙️{#if app.notifications > 0}<span class="badge">{app.notifications}</span>{/if}</span>
+        <span class="lbl">{t('lobby.settings')}</span>
+      </button>
     </TabBar>
   {/snippet}
 </Screen>

ui/src/screens/Profile.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import Modal from '../components/Modal.svelte';
-  import Screen from '../components/Screen.svelte';
   import { app, applyLinkResult, handleError, logout, showToast } from '../lib/app.svelte';
   import { connection } from '../lib/connection.svelte';
   import { gateway } from '../lib/gateway';
@@ -160,109 +159,107 @@
   }
 </script>
 
-<Screen title={t('profile.title')} back="/">
-  <div class="page">
-    {#if app.profile}
-      {@const p = app.profile}
-      <div class="name">{p.displayName}</div>
-      {#if p.isGuest}<span class="badge">{t('profile.guest')}</span>{/if}
+<div class="page">
+  {#if app.profile}
+    {@const p = app.profile}
+    <div class="name">{p.displayName}</div>
+    {#if p.isGuest}<span class="badge">{t('profile.guest')}</span>{/if}
 
-      {#if p.isGuest}
-        <p class="muted">{t('profile.guestLocked')}</p>
-      {:else}
-        <form class="edit" onsubmit={(e) => { e.preventDefault(); void save(); }}>
-          <label>
-            <span>{t('profile.displayName')}</span>
-            <input class:invalid={!nameOk} bind:value={dn} maxlength="40" />
-          </label>
-          <label>
-            <span>{t('profile.timezone')}</span>
-            <select bind:value={tz}>
-              {#each timezoneOffsets as o (o)}<option value={o}>{o}</option>{/each}
-            </select>
-          </label>
-          <fieldset class="away" class:invalid={!awayOk}>
-            <legend>{t('profile.awayWindow')}</legend>
-            <div class="times">
-              <span class="tlabel">{t('profile.from')}</span>
-              <select bind:value={startH}>{#each awayHours as h (h)}<option>{h}</option>{/each}</select>
-              <span class="colon">:</span>
-              <select bind:value={startM}>{#each awayMinutes as m (m)}<option>{m}</option>{/each}</select>
-            </div>
-            <div class="times">
-              <span class="tlabel">{t('profile.to')}</span>
-              <select bind:value={endH}>{#each awayHours as h (h)}<option>{h}</option>{/each}</select>
-              <span class="colon">:</span>
-              <select bind:value={endM}>{#each awayMinutes as m (m)}<option>{m}</option>{/each}</select>
-            </div>
-            <p class="muted">{t('profile.awayHint')}</p>
-          </fieldset>
-          <label class="check">
-            <input type="checkbox" bind:checked={blockChat} />
-            <span>{t('profile.blockChat')}</span>
-          </label>
-          <label class="check">
-            <input type="checkbox" bind:checked={blockFriendRequests} />
-            <span>{t('profile.blockFriendRequests')}</span>
-          </label>
-          <label class="check">
-            <input type="checkbox" bind:checked={notificationsInAppOnly} />
-            <span>{t('profile.notificationsInAppOnly')}</span>
-          </label>
-          <div class="formacts">
-            <button type="submit" class="btn" disabled={!formValid || !connection.online}>{t('common.save')}</button>
+    {#if p.isGuest}
+      <p class="muted">{t('profile.guestLocked')}</p>
+    {:else}
+      <form class="edit" onsubmit={(e) => { e.preventDefault(); void save(); }}>
+        <label>
+          <span>{t('profile.displayName')}</span>
+          <input class:invalid={!nameOk} bind:value={dn} maxlength="40" />
+        </label>
+        <label>
+          <span>{t('profile.timezone')}</span>
+          <select bind:value={tz}>
+            {#each timezoneOffsets as o (o)}<option value={o}>{o}</option>{/each}
+          </select>
+        </label>
+        <fieldset class="away" class:invalid={!awayOk}>
+          <legend>{t('profile.awayWindow')}</legend>
+          <div class="times">
+            <span class="tlabel">{t('profile.from')}</span>
+            <select bind:value={startH}>{#each awayHours as h (h)}<option>{h}</option>{/each}</select>
+            <span class="colon">:</span>
+            <select bind:value={startM}>{#each awayMinutes as m (m)}<option>{m}</option>{/each}</select>
           </div>
-        </form>
-      {/if}
-
-      <!-- Linking & merge. Shown to everyone, including guests, who
-           upgrade by binding their first identity. -->
-      <section class="emailbox">
-        <h3>{t('profile.linkAccount')}</h3>
-        {#if !emailSent}
-          <div class="addrow">
-            <input
-              class:invalid={emailInput.length > 0 && !emailOk}
-              bind:value={emailInput}
-              placeholder={t('login.emailPlaceholder')}
-              type="email"
-            />
-            <button class="ghost" onclick={requestEmail} disabled={!emailOk || !connection.online}>{t('login.sendCode')}</button>
+          <div class="times">
+            <span class="tlabel">{t('profile.to')}</span>
+            <select bind:value={endH}>{#each awayHours as h (h)}<option>{h}</option>{/each}</select>
+            <span class="colon">:</span>
+            <select bind:value={endM}>{#each awayMinutes as m (m)}<option>{m}</option>{/each}</select>
           </div>
-        {:else}
-          <div class="addrow">
-            <input
-              class="codein"
-              bind:value={codeInput}
-              placeholder={t('profile.emailCode')}
-              inputmode="numeric"
-              maxlength="6"
-            />
-            <button class="btn" onclick={confirmEmail} disabled={!connection.online}>{t('common.ok')}</button>
-          </div>
-        {/if}
-        {#if telegramLinkable}
-          <button class="ghost tg" onclick={linkTelegram} disabled={!connection.online}>{t('profile.linkTelegram')}</button>
-        {/if}
-      </section>
-
-      <!-- Logout is hidden for now but kept wired — drop `hidden` to re-enable
-           once its entry point is decided; logout() also still runs on an invalid session. -->
-      <button class="logout" hidden onclick={() => logout()}>{t('login.title')} / logout</button>
+          <p class="muted">{t('profile.awayHint')}</p>
+        </fieldset>
+        <label class="check">
+          <input type="checkbox" bind:checked={blockChat} />
+          <span>{t('profile.blockChat')}</span>
+        </label>
+        <label class="check">
+          <input type="checkbox" bind:checked={blockFriendRequests} />
+          <span>{t('profile.blockFriendRequests')}</span>
+        </label>
+        <label class="check">
+          <input type="checkbox" bind:checked={notificationsInAppOnly} />
+          <span>{t('profile.notificationsInAppOnly')}</span>
+        </label>
+        <div class="formacts">
+          <button type="submit" class="btn" disabled={!formValid || !connection.online}>{t('common.save')}</button>
+        </div>
+      </form>
     {/if}
-  </div>
 
-  {#if pendingMerge}
-    <Modal title={t('profile.mergeTitle')} onclose={() => (pendingMerge = null)}>
-      <p>{t('profile.mergeBody', { name: pendingMerge.name, games: pendingMerge.games, friends: pendingMerge.friends })}</p>
-      <p class="warn">{t('profile.mergeIrreversible')}</p>
-      <div class="addrow end">
-        <button class="ghost" onclick={() => (pendingMerge = null)}>{t('common.cancel')}</button>
-        <button class="btn" onclick={confirmMerge} disabled={!connection.online}>{t('profile.mergeConfirm')}</button>
-      </div>
-    </Modal>
+    <!-- Linking & merge. Shown to everyone, including guests, who
+         upgrade by binding their first identity. -->
+    <section class="emailbox">
+      <h3>{t('profile.linkAccount')}</h3>
+      {#if !emailSent}
+        <div class="addrow">
+          <input
+            class:invalid={emailInput.length > 0 && !emailOk}
+            bind:value={emailInput}
+            placeholder={t('login.emailPlaceholder')}
+            type="email"
+          />
+          <button class="ghost" onclick={requestEmail} disabled={!emailOk || !connection.online}>{t('login.sendCode')}</button>
+        </div>
+      {:else}
+        <div class="addrow">
+          <input
+            class="codein"
+            bind:value={codeInput}
+            placeholder={t('profile.emailCode')}
+            inputmode="numeric"
+            maxlength="6"
+          />
+          <button class="btn" onclick={confirmEmail} disabled={!connection.online}>{t('common.ok')}</button>
+        </div>
+      {/if}
+      {#if telegramLinkable}
+        <button class="ghost tg" onclick={linkTelegram} disabled={!connection.online}>{t('profile.linkTelegram')}</button>
+      {/if}
+    </section>
+
+    <!-- Logout is hidden for now but kept wired — drop `hidden` to re-enable
+         once its entry point is decided; logout() also still runs on an invalid session. -->
+    <button class="logout" hidden onclick={() => logout()}>{t('login.title')} / logout</button>
   {/if}
-</Screen>
+</div>
+
+{#if pendingMerge}
+  <Modal title={t('profile.mergeTitle')} onclose={() => (pendingMerge = null)}>
+    <p>{t('profile.mergeBody', { name: pendingMerge.name, games: pendingMerge.games, friends: pendingMerge.friends })}</p>
+    <p class="warn">{t('profile.mergeIrreversible')}</p>
+    <div class="addrow end">
+      <button class="ghost" onclick={() => (pendingMerge = null)}>{t('common.cancel')}</button>
+      <button class="btn" onclick={confirmMerge} disabled={!connection.online}>{t('profile.mergeConfirm')}</button>
+    </div>
+  </Modal>
+{/if}
 
 <style>
   .page {

ui/src/screens/Settings.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import Screen from '../components/Screen.svelte';
   import {
     app,
     setBoardLabels,
@@ -28,64 +27,62 @@
   };
 </script>
 
-<Screen title={t('settings.title')} back="/">
-  <div class="page">
-    {#if !insideTelegram()}
-      <section>
-        <h3>{t('settings.theme')}</h3>
-        <div class="seg">
-          {#each themes as th (th)}
-            <button class="opt" class:active={app.theme === th} onclick={() => setTheme(th)}>
-              {t(themeLabel[th])}
-            </button>
-          {/each}
-        </div>
-      </section>
-    {/if}
-
+<div class="page">
+  {#if !insideTelegram()}
     <section>
-      <h3>{t('settings.language')}</h3>
+      <h3>{t('settings.theme')}</h3>
       <div class="seg">
-        {#each locales as lc (lc)}
-          <button class="opt" class:active={app.locale === lc} onclick={() => setLocalePref(lc)}>
-            {t(lc === 'en' ? 'lang.en' : 'lang.ru')}
+        {#each themes as th (th)}
+          <button class="opt" class:active={app.theme === th} onclick={() => setTheme(th)}>
+            {t(themeLabel[th])}
           </button>
         {/each}
       </div>
     </section>
+  {/if}
 
-    <section>
-      <h3>{t('settings.boardStyle')}</h3>
-      <div class="sub">{t('settings.boardLabels')}</div>
-      <div class="seg">
-        {#each labelModes as lm (lm)}
-          <button class="opt" class:active={app.boardLabels === lm} onclick={() => setBoardLabels(lm)}>
-            {t(labelModeKey[lm])}
-          </button>
-        {/each}
-      </div>
-      <label class="row gridlines">
-        <span>{t('settings.boardLines')}</span>
-        <input
-          type="checkbox"
-          checked={app.boardLines}
-          onchange={(e) => setBoardLines(e.currentTarget.checked)}
-        />
-      </label>
-    </section>
+  <section>
+    <h3>{t('settings.language')}</h3>
+    <div class="seg">
+      {#each locales as lc (lc)}
+        <button class="opt" class:active={app.locale === lc} onclick={() => setLocalePref(lc)}>
+          {t(lc === 'en' ? 'lang.en' : 'lang.ru')}
+        </button>
+      {/each}
+    </div>
+  </section>
 
-    <section>
-      <label class="row">
-        <span>{t('settings.reduceMotion')}</span>
-        <input
-          type="checkbox"
-          checked={app.reduceMotion}
-          onchange={(e) => setReduceMotion(e.currentTarget.checked)}
-        />
-      </label>
-    </section>
-  </div>
-</Screen>
+  <section>
+    <h3>{t('settings.boardStyle')}</h3>
+    <div class="sub">{t('settings.boardLabels')}</div>
+    <div class="seg">
+      {#each labelModes as lm (lm)}
+        <button class="opt" class:active={app.boardLabels === lm} onclick={() => setBoardLabels(lm)}>
+          {t(labelModeKey[lm])}
+        </button>
+      {/each}
+    </div>
+    <label class="row gridlines">
+      <span>{t('settings.boardLines')}</span>
+      <input
+        type="checkbox"
+        checked={app.boardLines}
+        onchange={(e) => setBoardLines(e.currentTarget.checked)}
+      />
+    </label>
+  </section>
+
+  <section>
+    <label class="row">
+      <span>{t('settings.reduceMotion')}</span>
+      <input
+        type="checkbox"
+        checked={app.reduceMotion}
+        onchange={(e) => setReduceMotion(e.currentTarget.checked)}
+      />
+    </label>
+  </section>
+</div>
 
 <style>
   .page {

ui/src/screens/SettingsHub.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import Screen from '../components/Screen.svelte';
+  import TabBar from '../components/TabBar.svelte';
+  import Settings from './Settings.svelte';
+  import Profile from './Profile.svelte';
+  import Friends from './Friends.svelte';
+  import About from './About.svelte';
+  import { app } from '../lib/app.svelte';
+  import { t, type MessageKey } from '../lib/i18n/index.svelte';
+
+  // The Settings hub: a single nav bar + bottom tab bar hosting the Settings / Profile /
+  // Friends / About bodies. Tabs switch in place (no navigation), so the back control
+  // always returns to the lobby. Guests have no social surface, so the Friends tab hides.
+  type SettingsTab = 'settings' | 'profile' | 'friends' | 'about';
+  let { initialTab = 'settings' }: { initialTab?: SettingsTab } = $props();
+
+  const guest = $derived(app.profile?.isGuest ?? true);
+  // The active tab is seeded once from the entry route's tab and then owned locally;
+  // the hub is keyed by route in App.svelte, so initialTab is constant for its lifetime.
+  // svelte-ignore state_referenced_locally
+  let tab = $state<SettingsTab>(initialTab);
+  // A guest who deep-links to the Friends tab falls back to Settings.
+  $effect(() => {
+    if (guest && tab === 'friends') tab = 'settings';
+  });
+
+  const titleKey: Record<SettingsTab, MessageKey> = {
+    settings: 'settings.title',
+    profile: 'profile.title',
+    friends: 'friends.title',
+    about: 'about.title',
+  };
+</script>
+
+<Screen title={t(titleKey[tab])} back="/">
+  {#if tab === 'settings'}
+    <Settings />
+  {:else if tab === 'profile'}
+    <Profile />
+  {:else if tab === 'friends'}
+    <Friends />
+  {:else}
+    <About />
+  {/if}
+
+  {#snippet tabbar()}
+    <TabBar>
+      <button class="tab" class:active={tab === 'settings'} onclick={() => (tab = 'settings')} aria-label={t('settings.title')}>
+        <span class="sq">⚙️</span>
+      </button>
+      <button class="tab" class:active={tab === 'profile'} onclick={() => (tab = 'profile')} aria-label={t('profile.title')}>
+        <span class="sq">👤</span>
+      </button>
+      {#if !guest}
+        <button class="tab" class:active={tab === 'friends'} onclick={() => (tab = 'friends')} aria-label={t('friends.title')}>
+          <span class="sq">🤝{#if app.notifications > 0}<span class="badge">{app.notifications}</span>{/if}</span>
+        </button>
+      {/if}
+      <button class="tab" class:active={tab === 'about'} onclick={() => (tab = 'about')} aria-label={t('about.title')}>
+        <span class="sq">ℹ️</span>
+      </button>
+    </TabBar>
+  {/snippet}
+</Screen>