feat(ui): drop Telegram fullscreen; own back chevron everywhere; hidden debug panel
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 56s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 2m13s
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 56s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 2m13s
Finalises the Telegram Mini App navigation work after on-device testing (Pixel 10 / Android 17 + iOS, fresh beta clients): - Remove requestFullscreen entirely. Immersive fullscreen hid Telegram's native header (and its BackButton) and the Android system swipe-back minimised the app; the owner prefers the windowed full-size (expand) presentation, so the app never requests fullscreen on any platform now. - The app's own back chevron (Header, showBack = !!back) drives back-navigation on every platform; the native Telegram BackButton is dropped — it does not render in the windowed Mini App (backVisible=false on iOS and Android), so relying on it lost back navigation (notably none on iOS). - Replace the temporary always-on diagnostic overlay with a hidden debug panel (components/DebugPanel): ten quick taps on the header title open it; it shows a privacy-safe client diagnostic snapshot (app version, locale, online, userId, Telegram chrome / viewport / SDK state — no secrets, no IP) and shares it via the OS share sheet / clipboard; a tap anywhere except Share dismisses it. - Drop the now-dead telegramRequestFullscreen / telegramBackButton / isTelegramAndroid helpers and the iOS-fullscreen unit test. Telegram has no native non-modal notification API (only modal showPopup / showAlert), so in-app toasts stay ours. Docs: UI_DESIGN.md.
This commit is contained in:
+5
-53
@@ -22,7 +22,6 @@ interface TelegramWebApp {
|
||||
contentSafeAreaInset?: { top: number; bottom: number; left: number; right: number };
|
||||
ready?: () => void;
|
||||
expand?: () => void;
|
||||
requestFullscreen?: () => void;
|
||||
openTelegramLink?: (url: string) => void;
|
||||
openLink?: (url: string) => void;
|
||||
onEvent?: (event: string, handler: () => void) => void;
|
||||
@@ -295,54 +294,6 @@ export function telegramHaptic(kind: Haptic): void {
|
||||
else h.impactOccurred?.(kind);
|
||||
}
|
||||
|
||||
/**
|
||||
* telegramRequestFullscreen asks Telegram to open the Mini App in immersive fullscreen (Bot API
|
||||
* 8.0+), but only on iOS. On Android, fullscreen replaces the native header — and its BackButton —
|
||||
* with a bare close/menu pill: the back control disappears and the Android system swipe-back falls
|
||||
* through to minimising the app instead of navigating, so the app stays windowed there to keep the
|
||||
* native header + BackButton (which also captures the system back). A no-op outside Telegram, on
|
||||
* Android, on desktop, or on clients predating the method.
|
||||
*/
|
||||
export function telegramRequestFullscreen(): void {
|
||||
// TEMP (owner test): fullscreen fully disabled, incl. iOS, to confirm the Android "fullscreen
|
||||
// look" is Telegram's own Mini App presentation, not our requestFullscreen (isFullscreen is
|
||||
// already false on Android). Restore the iOS path after the test:
|
||||
// if (webApp()?.platform === 'ios') webApp()?.requestFullscreen?.();
|
||||
}
|
||||
|
||||
/** isTelegramAndroid reports whether the Mini App runs on a Telegram Android client (reported as
|
||||
* 'android', or 'android_x' for Telegram X). The native header BackButton does not render in the
|
||||
* Android (non-fullscreen) presentation, so back navigation there uses the app's own chevron. */
|
||||
export function isTelegramAndroid(): boolean {
|
||||
const p = webApp()?.platform;
|
||||
return p === 'android' || p === 'android_x';
|
||||
}
|
||||
|
||||
let backHandler: (() => void) | null = null;
|
||||
let lastBackShow = false; // TEMP diag: the last telegramBackButton(show) request
|
||||
|
||||
/**
|
||||
* telegramBackButton shows or hides Telegram's native header back button, wiring its
|
||||
* click to onClick (replacing any previous handler). The app hides its own back chevron
|
||||
* inside Telegram so only the native control shows.
|
||||
*/
|
||||
export function telegramBackButton(show: boolean, onClick?: () => void): void {
|
||||
lastBackShow = show;
|
||||
const b = webApp()?.BackButton;
|
||||
if (!b) return;
|
||||
if (backHandler) b.offClick?.(backHandler);
|
||||
backHandler = null;
|
||||
if (show) {
|
||||
if (onClick) {
|
||||
backHandler = onClick;
|
||||
b.onClick?.(onClick);
|
||||
}
|
||||
b.show?.();
|
||||
} else {
|
||||
b.hide?.();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* startParamFromURL reads a startapp parameter from the page URL — a bot web_app
|
||||
* launch button carries the deep-link there rather than in initDataUnsafe.
|
||||
@@ -488,9 +439,10 @@ export function collectTelegramDiag(): TelegramDiag {
|
||||
}
|
||||
|
||||
/**
|
||||
* telegramChromeDiag is a TEMPORARY on-device readout of Telegram's viewport / fullscreen state,
|
||||
* rendered in the lobby to debug the Android fullscreen-persistence issue (the app still opens
|
||||
* fullscreen on Android even though requestFullscreen is now iOS-only). REMOVE before merge.
|
||||
* telegramChromeDiag returns a compact, privacy-safe readout of Telegram's viewport / chrome state
|
||||
* (platform, version, fullscreen/expanded, viewport geometry, safe-area insets, SDK-load outcome,
|
||||
* back-button state, UA). It feeds the hidden debug panel (components/DebugPanel), opened by tapping
|
||||
* the header title ten times. No secrets: no initData values, no IP.
|
||||
*/
|
||||
export function telegramChromeDiag(): string {
|
||||
const w = webApp();
|
||||
@@ -505,7 +457,7 @@ export function telegramChromeDiag(): string {
|
||||
return [
|
||||
`platform: ${w.platform ?? '—'} version: ${w.version ?? '—'} scheme: ${w.colorScheme ?? '—'}`,
|
||||
`isFullscreen: ${w.isFullscreen} isExpanded: ${w.isExpanded}`,
|
||||
`inTG: ${insideTelegram()} backReq: ${lastBackShow} backPresent: ${!!w.BackButton} backVisible: ${w.BackButton?.isVisible}`,
|
||||
`inTG: ${insideTelegram()} sdkLoad: ${sdkLoadOutcome} backPresent: ${!!w.BackButton} backVisible: ${w.BackButton?.isVisible}`,
|
||||
`innerH: ${n(win?.innerHeight)} outerH: ${n(win?.outerHeight)} screenH: ${n(scr?.height)} availH: ${n(scr?.availHeight)}`,
|
||||
`screenY: ${n(win?.screenY)} vv.offTop: ${n(vv?.offsetTop)} vv.h: ${n(vv?.height)}`,
|
||||
`tgViewportH: ${n(w.viewportHeight)} stableH: ${n(w.viewportStableHeight)}`,
|
||||
|
||||
Reference in New Issue
Block a user