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.
2026-06-11 14:13:54 +02:00
parent f8b6b7f2e3
commit fc1261e078
28 changed files with 1034 additions and 748 deletions
@@ -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 {