UI: tab-bar navigation — drop the hamburger
CI / changes (pull_request) Successful in 1s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 39s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 59s
CI / changes (pull_request) Successful in 1s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 39s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 59s
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.
This commit is contained in:
Ilia Denisov
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user