feat: add fullscreen QR code for subscription connection

- New ConnectionQR page with fullscreen QR display (no modal)
- QR button in InstallationGuide header next to platform selector
- Respects hideLink setting: shows URL below QR only when visible
- i18n translations for ru, en, zh, fa
This commit is contained in:
Fringg
2026-02-27 03:14:15 +03:00
parent 821e991f51
commit 4d14e3e806
10 changed files with 189 additions and 4 deletions

View File

@@ -43,6 +43,7 @@ interface Props {
onOpenDeepLink: (url: string) => void;
isTelegramWebApp: boolean;
onGoBack: () => void;
onOpenQR?: () => void;
}
export default function InstallationGuide({
@@ -50,6 +51,7 @@ export default function InstallationGuide({
onOpenDeepLink,
isTelegramWebApp,
onGoBack,
onOpenQR,
}: Props) {
const { t, i18n } = useTranslation();
const { isLight } = useTheme();
@@ -206,6 +208,31 @@ export default function InstallationGuide({
<h2 className="flex-1 text-lg font-bold text-dark-100">
{getBaseTranslation('installationGuideHeader', 'subscription.connection.title')}
</h2>
{appConfig.subscriptionUrl && onOpenQR && (
<button
onClick={() => onOpenQR()}
className="flex h-10 w-10 items-center justify-center rounded-xl border border-dark-700 bg-dark-800 text-dark-200 transition-colors hover:border-dark-600"
>
<svg
className="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={1.5}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M6.75 6.75h.75v.75h-.75v-.75zM6.75 16.5h.75v.75h-.75v-.75zM16.5 6.75h.75v.75H16.5v-.75zM13.5 13.5h.75v.75h-.75v-.75zM13.5 19.5h.75v.75h-.75v-.75zM19.5 13.5h.75v.75h-.75v-.75zM19.5 19.5h.75v.75h-.75v-.75zM16.5 16.5h3v3h-3v-3z"
/>
</svg>
</button>
)}
{availablePlatforms.length > 1 && (
<div className="relative flex items-center">
{currentPlatformSvg && (