fix(ui): own back chevron in Telegram on all platforms; drop the native BackButton
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 55s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m30s
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 55s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m30s
The Telegram native BackButton does not render in the windowed Mini App (the owner's emulator + a fresh beta TG report backVisible=false on both iOS and Android), so relying on it lost back navigation — iOS had no back affordance at all. Show the app's own back chevron whenever there is a back target, on every platform (Header showBack = !!back), and drop the now-dead native BackButton effect (App.svelte). The native close control stays — a windowed Mini App cannot hide it (no Telegram API). WIP: the temp lobby diagnostic overlay and the requestFullscreen no-op remain for the owner's emulator test; finalize after confirmation.
This commit is contained in:
+2
-15
@@ -2,9 +2,9 @@
|
|||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import { cubicOut } from 'svelte/easing';
|
import { cubicOut } from 'svelte/easing';
|
||||||
import { app, bootstrap } from './lib/app.svelte';
|
import { app, bootstrap } from './lib/app.svelte';
|
||||||
import { navigate, router, type RouteName } from './lib/router.svelte';
|
import { router, type RouteName } from './lib/router.svelte';
|
||||||
import { t } from './lib/i18n/index.svelte';
|
import { t } from './lib/i18n/index.svelte';
|
||||||
import { insideTelegram, telegramBackButton, telegramChromeDiag } from './lib/telegram';
|
import { insideTelegram, telegramChromeDiag } from './lib/telegram';
|
||||||
import Toast from './components/Toast.svelte';
|
import Toast from './components/Toast.svelte';
|
||||||
import Splash from './components/Splash.svelte';
|
import Splash from './components/Splash.svelte';
|
||||||
import StaleInviteModal from './components/StaleInviteModal.svelte';
|
import StaleInviteModal from './components/StaleInviteModal.svelte';
|
||||||
@@ -30,19 +30,6 @@
|
|||||||
// another screen is not covered.
|
// another screen is not covered.
|
||||||
const routeIsLobby = $derived(router.route.name === 'lobby');
|
const routeIsLobby = $derived(router.route.name === 'lobby');
|
||||||
|
|
||||||
// Inside Telegram, drive its native header back button: show it on any sub-screen
|
|
||||||
// (everything returns to the lobby root), hide it on the lobby/login. The app's own
|
|
||||||
// back chevron is hidden in Telegram (Header.svelte) so only the native one shows.
|
|
||||||
$effect(() => {
|
|
||||||
if (!insideTelegram()) return;
|
|
||||||
const r = router.route;
|
|
||||||
// The chat / check sub-screens step back to their game; every other sub-screen to the lobby.
|
|
||||||
let target = '/';
|
|
||||||
if (r.name === 'gameChat' || r.name === 'gameCheck') target = `/game/${r.params.id}`;
|
|
||||||
else if (r.name === 'feedback') target = '/about'; // back to the Settings → Info tab
|
|
||||||
telegramBackButton(r.name !== 'lobby' && r.name !== 'login', () => navigate(target));
|
|
||||||
});
|
|
||||||
|
|
||||||
// Screen transitions: the lobby is the navigation root. Entering a screen from the
|
// Screen transitions: the lobby is the navigation root. Entering a screen from the
|
||||||
// lobby slides it in from the right (forward); returning to the lobby slides the
|
// lobby slides it in from the right (forward); returning to the lobby slides the
|
||||||
// screen out to the right and reveals the lobby (back). Transitions are local, so
|
// screen out to the right and reveals the lobby (back). Transitions are local, so
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { navigate } from '../lib/router.svelte';
|
import { navigate } from '../lib/router.svelte';
|
||||||
import { insideTelegram, isTelegramAndroid } from '../lib/telegram';
|
|
||||||
import { connection } from '../lib/connection.svelte';
|
import { connection } from '../lib/connection.svelte';
|
||||||
import { t } from '../lib/i18n/index.svelte';
|
import { t } from '../lib/i18n/index.svelte';
|
||||||
import { app } from '../lib/app.svelte';
|
import { app } from '../lib/app.svelte';
|
||||||
@@ -9,10 +8,10 @@
|
|||||||
|
|
||||||
let { title, back, grow = false }: { title: string; back?: string; 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
|
// The app always shows its own back chevron when there is a back target — on every platform, in
|
||||||
// own chevron is hidden to avoid two back affordances — except on Android, where the native
|
// and out of Telegram. The native Telegram BackButton is not used: it does not render reliably in
|
||||||
// BackButton does not render in the (non-fullscreen) presentation, so the app shows its own.
|
// the windowed Mini App (relying on it would lose back navigation there).
|
||||||
const showBack = $derived(!!back && (!insideTelegram() || isTelegramAndroid()));
|
const showBack = $derived(!!back);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<header class="nav" class:grow>
|
<header class="nav" class:grow>
|
||||||
|
|||||||
Reference in New Issue
Block a user