fix(ui): mobile in-app WebView polish (tap-flash, VK haptics, swipe-back)
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 57s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m13s

- Tap-highlight: add -webkit-tap-highlight-color: transparent on #app.
  Android in-app WebViews (Telegram, VK) flashed a momentary selection-like
  box on tappable nodes on tap — seen on the header title and the back
  chevron; user-select (already none) does not govern it. Inherited, so
  this clears it app-wide.

- VK haptics: mirror the Telegram haptic set on VK via VK Bridge taptic
  (impact / notification / selection), routed through a new shared
  lib/haptics.ts dispatcher. VK users previously got no haptics; the game
  and error call sites now fire haptic() instead of telegramHaptic().

- VK swipe-back: disable VK's horizontal swipe-back at launch
  (VKWebAppSetSwipeSettings history:false) so it does not fight the app's
  own edge-swipe-back and on-board tile drag — parity with Telegram's
  disabled vertical swipes; the app owns navigation via its back chevron.

Docs: UI_DESIGN (no-select / tap-highlight, VK integration).
This commit is contained in:
Ilia Denisov
2026-06-30 23:00:19 +02:00
parent adf7c55695
commit 71c3411276
6 changed files with 80 additions and 10 deletions
+6 -3
View File
@@ -23,7 +23,6 @@ import {
telegramSafeAreaInset,
telegramDisableVerticalSwipes,
telegramShowSettingsButton,
telegramHaptic,
telegramLaunch,
type TelegramLaunch,
telegramOnEvent,
@@ -32,7 +31,8 @@ import {
telegramCloudGet,
telegramCloudSet,
} from './telegram';
import { onVKPath, insideVK, vkInit, vkLaunchParams, vkUserName, vkStartParam, vkOnScheme, vkOnInsets } from './vk';
import { onVKPath, insideVK, vkInit, vkDisableSwipeBack, vkLaunchParams, vkUserName, vkStartParam, vkOnScheme, vkOnInsets } from './vk';
import { haptic } from './haptics';
import { CLOUD_PREFS_KEY, decodeClientPrefs, encodeClientPrefs } from './cloudprefs';
import { parseStartParam } from './deeplink';
import {
@@ -281,7 +281,7 @@ export function handleError(err: unknown): void {
return;
}
if (isConnectionCode(code) || !connection.online) return;
telegramHaptic('error');
haptic('error');
showToast(t(code ? errorKey(code) : 'error.generic'), 'error');
}
@@ -705,6 +705,9 @@ export async function bootstrap(): Promise<void> {
root.style.setProperty('--tg-safe-right', `max(env(safe-area-inset-right, 0px), ${i.right}px)`);
});
await vkInit();
// The app owns navigation (its own back chevron), so silence VK's horizontal swipe-back to keep
// it off our edge-swipe-back and on-board tile drag — parity with telegramDisableVerticalSwipes.
void vkDisableSwipeBack();
await bootVK();
app.ready = true;
return;
+16
View File
@@ -0,0 +1,16 @@
// Cross-platform haptic feedback. The app fires one Haptic vocabulary from its interaction code
// (tile placement, submit, errors); this routes it to whichever host Mini App is in play —
// Telegram's HapticFeedback or VK Bridge's taptic events — and stays silent in a plain browser.
import { type Haptic, telegramHaptic } from './telegram';
import { insideVK, vkHaptic } from './vk';
/**
* haptic fires the host Mini App's haptic feedback for kind: Telegram's HapticFeedback inside
* Telegram and VK Bridge's taptic inside VK; a no-op in an ordinary browser. Both backends
* self-guard off their platform, so this is always safe to call. The VK send is fire-and-forget.
*/
export function haptic(kind: Haptic): void {
telegramHaptic(kind);
if (insideVK()) void vkHaptic(kind);
}
+38
View File
@@ -6,6 +6,8 @@
// (VKWebAppGetUserInfo, since VK omits it from the signed launch params). Every helper is safe to
// call outside VK.
import type { Haptic } from './telegram';
async function bridge() {
return (await import('@vkontakte/vk-bridge')).default;
}
@@ -160,3 +162,39 @@ export async function vkOnInsets(handler: (insets: VKInsets) => void): Promise<v
// Outside VK / bridge unavailable: the CSS env() safe-area fallback applies.
}
}
/**
* vkHaptic fires a VK Bridge haptic mirroring the Telegram set: a selection tick
* (VKWebAppTapticSelectionChanged), a success/warning/error notification
* (VKWebAppTapticNotificationOccurred) or a light/medium/heavy impact (VKWebAppTapticImpactOccurred).
* Best-effort and a no-op outside VK or on a client without taptic support (the send rejects and is
* swallowed), so callers fire it unconditionally.
*/
export async function vkHaptic(kind: Haptic): Promise<void> {
try {
const b = await bridge();
if (kind === 'select') {
await b.send('VKWebAppTapticSelectionChanged', {});
} else if (kind === 'success' || kind === 'warning' || kind === 'error') {
await b.send('VKWebAppTapticNotificationOccurred', { type: kind });
} else {
await b.send('VKWebAppTapticImpactOccurred', { style: kind });
}
} catch {
// Outside VK / no taptic support: silent, like the Telegram haptic off-platform.
}
}
/**
* vkDisableSwipeBack turns off VK's horizontal swipe-back gesture (VKWebAppSetSwipeSettings with
* history:false) so it does not fight the app's own edge-swipe-back and on-board tile drag — the
* app owns navigation through its back chevron, as on Telegram (telegramDisableVerticalSwipes).
* Best-effort; a no-op outside VK or on a client without the method.
*/
export async function vkDisableSwipeBack(): Promise<void> {
try {
await (await bridge()).send('VKWebAppSetSwipeSettings', { history: false });
} catch {
// Outside VK / unsupported: VK's default gesture handling stays as-is.
}
}