From 39bfef58d0db9ebbe2bd27d4e7f327f02932b81b Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Wed, 3 Jun 2026 11:07:45 +0300
Subject: [PATCH 01/36] =?UTF-8?q?fix(subscriptions):=20=C2=AB+=20=D0=9A?=
 =?UTF-8?q?=D1=83=D0=BF=D0=B8=D1=82=D1=8C=20=D0=B5=D1=89=D1=91=C2=BB=20?=
 =?UTF-8?q?=D1=82=D0=BE=D0=BB=D1=8C=D0=BA=D0=BE=20=D0=BF=D1=80=D0=B8=20?=
 =?UTF-8?q?=D0=BF=D0=BB=D0=B0=D1=82=D0=BD=D0=BE=D0=B9=20=D0=BF=D0=BE=D0=B4?=
 =?UTF-8?q?=D0=BF=D0=B8=D1=81=D0=BA=D0=B5,=20=D1=8F=D0=B2=D0=BD=D1=8B?=
 =?UTF-8?q?=D0=B9=20CTA=20=D0=BF=D0=BE=D0=BA=D1=83=D0=BF=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

В мульти-тарифе кнопка «+ Купить ещё подписку» висела всегда, когда есть
хоть какая-то подписка — даже если это только триал или всё истёкшее.
Теперь она показывается только при наличии НАСТОЯЩЕЙ платной активной
подписки (hasActivePaid: не триал + status active/limited).

А «Посмотреть тарифы и купить подписку» из тусклой (пунктир + opacity-60,
спрятана в триал-блоке) стала ЯВНОЙ primary-кнопкой (solid accent) и
показывается, когда платной активной подписки ещё нет (триал/истёкшие/
новый юзер) — мы продаём подписки, путь к покупке должен быть очевиден.
Затронуты Dashboard и Subscriptions. Добавлен ключ subscriptions.browsePlans
(раньше рендерился только inline-фолбэк) в 4 локали.
---
 src/locales/en.json         |  1 +
 src/locales/fa.json         |  1 +
 src/locales/ru.json         |  1 +
 src/locales/zh.json         |  1 +
 src/pages/Dashboard.tsx     | 32 +++++++++++++++++++++++++-------
 src/pages/Subscriptions.tsx | 25 ++++++++++++++++++++++---
 6 files changed, 51 insertions(+), 10 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index 41c7c93..81f4f61 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -5103,6 +5103,7 @@
   "subscriptions": {
     "buy": "Buy subscription",
     "buyAnother": "Buy another subscription",
+    "browsePlans": "View plans and subscribe",
     "empty": "You have no subscriptions yet",
     "emptyDesc": "Choose a tariff to get started",
     "title": "My subscriptions"
diff --git a/src/locales/fa.json b/src/locales/fa.json
index 00ef8c1..c471622 100644
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -4737,6 +4737,7 @@
   "subscriptions": {
     "buy": "خرید اشتراک",
     "buyAnother": "خرید اشتراک دیگر",
+    "browsePlans": "مشاهده تعرفه‌ها و خرید اشتراک",
     "empty": "هنوز اشتراکی ندارید",
     "emptyDesc": "برای شروع تعرفه‌ای انتخاب کنید",
     "title": "اشتراک‌های من"
diff --git a/src/locales/ru.json b/src/locales/ru.json
index d7bd867..3fefdf8 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -5665,6 +5665,7 @@
   "subscriptions": {
     "buy": "Купить подписку",
     "buyAnother": "Купить ещё подписку",
+    "browsePlans": "Посмотреть тарифы и купить подписку",
     "empty": "У вас пока нет подписок",
     "emptyDesc": "Выберите тариф, чтобы начать пользоваться сервисом",
     "title": "Мои подписки"
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 9143769..8e59695 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -4736,6 +4736,7 @@
   "subscriptions": {
     "buy": "购买订阅",
     "buyAnother": "再购买一个订阅",
+    "browsePlans": "查看套餐并订阅",
     "empty": "您还没有订阅",
     "emptyDesc": "选择套餐以开始使用",
     "title": "我的订阅"
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index 18db455..c5c87ed 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -198,6 +198,12 @@ export default function Dashboard() {
     ? multiSubData !== undefined && (multiSubData.subscriptions?.length ?? 0) === 0
     : subscriptionResponse?.has_subscription === false && !subLoading;
 
+  // Есть ли НАСТОЯЩАЯ (платная, не триал) живая подписка — от этого зависит CTA:
+  // «+ Купить ещё» только при наличии платной; иначе явная «Посмотреть тарифы».
+  const hasActivePaid = (multiSubData?.subscriptions ?? []).some(
+    (s) => !s.is_trial && (s.status === 'active' || s.status === 'limited'),
+  );
+
   // Show onboarding for new users after data loads
   useEffect(() => {
     if (!isOnboardingCompleted && !subLoading && !refLoading && !blockingType) {
@@ -299,12 +305,23 @@ export default function Dashboard() {
               {t('dashboard.showAll', 'Показать все')} ({multiSubData.subscriptions.length})
             </Link>
           )}
-          <Link
-            to="/subscription/purchase"
-            className="flex w-full items-center justify-center gap-2 rounded-2xl bg-accent-500/15 p-3.5 text-sm font-medium text-accent-400 transition-all hover:bg-accent-500/25"
-          >
-            <span className="text-base">+</span> {t('subscriptions.buyAnother', 'Купить ещё тариф')}
-          </Link>
+          {hasActivePaid ? (
+            <Link
+              to="/subscription/purchase"
+              className="flex w-full items-center justify-center gap-2 rounded-2xl bg-accent-500/15 p-3.5 text-sm font-medium text-accent-400 transition-all hover:bg-accent-500/25"
+            >
+              <span className="text-base">+</span>{' '}
+              {t('subscriptions.buyAnother', 'Купить ещё тариф')}
+            </Link>
+          ) : (
+            <Link
+              to="/subscription/purchase"
+              className="flex w-full items-center justify-center gap-2 rounded-2xl bg-accent-500 p-3.5 text-sm font-semibold text-white transition-colors hover:bg-accent-600"
+            >
+              <span className="text-base">+</span>{' '}
+              {t('subscriptions.browsePlans', 'Посмотреть тарифы и купить подписку')}
+            </Link>
+          )}
         </div>
       )}
 
@@ -360,8 +377,9 @@ export default function Dashboard() {
               (вход по умолчанию) юзер оставался заперт (Telegram-баг #605056/#605063). */}
           <Link
             to="/subscription/purchase"
-            className="flex w-full items-center justify-center rounded-2xl border border-dashed border-white/15 p-3.5 text-sm font-medium opacity-60 transition-opacity hover:opacity-90"
+            className="flex w-full items-center justify-center gap-2 rounded-2xl bg-accent-500 p-3.5 text-sm font-semibold text-white transition-colors hover:bg-accent-600"
           >
+            <span className="text-base">+</span>{' '}
             {t('subscriptions.browsePlans', 'Посмотреть тарифы и купить подписку')}
           </Link>
         </div>
diff --git a/src/pages/Subscriptions.tsx b/src/pages/Subscriptions.tsx
index 67b64e8..03d33b4 100644
--- a/src/pages/Subscriptions.tsx
+++ b/src/pages/Subscriptions.tsx
@@ -62,6 +62,12 @@ export default function Subscriptions() {
   const subscriptions = data?.subscriptions ?? [];
   const isMultiTariff = data?.multi_tariff_enabled ?? false;
   const hasNoSubscriptions = !isLoading && subscriptions.length === 0;
+  // Есть ли хотя бы одна НАСТОЯЩАЯ (платная, не триал) живая подписка. От этого
+  // зависит CTA: «+ Купить ещё» — только если уже есть платная; иначе показываем
+  // явную «Посмотреть тарифы и купить подписку» (триал/истёкшие — это ещё не покупка).
+  const hasActivePaid = subscriptions.some(
+    (s) => !s.is_trial && (s.status === 'active' || s.status === 'limited'),
+  );
 
   // Если у юзера нет подписок — проверяем доступность триала, иначе
   // (в multi-tariff) ему вообще негде увидеть оффер.
@@ -107,7 +113,8 @@ export default function Subscriptions() {
         <h1 className="text-2xl font-bold" style={{ color: g.text }}>
           {t('subscriptions.title', 'Мои подписки')}
         </h1>
-        {!isLoading && subscriptions.length > 0 && (
+        {/* «+ Купить ещё» — только если уже есть платная активная подписка */}
+        {!isLoading && hasActivePaid && (
           <button
             onClick={() => navigate('/subscription/purchase')}
             className="flex items-center gap-1.5 rounded-xl px-4 py-2 text-sm font-medium transition-colors"
@@ -123,6 +130,18 @@ export default function Subscriptions() {
         )}
       </div>
 
+      {/* Есть подписки, но платной активной нет (только триал/истёкшие) —
+          даём ЯВНУЮ primary-кнопку покупки: мы продаём подписки. */}
+      {!isLoading && subscriptions.length > 0 && !hasActivePaid && (
+        <button
+          onClick={() => navigate('/subscription/purchase')}
+          className="flex w-full items-center justify-center gap-2 rounded-2xl bg-accent-500 p-3.5 text-sm font-semibold text-white transition-colors hover:bg-accent-600"
+        >
+          <PlusIcon className="h-5 w-5" />
+          {t('subscriptions.browsePlans', 'Посмотреть тарифы и купить подписку')}
+        </button>
+      )}
+
       {/* Loading */}
       {isLoading && (
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
@@ -152,9 +171,9 @@ export default function Subscriptions() {
               (Telegram-баг #605056/#605063). */}
           <button
             onClick={() => navigate('/subscription/purchase')}
-            className="w-full rounded-xl border px-6 py-3 text-sm font-medium transition-colors"
-            style={{ background: g.innerBg, borderColor: g.cardBorder, color: g.text }}
+            className="flex w-full items-center justify-center gap-2 rounded-xl bg-accent-500 px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-accent-600"
           >
+            <PlusIcon className="h-5 w-5" />
             {t('subscriptions.browsePlans', 'Посмотреть тарифы и купить подписку')}
           </button>
         </div>

From cecfe7ec038a26eb580404957e70859e0df27e26 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Wed, 3 Jun 2026 11:17:00 +0300
Subject: [PATCH 02/36] =?UTF-8?q?fix(dashboard):=20=D1=83=D0=B1=D1=80?=
 =?UTF-8?q?=D0=B0=D1=82=D1=8C=20=D0=B4=D1=83=D0=B1=D0=BB=D1=8C=20=D0=BA?=
 =?UTF-8?q?=D0=BD=D0=BE=D0=BF=D0=BA=D0=B8=20=D0=BF=D0=BE=D0=BA=D1=83=D0=BF?=
 =?UTF-8?q?=D0=BA=D0=B8=20=D0=BF=D1=80=D0=B8=20=D0=BF=D1=83=D1=81=D1=82?=
 =?UTF-8?q?=D0=BE=D0=BC=20=D1=81=D0=BF=D0=B8=D1=81=D0=BA=D0=B5=20=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=B4=D0=BF=D0=B8=D1=81=D0=BE=D0=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Мульти-тариф блок рендерился даже при пустом списке подписок (пустой
массив truthy) — показывал заголовок «Подписки» и кнопку покупки, которая
дублировала кнопку из блока «нет подписок» (триал-оффер). Получалось две
одинаковые «Посмотреть тарифы и купить подписку».

Теперь мульти-тариф блок рендерится только когда подписки реально есть
(length > 0), а блок «нет подписок» показывает триал (если доступен) и
ВСЕГДА одну явную кнопку покупки — заодно закрывает случай «нет подписок и
триал недоступен» (раньше его прикрывал пустой мульти-тариф блок).
---
 src/pages/Dashboard.tsx | 34 +++++++++++++++++++---------------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index c5c87ed..41557a5 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -279,8 +279,10 @@ export default function Dashboard() {
       {/* Pending Gift Activations */}
       {pendingGifts && pendingGifts.length > 0 && <PendingGiftCard gifts={pendingGifts} />}
 
-      {/* Multi-tariff: show subscription cards (max 3) */}
-      {isMultiTariff && multiSubData?.subscriptions && (
+      {/* Multi-tariff: show subscription cards (max 3) — только когда подписки
+          реально есть. Пустой случай (нет подписок) ведёт блок ниже (триал/покупка),
+          иначе кнопка покупки дублировалась. */}
+      {isMultiTariff && multiSubData?.subscriptions && multiSubData.subscriptions.length > 0 && (
         <div className="space-y-3">
           <div className="flex items-center justify-between px-1">
             <span className="text-sm font-medium opacity-60">
@@ -361,20 +363,22 @@ export default function Dashboard() {
         </>
       )}
 
-      {/* Trial Activation */}
-      {hasNoSubscription && !trialLoading && trialInfo?.is_available && (
+      {/* Нет подписок: показываем триал (если доступен) и ВСЕГДА одну явную
+          кнопку покупки. Триал не обязателен, чтобы попасть в витрину — раньше
+          при доступном триале это был единственный экран без кнопки покупки
+          (Telegram-баг #605056/#605063). Единственная кнопка тут (вместо дубля
+          с мульти-тариф блоком). */}
+      {hasNoSubscription && !trialLoading && (
         <div className="space-y-3">
-          <TrialOfferCard
-            trialInfo={trialInfo}
-            balanceKopeks={balanceData?.balance_kopeks || 0}
-            balanceRubles={balanceData?.balance_rubles || 0}
-            activateTrialMutation={activateTrialMutation}
-            trialError={trialError}
-          />
-          {/* Новый пользователь не обязан активировать триал, чтобы попасть в
-              витрину — даём явный путь к покупке подписки. Раньше при доступном
-              триале это был единственный экран без кнопки покупки, и на дашборде
-              (вход по умолчанию) юзер оставался заперт (Telegram-баг #605056/#605063). */}
+          {trialInfo?.is_available && (
+            <TrialOfferCard
+              trialInfo={trialInfo}
+              balanceKopeks={balanceData?.balance_kopeks || 0}
+              balanceRubles={balanceData?.balance_rubles || 0}
+              activateTrialMutation={activateTrialMutation}
+              trialError={trialError}
+            />
+          )}
           <Link
             to="/subscription/purchase"
             className="flex w-full items-center justify-center gap-2 rounded-2xl bg-accent-500 p-3.5 text-sm font-semibold text-white transition-colors hover:bg-accent-600"

From 5a6e4589c866a168656285deae214f178491cb12 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Wed, 3 Jun 2026 11:54:23 +0300
Subject: [PATCH 03/36] =?UTF-8?q?fix(landing):=20=D0=B7=D0=B0=D0=B3=D0=BE?=
 =?UTF-8?q?=D0=BB=D0=BE=D0=B2=D0=BE=D0=BA=20=C2=ABLoading...=C2=BB=20?=
 =?UTF-8?q?=D0=B8=20=D0=BF=D1=83=D1=81=D1=82=D0=B0=D1=8F=20=D0=B8=D0=BA?=
 =?UTF-8?q?=D0=BE=D0=BD=D0=BA=D0=B0=20=D0=B2=D0=BA=D0=BB=D0=B0=D0=B4=D0=BA?=
 =?UTF-8?q?=D0=B8=20=D0=BD=D0=B0=20=D0=BB=D0=B5=D0=BD=D0=B4=D0=B8=D0=BD?=
 =?UTF-8?q?=D0=B3=D0=B0=D1=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Публичный лендинг (QuickPurchase) рендерится вне AppShell, а useBranding
с заголовком/иконкой завязан на авторизацию — поэтому на лендинге вкладка
оставалась с дефолтным «Loading...» из index.html (тайтл обновлялся только при
заданном meta_title) и без favicon (href="data:,").

- index.html: нейтральная дефолтная иконка-монограмма вместо пустого data-URI
  и тайтл «VPN» вместо «Loading...».
- QuickPurchase: тайтл берётся из meta_title || title лендинга; favicon
  ставится из брендинга (кастомный лого-блоб или буквенная монограмма), брендинг
  тянется из публичного эндпоинта.
- favicon-хелперы вынесены в utils/favicon.ts; useBranding переведён на них
  (DRY) + добавлен буквенный фолбэк, чтобы иконка была всегда.
- Тип LandingTariff дополнен is_daily/daily_price_kopeks (синхронно с бэком).
---
 index.html                  | 14 +++++++-----
 src/api/landings.ts         |  3 +++
 src/hooks/useBranding.ts    | 16 +++++---------
 src/pages/QuickPurchase.tsx | 44 +++++++++++++++++++++++++++++++++----
 src/utils/favicon.ts        | 35 +++++++++++++++++++++++++++++
 5 files changed, 92 insertions(+), 20 deletions(-)
 create mode 100644 src/utils/favicon.ts

diff --git a/index.html b/index.html
index 6c22bd0..e48da2d 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,10 @@
 <html lang="ru" class="dark">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="data:," />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2064%2064'%3E%3Crect%20width='64'%20height='64'%20rx='14'%20fill='%230a0f1a'/%3E%3Ctext%20x='50%25'%20y='50%25'%20font-family='Manrope,Arial,sans-serif'%20font-size='38'%20font-weight='700'%20fill='%23ffffff'%20text-anchor='middle'%20dominant-baseline='central'%3EV%3C/text%3E%3C/svg%3E"
+    />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
@@ -12,14 +15,14 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <meta name="format-detection" content="telephone=no" />
     <meta name="referrer" content="strict-origin-when-cross-origin" />
-    <title>Loading...</title>
+    <title>VPN</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700&display=swap"
       rel="stylesheet"
       media="print"
-      onload="this.media='all'"
+      onload="this.media = 'all'"
     />
     <noscript>
       <link
@@ -29,8 +32,9 @@
     </noscript>
     <script>
       // Load Telegram Web App script only inside Telegram environment
-      (function() {
-        var isTelegram = window.TelegramWebviewProxy ||
+      (function () {
+        var isTelegram =
+          window.TelegramWebviewProxy ||
           location.hash.indexOf('tgWebApp') !== -1 ||
           location.search.indexOf('tgWebApp') !== -1;
         if (isTelegram) {
diff --git a/src/api/landings.ts b/src/api/landings.ts
index 17e7d69..630d24c 100644
--- a/src/api/landings.ts
+++ b/src/api/landings.ts
@@ -25,6 +25,9 @@ export interface LandingTariff {
   device_limit: number;
   tier_level: number;
   periods: LandingTariffPeriod[];
+  /** Daily tariff: the single purchasable period is 1 day, priced per day. */
+  is_daily?: boolean;
+  daily_price_kopeks?: number;
 }
 
 export interface LandingPaymentMethodSubOption {
diff --git a/src/hooks/useBranding.ts b/src/hooks/useBranding.ts
index c561600..2966848 100644
--- a/src/hooks/useBranding.ts
+++ b/src/hooks/useBranding.ts
@@ -9,6 +9,7 @@ import {
   preloadLogo,
   isLogoPreloaded,
 } from '@/api/branding';
+import { setFavicon, letterFaviconDataUri } from '@/utils/favicon';
 
 const FALLBACK_NAME = import.meta.env.VITE_APP_NAME || 'Cabinet';
 const FALLBACK_LOGO = import.meta.env.VITE_APP_LOGO || 'V';
@@ -42,18 +43,11 @@ export function useBranding() {
     document.title = appName || 'VPN';
   }, [appName]);
 
-  // Update favicon
+  // Update favicon — custom logo when available, else a brand-letter monogram
+  // so the tab always carries an icon instead of the browser default.
   useEffect(() => {
-    if (!logoUrl) return;
-
-    const link =
-      document.querySelector<HTMLLinkElement>("link[rel*='icon']") ||
-      document.createElement('link');
-    link.type = 'image/x-icon';
-    link.rel = 'shortcut icon';
-    link.href = logoUrl;
-    document.head.appendChild(link);
-  }, [logoUrl]);
+    setFavicon(logoUrl || letterFaviconDataUri(logoLetter));
+  }, [logoUrl, logoLetter]);
 
   // Fullscreen setting from server
   const { data: fullscreenSetting } = useQuery({
diff --git a/src/pages/QuickPurchase.tsx b/src/pages/QuickPurchase.tsx
index 6504a8a..3977310 100644
--- a/src/pages/QuickPurchase.tsx
+++ b/src/pages/QuickPurchase.tsx
@@ -7,6 +7,13 @@ import { fireAnalyticsEvent, getYandexCid } from '../hooks/useAnalyticsCounters'
 import { motion, AnimatePresence } from 'framer-motion';
 import DOMPurify from 'dompurify';
 import { landingApi } from '../api/landings';
+import {
+  brandingApi,
+  getCachedBranding,
+  setCachedBranding,
+  preloadLogo,
+  getLogoBlobUrl,
+} from '../api/branding';
 import type {
   LandingConfig,
   LandingTariff,
@@ -20,6 +27,7 @@ import LanguageSwitcher from '../components/LanguageSwitcher';
 import { cn } from '../lib/utils';
 import { getApiErrorMessage } from '../utils/api-error';
 import { formatPrice } from '../utils/format';
+import { setFavicon, letterFaviconDataUri } from '../utils/favicon';
 import { useCurrency } from '../hooks/useCurrency';
 
 function detectContactType(value: string): 'email' | 'telegram' {
@@ -772,6 +780,31 @@ export default function QuickPurchase() {
     retry: 1,
   });
 
+  // Public branding — drives the favicon on this standalone landing page.
+  // The cabinet's useBranding hook is auth-gated and AppShell-only, so a public
+  // landing would otherwise keep the empty index.html favicon. The branding
+  // endpoint is public; logo is preloaded as a blob to keep the backend URL out
+  // of the DOM (same pattern as the authenticated app).
+  const { data: branding } = useQuery({
+    queryKey: ['branding'],
+    queryFn: async () => {
+      const data = await brandingApi.getBranding();
+      setCachedBranding(data);
+      await preloadLogo(data);
+      return data;
+    },
+    initialData: getCachedBranding() ?? undefined,
+    initialDataUpdatedAt: 0,
+    staleTime: 60_000,
+    retry: 1,
+  });
+
+  useEffect(() => {
+    if (!branding) return;
+    const logoUrl = branding.has_custom_logo ? getLogoBlobUrl() : null;
+    setFavicon(logoUrl || letterFaviconDataUri(branding.logo_letter));
+  }, [branding]);
+
   const [discountExpired, setDiscountExpired] = useState(false);
 
   const handleDiscountExpired = useCallback(() => {
@@ -900,15 +933,18 @@ export default function QuickPurchase() {
     }
   }, [visibleTariffs, selectedTariffId]);
 
-  // SEO: set document title
+  // SEO: set document title. Fall back to the landing's own title when no
+  // dedicated meta_title is set — otherwise the tab keeps the static
+  // index.html "VPN" placeholder and never reflects the landing.
   useEffect(() => {
-    if (!config?.meta_title) return;
+    const pageTitle = config?.meta_title || config?.title;
+    if (!pageTitle) return;
     const prev = document.title;
-    document.title = config.meta_title;
+    document.title = pageTitle;
     return () => {
       document.title = prev;
     };
-  }, [config?.meta_title]);
+  }, [config?.meta_title, config?.title]);
 
   // SEO: set meta description
   useEffect(() => {
diff --git a/src/utils/favicon.ts b/src/utils/favicon.ts
new file mode 100644
index 0000000..dbbdbc7
--- /dev/null
+++ b/src/utils/favicon.ts
@@ -0,0 +1,35 @@
+/**
+ * Favicon helpers.
+ *
+ * The static fallback in index.html is a neutral monogram so the tab is never
+ * left without an icon. Once branding is known we override it with the custom
+ * logo (or a brand-letter monogram) via {@link setFavicon}.
+ */
+
+/** Point the page favicon at `href`, creating the <link> if needed. */
+export function setFavicon(href: string): void {
+  if (!href) return;
+  let link = document.querySelector<HTMLLinkElement>("link[rel*='icon']");
+  if (!link) {
+    link = document.createElement('link');
+    link.rel = 'icon';
+    document.head.appendChild(link);
+  }
+  link.href = href;
+}
+
+/**
+ * Generate a square monogram favicon (SVG data URI) from a brand letter.
+ * Used when the deployment has no custom logo, so every page still gets an
+ * icon that matches the brand letter instead of the browser's blank default.
+ */
+export function letterFaviconDataUri(letter: string): string {
+  const ch = (letter || 'V').trim().charAt(0).toUpperCase() || 'V';
+  const svg =
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">` +
+    `<rect width="64" height="64" rx="14" fill="#0a0f1a"/>` +
+    `<text x="50%" y="50%" font-family="Manrope,Arial,sans-serif" font-size="38" ` +
+    `font-weight="700" fill="#ffffff" text-anchor="middle" dominant-baseline="central">${ch}</text>` +
+    `</svg>`;
+  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+}

From 085958342e023ecf5811208644a1db54029ab67b Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Wed, 3 Jun 2026 12:25:20 +0300
Subject: [PATCH 04/36] =?UTF-8?q?feat(landing):=20=D1=84=D0=BE=D0=BB=D0=B1?=
 =?UTF-8?q?=D1=8D=D0=BA=20=D0=BD=D0=B0=20=D0=B3=D0=BB=D0=BE=D0=B1=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8C=D0=BD=D1=83=D1=8E=20=D1=82=D0=B5=D0=BC=D1=83=20?=
 =?UTF-8?q?=D0=BA=D0=B0=D0=B1=D0=B8=D0=BD=D0=B5=D1=82=D0=B0,=20=D0=BA?=
 =?UTF-8?q?=D0=BE=D0=B3=D0=B4=D0=B0=20=D1=83=20=D0=BB=D0=B5=D0=BD=D0=B4?=
 =?UTF-8?q?=D0=B8=D0=BD=D0=B3=D0=B0=20=D1=81=D0=B2=D0=BE=D1=8F=20=D0=BD?=
 =?UTF-8?q?=D0=B5=20=D0=B7=D0=B0=D0=B4=D0=B0=D0=BD=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

У лендинга есть собственное поле background_config (тема на каждый лендинг).
Если оно не заполнено, лендинг показывал голый bg-dark-950, тогда как кабинет
всегда рисует глобальную тему-анимацию (BackgroundRenderer → getAnimationConfig).

Теперь: задан background_config → своя тема лендинга (StaticBackgroundRenderer),
пусто → глобальная тема кабинета (BackgroundRenderer). Обёртка больше не красится
непрозрачным bg-dark-950 — фон рисуется порталом за контентом поверх body #0a0f1a,
ровно как в AppShell. Глобальный конфиг анимации тянется из публичного эндпоинта.
---
 src/pages/QuickPurchase.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/pages/QuickPurchase.tsx b/src/pages/QuickPurchase.tsx
index 3977310..b054eb1 100644
--- a/src/pages/QuickPurchase.tsx
+++ b/src/pages/QuickPurchase.tsx
@@ -21,7 +21,10 @@ import type {
   LandingPaymentMethod,
   PurchaseRequest,
 } from '../api/landings';
-import { StaticBackgroundRenderer } from '../components/backgrounds/BackgroundRenderer';
+import {
+  BackgroundRenderer,
+  StaticBackgroundRenderer,
+} from '../components/backgrounds/BackgroundRenderer';
 import { CheckCircleIcon, CheckIcon, DevicesIcon, DownloadIcon } from '@/components/icons';
 import LanguageSwitcher from '../components/LanguageSwitcher';
 import { cn } from '../lib/utils';
@@ -1105,8 +1108,16 @@ export default function QuickPurchase() {
   const showTariffCards = visibleTariffs.length > 1;
 
   return (
-    <div className={cn('min-h-dvh overflow-x-hidden', !config.background_config && 'bg-dark-950')}>
-      {config.background_config && <StaticBackgroundRenderer config={config.background_config} />}
+    <div className="min-h-dvh overflow-x-hidden">
+      {/* Background: the landing's own per-landing theme when configured, else
+          fall back to the cabinet's global animated theme (instead of a bare
+          dark canvas). Both render via a portal behind the content, so the
+          wrapper stays transparent over the body's #0a0f1a. */}
+      {config.background_config ? (
+        <StaticBackgroundRenderer config={config.background_config} />
+      ) : (
+        <BackgroundRenderer />
+      )}
       <div className="mx-auto max-w-5xl px-4 py-8 sm:px-6 lg:px-8">
         {/* Language switcher */}
         <div className="mb-4 flex justify-end">

From 71047780c96b72fe6af3bfca86e8e3b30eb2be9c Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Wed, 3 Jun 2026 12:33:10 +0300
Subject: [PATCH 05/36] =?UTF-8?q?fix(favicon):=20=D1=81=D0=BA=D1=80=D1=83?=
 =?UTF-8?q?=D0=B3=D0=BB=D1=8F=D0=B5=D0=BC=20=D1=83=D0=B3=D0=BB=D1=8B=20?=
 =?UTF-8?q?=D0=BA=D0=B0=D1=81=D1=82=D0=BE=D0=BC=D0=BD=D0=BE=D0=B3=D0=BE=20?=
 =?UTF-8?q?=D0=BB=D0=BE=D0=B3=D0=BE=20=D0=BA=D0=B0=D0=BA=20=D1=83=20=D0=BF?=
 =?UTF-8?q?=D0=BB=D0=B8=D1=82=D0=BA=D0=B8=20=D0=B2=20=D1=85=D0=B5=D0=B4?=
 =?UTF-8?q?=D0=B5=D1=80=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Кастомное лого квадратное, и в фавиконе показывалось с острыми углами. Теперь
лого прогоняется через canvas со скруглённым клипом (radiusRatio 0.3 — как
rounded-linear-lg 12px на плитке 40px в хедере) и отдаётся скруглённым PNG.
При сбое canvas (taint/нет 2d-контекста) — фолбэк на сырой лого. Применяется и
в кабинете (useBranding), и на лендинге (QuickPurchase); буквенная монограмма
уже скруглена через rx.
---
 src/hooks/useBranding.ts    | 18 ++++++++---
 src/pages/QuickPurchase.tsx | 15 ++++++++--
 src/utils/favicon.ts        | 59 +++++++++++++++++++++++++++++++++++++
 3 files changed, 86 insertions(+), 6 deletions(-)

diff --git a/src/hooks/useBranding.ts b/src/hooks/useBranding.ts
index 2966848..916809f 100644
--- a/src/hooks/useBranding.ts
+++ b/src/hooks/useBranding.ts
@@ -9,7 +9,7 @@ import {
   preloadLogo,
   isLogoPreloaded,
 } from '@/api/branding';
-import { setFavicon, letterFaviconDataUri } from '@/utils/favicon';
+import { setFavicon, letterFaviconDataUri, roundedFaviconDataUri } from '@/utils/favicon';
 
 const FALLBACK_NAME = import.meta.env.VITE_APP_NAME || 'Cabinet';
 const FALLBACK_LOGO = import.meta.env.VITE_APP_LOGO || 'V';
@@ -43,10 +43,20 @@ export function useBranding() {
     document.title = appName || 'VPN';
   }, [appName]);
 
-  // Update favicon — custom logo when available, else a brand-letter monogram
-  // so the tab always carries an icon instead of the browser default.
+  // Update favicon — custom logo (rounded like the header tile) when available,
+  // else a brand-letter monogram so the tab always carries an icon.
   useEffect(() => {
-    setFavicon(logoUrl || letterFaviconDataUri(logoLetter));
+    if (!logoUrl) {
+      setFavicon(letterFaviconDataUri(logoLetter));
+      return;
+    }
+    let cancelled = false;
+    roundedFaviconDataUri(logoUrl).then((rounded) => {
+      if (!cancelled) setFavicon(rounded || logoUrl);
+    });
+    return () => {
+      cancelled = true;
+    };
   }, [logoUrl, logoLetter]);
 
   // Fullscreen setting from server
diff --git a/src/pages/QuickPurchase.tsx b/src/pages/QuickPurchase.tsx
index b054eb1..a6fa30f 100644
--- a/src/pages/QuickPurchase.tsx
+++ b/src/pages/QuickPurchase.tsx
@@ -30,7 +30,7 @@ import LanguageSwitcher from '../components/LanguageSwitcher';
 import { cn } from '../lib/utils';
 import { getApiErrorMessage } from '../utils/api-error';
 import { formatPrice } from '../utils/format';
-import { setFavicon, letterFaviconDataUri } from '../utils/favicon';
+import { setFavicon, letterFaviconDataUri, roundedFaviconDataUri } from '../utils/favicon';
 import { useCurrency } from '../hooks/useCurrency';
 
 function detectContactType(value: string): 'email' | 'telegram' {
@@ -805,7 +805,18 @@ export default function QuickPurchase() {
   useEffect(() => {
     if (!branding) return;
     const logoUrl = branding.has_custom_logo ? getLogoBlobUrl() : null;
-    setFavicon(logoUrl || letterFaviconDataUri(branding.logo_letter));
+    if (!logoUrl) {
+      setFavicon(letterFaviconDataUri(branding.logo_letter));
+      return;
+    }
+    let cancelled = false;
+    // Round the custom logo like the header tile instead of a hard square.
+    roundedFaviconDataUri(logoUrl).then((rounded) => {
+      if (!cancelled) setFavicon(rounded || logoUrl);
+    });
+    return () => {
+      cancelled = true;
+    };
   }, [branding]);
 
   const [discountExpired, setDiscountExpired] = useState(false);
diff --git a/src/utils/favicon.ts b/src/utils/favicon.ts
index dbbdbc7..bdb0f51 100644
--- a/src/utils/favicon.ts
+++ b/src/utils/favicon.ts
@@ -33,3 +33,62 @@ export function letterFaviconDataUri(letter: string): string {
     `</svg>`;
   return `data:image/svg+xml,${encodeURIComponent(svg)}`;
 }
+
+/**
+ * Render `src` (e.g. a square custom logo) into a rounded-corner PNG data URI
+ * so the favicon gets the same rounded tile as the header logo, instead of
+ * hard square corners.
+ *
+ * `radiusRatio` 0.3 mirrors the header tile (rounded-linear-lg = 12px on a 40px
+ * tile). Returns null if the image can't be loaded or the canvas is tainted —
+ * the caller should fall back to the raw `src`.
+ */
+export async function roundedFaviconDataUri(
+  src: string,
+  size = 64,
+  radiusRatio = 0.3,
+): Promise<string | null> {
+  if (!src) return null;
+  try {
+    const img = await loadImage(src);
+    const canvas = document.createElement('canvas');
+    canvas.width = size;
+    canvas.height = size;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return null;
+
+    traceRoundedRect(ctx, size, size * radiusRatio);
+    ctx.clip();
+
+    // object-fit: cover — fill the rounded tile, center-cropping any overflow.
+    const scale = Math.max(size / img.width, size / img.height);
+    const dw = img.width * scale;
+    const dh = img.height * scale;
+    ctx.drawImage(img, (size - dw) / 2, (size - dh) / 2, dw, dh);
+
+    return canvas.toDataURL('image/png');
+  } catch {
+    return null;
+  }
+}
+
+function loadImage(src: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = reject;
+    img.src = src;
+  });
+}
+
+/** Trace a centered square rounded-rect path of side `size` and corner `r`. */
+function traceRoundedRect(ctx: CanvasRenderingContext2D, size: number, r: number): void {
+  const radius = Math.min(r, size / 2);
+  ctx.beginPath();
+  ctx.moveTo(radius, 0);
+  ctx.arcTo(size, 0, size, size, radius);
+  ctx.arcTo(size, size, 0, size, radius);
+  ctx.arcTo(0, size, 0, 0, radius);
+  ctx.arcTo(0, 0, size, 0, radius);
+  ctx.closePath();
+}

From db31d395cd70055da8b0cbf697fc70173b45401a Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Wed, 3 Jun 2026 13:46:00 +0300
Subject: [PATCH 06/36] =?UTF-8?q?feat(gift):=20transferable=20gift=20claim?=
 =?UTF-8?q?=20=E2=80=94=20buyer=20share=20link=20+=20recipient=20claim=20p?=
 =?UTF-8?q?age?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Pairs with the bot's unified claimable-gift model. A landing gift now lands on
the buyer's success page as PAID/claimable (deferred) instead of being delivered
to a phantom recipient, so the buyer gets a transferable link to forward and the
recipient claims it themselves — guaranteeing delivery regardless of channel or
whether they pre-exist.

- api/landings.ts: PurchaseStatus gains is_claimable/claim_url/bot_claim_link;
  add GiftClaimResult + getGiftClaim()/claimGift().
- PurchaseSuccess.tsx: GiftLinkShareState — buyer sees the claim link + Telegram
  link + copy-message when a gift is PAID/claimable; stop polling for that state
  (it stays PAID until claimed) instead of spinning forever.
- GiftClaim.tsx (new) + /buy/gift/:token route: public recipient claim page with
  a Telegram arm (GIFT_ deep link) and a web/email arm (binds + one-click login),
  polling while the payment settles, idempotent "already claimed" + 404 states.
- i18n: landing.giftClaim.* / landing.giftLink.* in ru/en/zh/fa.
---
 src/App.tsx                   |   9 +
 src/api/landings.ts           |  27 +++
 src/locales/en.json           |  28 ++++
 src/locales/fa.json           |  28 ++++
 src/locales/ru.json           |  28 ++++
 src/locales/zh.json           |  28 ++++
 src/pages/GiftClaim.tsx       | 302 ++++++++++++++++++++++++++++++++++
 src/pages/PurchaseSuccess.tsx | 130 ++++++++++++++-
 8 files changed, 579 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/GiftClaim.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 589781d..d9cbe47 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -65,6 +65,7 @@ const Connection = lazyWithRetry(() => import('./pages/Connection'));
 const ConnectionQR = lazyWithRetry(() => import('./pages/ConnectionQR'));
 const QuickPurchase = lazyWithRetry(() => import('./pages/QuickPurchase'));
 const PurchaseSuccess = lazyWithRetry(() => import('./pages/PurchaseSuccess'));
+const GiftClaim = lazyWithRetry(() => import('./pages/GiftClaim'));
 const RenewSubscription = lazyWithRetry(() => import('./pages/RenewSubscription'));
 const AutoLogin = lazyWithRetry(() => import('./pages/AutoLogin'));
 const TopUpMethodSelect = lazyWithRetry(() => import('./pages/TopUpMethodSelect'));
@@ -276,6 +277,14 @@ function App() {
             </LazyPage>
           }
         />
+        <Route
+          path="/buy/gift/:token"
+          element={
+            <LazyPage>
+              <GiftClaim />
+            </LazyPage>
+          }
+        />
         <Route
           path="/buy/:slug"
           element={
diff --git a/src/api/landings.ts b/src/api/landings.ts
index 630d24c..3e7594b 100644
--- a/src/api/landings.ts
+++ b/src/api/landings.ts
@@ -137,6 +137,21 @@ export interface PurchaseStatus {
   auto_login_token: string | null;
   recipient_in_bot: boolean | null;
   bot_link: string | null;
+  // Transferable gift claim link — the buyer forwards this; whoever activates it
+  // gets the gift. Derived from token + status (purchase.user is null until claim).
+  is_claimable: boolean;
+  claim_url: string | null;
+  bot_claim_link: string | null;
+}
+
+/** Result returned to the recipient after a successful web (email) gift claim. */
+export interface GiftClaimResult {
+  status: string;
+  tariff_name: string | null;
+  period_days: number | null;
+  subscription_url: string | null;
+  subscription_crypto_link: string | null;
+  auto_login_token: string | null;
 }
 
 /** Locale dict for multi-language text fields (admin API) */
@@ -282,6 +297,18 @@ export const landingApi = {
     const response = await apiClient.post(`/cabinet/landing/activate/${token}`);
     return response.data;
   },
+
+  // Public gift claim page data (no auth — the token is the bearer secret).
+  getGiftClaim: async (token: string): Promise<PurchaseStatus> => {
+    const response = await apiClient.get(`/cabinet/landing/gift/${token}`);
+    return response.data;
+  },
+
+  // Web (email) arm of the gift claim — binds the gift to the given email account.
+  claimGift: async (token: string, email: string): Promise<GiftClaimResult> => {
+    const response = await apiClient.post(`/cabinet/landing/gift/${token}/claim`, { email });
+    return response.data;
+  },
 };
 
 export interface LandingDailyStat {
diff --git a/src/locales/en.json b/src/locales/en.json
index 81f4f61..0d3b4c8 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -4834,6 +4834,34 @@
     "merging": "Merging..."
   },
   "landing": {
+    "giftClaim": {
+      "title": "You have a gift!",
+      "error": "Could not activate the gift.",
+      "notFoundTitle": "Gift not found",
+      "notFoundDesc": "This gift link is invalid or no longer available.",
+      "alreadyTitle": "Gift already activated",
+      "alreadyDesc": "This gift has already been claimed.",
+      "successTitle": "Gift activated!",
+      "connectDesc": "Use this link to connect:",
+      "copyLink": "Copy link",
+      "pendingTitle": "Almost ready…",
+      "pendingDesc": "The payment is still being confirmed. This page will update automatically.",
+      "replaceWarning": "You already have a subscription — activating this gift will replace it.",
+      "activateTelegram": "Activate in Telegram",
+      "activateWeb": "Activate by email",
+      "emailLabel": "Your email",
+      "claimNow": "Get my gift"
+    },
+    "giftLink": {
+      "shareText": "I have a gift for you! Activate it here:",
+      "viaTelegram": "Telegram:",
+      "title": "Gift is ready!",
+      "subtitle": "Send this link to whoever you want to receive the gift — they activate it themselves.",
+      "linkLabel": "Gift link",
+      "telegramLabel": "Telegram link",
+      "alsoSent": "We also emailed it to {{contact}}.",
+      "copyMessage": "Copy message"
+    },
     "notFound": "Page not found",
     "forMe": "For me",
     "asGift": "As a gift",
diff --git a/src/locales/fa.json b/src/locales/fa.json
index c471622..8596469 100644
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -4494,6 +4494,34 @@
     "merging": "در حال ادغام..."
   },
   "landing": {
+    "giftClaim": {
+      "title": "شما یک هدیه دارید!",
+      "error": "فعال‌سازی هدیه ناموفق بود.",
+      "notFoundTitle": "هدیه یافت نشد",
+      "notFoundDesc": "این لینک هدیه نامعتبر یا دیگر در دسترس نیست.",
+      "alreadyTitle": "هدیه قبلاً فعال شده است",
+      "alreadyDesc": "این هدیه قبلاً دریافت شده است.",
+      "successTitle": "هدیه فعال شد!",
+      "connectDesc": "از این لینک برای اتصال استفاده کنید:",
+      "copyLink": "کپی لینک",
+      "pendingTitle": "تقریباً آماده است…",
+      "pendingDesc": "پرداخت در حال تأیید است. این صفحه به‌طور خودکار به‌روزرسانی می‌شود.",
+      "replaceWarning": "شما در حال حاضر اشتراک دارید — فعال‌سازی این هدیه جایگزین آن خواهد شد.",
+      "activateTelegram": "فعال‌سازی در تلگرام",
+      "activateWeb": "فعال‌سازی با ایمیل",
+      "emailLabel": "ایمیل شما",
+      "claimNow": "دریافت هدیه"
+    },
+    "giftLink": {
+      "shareText": "یک هدیه برای شما دارم! اینجا فعال کنید:",
+      "viaTelegram": "تلگرام:",
+      "title": "هدیه آماده است!",
+      "subtitle": "این لینک را برای کسی که می‌خواهید هدیه را دریافت کند بفرستید — خودش آن را فعال می‌کند.",
+      "linkLabel": "لینک هدیه",
+      "telegramLabel": "لینک تلگرام",
+      "alsoSent": "آن را به {{contact}} نیز ایمیل کردیم.",
+      "copyMessage": "کپی پیام"
+    },
     "notFound": "صفحه یافت نشد",
     "forMe": "برای خودم",
     "asGift": "به عنوان هدیه",
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 3fefdf8..217c878 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -5389,6 +5389,34 @@
     "merging": "Объединение..."
   },
   "landing": {
+    "giftClaim": {
+      "title": "Вам подарок!",
+      "error": "Не удалось активировать подарок.",
+      "notFoundTitle": "Подарок не найден",
+      "notFoundDesc": "Ссылка на подарок недействительна или больше недоступна.",
+      "alreadyTitle": "Подарок уже активирован",
+      "alreadyDesc": "Этот подарок уже забрали.",
+      "successTitle": "Подарок активирован!",
+      "connectDesc": "Используйте эту ссылку для подключения:",
+      "copyLink": "Скопировать ссылку",
+      "pendingTitle": "Почти готово…",
+      "pendingDesc": "Оплата ещё подтверждается. Страница обновится автоматически.",
+      "replaceWarning": "У вас уже есть подписка — активация подарка заменит её.",
+      "activateTelegram": "Активировать в Telegram",
+      "activateWeb": "Активировать по почте",
+      "emailLabel": "Ваш email",
+      "claimNow": "Получить подарок"
+    },
+    "giftLink": {
+      "shareText": "Дарю вам подписку! Активируйте здесь:",
+      "viaTelegram": "Telegram:",
+      "title": "Подарок готов!",
+      "subtitle": "Отправьте эту ссылку тому, кому предназначен подарок — он активирует его сам.",
+      "linkLabel": "Ссылка на подарок",
+      "telegramLabel": "Ссылка для Telegram",
+      "alsoSent": "Мы также отправили её на {{contact}}.",
+      "copyMessage": "Скопировать сообщение"
+    },
     "notFound": "Страница не найдена",
     "forMe": "Для себя",
     "asGift": "В подарок",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 8e59695..a06eeef 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -4493,6 +4493,34 @@
     "merging": "合并中..."
   },
   "landing": {
+    "giftClaim": {
+      "title": "您收到一份礼物！",
+      "error": "无法激活礼物。",
+      "notFoundTitle": "未找到礼物",
+      "notFoundDesc": "此礼物链接无效或已不可用。",
+      "alreadyTitle": "礼物已激活",
+      "alreadyDesc": "此礼物已被领取。",
+      "successTitle": "礼物已激活！",
+      "connectDesc": "使用此链接连接：",
+      "copyLink": "复制链接",
+      "pendingTitle": "即将完成…",
+      "pendingDesc": "付款仍在确认中。本页面将自动更新。",
+      "replaceWarning": "您已有订阅——激活此礼物将替换它。",
+      "activateTelegram": "在 Telegram 中激活",
+      "activateWeb": "通过邮箱激活",
+      "emailLabel": "您的邮箱",
+      "claimNow": "领取礼物"
+    },
+    "giftLink": {
+      "shareText": "我送您一份订阅！在此激活：",
+      "viaTelegram": "Telegram：",
+      "title": "礼物已就绪！",
+      "subtitle": "将此链接发送给您想赠送的人——他们自行激活。",
+      "linkLabel": "礼物链接",
+      "telegramLabel": "Telegram 链接",
+      "alsoSent": "我们也已发送到 {{contact}}。",
+      "copyMessage": "复制消息"
+    },
     "notFound": "页面未找到",
     "forMe": "为自己",
     "asGift": "作为礼物",
diff --git a/src/pages/GiftClaim.tsx b/src/pages/GiftClaim.tsx
new file mode 100644
index 0000000..11c4dbd
--- /dev/null
+++ b/src/pages/GiftClaim.tsx
@@ -0,0 +1,302 @@
+import { useMemo, useRef, useState } from 'react';
+import { useParams, useNavigate } from 'react-router';
+import { useQuery, useMutation } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { motion } from 'framer-motion';
+import { landingApi, type GiftClaimResult } from '../api/landings';
+import { getApiErrorMessage } from '../utils/api-error';
+import { copyToClipboard } from '@/utils/clipboard';
+import { Spinner } from '@/components/ui/Spinner';
+import { AnimatedCheckmark } from '@/components/ui/AnimatedCheckmark';
+import { cn } from '@/lib/utils';
+import { CheckCircleIcon, CheckIcon, CopyIcon } from '@/components/icons';
+
+const MAX_POLL_MS = 10 * 60 * 1000; // poll an unsettled payment for up to 10 min
+
+function isValidEmail(value: string): boolean {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(value.trim());
+}
+
+function Shell({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex min-h-dvh items-center justify-center bg-dark-950 px-4 py-10">
+      <div className="w-full max-w-md rounded-2xl border border-dark-800/50 bg-dark-900/50 p-6 sm:p-8">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default function GiftClaim() {
+  const { token } = useParams<{ token: string }>();
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const startedAt = useRef(Date.now());
+
+  const [email, setEmail] = useState('');
+  const [showEmail, setShowEmail] = useState(false);
+  const [claimError, setClaimError] = useState<string | null>(null);
+  const [result, setResult] = useState<GiftClaimResult | null>(null);
+  const [copied, setCopied] = useState(false);
+
+  const {
+    data: gift,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ['gift-claim', token],
+    queryFn: () => landingApi.getGiftClaim(token!),
+    enabled: !!token,
+    retry: 1,
+    // Poll only while the payment is still settling (not yet claimable / terminal).
+    refetchInterval: (query) => {
+      const data = query.state.data;
+      if (!data) return 3000;
+      if (Date.now() - startedAt.current > MAX_POLL_MS) return false;
+      const settled = data.is_claimable || data.status === 'delivered' || data.status === 'failed';
+      return settled ? false : 3000;
+    },
+  });
+
+  const claimMutation = useMutation({
+    mutationFn: () => landingApi.claimGift(token!, email.trim()),
+    onSuccess: (res) => {
+      // One-click cabinet login for a fresh email account; otherwise show the link.
+      if (res.auto_login_token) {
+        navigate(`/auto-login?token=${encodeURIComponent(res.auto_login_token)}`);
+        return;
+      }
+      setResult(res);
+    },
+    onError: (err) => {
+      setClaimError(
+        getApiErrorMessage(err, t('landing.giftClaim.error', 'Could not activate the gift.')),
+      );
+    },
+  });
+
+  const willReplace = gift?.status === 'pending_activation';
+
+  const handleCopyLink = async () => {
+    const url = result?.subscription_url;
+    if (!url) return;
+    try {
+      await copyToClipboard(url);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      /* ignore */
+    }
+  };
+
+  const periodLabel = useMemo(() => {
+    const days = gift?.period_days;
+    if (!days) return '';
+    return `${days} ${t('gift.days', 'days')}`;
+  }, [gift?.period_days, t]);
+
+  if (isLoading) {
+    return (
+      <Shell>
+        <div className="flex flex-col items-center gap-4 py-6 text-center">
+          <Spinner className="h-12 w-12 border-[3px]" />
+          <p className="text-sm text-dark-400">{t('common.loading', 'Loading...')}</p>
+        </div>
+      </Shell>
+    );
+  }
+
+  // 404 / unknown gift
+  if (error || !gift || !gift.is_gift) {
+    return (
+      <Shell>
+        <div className="flex flex-col items-center gap-3 py-6 text-center">
+          <h1 className="text-lg font-semibold text-dark-50">
+            {t('landing.giftClaim.notFoundTitle', 'Gift not found')}
+          </h1>
+          <p className="text-sm text-dark-400">
+            {t(
+              'landing.giftClaim.notFoundDesc',
+              'This gift link is invalid or no longer available.',
+            )}
+          </p>
+        </div>
+      </Shell>
+    );
+  }
+
+  // Already activated
+  if (gift.status === 'delivered' && !result) {
+    return (
+      <Shell>
+        <div className="flex flex-col items-center gap-4 py-4 text-center">
+          <CheckCircleIcon className="h-14 w-14 text-success-400" />
+          <h1 className="text-xl font-bold text-dark-50">
+            {t('landing.giftClaim.alreadyTitle', 'Gift already activated')}
+          </h1>
+          <p className="text-sm text-dark-400">
+            {t('landing.giftClaim.alreadyDesc', 'This gift has already been claimed.')}
+          </p>
+        </div>
+      </Shell>
+    );
+  }
+
+  // Successful web claim → show connection link
+  if (result) {
+    return (
+      <Shell>
+        <motion.div
+          initial={{ opacity: 0, scale: 0.95 }}
+          animate={{ opacity: 1, scale: 1 }}
+          className="flex flex-col items-center gap-5 text-center"
+        >
+          <AnimatedCheckmark />
+          <h1 className="text-xl font-bold text-dark-50">
+            {t('landing.giftClaim.successTitle', 'Gift activated!')}
+          </h1>
+          {result.subscription_url && (
+            <>
+              <p className="text-sm text-dark-300">
+                {t('landing.giftClaim.connectDesc', 'Use this link to connect:')}
+              </p>
+              <p className="w-full select-all truncate rounded-lg bg-dark-900/60 px-3 py-2 text-sm text-accent-400">
+                {result.subscription_url}
+              </p>
+              <button
+                type="button"
+                onClick={handleCopyLink}
+                className={cn(
+                  'flex w-full items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold transition-all active:scale-[0.98]',
+                  copied
+                    ? 'bg-success-500/20 text-success-400'
+                    : 'bg-accent-500 text-white hover:bg-accent-400',
+                )}
+              >
+                {copied ? <CheckIcon className="h-4 w-4" /> : <CopyIcon className="h-4 w-4" />}
+                {copied
+                  ? t('common.copied', 'Copied!')
+                  : t('landing.giftClaim.copyLink', 'Copy link')}
+              </button>
+            </>
+          )}
+        </motion.div>
+      </Shell>
+    );
+  }
+
+  // Payment still settling
+  if (!gift.is_claimable) {
+    return (
+      <Shell>
+        <div className="flex flex-col items-center gap-4 py-6 text-center">
+          <Spinner className="h-12 w-12 border-[3px]" />
+          <h1 className="text-lg font-semibold text-dark-50">
+            {t('landing.giftClaim.pendingTitle', 'Almost ready...')}
+          </h1>
+          <p className="text-sm text-dark-400">
+            {t(
+              'landing.giftClaim.pendingDesc',
+              'The payment is still being confirmed. This page will update automatically.',
+            )}
+          </p>
+        </div>
+      </Shell>
+    );
+  }
+
+  // Claimable — offer Telegram + web arms
+  return (
+    <Shell>
+      <motion.div
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{ opacity: 1, scale: 1 }}
+        className="flex flex-col items-center gap-5 text-center"
+      >
+        <div className="text-4xl">🎁</div>
+        <div>
+          <h1 className="text-xl font-bold text-dark-50">
+            {t('landing.giftClaim.title', 'You have a gift!')}
+          </h1>
+          {gift.tariff_name && (
+            <p className="mt-1 text-sm text-dark-300">
+              {gift.tariff_name}
+              {periodLabel ? ` — ${periodLabel}` : ''}
+            </p>
+          )}
+        </div>
+
+        {gift.gift_message && (
+          <div className="w-full rounded-xl border border-dark-700/30 bg-dark-800/40 p-4 text-left">
+            <p className="text-sm italic text-dark-200">&ldquo;{gift.gift_message}&rdquo;</p>
+          </div>
+        )}
+
+        {willReplace && (
+          <p className="w-full rounded-lg border border-warning-500/20 bg-warning-500/5 p-3 text-xs text-warning-400">
+            {t(
+              'landing.giftClaim.replaceWarning',
+              'You already have a subscription — activating this gift will replace it.',
+            )}
+          </p>
+        )}
+
+        {/* Telegram arm */}
+        {gift.bot_claim_link && (
+          <a
+            href={gift.bot_claim_link}
+            className="flex w-full items-center justify-center gap-2 rounded-xl bg-accent-500 px-6 py-3.5 text-sm font-bold text-white shadow-lg shadow-accent-500/25 transition-all hover:bg-accent-400 active:scale-[0.98]"
+          >
+            {t('landing.giftClaim.activateTelegram', 'Activate in Telegram')}
+          </a>
+        )}
+
+        {/* Web/email arm */}
+        {!showEmail ? (
+          <button
+            type="button"
+            onClick={() => setShowEmail(true)}
+            className="w-full rounded-xl border border-dark-700/50 px-6 py-3 text-sm font-medium text-dark-200 transition-colors hover:bg-dark-800/50"
+          >
+            {t('landing.giftClaim.activateWeb', 'Activate by email')}
+          </button>
+        ) : (
+          <div className="w-full space-y-3 text-left">
+            <label htmlFor="claim-email" className="block text-sm font-medium text-dark-200">
+              {t('landing.giftClaim.emailLabel', 'Your email')}
+            </label>
+            <input
+              id="claim-email"
+              type="email"
+              value={email}
+              onChange={(e) => {
+                setEmail(e.target.value);
+                setClaimError(null);
+              }}
+              placeholder="email@example.com"
+              className="w-full rounded-xl border border-dark-700/50 bg-dark-800/50 px-4 py-3 text-sm text-dark-50 placeholder-dark-500 outline-none focus:border-accent-500/50 focus:ring-1 focus:ring-accent-500/25"
+            />
+            {claimError && <p className="text-sm text-error-400">{claimError}</p>}
+            <button
+              type="button"
+              disabled={!isValidEmail(email) || claimMutation.isPending}
+              onClick={() => claimMutation.mutate()}
+              className={cn(
+                'flex w-full items-center justify-center gap-2 rounded-xl px-6 py-3.5 text-sm font-bold transition-all',
+                isValidEmail(email) && !claimMutation.isPending
+                  ? 'bg-accent-500 text-white hover:bg-accent-400 active:scale-[0.98]'
+                  : 'cursor-not-allowed bg-dark-800 text-dark-500',
+              )}
+            >
+              {claimMutation.isPending ? (
+                <Spinner className="h-5 w-5 border-2" />
+              ) : (
+                t('landing.giftClaim.claimNow', 'Get my gift')
+              )}
+            </button>
+          </div>
+        )}
+      </motion.div>
+    </Shell>
+  );
+}
diff --git a/src/pages/PurchaseSuccess.tsx b/src/pages/PurchaseSuccess.tsx
index 8afddd9..0016cc7 100644
--- a/src/pages/PurchaseSuccess.tsx
+++ b/src/pages/PurchaseSuccess.tsx
@@ -553,6 +553,113 @@ function PollTimedOutState({ onRetry }: { onRetry: () => void }) {
   );
 }
 
+function GiftLinkShareState({
+  claimUrl,
+  botClaimLink,
+  tariffName,
+  periodDays,
+  recipientContactValue,
+  contactType,
+}: {
+  claimUrl: string | null;
+  botClaimLink: string | null;
+  tariffName: string | null;
+  periodDays: number | null;
+  recipientContactValue: string | null;
+  contactType: 'email' | 'telegram' | null;
+}) {
+  const { t } = useTranslation();
+  const [copied, setCopied] = useState(false);
+
+  const message = [
+    t('landing.giftLink.shareText', 'I have a gift for you! Activate it here:'),
+    '',
+    claimUrl,
+    botClaimLink ? `${t('landing.giftLink.viaTelegram', 'Telegram:')} ${botClaimLink}` : null,
+  ]
+    .filter(Boolean)
+    .join('\n');
+
+  const handleCopy = async () => {
+    try {
+      await copyToClipboard(message);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      /* ignore */
+    }
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.9 }}
+      animate={{ opacity: 1, scale: 1 }}
+      className="flex flex-col items-center gap-5 text-center"
+    >
+      <AnimatedCheckmark />
+      <div>
+        <h1 className="text-xl font-bold text-dark-50">
+          {t('landing.giftLink.title', 'Gift is ready!')}
+        </h1>
+        {tariffName && periodDays !== null && (
+          <p className="mt-1 text-sm text-dark-300">
+            {tariffName} — {periodDays} {t('landing.days', 'days')}
+          </p>
+        )}
+      </div>
+
+      <p className="text-sm text-dark-300">
+        {t(
+          'landing.giftLink.subtitle',
+          'Send this link to whoever you want to receive the gift — they activate it themselves.',
+        )}
+      </p>
+
+      {claimUrl && (
+        <CopyableField label={t('landing.giftLink.linkLabel', 'Gift link')} value={claimUrl} />
+      )}
+      {botClaimLink && (
+        <CopyableField
+          label={t('landing.giftLink.telegramLabel', 'Telegram link')}
+          value={botClaimLink}
+        />
+      )}
+
+      {recipientContactValue && contactType === 'email' && (
+        <p className="text-xs text-dark-500">
+          {t('landing.giftLink.alsoSent', {
+            contact: recipientContactValue,
+            defaultValue: 'We also emailed it to {{contact}}.',
+          })}
+        </p>
+      )}
+
+      <button
+        type="button"
+        onClick={handleCopy}
+        className={cn(
+          'flex w-full items-center justify-center gap-2 rounded-xl px-4 py-3.5 text-sm font-bold transition-all duration-200 active:scale-[0.98]',
+          copied
+            ? 'bg-success-500/20 text-success-400'
+            : 'bg-accent-500 text-white shadow-lg shadow-accent-500/25 hover:bg-accent-400',
+        )}
+      >
+        {copied ? (
+          <>
+            <CheckIcon className="h-4 w-4" />
+            {t('landing.copied', 'Copied!')}
+          </>
+        ) : (
+          <>
+            <ClipboardIcon className="h-4 w-4" />
+            {t('landing.giftLink.copyMessage', 'Copy message')}
+          </>
+        )}
+      </button>
+    </motion.div>
+  );
+}
+
 export default function PurchaseSuccess() {
   const { t } = useTranslation();
   const { token } = useParams<{ token: string }>();
@@ -586,7 +693,12 @@ export default function PurchaseSuccess() {
     queryFn: () => landingApi.getPurchaseStatus(token!),
     enabled: !!token && !pollTimedOut,
     refetchInterval: (query) => {
-      const currentStatus = query.state.data?.status;
+      const data = query.state.data;
+      const currentStatus = data?.status;
+      // A gift that reached PAID is claimable and terminal for the BUYER (it
+      // stays PAID until the recipient claims) — stop polling and show the
+      // share link instead of spinning forever.
+      if (currentStatus === 'paid' && data?.is_gift && data?.is_claimable) return false;
       if (currentStatus === 'pending' || currentStatus === 'paid') {
         if (Date.now() - pollStart.current > MAX_POLL_MS) {
           setPollTimedOut(true);
@@ -652,6 +764,13 @@ export default function PurchaseSuccess() {
   const isPendingActivation = purchaseStatus?.status === 'pending_activation';
   const isFailed = purchaseStatus?.status === 'failed' || purchaseStatus?.status === 'expired';
 
+  // Deferred gift the buyer just paid for → show the transferable claim link to
+  // forward (it stays PAID until the recipient claims it).
+  const isBuyerGiftLink =
+    purchaseStatus?.status === 'paid' &&
+    !!purchaseStatus?.is_gift &&
+    !!purchaseStatus?.is_claimable;
+
   // Gift pending activation → buyer sees "gift sent" message, not the activate button.
   // Recipient arrives via email link with ?activate=1 and sees the activate button instead.
   const isGiftPendingActivation = isPendingActivation && purchaseStatus?.is_gift && !isActivateHint;
@@ -672,6 +791,15 @@ export default function PurchaseSuccess() {
       >
         {isError ? (
           <FailedState />
+        ) : isBuyerGiftLink ? (
+          <GiftLinkShareState
+            claimUrl={purchaseStatus.claim_url}
+            botClaimLink={purchaseStatus.bot_claim_link}
+            tariffName={purchaseStatus.tariff_name}
+            periodDays={purchaseStatus.period_days}
+            recipientContactValue={purchaseStatus.recipient_contact_value}
+            contactType={purchaseStatus.contact_type}
+          />
         ) : isEmailSelfPurchase ? (
           <CabinetCredentialsState
             cabinetEmail={purchaseStatus.cabinet_email!}

From b9521f1aa73758ad61d0d0be4686676c051dbe17 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Wed, 3 Jun 2026 14:34:19 +0300
Subject: [PATCH 07/36] fix(gift): cabinet GiftResult shows claim link for
 directed gifts + review fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Pairs with the backend cabinet-unification. Directed cabinet gifts now stay
PAID/claimable, so the buyer's GiftResult must show the share link for them too.

- GiftResult.tsx: render the share state (and stop polling) for ANY claimable
  paid gift via is_claimable, not just is_code_only.
- api/gift.ts: GiftPurchaseStatus gains is_claimable.
- GiftClaim.tsx: explicit failed/expired state (was falling into the 'almost
  ready' spinner forever).
- PurchaseSuccess.tsx: a paid gift is always claimable — stop polling and show
  the share block on `paid && is_gift` (don't gate on is_claimable, which could
  strand the buyer on a spinner).
- i18n: landing.giftClaim.failedTitle/failedDesc in ru/en/zh/fa.
---
 src/api/gift.ts               |  1 +
 src/locales/en.json           |  4 +++-
 src/locales/fa.json           |  4 +++-
 src/locales/ru.json           |  4 +++-
 src/locales/zh.json           |  4 +++-
 src/pages/GiftClaim.tsx       | 19 +++++++++++++++++++
 src/pages/GiftResult.tsx      | 11 ++++++-----
 src/pages/PurchaseSuccess.tsx | 13 +++++--------
 8 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/src/api/gift.ts b/src/api/gift.ts
index 3a607d9..fa136ec 100644
--- a/src/api/gift.ts
+++ b/src/api/gift.ts
@@ -74,6 +74,7 @@ export interface GiftPurchaseStatus {
   status: GiftPurchaseStatusValue;
   is_gift: boolean;
   is_code_only: boolean;
+  is_claimable: boolean;
   purchase_token: string | null;
   recipient_contact_value: string | null;
   gift_message: string | null;
diff --git a/src/locales/en.json b/src/locales/en.json
index 0d3b4c8..a6b4092 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -4850,7 +4850,9 @@
       "activateTelegram": "Activate in Telegram",
       "activateWeb": "Activate by email",
       "emailLabel": "Your email",
-      "claimNow": "Get my gift"
+      "claimNow": "Get my gift",
+      "failedTitle": "Gift unavailable",
+      "failedDesc": "The payment for this gift did not go through, so it cannot be activated."
     },
     "giftLink": {
       "shareText": "I have a gift for you! Activate it here:",
diff --git a/src/locales/fa.json b/src/locales/fa.json
index 8596469..e457de3 100644
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -4510,7 +4510,9 @@
       "activateTelegram": "فعال‌سازی در تلگرام",
       "activateWeb": "فعال‌سازی با ایمیل",
       "emailLabel": "ایمیل شما",
-      "claimNow": "دریافت هدیه"
+      "claimNow": "دریافت هدیه",
+      "failedTitle": "هدیه در دسترس نیست",
+      "failedDesc": "پرداخت این هدیه انجام نشد، بنابراین قابل فعال‌سازی نیست."
     },
     "giftLink": {
       "shareText": "یک هدیه برای شما دارم! اینجا فعال کنید:",
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 217c878..586eeb8 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -5405,7 +5405,9 @@
       "activateTelegram": "Активировать в Telegram",
       "activateWeb": "Активировать по почте",
       "emailLabel": "Ваш email",
-      "claimNow": "Получить подарок"
+      "claimNow": "Получить подарок",
+      "failedTitle": "Подарок недоступен",
+      "failedDesc": "Оплата подарка не прошла, поэтому активировать его нельзя."
     },
     "giftLink": {
       "shareText": "Дарю вам подписку! Активируйте здесь:",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index a06eeef..da7f73f 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -4509,7 +4509,9 @@
       "activateTelegram": "在 Telegram 中激活",
       "activateWeb": "通过邮箱激活",
       "emailLabel": "您的邮箱",
-      "claimNow": "领取礼物"
+      "claimNow": "领取礼物",
+      "failedTitle": "礼物不可用",
+      "failedDesc": "此礼物的付款未成功，无法激活。"
     },
     "giftLink": {
       "shareText": "我送您一份订阅！在此激活：",
diff --git a/src/pages/GiftClaim.tsx b/src/pages/GiftClaim.tsx
index 11c4dbd..902ee95 100644
--- a/src/pages/GiftClaim.tsx
+++ b/src/pages/GiftClaim.tsx
@@ -142,6 +142,25 @@ export default function GiftClaim() {
     );
   }
 
+  // Payment failed/expired → tell the recipient instead of spinning forever
+  if (gift.status === 'failed' || gift.status === 'expired') {
+    return (
+      <Shell>
+        <div className="flex flex-col items-center gap-3 py-6 text-center">
+          <h1 className="text-lg font-semibold text-dark-50">
+            {t('landing.giftClaim.failedTitle', 'Gift unavailable')}
+          </h1>
+          <p className="text-sm text-dark-400">
+            {t(
+              'landing.giftClaim.failedDesc',
+              'The payment for this gift did not go through, so it cannot be activated.',
+            )}
+          </p>
+        </div>
+      </Shell>
+    );
+  }
+
   // Successful web claim → show connection link
   if (result) {
     return (
diff --git a/src/pages/GiftResult.tsx b/src/pages/GiftResult.tsx
index 2fea2d8..b083f1a 100644
--- a/src/pages/GiftResult.tsx
+++ b/src/pages/GiftResult.tsx
@@ -476,8 +476,9 @@ export default function GiftResult() {
       const s = d?.status;
       if (s === 'delivered' || s === 'failed' || s === 'pending_activation' || s === 'expired')
         return false;
-      // Code-only gifts stay in 'paid' status — stop polling
-      if (s === 'paid' && d?.is_code_only) return false;
+      // Claimable gifts (code-only AND directed) stay in 'paid' until claimed —
+      // stop polling; the buyer shares the link.
+      if (s === 'paid' && d?.is_claimable) return false;
 
       // Check poll timeout
       if (Date.now() - pollStart.current > MAX_POLL_MS) {
@@ -511,8 +512,8 @@ export default function GiftResult() {
     );
   }
 
-  const isCodeOnlyPaid =
-    status?.status === 'paid' && status?.is_code_only && status?.purchase_token != null;
+  const isClaimablePaid =
+    status?.status === 'paid' && status?.is_claimable && status?.purchase_token != null;
   const isDelivered = status?.status === 'delivered';
   const isPendingActivation = status?.status === 'pending_activation';
   const isFailed = status?.status === 'failed' || status?.status === 'expired';
@@ -531,7 +532,7 @@ export default function GiftResult() {
       >
         {isError ? (
           <PollErrorState />
-        ) : isCodeOnlyPaid ? (
+        ) : isClaimablePaid ? (
           <CodeOnlySuccessState
             purchaseToken={status.purchase_token!}
             tariffName={status.tariff_name}
diff --git a/src/pages/PurchaseSuccess.tsx b/src/pages/PurchaseSuccess.tsx
index 0016cc7..653d2c8 100644
--- a/src/pages/PurchaseSuccess.tsx
+++ b/src/pages/PurchaseSuccess.tsx
@@ -695,10 +695,10 @@ export default function PurchaseSuccess() {
     refetchInterval: (query) => {
       const data = query.state.data;
       const currentStatus = data?.status;
-      // A gift that reached PAID is claimable and terminal for the BUYER (it
-      // stays PAID until the recipient claims) — stop polling and show the
-      // share link instead of spinning forever.
-      if (currentStatus === 'paid' && data?.is_gift && data?.is_claimable) return false;
+      // A gift that reached PAID is terminal for the BUYER (it stays PAID until
+      // the recipient claims) — stop polling and show the share link instead of
+      // spinning. A paid gift is always claimable, so don't gate on is_claimable.
+      if (currentStatus === 'paid' && data?.is_gift) return false;
       if (currentStatus === 'pending' || currentStatus === 'paid') {
         if (Date.now() - pollStart.current > MAX_POLL_MS) {
           setPollTimedOut(true);
@@ -766,10 +766,7 @@ export default function PurchaseSuccess() {
 
   // Deferred gift the buyer just paid for → show the transferable claim link to
   // forward (it stays PAID until the recipient claims it).
-  const isBuyerGiftLink =
-    purchaseStatus?.status === 'paid' &&
-    !!purchaseStatus?.is_gift &&
-    !!purchaseStatus?.is_claimable;
+  const isBuyerGiftLink = purchaseStatus?.status === 'paid' && !!purchaseStatus?.is_gift;
 
   // Gift pending activation → buyer sees "gift sent" message, not the activate button.
   // Recipient arrives via email link with ?activate=1 and sees the activate button instead.

From 966c2bf03ac4129a0d1ce2f6b3d0a7fcd5e8fcf8 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Wed, 3 Jun 2026 14:50:28 +0300
Subject: [PATCH 08/36] style(admin-landings): rebuild stats summary on the
 StatCard pattern
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The landing stats page used plain, icon-less centered boxes that looked
inconsistent with the Sales/Remnawave stats. Rebuild the summary on the shared
StatCard (tinted icon chip + tone + value), consolidating the two scattered
stat rows into a clean 2×4 grid (created/paid/revenue/conversion +
purchases/regular/gifts/avg) with barrel Phosphor icons. Chart and list
containers now use the same bento-card surface as the rest of the admin stats.
---
 src/pages/AdminLandingStats.tsx | 125 ++++++++++++++++----------------
 1 file changed, 63 insertions(+), 62 deletions(-)

diff --git a/src/pages/AdminLandingStats.tsx b/src/pages/AdminLandingStats.tsx
index 34e3025..0c725af 100644
--- a/src/pages/AdminLandingStats.tsx
+++ b/src/pages/AdminLandingStats.tsx
@@ -26,12 +26,20 @@ import { useCurrency } from '../hooks/useCurrency';
 import { useChartColors } from '../hooks/useChartColors';
 import { CHART_COMMON } from '../constants/charts';
 import { AdminBackButton } from '../components/admin';
+import { StatCard } from '../components/stats';
 import {
   ChartIcon,
   EmailIcon,
   TelegramSmallIcon,
   ArrowRightIcon,
   GiftIcon,
+  EyeIcon,
+  CheckCircleIcon,
+  BanknotesIcon,
+  PercentIcon,
+  TicketIcon,
+  CardIcon,
+  WalletIcon,
   ChevronLeftIcon as ChevronLeftSmall,
   ChevronRightIcon as ChevronRightSmall,
 } from '@/components/icons';
@@ -339,39 +347,62 @@ export default function AdminLandingStats() {
       <div className="space-y-6">
         {/* Summary Cards */}
         <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
-          <div className="rounded-xl border border-dark-700 bg-dark-800 p-4 text-center">
-            <div className="text-xl font-bold sm:text-2xl">
-              <span className="text-warning-400">{stats.total_created}</span>
-              <span className="mx-1 text-dark-600">/</span>
-              <span className="text-success-400">{stats.total_successful}</span>
-            </div>
-            <div className="text-xs text-dark-500">
-              {t('admin.landings.stats.created', 'Created')} /{' '}
-              {t('admin.landings.stats.paid', 'paid')}
-            </div>
-          </div>
-          <div className="rounded-xl border border-dark-700 bg-dark-800 p-4 text-center">
-            <div className="truncate text-xl font-bold text-accent-400 sm:text-2xl">
-              {formatWithCurrency(stats.total_revenue_kopeks / CHART_COMMON.KOPEKS_DIVISOR)}
-            </div>
-            <div className="text-xs text-dark-500">{t('admin.landings.stats.revenue')}</div>
-          </div>
-          <div className="rounded-xl border border-dark-700 bg-dark-800 p-4 text-center">
-            <div className="text-xl font-bold text-accent-400 sm:text-2xl">{stats.total_gifts}</div>
-            <div className="text-xs text-dark-500">{t('admin.landings.stats.giftPurchases')}</div>
-          </div>
-          <div className="rounded-xl border border-dark-700 bg-dark-800 p-4 text-center">
-            <div className="text-xl font-bold text-dark-200 sm:text-2xl">
-              {stats.conversion_rate}%
-            </div>
-            <div className="text-xs text-dark-500">{t('admin.landings.stats.conversionRate')}</div>
-          </div>
+          <StatCard
+            label={t('admin.landings.stats.created', 'Created')}
+            value={stats.total_created}
+            icon={<EyeIcon className="h-5 w-5" />}
+            tone="warning"
+          />
+          <StatCard
+            label={t('admin.landings.stats.paid', 'paid')}
+            value={stats.total_successful}
+            icon={<CheckCircleIcon className="h-5 w-5" />}
+            tone="success"
+          />
+          <StatCard
+            label={t('admin.landings.stats.revenue')}
+            value={formatWithCurrency(stats.total_revenue_kopeks / CHART_COMMON.KOPEKS_DIVISOR)}
+            icon={<BanknotesIcon className="h-5 w-5" />}
+            tone="success"
+          />
+          <StatCard
+            label={t('admin.landings.stats.conversionRate')}
+            value={`${stats.conversion_rate}%`}
+            icon={<PercentIcon className="h-5 w-5" />}
+            tone="accent"
+          />
+        </div>
+
+        {/* Breakdown Cards */}
+        <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+          <StatCard
+            label={t('admin.landings.stats.purchases')}
+            value={stats.total_purchases}
+            icon={<TicketIcon className="h-5 w-5" />}
+            tone="accent"
+          />
+          <StatCard
+            label={t('admin.landings.stats.regularPurchases')}
+            value={stats.total_regular}
+            icon={<CardIcon className="h-5 w-5" />}
+          />
+          <StatCard
+            label={t('admin.landings.stats.giftPurchases')}
+            value={stats.total_gifts}
+            icon={<GiftIcon className="h-5 w-5" />}
+            tone="accent"
+          />
+          <StatCard
+            label={t('admin.landings.stats.avgPurchase')}
+            value={formatWithCurrency(stats.avg_purchase_kopeks / CHART_COMMON.KOPEKS_DIVISOR)}
+            icon={<WalletIcon className="h-5 w-5" />}
+          />
         </div>
 
         {/* Charts */}
         <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
           {/* Daily Purchases & Revenue */}
-          <div className="rounded-xl border border-dark-700 bg-dark-800 p-4">
+          <div className="bento-card">
             <h3 className="mb-4 font-medium text-dark-200">
               {t('admin.landings.stats.dailyChart')}
             </h3>
@@ -501,7 +532,7 @@ export default function AdminLandingStats() {
           </div>
 
           {/* Daily Purchases Bar Chart */}
-          <div className="rounded-xl border border-dark-700 bg-dark-800 p-4">
+          <div className="bento-card">
             <h3 className="mb-4 font-medium text-dark-200">
               {t('admin.landings.stats.dailyPurchases', 'Daily purchases')}
             </h3>
@@ -557,7 +588,7 @@ export default function AdminLandingStats() {
         </div>
 
         {/* Tariff Distribution -- full width */}
-        <div className="rounded-xl border border-dark-700 bg-dark-800 p-4">
+        <div className="bento-card">
           <h3 className="mb-4 font-medium text-dark-200">
             {t('admin.landings.stats.tariffChart')}
           </h3>
@@ -614,39 +645,9 @@ export default function AdminLandingStats() {
           )}
         </div>
 
-        {/* Additional Stats Row */}
-        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
-          <div className="rounded-xl border border-dark-700 bg-dark-800 p-4">
-            <div className="mb-1 text-sm text-dark-400">
-              {t('admin.landings.stats.avgPurchase')}
-            </div>
-            <div className="text-lg font-medium text-dark-200">
-              {formatWithCurrency(stats.avg_purchase_kopeks / CHART_COMMON.KOPEKS_DIVISOR)}
-            </div>
-          </div>
-          <div className="rounded-xl border border-dark-700 bg-dark-800 p-4">
-            <div className="mb-1 text-sm text-dark-400">
-              {t('admin.landings.stats.regularPurchases')}
-            </div>
-            <div className="text-lg font-medium text-dark-200">{stats.total_regular}</div>
-          </div>
-          <div className="col-span-2 rounded-xl border border-dark-700 bg-dark-800 p-4 sm:col-span-1">
-            <div className="mb-1 text-sm text-dark-400">{t('admin.landings.stats.funnel')}</div>
-            <div className="text-lg font-medium text-dark-200">
-              {stats.total_created}{' '}
-              <span className="text-sm text-dark-500">{t('admin.landings.stats.created')}</span>
-              {' / '}
-              {stats.total_successful}{' '}
-              <span className="text-sm text-dark-500">
-                {t('admin.landings.stats.paid', 'paid')}
-              </span>
-            </div>
-          </div>
-        </div>
-
         {/* Gift vs Regular Donut */}
         {stats.total_purchases > 0 && (
-          <div className="rounded-xl border border-dark-700 bg-dark-800 p-4">
+          <div className="bento-card">
             <h3 className="mb-4 font-medium text-dark-200">
               {t('admin.landings.stats.giftBreakdown')}
             </h3>
@@ -706,7 +707,7 @@ export default function AdminLandingStats() {
         )}
 
         {/* Purchases List */}
-        <div className="rounded-xl border border-dark-700 bg-dark-800 p-4">
+        <div className="bento-card">
           {/* Header row: title + status filter */}
           <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
             <h3 className="font-medium text-dark-200">{t('admin.landings.purchases.title')}</h3>

From 78c633ff548e893978f3bb7213475501a5562d56 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Wed, 3 Jun 2026 15:11:47 +0300
Subject: [PATCH 09/36] feat(landing-stats): rebuild charts on shared
 components + add funnel & breakdowns
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The landing stats page rendered raw recharts by hand plus a bespoke progress-bar
list, looking nothing like the Sales/Remnawave stats. Rebuild it on the shared
chart components and add the visualizations the data warrants:

- Daily: MultiSeriesAreaChart (created/paid) + SimpleAreaChart (revenue),
  replacing the hand-rolled area chart and the custom progress-bar list.
- Tariff & traffic sources: BreakdownList; payment methods & gift composition:
  DonutChart — all the same components Sales stats uses.
- New conversion Funnel (created → paid) and a Gift activation card
  (claimed/sent + rate), backed by the new backend breakdowns.
- Containers use the bento-card surface; i18n added in ru/en/zh/fa.
---
 src/api/landings.ts             |  14 +
 src/locales/en.json             |   6 +
 src/locales/fa.json             |   6 +
 src/locales/ru.json             |   6 +
 src/locales/zh.json             |   6 +
 src/pages/AdminLandingStats.tsx | 526 +++++++++++---------------------
 6 files changed, 209 insertions(+), 355 deletions(-)

diff --git a/src/api/landings.ts b/src/api/landings.ts
index 3e7594b..8b18f9d 100644
--- a/src/api/landings.ts
+++ b/src/api/landings.ts
@@ -326,10 +326,22 @@ export interface LandingTariffStat {
   revenue_kopeks: number;
 }
 
+export interface LandingPaymentMethodStat {
+  method: string;
+  purchases: number;
+  revenue_kopeks: number;
+}
+
+export interface LandingSourceStat {
+  source: string;
+  purchases: number;
+}
+
 export interface LandingStatsResponse {
   total_purchases: number;
   total_revenue_kopeks: number;
   total_gifts: number;
+  total_gifts_claimed: number;
   total_regular: number;
   avg_purchase_kopeks: number;
   total_created: number;
@@ -337,6 +349,8 @@ export interface LandingStatsResponse {
   conversion_rate: number;
   daily_stats: LandingDailyStat[];
   tariff_stats: LandingTariffStat[];
+  payment_method_stats: LandingPaymentMethodStat[];
+  source_stats: LandingSourceStat[];
 }
 
 export type PurchaseItemStatus =
diff --git a/src/locales/en.json b/src/locales/en.json
index a6b4092..42b174e 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -3978,6 +3978,12 @@
         "dailyChart": "Purchases & Revenue by Day",
         "tariffChart": "Tariff Distribution",
         "giftBreakdown": "Gifts vs Regular",
+        "funnelTitle": "Conversion funnel",
+        "giftClaimTitle": "Gift activation",
+        "giftClaimLabel": "claimed / sent",
+        "dailyRevenue": "Daily revenue",
+        "byPaymentMethod": "By payment method",
+        "bySource": "Traffic sources",
         "purchases": "Purchases",
         "revenueLabel": "Revenue",
         "gifts": "Gifts",
diff --git a/src/locales/fa.json b/src/locales/fa.json
index e457de3..13d917d 100644
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -3694,6 +3694,12 @@
         "dailyChart": "خرید و درآمد روزانه",
         "tariffChart": "توزیع طرح‌ها",
         "giftBreakdown": "هدایا در مقابل عادی",
+        "funnelTitle": "قیف تبدیل",
+        "giftClaimTitle": "فعال‌سازی هدیه",
+        "giftClaimLabel": "دریافت‌شده / ارسال‌شده",
+        "dailyRevenue": "درآمد روزانه",
+        "byPaymentMethod": "بر اساس روش پرداخت",
+        "bySource": "منابع ترافیک",
         "purchases": "خریدها",
         "revenueLabel": "درآمد",
         "gifts": "هدایا",
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 586eeb8..f4ef089 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -4523,6 +4523,12 @@
         "dailyChart": "Покупки и доход по дням",
         "tariffChart": "Распределение по тарифам",
         "giftBreakdown": "Подарки vs обычные",
+        "funnelTitle": "Воронка конверсии",
+        "giftClaimTitle": "Активация подарков",
+        "giftClaimLabel": "забрано / отправлено",
+        "dailyRevenue": "Выручка по дням",
+        "byPaymentMethod": "По способам оплаты",
+        "bySource": "Источники трафика",
         "purchases": "Покупки",
         "revenueLabel": "Доход",
         "gifts": "Подарки",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index da7f73f..d695273 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -3693,6 +3693,12 @@
         "dailyChart": "每日购买与收入",
         "tariffChart": "套餐分布",
         "giftBreakdown": "礼物 vs 普通",
+        "funnelTitle": "转化漏斗",
+        "giftClaimTitle": "礼物激活",
+        "giftClaimLabel": "已领取 / 已发送",
+        "dailyRevenue": "每日收入",
+        "byPaymentMethod": "按支付方式",
+        "bySource": "流量来源",
         "purchases": "购买",
         "revenueLabel": "收入",
         "gifts": "礼物",
diff --git a/src/pages/AdminLandingStats.tsx b/src/pages/AdminLandingStats.tsx
index 0c725af..fc092e7 100644
--- a/src/pages/AdminLandingStats.tsx
+++ b/src/pages/AdminLandingStats.tsx
@@ -2,20 +2,7 @@ import { useState, useMemo } from 'react';
 import { useParams, useNavigate } from 'react-router';
 import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
-import {
-  Area,
-  AreaChart,
-  Bar,
-  BarChart,
-  CartesianGrid,
-  Cell,
-  Pie,
-  PieChart,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from 'recharts';
+import { Cell, Funnel, FunnelChart, LabelList, ResponsiveContainer } from 'recharts';
 import {
   adminLandingsApi,
   resolveLocaleDisplay,
@@ -23,10 +10,13 @@ import {
   type LandingPurchaseItem,
 } from '../api/landings';
 import { useCurrency } from '../hooks/useCurrency';
-import { useChartColors } from '../hooks/useChartColors';
 import { CHART_COMMON } from '../constants/charts';
 import { AdminBackButton } from '../components/admin';
 import { StatCard } from '../components/stats';
+import { BreakdownList } from '../components/sales-stats/BreakdownList';
+import { DonutChart } from '../components/sales-stats/DonutChart';
+import { SimpleAreaChart } from '../components/sales-stats/SimpleAreaChart';
+import { MultiSeriesAreaChart } from '../components/sales-stats/MultiSeriesAreaChart';
 import {
   ChartIcon,
   EmailIcon,
@@ -44,8 +34,8 @@ import {
   ChevronRightIcon as ChevronRightSmall,
 } from '@/components/icons';
 
-const TARIFF_PALETTE = ['#818cf8', '#34d399', '#f59e0b', '#ec4899', '#06b6d4', '#8b5cf6'];
-const GIFT_COLOR = '#a855f7';
+const FUNNEL_COLORS = ['#f59e0b', '#34d399'];
+const GIFT_DONUT = { regular: '#818cf8', gift: '#a855f7' };
 
 const PURCHASE_STATUS_STYLES: Record<string, string> = {
   pending: 'bg-warning-500/20 text-warning-400',
@@ -189,7 +179,8 @@ export default function AdminLandingStats() {
   const isValidId = !isNaN(numericId);
   const navigate = useNavigate();
   const { formatWithCurrency } = useCurrency();
-  const colors = useChartColors();
+  const divisor = CHART_COMMON.KOPEKS_DIVISOR;
+  const money = (kopeks: number) => formatWithCurrency(kopeks / divisor);
 
   // Purchases list state
   const [purchaseOffset, setPurchaseOffset] = useState(0);
@@ -242,49 +233,59 @@ export default function AdminLandingStats() {
   const purchaseTotalPages = Math.ceil(purchaseTotal / PURCHASES_PAGE_SIZE);
   const purchaseCurrentPage = Math.floor(purchaseOffset / PURCHASES_PAGE_SIZE) + 1;
 
-  // Prepare daily chart data
-  const dailyData = useMemo(() => {
+  // Daily counts (created / paid) — flat data for MultiSeriesAreaChart
+  const dailyCounts = useMemo(() => {
     if (!stats) return [];
-    return stats.daily_stats.map((item) => ({
-      label: (() => {
-        const d = new Date(item.date + 'T00:00:00');
-        return `${d.getDate()}.${String(d.getMonth() + 1).padStart(2, '0')}`;
-      })(),
-      created: item.created,
-      purchases: item.purchases,
-      revenue: item.revenue_kopeks / CHART_COMMON.KOPEKS_DIVISOR,
-      gifts: item.gifts,
-    }));
-  }, [stats]);
+    const createdLabel = t('admin.landings.stats.created', 'Created');
+    const paidLabel = t('admin.landings.stats.paid', 'Paid');
+    return stats.daily_stats.flatMap((d) => [
+      { date: d.date, key: createdLabel, value: d.created },
+      { date: d.date, key: paidLabel, value: d.purchases },
+    ]);
+  }, [stats, t]);
 
-  // Prepare tariff chart data
-  const tariffData = useMemo(() => {
+  // Daily revenue — for SimpleAreaChart
+  const dailyRevenue = useMemo(() => {
     if (!stats) return [];
-    return stats.tariff_stats.map((item) => ({
-      name: item.tariff_name,
-      purchases: item.purchases,
-      revenue: item.revenue_kopeks / CHART_COMMON.KOPEKS_DIVISOR,
-    }));
-  }, [stats]);
+    return stats.daily_stats.map((d) => ({ date: d.date, value: d.revenue_kopeks / divisor }));
+  }, [stats, divisor]);
 
-  // Donut data for gift vs regular
-  const donutData = useMemo(() => {
+  // Tariff breakdown (by revenue)
+  const tariffItems = useMemo(
+    () =>
+      (stats?.tariff_stats ?? []).map((t2) => ({
+        key: String(t2.tariff_id ?? t2.tariff_name),
+        label: t2.tariff_name,
+        value: t2.revenue_kopeks / divisor,
+      })),
+    [stats, divisor],
+  );
+
+  // Payment method breakdown (by purchases)
+  const paymentDonut = useMemo(
+    () => (stats?.payment_method_stats ?? []).map((p) => ({ name: p.method, value: p.purchases })),
+    [stats],
+  );
+
+  // Traffic source breakdown (by purchases)
+  const sourceItems = useMemo(
+    () =>
+      (stats?.source_stats ?? []).map((s) => ({
+        key: s.source,
+        label: s.source,
+        value: s.purchases,
+      })),
+    [stats],
+  );
+
+  // Funnel: created -> paid
+  const funnelData = useMemo(() => {
     if (!stats) return [];
     return [
-      {
-        name: t('admin.landings.stats.regular'),
-        value: stats.total_regular,
-        color: colors.referrals,
-      },
-      { name: t('admin.landings.stats.gifts'), value: stats.total_gifts, color: GIFT_COLOR },
+      { name: t('admin.landings.stats.created', 'Created'), value: stats.total_created },
+      { name: t('admin.landings.stats.paid', 'Paid'), value: stats.total_successful },
     ];
-  }, [stats, t, colors.referrals]);
-
-  // Bar chart height based on tariff count
-  const barChartHeight = useMemo(() => {
-    const count = tariffData.length;
-    return Math.max(220, count * 45 + 40);
-  }, [tariffData.length]);
+  }, [stats, t]);
 
   // Loading state
   if (isLoading) {
@@ -317,6 +318,8 @@ export default function AdminLandingStats() {
   }
 
   const landingTitle = landing ? resolveLocaleDisplay(landing.title) : `#${numericId}`;
+  const giftClaimRate =
+    stats.total_gifts > 0 ? Math.round((stats.total_gifts_claimed / stats.total_gifts) * 100) : 0;
 
   return (
     <div className="animate-fade-in">
@@ -344,7 +347,7 @@ export default function AdminLandingStats() {
         </div>
       </div>
 
-      <div className="space-y-6">
+      <div className="space-y-4">
         {/* Summary Cards */}
         <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
           <StatCard
@@ -354,14 +357,14 @@ export default function AdminLandingStats() {
             tone="warning"
           />
           <StatCard
-            label={t('admin.landings.stats.paid', 'paid')}
+            label={t('admin.landings.stats.paid', 'Paid')}
             value={stats.total_successful}
             icon={<CheckCircleIcon className="h-5 w-5" />}
             tone="success"
           />
           <StatCard
             label={t('admin.landings.stats.revenue')}
-            value={formatWithCurrency(stats.total_revenue_kopeks / CHART_COMMON.KOPEKS_DIVISOR)}
+            value={money(stats.total_revenue_kopeks)}
             icon={<BanknotesIcon className="h-5 w-5" />}
             tone="success"
           />
@@ -394,317 +397,132 @@ export default function AdminLandingStats() {
           />
           <StatCard
             label={t('admin.landings.stats.avgPurchase')}
-            value={formatWithCurrency(stats.avg_purchase_kopeks / CHART_COMMON.KOPEKS_DIVISOR)}
+            value={money(stats.avg_purchase_kopeks)}
             icon={<WalletIcon className="h-5 w-5" />}
           />
         </div>
 
-        {/* Charts */}
+        {/* Funnel + gift activation */}
         <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
-          {/* Daily Purchases & Revenue */}
           <div className="bento-card">
-            <h3 className="mb-4 font-medium text-dark-200">
-              {t('admin.landings.stats.dailyChart')}
-            </h3>
-            {dailyData.length === 0 ? (
-              <div className="flex h-[220px] items-center justify-center text-sm text-dark-500">
+            <h4 className="mb-3 text-sm font-semibold text-dark-200">
+              {t('admin.landings.stats.funnelTitle', 'Conversion funnel')}
+            </h4>
+            {stats.total_created === 0 ? (
+              <div className="flex h-[180px] items-center justify-center text-sm text-dark-500">
                 {t('admin.landings.stats.noPurchases')}
               </div>
             ) : (
-              <ResponsiveContainer width="100%" height={220}>
-                <AreaChart data={dailyData} margin={CHART_COMMON.CHART.MARGIN}>
-                  <defs>
-                    <linearGradient
-                      id={`landingPurchaseGrad-${numericId}`}
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="1"
-                    >
-                      <stop
-                        offset={CHART_COMMON.GRADIENT.START_OFFSET}
-                        stopColor={colors.referrals}
-                        stopOpacity={CHART_COMMON.GRADIENT.START_OPACITY}
+              <>
+                <ResponsiveContainer width="100%" height={170}>
+                  <FunnelChart>
+                    <Funnel dataKey="value" data={funnelData} isAnimationActive>
+                      {/* Center value labels (dark text reads on the light segments)
+                          — left/right labels can clip in the half-width column. */}
+                      <LabelList
+                        position="center"
+                        dataKey="value"
+                        fill="#0a0f1a"
+                        stroke="none"
+                        fontSize={14}
                       />
-                      <stop
-                        offset={CHART_COMMON.GRADIENT.END_OFFSET}
-                        stopColor={colors.referrals}
-                        stopOpacity={CHART_COMMON.GRADIENT.END_OPACITY}
-                      />
-                    </linearGradient>
-                    <linearGradient
-                      id={`landingRevenueGrad-${numericId}`}
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="1"
-                    >
-                      <stop
-                        offset={CHART_COMMON.GRADIENT.START_OFFSET}
-                        stopColor={colors.earnings}
-                        stopOpacity={CHART_COMMON.GRADIENT.START_OPACITY}
-                      />
-                      <stop
-                        offset={CHART_COMMON.GRADIENT.END_OFFSET}
-                        stopColor={colors.earnings}
-                        stopOpacity={CHART_COMMON.GRADIENT.END_OPACITY}
-                      />
-                    </linearGradient>
-                    <linearGradient
-                      id={`landingCreatedGrad-${numericId}`}
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="1"
-                    >
-                      <stop
-                        offset={CHART_COMMON.GRADIENT.START_OFFSET}
-                        stopColor="#f59e0b"
-                        stopOpacity={CHART_COMMON.GRADIENT.START_OPACITY}
-                      />
-                      <stop
-                        offset={CHART_COMMON.GRADIENT.END_OFFSET}
-                        stopColor="#f59e0b"
-                        stopOpacity={CHART_COMMON.GRADIENT.END_OPACITY}
-                      />
-                    </linearGradient>
-                  </defs>
-                  <CartesianGrid strokeDasharray={CHART_COMMON.GRID_DASH} stroke={colors.grid} />
-                  <XAxis
-                    dataKey="label"
-                    tick={{ fontSize: CHART_COMMON.AXIS.TICK_FONT_SIZE, fill: colors.tick }}
-                    stroke={colors.grid}
-                    interval="preserveStartEnd"
-                  />
-                  <YAxis
-                    yAxisId="left"
-                    tick={{ fontSize: CHART_COMMON.AXIS.TICK_FONT_SIZE, fill: colors.tick }}
-                    stroke={colors.grid}
-                    allowDecimals={false}
-                  />
-                  <YAxis
-                    yAxisId="right"
-                    orientation="right"
-                    tick={{ fontSize: CHART_COMMON.AXIS.TICK_FONT_SIZE, fill: colors.tick }}
-                    stroke={colors.grid}
-                  />
-                  <Tooltip
-                    contentStyle={{
-                      backgroundColor: colors.tooltipBg,
-                      border: `1px solid ${colors.tooltipBorder}`,
-                      borderRadius: CHART_COMMON.TOOLTIP.BORDER_RADIUS,
-                      fontSize: CHART_COMMON.TOOLTIP.FONT_SIZE,
-                      color: colors.label,
-                    }}
-                    labelStyle={{ color: colors.label }}
-                    itemStyle={{ color: colors.label }}
-                  />
-                  <Area
-                    yAxisId="left"
-                    type="monotone"
-                    dataKey="created"
-                    name={t('admin.landings.stats.created', 'Created')}
-                    stroke="#f59e0b"
-                    fill={`url(#landingCreatedGrad-${numericId})`}
-                    strokeWidth={CHART_COMMON.STROKE_WIDTH}
-                  />
-                  <Area
-                    yAxisId="left"
-                    type="monotone"
-                    dataKey="purchases"
-                    name={t('admin.landings.stats.purchases')}
-                    stroke={colors.referrals}
-                    fill={`url(#landingPurchaseGrad-${numericId})`}
-                    strokeWidth={CHART_COMMON.STROKE_WIDTH}
-                  />
-                  <Area
-                    yAxisId="right"
-                    type="monotone"
-                    dataKey="revenue"
-                    name={t('admin.landings.stats.revenueLabel')}
-                    stroke={colors.earnings}
-                    fill={`url(#landingRevenueGrad-${numericId})`}
-                    strokeWidth={CHART_COMMON.STROKE_WIDTH}
-                  />
-                </AreaChart>
-              </ResponsiveContainer>
-            )}
-          </div>
-
-          {/* Daily Purchases Bar Chart */}
-          <div className="bento-card">
-            <h3 className="mb-4 font-medium text-dark-200">
-              {t('admin.landings.stats.dailyPurchases', 'Daily purchases')}
-            </h3>
-            {dailyData.length === 0 ? (
-              <div className="flex h-[220px] items-center justify-center text-sm text-dark-500">
-                {t('admin.landings.stats.noPurchases')}
-              </div>
-            ) : (
-              <div className="space-y-2">
-                {[...dailyData]
-                  .slice(-7)
-                  .reverse()
-                  .map((day, i) => {
-                    const purchasedPct =
-                      (day.created || 0) > 0
-                        ? ((day.purchases || 0) / (day.created || 1)) * 100
-                        : 0;
-                    return (
-                      <div key={i} className="flex items-center gap-2">
-                        <span className="w-10 shrink-0 text-right text-xs text-dark-500">
-                          {day.label}
-                        </span>
-                        <div
-                          className="group relative h-5 flex-1 overflow-hidden rounded-full bg-warning-500/80"
-                          title={`${t('admin.landings.stats.created', 'Created')}: ${day.created || 0}\n${t('admin.landings.stats.paid', 'paid')}: ${day.purchases || 0}\n${t('admin.landings.stats.revenueLabel', 'Revenue')}: ${day.revenue?.toFixed(0) || 0} ${t('common.currency', '\u20BD')}\nCR: ${Math.round(purchasedPct)}%`}
-                        >
-                          <div
-                            className="absolute inset-y-0 left-0 rounded-full bg-accent-500"
-                            style={{ width: `${purchasedPct}%` }}
-                          />
-                        </div>
-                        <span className="w-12 shrink-0 text-xs text-dark-400">
-                          <span className="text-warning-400">{day.created || 0}</span>
-                          <span className="text-dark-600">/</span>
-                          <span className="text-accent-400">{day.purchases || 0}</span>
-                        </span>
-                      </div>
-                    );
-                  })}
-                <div className="mt-2 flex items-center gap-4 text-xs text-dark-500">
-                  <div className="flex items-center gap-1">
-                    <div className="h-2 w-2 rounded-full bg-warning-500/80" />
-                    <span>{t('admin.landings.stats.created', 'Created')}</span>
-                  </div>
-                  <div className="flex items-center gap-1">
-                    <div className="h-2 w-2 rounded-full bg-accent-500" />
-                    <span>{t('admin.landings.stats.paid', 'paid')}</span>
-                  </div>
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Tariff Distribution -- full width */}
-        <div className="bento-card">
-          <h3 className="mb-4 font-medium text-dark-200">
-            {t('admin.landings.stats.tariffChart')}
-          </h3>
-          {tariffData.length === 0 ? (
-            <div className="flex h-[220px] items-center justify-center text-sm text-dark-500">
-              {t('admin.landings.stats.noPurchases')}
-            </div>
-          ) : (
-            <ResponsiveContainer width="100%" height={barChartHeight}>
-              <BarChart
-                data={tariffData}
-                layout="vertical"
-                margin={{ ...CHART_COMMON.CHART.MARGIN, left: 10 }}
-              >
-                <CartesianGrid strokeDasharray={CHART_COMMON.GRID_DASH} stroke={colors.grid} />
-                <XAxis
-                  type="number"
-                  tick={{ fontSize: CHART_COMMON.AXIS.TICK_FONT_SIZE, fill: colors.tick }}
-                  stroke={colors.grid}
-                  allowDecimals={false}
-                />
-                <YAxis
-                  type="category"
-                  dataKey="name"
-                  tick={{ fontSize: CHART_COMMON.AXIS.TICK_FONT_SIZE, fill: colors.tick }}
-                  stroke={colors.grid}
-                  width={100}
-                />
-                <Tooltip
-                  contentStyle={{
-                    backgroundColor: colors.tooltipBg,
-                    border: `1px solid ${colors.tooltipBorder}`,
-                    borderRadius: CHART_COMMON.TOOLTIP.BORDER_RADIUS,
-                    fontSize: CHART_COMMON.TOOLTIP.FONT_SIZE,
-                    color: colors.label,
-                  }}
-                  labelStyle={{ color: colors.label }}
-                  itemStyle={{ color: colors.label }}
-                  formatter={(value: number | undefined) => {
-                    return [value ?? 0, t('admin.landings.stats.purchases')];
-                  }}
-                />
-                <Bar
-                  dataKey="purchases"
-                  name={t('admin.landings.stats.purchases')}
-                  radius={[0, 4, 4, 0]}
-                >
-                  {tariffData.map((_, index) => (
-                    <Cell key={index} fill={TARIFF_PALETTE[index % TARIFF_PALETTE.length]} />
-                  ))}
-                </Bar>
-              </BarChart>
-            </ResponsiveContainer>
-          )}
-        </div>
-
-        {/* Gift vs Regular Donut */}
-        {stats.total_purchases > 0 && (
-          <div className="bento-card">
-            <h3 className="mb-4 font-medium text-dark-200">
-              {t('admin.landings.stats.giftBreakdown')}
-            </h3>
-            <div className="flex items-center justify-center gap-8">
-              <div className="relative">
-                <ResponsiveContainer width={160} height={160}>
-                  <PieChart>
-                    <Pie
-                      data={donutData}
-                      cx="50%"
-                      cy="50%"
-                      innerRadius={50}
-                      outerRadius={70}
-                      dataKey="value"
-                      strokeWidth={0}
-                    >
-                      {donutData.map((entry, index) => (
-                        <Cell key={index} fill={entry.color} />
+                      {funnelData.map((_, i) => (
+                        <Cell key={i} fill={FUNNEL_COLORS[i % FUNNEL_COLORS.length]} />
                       ))}
-                    </Pie>
-                    <Tooltip
-                      contentStyle={{
-                        backgroundColor: colors.tooltipBg,
-                        border: `1px solid ${colors.tooltipBorder}`,
-                        borderRadius: CHART_COMMON.TOOLTIP.BORDER_RADIUS,
-                        fontSize: CHART_COMMON.TOOLTIP.FONT_SIZE,
-                        color: colors.label,
-                      }}
-                      itemStyle={{ color: colors.label }}
-                    />
-                  </PieChart>
+                    </Funnel>
+                  </FunnelChart>
                 </ResponsiveContainer>
-                {/* Center text */}
-                <div className="absolute inset-0 flex items-center justify-center">
-                  <span className="text-lg font-bold text-dark-100">{stats.total_purchases}</span>
-                </div>
-              </div>
-              <div className="space-y-3">
-                <div className="flex items-center gap-2">
-                  <div
-                    className="h-3 w-3 rounded-full"
-                    style={{ backgroundColor: colors.referrals }}
-                  />
-                  <span className="text-sm text-dark-300">
-                    {t('admin.landings.stats.regular')}: {stats.total_regular}
-                  </span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <div className="h-3 w-3 rounded-full" style={{ backgroundColor: GIFT_COLOR }} />
-                  <span className="text-sm text-dark-300">
-                    {t('admin.landings.stats.gifts')}: {stats.total_gifts}
-                  </span>
+                <div className="mt-2 flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-xs text-dark-400">
+                  {funnelData.map((s, i) => (
+                    <span key={i} className="flex items-center gap-1.5">
+                      <span
+                        className="h-2 w-2 rounded-full"
+                        style={{ backgroundColor: FUNNEL_COLORS[i % FUNNEL_COLORS.length] }}
+                      />
+                      {s.name}: <span className="text-dark-200">{s.value}</span>
+                    </span>
+                  ))}
+                  <span className="text-accent-400">{stats.conversion_rate}%</span>
+                </div>
+              </>
+            )}
+          </div>
+
+          <div className="bento-card">
+            <h4 className="mb-3 text-sm font-semibold text-dark-200">
+              {t('admin.landings.stats.giftClaimTitle', 'Gift activation')}
+            </h4>
+            <div className="flex items-end justify-between">
+              <div>
+                <div className="text-2xl font-semibold text-dark-100">
+                  {stats.total_gifts_claimed}
+                  <span className="text-base text-dark-500"> / {stats.total_gifts}</span>
+                </div>
+                <div className="mt-0.5 text-xs text-dark-500">
+                  {t('admin.landings.stats.giftClaimLabel', 'claimed / sent')}
                 </div>
               </div>
+              <div className="text-2xl font-semibold text-accent-400">{giftClaimRate}%</div>
+            </div>
+            <div className="mt-3 h-2 overflow-hidden rounded-full bg-dark-800/60">
+              <div
+                className="h-full rounded-full bg-accent-500 transition-all"
+                style={{ width: `${giftClaimRate}%` }}
+              />
             </div>
           </div>
-        )}
+        </div>
+
+        {/* Daily charts */}
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+          <MultiSeriesAreaChart
+            data={dailyCounts}
+            title={t('admin.landings.stats.dailyPurchases', 'Daily purchases')}
+            chartId={`landing-counts-${numericId}`}
+          />
+          <SimpleAreaChart
+            data={dailyRevenue}
+            title={t('admin.landings.stats.dailyRevenue', 'Daily revenue')}
+            chartId={`landing-revenue-${numericId}`}
+            valueLabel={t('admin.landings.stats.revenueLabel', 'Revenue')}
+          />
+        </div>
+
+        {/* Tariff + payment method */}
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+          <BreakdownList
+            title={t('admin.landings.stats.tariffChart')}
+            items={tariffItems}
+            valueFormatter={(v) => formatWithCurrency(v)}
+          />
+          <DonutChart
+            data={paymentDonut}
+            title={t('admin.landings.stats.byPaymentMethod', 'By payment method')}
+          />
+        </div>
+
+        {/* Source + gift composition */}
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+          <BreakdownList
+            title={t('admin.landings.stats.bySource', 'Traffic sources')}
+            items={sourceItems}
+          />
+          <DonutChart
+            data={[
+              {
+                name: t('admin.landings.stats.regular'),
+                value: stats.total_regular,
+                color: GIFT_DONUT.regular,
+              },
+              {
+                name: t('admin.landings.stats.gifts'),
+                value: stats.total_gifts,
+                color: GIFT_DONUT.gift,
+              },
+            ]}
+            title={t('admin.landings.stats.giftBreakdown')}
+          />
+        </div>
 
         {/* Purchases List */}
         <div className="bento-card">
@@ -746,9 +564,7 @@ export default function AdminLandingStats() {
                   <PurchaseCard
                     key={item.id}
                     item={item}
-                    formatPrice={(kopeks) =>
-                      formatWithCurrency(kopeks / CHART_COMMON.KOPEKS_DIVISOR)
-                    }
+                    formatPrice={(kopeks) => money(kopeks)}
                     lang={i18n.language}
                     t={t}
                   />

From b210a04dbb772fe1faf66f02b6ef6db447e9766e Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Wed, 3 Jun 2026 15:16:17 +0300
Subject: [PATCH 10/36] fix(landing-stats): guard gift claim-rate against stale
 cache (avoid NaN%)

---
 src/pages/AdminLandingStats.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/AdminLandingStats.tsx b/src/pages/AdminLandingStats.tsx
index fc092e7..2568814 100644
--- a/src/pages/AdminLandingStats.tsx
+++ b/src/pages/AdminLandingStats.tsx
@@ -318,8 +318,9 @@ export default function AdminLandingStats() {
   }
 
   const landingTitle = landing ? resolveLocaleDisplay(landing.title) : `#${numericId}`;
+  const giftsClaimed = stats.total_gifts_claimed ?? 0;
   const giftClaimRate =
-    stats.total_gifts > 0 ? Math.round((stats.total_gifts_claimed / stats.total_gifts) * 100) : 0;
+    stats.total_gifts > 0 ? Math.round((giftsClaimed / stats.total_gifts) * 100) : 0;
 
   return (
     <div className="animate-fade-in">
@@ -455,7 +456,7 @@ export default function AdminLandingStats() {
             <div className="flex items-end justify-between">
               <div>
                 <div className="text-2xl font-semibold text-dark-100">
-                  {stats.total_gifts_claimed}
+                  {giftsClaimed}
                   <span className="text-base text-dark-500"> / {stats.total_gifts}</span>
                 </div>
                 <div className="mt-0.5 text-xs text-dark-500">

From 5855a88dc630924ea3e047ccb9cc85e578532b08 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Wed, 3 Jun 2026 15:49:58 +0300
Subject: [PATCH 11/36] fix(connection): Happ TV quick-connect is Happ-only +
 matches config-block styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The TV quick-connect block (Подключить TV / Сканировать QR) is a Happ-only
feature (check.happ.su/sendtv), but it rendered for ANY app on a TV platform and
used one-off button styles (solid btn-primary + grey btn-secondary) that clashed
with the outlined-accent buttons that come from the subscription-page config.

- Show TvQuickConnect only for the Happ app (detected by its happ:// deep-link
  scheme, name as fallback).
- Extract the config-block button style into a shared blockButtonClass and use it
  for the TV buttons too, so they adapt to exactly the same visual language as the
  panel-config blocks (no divergent one-off styling).
- Align the code input with the Happ Android TV API doc (5-digit numeric):
  placeholder 12345 + inputMode numeric. The send call already matches the spec
  (POST check.happ.su/sendtv/{code}, body {"data": base64(subscriptionUrl)}).
---
 src/components/connection/InstallationGuide.tsx  | 13 +++++++++++--
 src/components/connection/TvQuickConnect.tsx     | 15 ++++++++++-----
 .../connection/blocks/BlockButtons.tsx           | 10 ++--------
 src/components/connection/blocks/buttonStyles.ts | 16 ++++++++++++++++
 4 files changed, 39 insertions(+), 15 deletions(-)
 create mode 100644 src/components/connection/blocks/buttonStyles.ts

diff --git a/src/components/connection/InstallationGuide.tsx b/src/components/connection/InstallationGuide.tsx
index 05aa6cc..c04b574 100644
--- a/src/components/connection/InstallationGuide.tsx
+++ b/src/components/connection/InstallationGuide.tsx
@@ -34,6 +34,14 @@ const RENDERERS: Record<string, React.ComponentType<BlockRendererProps>> = {
   minimal: MinimalBlock,
 };
 
+/** TV quick-connect is a Happ-only feature (check.happ.su/sendtv) — show it only
+ *  for the Happ app, detected by its happ:// deep-link scheme (name as fallback). */
+function isHappApp(app: RemnawaveAppClient | null): boolean {
+  if (!app) return false;
+  if ((app.deepLink ?? '').toLowerCase().startsWith('happ://')) return true;
+  return app.name.toLowerCase().includes('happ');
+}
+
 interface Props {
   appConfig: AppConfig;
   onOpenDeepLink: (url: string) => void;
@@ -312,8 +320,9 @@ export default function InstallationGuide({
         </a>
       )}
 
-      {/* Blocks — for TV: first block, Quick Connect, last block */}
-      {selectedApp && isTvPlatform && appConfig.subscriptionUrl ? (
+      {/* Blocks — for the Happ TV app: first block, Quick Connect, last block.
+          Other apps (or non-TV) render their blocks normally. */}
+      {selectedApp && isTvPlatform && isHappApp(selectedApp) && appConfig.subscriptionUrl ? (
         <>
           {selectedApp.blocks.length > 0 && (
             <Renderer
diff --git a/src/components/connection/TvQuickConnect.tsx b/src/components/connection/TvQuickConnect.tsx
index 0f8865c..43fc103 100644
--- a/src/components/connection/TvQuickConnect.tsx
+++ b/src/components/connection/TvQuickConnect.tsx
@@ -5,6 +5,7 @@ import {
   isQrScannerSupported,
   retrieveLaunchParams,
 } from '@telegram-apps/sdk-react';
+import { blockButtonClass } from './blocks/buttonStyles';
 
 const TG_MOBILE_PLATFORMS = new Set(['ios', 'android', 'android_x', 'ios_x']);
 
@@ -198,6 +199,10 @@ export default function TvQuickConnect({ subscriptionUrl, isLight }: Props) {
     ? 'w-full rounded-xl border border-dark-700/60 bg-white px-4 py-3 text-center text-2xl font-bold tracking-[0.3em] uppercase text-dark-100 outline-none focus:border-accent-500 focus:ring-1 focus:ring-accent-500'
     : 'w-full rounded-xl border border-dark-700 bg-dark-900/50 px-4 py-3 text-center text-2xl font-bold tracking-[0.3em] uppercase text-dark-100 outline-none focus:border-accent-500 focus:ring-1 focus:ring-accent-500';
 
+  // Full-width buttons in the same outlined-accent language as the config blocks
+  // (so the Happ TV block adapts to the subscription-page styles, not a one-off).
+  const actionBtnClass = `${blockButtonClass('light', isLight)} flex w-full items-center justify-center`;
+
   return (
     <div className="space-y-3">
       {/* Code input */}
@@ -232,15 +237,15 @@ export default function TvQuickConnect({ subscriptionUrl, isLight }: Props) {
                 maxLength={5}
                 value={code}
                 onChange={(e) => setCode(e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, ''))}
-                placeholder="A1B2C"
+                placeholder="12345"
                 autoComplete="one-time-code"
-                inputMode="text"
+                inputMode="numeric"
                 className={inputClass}
               />
               <button
                 onClick={() => sendToTV(code)}
                 disabled={sending || code.length !== 5}
-                className="btn-primary w-full justify-center py-3 disabled:opacity-50"
+                className={`${actionBtnClass} disabled:opacity-50`}
               >
                 {sending ? (
                   <div className="h-5 w-5 animate-spin rounded-full border-2 border-white/30 border-t-white" />
@@ -285,7 +290,7 @@ export default function TvQuickConnect({ subscriptionUrl, isLight }: Props) {
             </p>
 
             {!scanning && (
-              <button onClick={startScan} className="btn-secondary mt-3 w-full justify-center py-3">
+              <button onClick={startScan} className={`${actionBtnClass} mt-3`}>
                 <svg
                   className="mr-2 h-5 w-5"
                   fill="none"
@@ -310,7 +315,7 @@ export default function TvQuickConnect({ subscriptionUrl, isLight }: Props) {
             <div className={scanning ? 'mt-3 space-y-2' : 'hidden'}>
               <div id="tv-qr-reader" className="overflow-hidden rounded-xl" />
               {scanning && (
-                <button onClick={stopScan} className="btn-secondary w-full justify-center py-2.5">
+                <button onClick={stopScan} className={actionBtnClass}>
                   {t('subscription.tvQuickConnect.stopScan')}
                 </button>
               )}
diff --git a/src/components/connection/blocks/BlockButtons.tsx b/src/components/connection/blocks/BlockButtons.tsx
index 6f5341b..d0eae14 100644
--- a/src/components/connection/blocks/BlockButtons.tsx
+++ b/src/components/connection/blocks/BlockButtons.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { CheckIcon, CopyIcon } from '@/components/icons';
 import type { RemnawaveButtonClient, LocalizedText } from '@/types';
 import { copyToClipboard } from '@/utils/clipboard';
+import { blockButtonClass } from './buttonStyles';
 
 // eslint-disable-next-line no-script-url
 const dangerousSchemes = ['javascript:', 'data:', 'vbscript:', 'file:'];
@@ -57,14 +58,7 @@ export function BlockButtons({
 
   if (!buttons || buttons.length === 0) return null;
 
-  const baseClass =
-    variant === 'light'
-      ? isLight
-        ? 'rounded-xl border border-accent-500/50 px-4 py-2 text-sm font-medium text-accent-600 shadow-sm transition-all hover:bg-accent-500/10'
-        : 'rounded-xl border border-accent-500/40 px-4 py-2 text-sm font-medium text-accent-400 transition-all hover:bg-accent-500/10'
-      : isLight
-        ? 'rounded-xl px-3 py-1.5 text-sm font-medium text-dark-300 transition-all hover:bg-dark-700/30'
-        : 'rounded-xl px-3 py-1.5 text-sm font-medium text-dark-300 transition-all hover:bg-dark-700/50';
+  const baseClass = blockButtonClass(variant, isLight);
 
   return (
     <div className="mt-3 flex flex-wrap gap-2">
diff --git a/src/components/connection/blocks/buttonStyles.ts b/src/components/connection/blocks/buttonStyles.ts
new file mode 100644
index 0000000..f20d804
--- /dev/null
+++ b/src/components/connection/blocks/buttonStyles.ts
@@ -0,0 +1,16 @@
+/**
+ * Shared button styling for connection blocks. The config-driven blocks
+ * (BlockButtons) and the Happ TV quick-connect both render through this so the
+ * latter adapts to exactly the same visual language as the styles coming from
+ * the subscription-page config — no divergent one-off button styles.
+ */
+export function blockButtonClass(variant: 'light' | 'subtle', isLight?: boolean): string {
+  if (variant === 'light') {
+    return isLight
+      ? 'rounded-xl border border-accent-500/50 px-4 py-2 text-sm font-medium text-accent-600 shadow-sm transition-all hover:bg-accent-500/10'
+      : 'rounded-xl border border-accent-500/40 px-4 py-2 text-sm font-medium text-accent-400 transition-all hover:bg-accent-500/10';
+  }
+  return isLight
+    ? 'rounded-xl px-3 py-1.5 text-sm font-medium text-dark-300 transition-all hover:bg-dark-700/30'
+    : 'rounded-xl px-3 py-1.5 text-sm font-medium text-dark-300 transition-all hover:bg-dark-700/50';
+}

From ca54cb4732ee30cc18a851cd8a6b8b2301194014 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Wed, 3 Jun 2026 15:54:54 +0300
Subject: [PATCH 12/36] fix(connection): restrict Happ TV quick-connect to
 Android TV only

Verified against Happ docs: the sendtv 5-digit-code / Web-Import API
(check.happ.su/sendtv) is Android-TV-only. Apple TV (tvOS) uses a different
mechanism (tv.happ.su temporary code), so POSTing the code to check.happ.su
would hit the wrong endpoint. The block was gated on isTvPlatform (androidTV ||
appleTV); narrow it to androidTV. Apple TV now renders its normal config blocks.
---
 src/components/connection/InstallationGuide.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/connection/InstallationGuide.tsx b/src/components/connection/InstallationGuide.tsx
index c04b574..49dff9b 100644
--- a/src/components/connection/InstallationGuide.tsx
+++ b/src/components/connection/InstallationGuide.tsx
@@ -149,11 +149,12 @@ export default function InstallationGuide({
     ],
   );
 
-  const selectedIsTv =
-    (activePlatformKey || availablePlatforms[0]) === 'androidTV' ||
-    (activePlatformKey || availablePlatforms[0]) === 'appleTV';
   const userIsOnTv = detectedPlatform === 'androidTV' || detectedPlatform === 'appleTV';
-  const isTvPlatform = selectedIsTv && !userIsOnTv;
+  // Happ's TV quick-connect (check.happ.su/sendtv, 5-digit code) is an ANDROID TV
+  // -only API. Apple TV uses a different mechanism (tv.happ.su temporary code), so
+  // the block must NOT show there — it would POST to the wrong endpoint.
+  const isAndroidTvLayout =
+    (activePlatformKey || availablePlatforms[0]) === 'androidTV' && !userIsOnTv;
 
   const currentPlatformKey = activePlatformKey || availablePlatforms[0];
   const currentPlatformData = currentPlatformKey
@@ -322,7 +323,7 @@ export default function InstallationGuide({
 
       {/* Blocks — for the Happ TV app: first block, Quick Connect, last block.
           Other apps (or non-TV) render their blocks normally. */}
-      {selectedApp && isTvPlatform && isHappApp(selectedApp) && appConfig.subscriptionUrl ? (
+      {selectedApp && isAndroidTvLayout && isHappApp(selectedApp) && appConfig.subscriptionUrl ? (
         <>
           {selectedApp.blocks.length > 0 && (
             <Renderer

From c91c9e0441232109398798d4c42711b1c897b5ed Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Wed, 3 Jun 2026 16:09:49 +0300
Subject: [PATCH 13/36] fix(connection): Happ TV connect renders through the
 active block style (all 4)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The TV quick-connect was rendered as standalone cards inserted between two
sliced block lists, which broke the panel's chosen style (e.g. split the
timeline rail) and dropped a step. Now it renders THROUGH the active renderer:

- Blocks gain an optional customNode; every renderer (cards/timeline/accordion/
  minimal) drops it into the block body, so it inherits that exact style.
- InstallationGuide renders the FULL block list in the active style and injects
  the TV connect widget as customNode on the "add subscription" step (no more
  slicing / dropped steps) — only for the Happ Android TV app.
- TvQuickConnect is now content-only (no one-off cards/titles); the block step is
  the wrapper. Buttons already use the shared blockButtonClass.
---
 .../connection/InstallationGuide.tsx          |  52 +++---
 src/components/connection/TvQuickConnect.tsx  | 149 ++++++------------
 .../connection/blocks/AccordionBlock.tsx      |   7 +-
 .../connection/blocks/CardsBlock.tsx          |   7 +-
 .../connection/blocks/MinimalBlock.tsx        |   7 +-
 .../connection/blocks/TimelineBlock.tsx       |   7 +-
 src/components/connection/blocks/index.ts     |   2 +-
 src/components/connection/blocks/types.ts     |  11 +-
 8 files changed, 104 insertions(+), 138 deletions(-)

diff --git a/src/components/connection/InstallationGuide.tsx b/src/components/connection/InstallationGuide.tsx
index 49dff9b..a6038a5 100644
--- a/src/components/connection/InstallationGuide.tsx
+++ b/src/components/connection/InstallationGuide.tsx
@@ -10,7 +10,7 @@ import type {
 } from '@/types';
 import { useTheme } from '@/hooks/useTheme';
 import { CardsBlock, TimelineBlock, AccordionBlock, MinimalBlock, BlockButtons } from './blocks';
-import type { BlockRendererProps } from './blocks';
+import type { BlockRendererProps, RenderBlock } from './blocks';
 import TvQuickConnect from './TvQuickConnect';
 import { BackIcon, BookOpenIcon, ChevronIcon } from '@/components/icons';
 
@@ -194,6 +194,21 @@ export default function InstallationGuide({
   const blockType = appConfig.uiConfig?.installationGuidesBlockType || 'cards';
   const Renderer = RENDERERS[blockType] || CardsBlock;
 
+  // For the Happ Android TV app, inject the TV connect widget into a step as
+  // customNode so it renders THROUGH the active block style (cards/timeline/
+  // accordion/minimal) instead of as separate clashing cards that break it.
+  const showTvConnect = Boolean(
+    selectedApp && isAndroidTvLayout && isHappApp(selectedApp) && appConfig.subscriptionUrl,
+  );
+  let renderBlocks: RenderBlock[] = selectedApp?.blocks ?? [];
+  if (selectedApp && showTvConnect && appConfig.subscriptionUrl) {
+    // install → add-subscription → connect: attach to the add step (index 1);
+    // fall back to the last block for shorter configs.
+    const idx = selectedApp.blocks.length >= 3 ? 1 : Math.max(0, selectedApp.blocks.length - 1);
+    const widget = <TvQuickConnect subscriptionUrl={appConfig.subscriptionUrl} isLight={isLight} />;
+    renderBlocks = selectedApp.blocks.map((b, i) => (i === idx ? { ...b, customNode: widget } : b));
+  }
+
   return (
     <div className="space-y-6 pb-6">
       {/* Header + platform dropdown */}
@@ -321,42 +336,19 @@ export default function InstallationGuide({
         </a>
       )}
 
-      {/* Blocks — for the Happ TV app: first block, Quick Connect, last block.
-          Other apps (or non-TV) render their blocks normally. */}
-      {selectedApp && isAndroidTvLayout && isHappApp(selectedApp) && appConfig.subscriptionUrl ? (
-        <>
-          {selectedApp.blocks.length > 0 && (
-            <Renderer
-              blocks={selectedApp.blocks.slice(0, 1)}
-              isMobile={isMobile}
-              isLight={isLight}
-              getLocalizedText={getLocalizedText}
-              getSvgHtml={getSvgHtml}
-              renderBlockButtons={renderBlockButtons}
-            />
-          )}
-          <TvQuickConnect subscriptionUrl={appConfig.subscriptionUrl} isLight={isLight} />
-          {selectedApp.blocks.length > 1 && (
-            <Renderer
-              blocks={selectedApp.blocks.slice(-1)}
-              isMobile={isMobile}
-              isLight={isLight}
-              getLocalizedText={getLocalizedText}
-              getSvgHtml={getSvgHtml}
-              renderBlockButtons={renderBlockButtons}
-            />
-          )}
-        </>
-      ) : selectedApp ? (
+      {/* Blocks rendered in the panel's active style. For the Happ Android TV
+          app the TV connect widget is injected into a step (customNode), so it
+          adapts to that style instead of breaking it. */}
+      {selectedApp && (
         <Renderer
-          blocks={selectedApp.blocks}
+          blocks={renderBlocks}
           isMobile={isMobile}
           isLight={isLight}
           getLocalizedText={getLocalizedText}
           getSvgHtml={getSvgHtml}
           renderBlockButtons={renderBlockButtons}
         />
-      ) : null}
+      )}
     </div>
   );
 }
diff --git a/src/components/connection/TvQuickConnect.tsx b/src/components/connection/TvQuickConnect.tsx
index 43fc103..8400d40 100644
--- a/src/components/connection/TvQuickConnect.tsx
+++ b/src/components/connection/TvQuickConnect.tsx
@@ -191,10 +191,6 @@ export default function TvQuickConnect({ subscriptionUrl, isLight }: Props) {
     }
   }, [tgNative, sendToTV, showToast, onScanDecoded, t]);
 
-  const cardClass = isLight
-    ? 'rounded-2xl border border-dark-700/60 bg-white/80 shadow-sm p-4 sm:p-5'
-    : 'rounded-2xl border border-dark-700/50 bg-dark-800/50 p-4 sm:p-5';
-
   const inputClass = isLight
     ? 'w-full rounded-xl border border-dark-700/60 bg-white px-4 py-3 text-center text-2xl font-bold tracking-[0.3em] uppercase text-dark-100 outline-none focus:border-accent-500 focus:ring-1 focus:ring-accent-500'
     : 'w-full rounded-xl border border-dark-700 bg-dark-900/50 px-4 py-3 text-center text-2xl font-bold tracking-[0.3em] uppercase text-dark-100 outline-none focus:border-accent-500 focus:ring-1 focus:ring-accent-500';
@@ -204,66 +200,46 @@ export default function TvQuickConnect({ subscriptionUrl, isLight }: Props) {
   const actionBtnClass = `${blockButtonClass('light', isLight)} flex w-full items-center justify-center`;
 
   return (
-    <div className="space-y-3">
-      {/* Code input */}
-      <div className={cardClass}>
-        <div className="flex items-start gap-3">
-          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-accent-500/20 to-accent-600/10">
-            <svg
-              className="h-5 w-5 text-accent-500"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              strokeWidth={1.5}
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M6 20.25h12m-7.5-3v3m3-3v3m-10.125-3h17.25c.621 0 1.125-.504 1.125-1.125V4.875c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125z"
-              />
-            </svg>
-          </div>
-          <div className="min-w-0 flex-1">
-            <h3 className="font-semibold text-dark-100">
-              {t('subscription.tvQuickConnect.title')}
-            </h3>
-            <p className="mt-1 text-sm text-dark-400">
-              {t('subscription.tvQuickConnect.description')}
-            </p>
-
-            <div className="mt-3 space-y-2">
-              <input
-                type="text"
-                maxLength={5}
-                value={code}
-                onChange={(e) => setCode(e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, ''))}
-                placeholder="12345"
-                autoComplete="one-time-code"
-                inputMode="numeric"
-                className={inputClass}
-              />
-              <button
-                onClick={() => sendToTV(code)}
-                disabled={sending || code.length !== 5}
-                className={`${actionBtnClass} disabled:opacity-50`}
-              >
-                {sending ? (
-                  <div className="h-5 w-5 animate-spin rounded-full border-2 border-white/30 border-t-white" />
-                ) : (
-                  t('subscription.tvQuickConnect.sendBtn')
-                )}
-              </button>
-            </div>
-          </div>
-        </div>
+    <div className="mt-3 space-y-4">
+      {/* Code import — the block step (timeline/cards/accordion/minimal) is the
+          wrapper; here we only render the interactive controls so the widget
+          inherits whatever style the panel config produced. */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium text-dark-200">
+          {t('subscription.tvQuickConnect.title')}
+        </p>
+        <input
+          type="text"
+          maxLength={5}
+          value={code}
+          onChange={(e) => setCode(e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, ''))}
+          placeholder="12345"
+          autoComplete="one-time-code"
+          inputMode="numeric"
+          className={inputClass}
+        />
+        <button
+          onClick={() => sendToTV(code)}
+          disabled={sending || code.length !== 5}
+          className={`${actionBtnClass} disabled:opacity-50`}
+        >
+          {sending ? (
+            <div className="h-5 w-5 animate-spin rounded-full border-2 border-accent-500/30 border-t-accent-500" />
+          ) : (
+            t('subscription.tvQuickConnect.sendBtn')
+          )}
+        </button>
       </div>
 
-      {/* QR Scanner */}
-      <div className={cardClass}>
-        <div className="flex items-start gap-3">
-          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-accent-500/20 to-accent-600/10">
+      {/* QR scan */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium text-dark-200">
+          {t('subscription.tvQuickConnect.scanTitle')}
+        </p>
+        {!scanning && (
+          <button onClick={startScan} className={actionBtnClass}>
             <svg
-              className="h-5 w-5 text-accent-500"
+              className="mr-2 h-5 w-5"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor"
@@ -280,47 +256,16 @@ export default function TvQuickConnect({ subscriptionUrl, isLight }: Props) {
                 d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z"
               />
             </svg>
-          </div>
-          <div className="min-w-0 flex-1">
-            <h3 className="font-semibold text-dark-100">
-              {t('subscription.tvQuickConnect.scanTitle')}
-            </h3>
-            <p className="mt-1 text-sm text-dark-400">
-              {t('subscription.tvQuickConnect.scanDescription')}
-            </p>
-
-            {!scanning && (
-              <button onClick={startScan} className={`${actionBtnClass} mt-3`}>
-                <svg
-                  className="mr-2 h-5 w-5"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                  strokeWidth={1.5}
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z"
-                  />
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z"
-                  />
-                </svg>
-                {t('subscription.tvQuickConnect.scanBtn')}
-              </button>
-            )}
-            <div className={scanning ? 'mt-3 space-y-2' : 'hidden'}>
-              <div id="tv-qr-reader" className="overflow-hidden rounded-xl" />
-              {scanning && (
-                <button onClick={stopScan} className={actionBtnClass}>
-                  {t('subscription.tvQuickConnect.stopScan')}
-                </button>
-              )}
-            </div>
-          </div>
+            {t('subscription.tvQuickConnect.scanBtn')}
+          </button>
+        )}
+        <div className={scanning ? 'space-y-2' : 'hidden'}>
+          <div id="tv-qr-reader" className="overflow-hidden rounded-xl" />
+          {scanning && (
+            <button onClick={stopScan} className={actionBtnClass}>
+              {t('subscription.tvQuickConnect.stopScan')}
+            </button>
+          )}
         </div>
       </div>
 
diff --git a/src/components/connection/blocks/AccordionBlock.tsx b/src/components/connection/blocks/AccordionBlock.tsx
index d07bcad..e4da74d 100644
--- a/src/components/connection/blocks/AccordionBlock.tsx
+++ b/src/components/connection/blocks/AccordionBlock.tsx
@@ -15,7 +15,11 @@ export function AccordionBlock({
   const [openIndex, setOpenIndex] = useState<number | null>(0);
 
   const visibleBlocks = blocks.filter(
-    (b) => getLocalizedText(b.title) || getLocalizedText(b.description) || b.buttons?.length,
+    (b) =>
+      getLocalizedText(b.title) ||
+      getLocalizedText(b.description) ||
+      b.buttons?.length ||
+      b.customNode,
   );
 
   if (!visibleBlocks.length) return null;
@@ -68,6 +72,7 @@ export function AccordionBlock({
                   {getLocalizedText(block.description)}
                 </p>
                 {renderBlockButtons(block.buttons, 'light')}
+                {block.customNode}
               </div>
             </div>
           </div>
diff --git a/src/components/connection/blocks/CardsBlock.tsx b/src/components/connection/blocks/CardsBlock.tsx
index 5ef48c5..a589fd8 100644
--- a/src/components/connection/blocks/CardsBlock.tsx
+++ b/src/components/connection/blocks/CardsBlock.tsx
@@ -11,7 +11,11 @@ export function CardsBlock({
   renderBlockButtons,
 }: BlockRendererProps) {
   const visibleBlocks = blocks.filter(
-    (b) => getLocalizedText(b.title) || getLocalizedText(b.description) || b.buttons?.length,
+    (b) =>
+      getLocalizedText(b.title) ||
+      getLocalizedText(b.description) ||
+      b.buttons?.length ||
+      b.customNode,
   );
 
   if (!visibleBlocks.length) return null;
@@ -43,6 +47,7 @@ export function CardsBlock({
                   {getLocalizedText(block.description)}
                 </p>
                 {renderBlockButtons(block.buttons, 'light')}
+                {block.customNode}
               </div>
             </div>
           </div>
diff --git a/src/components/connection/blocks/MinimalBlock.tsx b/src/components/connection/blocks/MinimalBlock.tsx
index e5abb99..4185d0b 100644
--- a/src/components/connection/blocks/MinimalBlock.tsx
+++ b/src/components/connection/blocks/MinimalBlock.tsx
@@ -11,7 +11,11 @@ export function MinimalBlock({
   renderBlockButtons,
 }: BlockRendererProps) {
   const visibleBlocks = blocks.filter(
-    (b) => getLocalizedText(b.title) || getLocalizedText(b.description) || b.buttons?.length,
+    (b) =>
+      getLocalizedText(b.title) ||
+      getLocalizedText(b.description) ||
+      b.buttons?.length ||
+      b.customNode,
   );
 
   if (!visibleBlocks.length) return null;
@@ -44,6 +48,7 @@ export function MinimalBlock({
               {getLocalizedText(block.description)}
             </p>
             {renderBlockButtons(block.buttons, 'subtle')}
+            {block.customNode}
           </div>
         );
       })}
diff --git a/src/components/connection/blocks/TimelineBlock.tsx b/src/components/connection/blocks/TimelineBlock.tsx
index 400469f..e7d23ad 100644
--- a/src/components/connection/blocks/TimelineBlock.tsx
+++ b/src/components/connection/blocks/TimelineBlock.tsx
@@ -11,7 +11,11 @@ export function TimelineBlock({
   renderBlockButtons,
 }: BlockRendererProps) {
   const visibleBlocks = blocks.filter(
-    (b) => getLocalizedText(b.title) || getLocalizedText(b.description) || b.buttons?.length,
+    (b) =>
+      getLocalizedText(b.title) ||
+      getLocalizedText(b.description) ||
+      b.buttons?.length ||
+      b.customNode,
   );
 
   if (!visibleBlocks.length) return null;
@@ -43,6 +47,7 @@ export function TimelineBlock({
                 {getLocalizedText(block.description)}
               </p>
               {renderBlockButtons(block.buttons, 'light')}
+              {block.customNode}
             </div>
           </div>
         );
diff --git a/src/components/connection/blocks/index.ts b/src/components/connection/blocks/index.ts
index 633e0e9..b96bbab 100644
--- a/src/components/connection/blocks/index.ts
+++ b/src/components/connection/blocks/index.ts
@@ -3,4 +3,4 @@ export { TimelineBlock } from './TimelineBlock';
 export { AccordionBlock } from './AccordionBlock';
 export { MinimalBlock } from './MinimalBlock';
 export { BlockButtons } from './BlockButtons';
-export type { BlockRendererProps } from './types';
+export type { BlockRendererProps, RenderBlock } from './types';
diff --git a/src/components/connection/blocks/types.ts b/src/components/connection/blocks/types.ts
index 61580b2..1047d0e 100644
--- a/src/components/connection/blocks/types.ts
+++ b/src/components/connection/blocks/types.ts
@@ -1,7 +1,16 @@
+import type { ReactNode } from 'react';
 import type { RemnawaveBlockClient, RemnawaveButtonClient, LocalizedText } from '@/types';
 
+/**
+ * A block to render. Beyond the panel's data (title/description/buttons), it may
+ * carry `customNode` — extra interactive content (e.g. the Happ TV connect
+ * widget) that every renderer drops into the block body, so it inherits the
+ * active style (cards/timeline/accordion/minimal) instead of clashing with it.
+ */
+export type RenderBlock = RemnawaveBlockClient & { customNode?: ReactNode };
+
 export interface BlockRendererProps {
-  blocks: RemnawaveBlockClient[];
+  blocks: RenderBlock[];
   isMobile: boolean;
   isLight: boolean;
   getLocalizedText: (text: LocalizedText | undefined) => string;

From f8ac4895fa7def88d2e2905a8df57726f85aa048 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Wed, 3 Jun 2026 16:22:41 +0300
Subject: [PATCH 14/36] fix(connection): keep selected app when switching
 platform
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Switching the platform dropdown always reset the app to the new platform's
featured/first one, discarding the user's choice (e.g. picked Happ → switched
platform → snapped back to the first app). Now it keeps the same app by name if
it exists on the new platform, falling back to featured/first only otherwise.
---
 src/components/connection/InstallationGuide.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/connection/InstallationGuide.tsx b/src/components/connection/InstallationGuide.tsx
index a6038a5..53c3092 100644
--- a/src/components/connection/InstallationGuide.tsx
+++ b/src/components/connection/InstallationGuide.tsx
@@ -266,7 +266,12 @@ export default function InstallationGuide({
                 setActivePlatformKey(newPlatform);
                 const data = appConfig.platforms[newPlatform] as RemnawavePlatformData | undefined;
                 if (data?.apps?.length) {
-                  const app = data.apps.find((a) => a.featured) || data.apps[0];
+                  // Keep the user's current app (by name) if it also exists on the
+                  // new platform; only fall back to featured/first otherwise.
+                  const app =
+                    data.apps.find((a) => a.name === selectedApp?.name) ||
+                    data.apps.find((a) => a.featured) ||
+                    data.apps[0];
                   if (app) setSelectedApp(app);
                 }
               }}

From ce7a3eaedf4127129de2b2aec3dea85bd9fe48b1 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Wed, 3 Jun 2026 16:34:20 +0300
Subject: [PATCH 15/36] fix(connection): Happ TV connect works on Apple TV too
 (one API for both)

Correction: check.happ.su/sendtv is a single API serving both Android TV and
Apple TV, not Android-only. Re-enable the TV connect widget for Apple TV
(gate on androidTV || appleTV again) and make the code input flexible again
(inputMode text, alphanumeric) since the code isn't guaranteed numeric.
---
 src/components/connection/InstallationGuide.tsx | 14 +++++++-------
 src/components/connection/TvQuickConnect.tsx    |  4 ++--
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/connection/InstallationGuide.tsx b/src/components/connection/InstallationGuide.tsx
index 53c3092..b5c6b9b 100644
--- a/src/components/connection/InstallationGuide.tsx
+++ b/src/components/connection/InstallationGuide.tsx
@@ -150,11 +150,11 @@ export default function InstallationGuide({
   );
 
   const userIsOnTv = detectedPlatform === 'androidTV' || detectedPlatform === 'appleTV';
-  // Happ's TV quick-connect (check.happ.su/sendtv, 5-digit code) is an ANDROID TV
-  // -only API. Apple TV uses a different mechanism (tv.happ.su temporary code), so
-  // the block must NOT show there — it would POST to the wrong endpoint.
-  const isAndroidTvLayout =
-    (activePlatformKey || availablePlatforms[0]) === 'androidTV' && !userIsOnTv;
+  // Happ's TV quick-connect (check.happ.su/sendtv) is ONE API serving BOTH
+  // Android TV and Apple TV — show the widget on either.
+  const selectedPlatform = activePlatformKey || availablePlatforms[0];
+  const isTvLayout =
+    (selectedPlatform === 'androidTV' || selectedPlatform === 'appleTV') && !userIsOnTv;
 
   const currentPlatformKey = activePlatformKey || availablePlatforms[0];
   const currentPlatformData = currentPlatformKey
@@ -194,11 +194,11 @@ export default function InstallationGuide({
   const blockType = appConfig.uiConfig?.installationGuidesBlockType || 'cards';
   const Renderer = RENDERERS[blockType] || CardsBlock;
 
-  // For the Happ Android TV app, inject the TV connect widget into a step as
+  // For the Happ TV app (Android TV / Apple TV), inject the TV connect widget as
   // customNode so it renders THROUGH the active block style (cards/timeline/
   // accordion/minimal) instead of as separate clashing cards that break it.
   const showTvConnect = Boolean(
-    selectedApp && isAndroidTvLayout && isHappApp(selectedApp) && appConfig.subscriptionUrl,
+    selectedApp && isTvLayout && isHappApp(selectedApp) && appConfig.subscriptionUrl,
   );
   let renderBlocks: RenderBlock[] = selectedApp?.blocks ?? [];
   if (selectedApp && showTvConnect && appConfig.subscriptionUrl) {
diff --git a/src/components/connection/TvQuickConnect.tsx b/src/components/connection/TvQuickConnect.tsx
index 8400d40..56eb4e4 100644
--- a/src/components/connection/TvQuickConnect.tsx
+++ b/src/components/connection/TvQuickConnect.tsx
@@ -213,9 +213,9 @@ export default function TvQuickConnect({ subscriptionUrl, isLight }: Props) {
           maxLength={5}
           value={code}
           onChange={(e) => setCode(e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, ''))}
-          placeholder="12345"
+          placeholder="A1B2C"
           autoComplete="one-time-code"
-          inputMode="numeric"
+          inputMode="text"
           className={inputClass}
         />
         <button

From 5b123f5da034f22ed8d59700cf60d79213d4ea8c Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Wed, 3 Jun 2026 19:02:52 +0300
Subject: [PATCH 16/36] fix(switch-tariff): route trial & expired subs to the
 purchase flow (#629889)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The switch sheet's fallback checked detail.error_code, but the backend
sends detail.code — so the expired-fallback was effectively dead. Centralize
it into shouldUsePurchaseFlow(), which accepts either key and now also
handles the new trial_cannot_switch code: a trial has no paid value to
prorate, so the backend rejects the switch and the sheet hands the tariff to
the regular purchase form instead of surfacing a raw error.

The switch button is already hidden for trials via canSwitch; this is the
server-side backstop for races / direct calls, and it un-breaks the expired
fallback at the same time.
---
 .../subscription/sheets/SwitchTariffSheet.tsx | 57 +++++++++++--------
 1 file changed, 32 insertions(+), 25 deletions(-)

diff --git a/src/components/subscription/sheets/SwitchTariffSheet.tsx b/src/components/subscription/sheets/SwitchTariffSheet.tsx
index f84e039..97d8f12 100644
--- a/src/components/subscription/sheets/SwitchTariffSheet.tsx
+++ b/src/components/subscription/sheets/SwitchTariffSheet.tsx
@@ -26,6 +26,25 @@ import type { Tariff } from '../../../types';
 // TariffPurchaseForm instead of attempting another switch.
 // ──────────────────────────────────────────────────────────────────
 
+// The backend rejects a switch that must instead go through the purchase flow:
+// the subscription lapsed (`subscription_expired`), or it is a trial that has no
+// paid value to prorate and would otherwise be handed a full target period
+// (`trial_cannot_switch`, bug #629889). Both arrive as detail.code +
+// use_purchase_flow=true; some payloads use the legacy `error_code` key, so we
+// accept either.
+function shouldUsePurchaseFlow(error: unknown): boolean {
+  if (!(error instanceof AxiosError)) return false;
+  const detail = error.response?.data?.detail as
+    | { code?: string; error_code?: string; use_purchase_flow?: boolean }
+    | undefined;
+  if (!detail || typeof detail !== 'object') return false;
+  const code = detail.code ?? detail.error_code;
+  return (
+    (code === 'subscription_expired' || code === 'trial_cannot_switch') &&
+    detail.use_purchase_flow === true
+  );
+}
+
 export interface SwitchTariffSheetProps {
   open: boolean;
   tariffId: number | null;
@@ -69,22 +88,15 @@ export function SwitchTariffSheet({
       navigate('/subscriptions', { replace: true });
     },
     onError: (error: unknown) => {
-      // Backend signal: the subscription lapsed mid-flight. Hand the
-      // selected tariff back to the parent so it can open the regular
-      // purchase form instead.
-      if (error instanceof AxiosError) {
-        const detail = error.response?.data?.detail;
-        if (
-          typeof detail === 'object' &&
-          detail?.error_code === 'subscription_expired' &&
-          detail?.use_purchase_flow === true
-        ) {
-          const targetTariff = tariffs.find((tariff) => tariff.id === tariffId);
-          if (targetTariff) {
-            onClose();
-            onExpiredFallback(targetTariff);
-            queryClient.invalidateQueries({ queryKey: ['purchase-options', subscriptionId] });
-          }
+      // Backend signal: this subscription can't be switched (it lapsed, or it's
+      // a trial). Hand the selected tariff back to the parent so it opens the
+      // regular purchase form instead.
+      if (shouldUsePurchaseFlow(error)) {
+        const targetTariff = tariffs.find((tariff) => tariff.id === tariffId);
+        if (targetTariff) {
+          onClose();
+          onExpiredFallback(targetTariff);
+          queryClient.invalidateQueries({ queryKey: ['purchase-options', subscriptionId] });
         }
       }
     },
@@ -213,15 +225,10 @@ export function SwitchTariffSheet({
 
               {switchMutation.isError &&
                 (() => {
-                  // Suppress the toast when the subscription_expired
-                  // fallback already triggered: the parent is now
-                  // showing the regular purchase form, surfacing the
-                  // raw axios message here would be misleading.
-                  const detail =
-                    switchMutation.error instanceof AxiosError
-                      ? switchMutation.error.response?.data?.detail
-                      : null;
-                  if (typeof detail === 'object' && detail?.error_code === 'subscription_expired') {
+                  // Suppress the toast when the purchase-flow fallback already
+                  // triggered (expired / trial): the parent is now showing the
+                  // regular purchase form, so the raw axios message would mislead.
+                  if (shouldUsePurchaseFlow(switchMutation.error)) {
                     return null;
                   }
                   return (

From f7bd36a95e27d9d9257fbfb45f23513b05a6b017 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Thu, 4 Jun 2026 11:33:36 +0300
Subject: [PATCH 17/36] =?UTF-8?q?fix(traffic):=20correct=20misleading=20ad?=
 =?UTF-8?q?d-traffic=20note=20=E2=80=94=2030-day=20validity?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The buy-traffic warning said purchased traffic "does not carry over to the next
period", which contradicts how add-ons actually work: a package lives 30 days
and stays in the limit across the monthly reset within those 30 days. Reword to
"valid for 30 days from purchase" (ru/en/zh/fa) so users aren't misled.
---
 src/locales/en.json | 2 +-
 src/locales/fa.json | 2 +-
 src/locales/ru.json | 2 +-
 src/locales/zh.json | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index 42b174e..7c90329 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -579,7 +579,7 @@
       "buyTraffic": "Buy more traffic",
       "currentTrafficLimit": "Current limit: {{limit}} GB (used {{used}} GB)",
       "buyTrafficTitle": "Buy more traffic",
-      "trafficWarning": "Purchased traffic is added to your current limit and does not carry over to the next period",
+      "trafficWarning": "Purchased traffic is added to your current limit and is valid for 30 days from purchase",
       "trafficUnavailable": "Traffic purchase is not available for your tariff",
       "unlimited": "Unlimited",
       "buyTrafficGb": "Buy {{gb}} GB",
diff --git a/src/locales/fa.json b/src/locales/fa.json
index 13d917d..5de19d6 100644
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -429,7 +429,7 @@
       "buyTraffic": "خرید ترافیک بیشتر",
       "currentTrafficLimit": "محدودیت فعلی: {{limit}} GB (مصرف شده {{used}} GB)",
       "buyTrafficTitle": "خرید ترافیک بیشتر",
-      "trafficWarning": "ترافیک خریداری شده به محدودیت فعلی اضافه می‌شود و به دوره بعدی منتقل نمی‌شود",
+      "trafficWarning": "ترافیک خریداری‌شده به محدودیت فعلی اضافه می‌شود و تا ۳۰ روز از زمان خرید معتبر است",
       "trafficUnavailable": "خرید ترافیک برای اشتراک شما در دسترس نیست",
       "unlimited": "نامحدود",
       "buyTrafficGb": "خرید {{gb}} GB",
diff --git a/src/locales/ru.json b/src/locales/ru.json
index f4ef089..fda4bbf 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -608,7 +608,7 @@
       "buyTraffic": "Докупить трафик",
       "currentTrafficLimit": "Текущий лимит: {{limit}} ГБ (использовано {{used}} ГБ)",
       "buyTrafficTitle": "Докупить трафик",
-      "trafficWarning": "Докупленный трафик добавляется к текущему лимиту и не переносится на следующий период",
+      "trafficWarning": "Докупленный трафик добавляется к текущему лимиту и действует 30 дней с момента покупки",
       "trafficUnavailable": "Докупка трафика недоступна для вашего тарифа",
       "unlimited": "Безлимит",
       "buyTrafficGb": "Купить {{gb}} ГБ",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index d695273..9603d6d 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -429,7 +429,7 @@
       "buyTraffic": "购买更多流量",
       "currentTrafficLimit": "当前限制：{{limit}} GB（已使用 {{used}} GB）",
       "buyTrafficTitle": "购买更多流量",
-      "trafficWarning": "购买的流量将添加到当前限制，不会延续到下一个周期",
+      "trafficWarning": "购买的流量将添加到当前限制，自购买之日起30天内有效",
       "trafficUnavailable": "您的套餐不支持购买流量",
       "unlimited": "无限制",
       "buyTrafficGb": "购买 {{gb}} GB",

From ac8a0fc41aff4065fdf1dde0bbc47694bfd1f010 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Thu, 4 Jun 2026 12:44:27 +0300
Subject: [PATCH 18/36] feat(cabinet): recoverable "service unavailable" screen
 when the backend is unreachable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When the backend was down the cabinet got stuck on a blank loader: the bootstrap
token refresh used bare axios with no timeout (hung forever), and every
interceptor guard required an HTTP response — so a transport-level failure had
zero handling and no error UI ever appeared.

Add a full-screen ServiceUnavailableScreen (extends the existing blocking-store
pattern) shown whenever the backend is unreachable, that auto-recovers when it
returns:
- New 'backend_unavailable' blocking type + BlockingOverlay branch; mirrors
  MaintenanceScreen, CloudWarningIcon, i18n in ru/en/zh/fa.
- api/health.ts: pingBackend() probes the root /health/unified (bypasses the
  /api baseURL + interceptor); URL derived from the origin for remote/sub-path
  deploys; 502/503/504 count as down. reportPossibleBackendDown() confirms an
  outage with a liveness probe before flipping, so a one-off blip never blanks a
  loaded app.
- Detected from the response interceptor (no-response) and the bootstrap refresh
  path; doRefresh gets a timeout so it can no longer hang.
- A transport failure during refresh now PRESERVES the session (distinguished
  from a rejected token via lastFailureWasTransport) instead of logging the user
  out, so recovery actually resumes.
- Recovery lifts the overlay + refetches for an already-loaded session, and only
  hard-reloads when the initial bootstrap never reached the backend — no lost
  form state. Manual retry + 5s auto-poll. Dev proxy for /health.
---
 src/App.tsx                                   |   5 +
 src/api/client.ts                             |  30 +++-
 src/api/health.ts                             |  99 +++++++++++
 .../blocking/ServiceUnavailableScreen.tsx     | 156 ++++++++++++++++++
 src/components/blocking/index.ts              |   1 +
 src/components/icons/extended-icons.tsx       |   5 +
 src/locales/en.json                           |   7 +
 src/locales/fa.json                           |   7 +
 src/locales/ru.json                           |   7 +
 src/locales/zh.json                           |   7 +
 src/store/auth.ts                             |  10 ++
 src/store/blocking.ts                         |  13 ++
 src/utils/token.ts                            |  31 +++-
 src/vite-env.d.ts                             |   2 +
 vite.config.ts                                |   7 +
 15 files changed, 384 insertions(+), 3 deletions(-)
 create mode 100644 src/api/health.ts
 create mode 100644 src/components/blocking/ServiceUnavailableScreen.tsx

diff --git a/src/App.tsx b/src/App.tsx
index d9cbe47..6c47968 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -28,6 +28,7 @@ import {
   ChannelSubscriptionScreen,
   BlacklistedScreen,
   AccountDeletedScreen,
+  ServiceUnavailableScreen,
 } from './components/blocking';
 import { ErrorBoundary } from './components/ErrorBoundary';
 import { PermissionRoute } from '@/components/auth/PermissionRoute';
@@ -232,6 +233,10 @@ function BlockingOverlay() {
     return <AccountDeletedScreen />;
   }
 
+  if (blockingType === 'backend_unavailable') {
+    return <ServiceUnavailableScreen />;
+  }
+
   return null;
 }
 
diff --git a/src/api/client.ts b/src/api/client.ts
index 20ee92f..ec4a1fc 100644
--- a/src/api/client.ts
+++ b/src/api/client.ts
@@ -7,6 +7,7 @@ import {
   safeRedirectToLogin,
 } from '../utils/token';
 import { useBlockingStore } from '../store/blocking';
+import { reportPossibleBackendDown, markBackendReached } from './health';
 import { API } from '../config/constants';
 
 const API_BASE_URL = import.meta.env.VITE_API_URL || '/api';
@@ -94,6 +95,12 @@ apiClient.interceptors.request.use(async (config: InternalAxiosRequestConfig) =>
       const newToken = await tokenRefreshManager.refreshAccessToken();
       if (newToken) {
         token = newToken;
+      } else if (tokenRefreshManager.lastFailureWasTransport) {
+        // Backend unreachable (not a rejected token): keep the session intact so
+        // the ServiceUnavailableScreen can auto-recover once the backend returns,
+        // instead of wiping tokens and stranding the user on /login. Let the
+        // request go out with the stale token; it will fail and be handled.
+        return config;
       } else {
         tokenStorage.clearTokens();
         safeRedirectToLogin();
@@ -195,10 +202,28 @@ export function isAccountDeletedError(
 }
 
 apiClient.interceptors.response.use(
-  (response) => response,
+  (response) => {
+    // First successful response means the app reached the backend at least once
+    // (it bootstrapped). Recovery from a later outage can then just lift the
+    // overlay instead of hard-reloading and losing unsaved UI state.
+    markBackendReached();
+    return response;
+  },
   async (error: AxiosError) => {
     const originalRequest = error.config as InternalAxiosRequestConfig & { _retry?: boolean };
 
+    // Transport-level failure: no HTTP response at all (backend unreachable, DNS
+    // failure, connection refused, timeout). All the coded guards below need
+    // `error.response`, so this case had zero handling and produced a blank
+    // screen during bootstrap. Confirm the outage with a liveness probe (so a
+    // one-off blip doesn't blank an already-loaded app) and, if confirmed, flip
+    // the full-screen ServiceUnavailableScreen. Fire-and-forget — the original
+    // request still rejects now. Axios cancellations are not outages.
+    if (!error.response && error.code !== 'ERR_CANCELED') {
+      void reportPossibleBackendDown();
+      return Promise.reject(error);
+    }
+
     if (isMaintenanceError(error)) {
       const detail = (error.response?.data as { detail: MaintenanceError }).detail;
       useBlockingStore.getState().setMaintenance({
@@ -256,6 +281,9 @@ apiClient.interceptors.response.use(
           originalRequest.headers.Authorization = `Bearer ${newToken}`;
         }
         return apiClient(originalRequest);
+      } else if (tokenRefreshManager.lastFailureWasTransport) {
+        // Backend died between the 401 and the refresh: keep the session so the
+        // ServiceUnavailableScreen can recover, rather than logging the user out.
       } else {
         tokenStorage.clearTokens();
         safeRedirectToLogin();
diff --git a/src/api/health.ts b/src/api/health.ts
new file mode 100644
index 0000000..80a7c09
--- /dev/null
+++ b/src/api/health.ts
@@ -0,0 +1,99 @@
+import axios from 'axios';
+import { useBlockingStore } from '../store/blocking';
+
+/**
+ * Backend liveness probe + "service unavailable" detection.
+ *
+ * The bot backend serves an unauthenticated liveness endpoint at the host ROOT
+ * (`/health/unified` when the Web API is enabled, `/health` otherwise) — NOT
+ * under the apiClient baseURL (`/api`). So we probe it with a BARE axios call at
+ * a root-relative URL, deliberately bypassing both the baseURL and the apiClient
+ * response interceptor (a probe must never itself touch blocking state).
+ */
+function resolveHealthUrl(): string {
+  const override = import.meta.env.VITE_HEALTH_URL;
+  if (override) return override;
+  const apiUrl = String(import.meta.env.VITE_API_URL || '/api').trim();
+  // For an absolute API base (remote / sub-path deployments like
+  // `https://api.bot.com/cabinet`) the health route still lives at the host
+  // ROOT, so derive the origin — NOT just strip `/api`. Mirrors the URL parsing
+  // in WebSocketProvider. For a relative base (`/api`, `/cabinet`) health is
+  // same-origin at the site root.
+  if (apiUrl.startsWith('http://') || apiUrl.startsWith('https://')) {
+    try {
+      return `${new URL(apiUrl).origin}/health/unified`;
+    } catch {
+      // malformed URL — fall through to the root-relative path
+    }
+  }
+  return '/health/unified';
+}
+
+export const HEALTH_URL = resolveHealthUrl();
+
+// Statuses a reverse proxy returns when it is up but its API upstream is down.
+// These must count as NOT reachable, otherwise the recovery poll would reload
+// the app straight back into a still-broken backend.
+const GATEWAY_DOWN_STATUSES = new Set([502, 503, 504]);
+
+/**
+ * Resolves true when the backend is actually serving — i.e. it returns an HTTP
+ * response that is NOT a gateway-down status. A 404 still counts as up (a
+ * Web-API-disabled deployment serves `/health`, not `/health/unified`, so
+ * probing the latter 404s while the server is fine). A 502/503/504 means a front
+ * proxy is up but the API upstream is dead, so it counts as NOT reachable.
+ * Resolves false on a transport-level failure with no response.
+ */
+export async function pingBackend(): Promise<boolean> {
+  try {
+    await axios.get(HEALTH_URL, { timeout: 5000 });
+    return true;
+  } catch (err) {
+    if (axios.isAxiosError(err) && err.response) {
+      return !GATEWAY_DOWN_STATUSES.has(err.response.status);
+    }
+    return false;
+  }
+}
+
+let everReachedBackend = false;
+
+/** Called on the first successful API response: the app reached the backend at
+ *  least once, so a later outage struck an already-loaded session. */
+export function markBackendReached(): void {
+  everReachedBackend = true;
+}
+
+/** True once the app has had at least one successful backend response. Lets the
+ *  ServiceUnavailableScreen recover by lifting the overlay (state preserved)
+ *  rather than hard-reloading, which is only needed when the INITIAL bootstrap
+ *  never reached the backend. */
+export function hasEverReachedBackend(): boolean {
+  return everReachedBackend;
+}
+
+let confirmInFlight = false;
+
+/**
+ * Called from the places that see a transport-level (no-response) failure — the
+ * apiClient interceptor and the bootstrap token refresh. Rather than blanking
+ * the whole app on a single one-off network blip, it CONFIRMS the outage with a
+ * liveness probe first and only then flips the global `backend_unavailable`
+ * state that renders the full-screen ServiceUnavailableScreen. Fire-and-forget:
+ * callers still reject/handle their own request immediately. Guarded so a burst
+ * of failing requests triggers at most one probe, and skipped once the screen is
+ * already shown.
+ */
+export async function reportPossibleBackendDown(): Promise<void> {
+  if (confirmInFlight) return;
+  if (useBlockingStore.getState().blockingType === 'backend_unavailable') return;
+  confirmInFlight = true;
+  try {
+    const reachable = await pingBackend();
+    if (!reachable) {
+      useBlockingStore.getState().setBackendUnavailable();
+    }
+  } finally {
+    confirmInFlight = false;
+  }
+}
diff --git a/src/components/blocking/ServiceUnavailableScreen.tsx b/src/components/blocking/ServiceUnavailableScreen.tsx
new file mode 100644
index 0000000..e5fa9a3
--- /dev/null
+++ b/src/components/blocking/ServiceUnavailableScreen.tsx
@@ -0,0 +1,156 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useQueryClient } from '@tanstack/react-query';
+import { useBlockingStore } from '../../store/blocking';
+import { useFocusTrap } from '../../hooks/useFocusTrap';
+import { pingBackend, hasEverReachedBackend } from '../../api/health';
+import { CloudWarningIcon, RestartIcon } from '@/components/icons';
+
+const POLL_INTERVAL_MS = 5000;
+
+/**
+ * Full-screen state shown when the backend is unreachable (transport-level
+ * failure), replacing the blank loader the app used to get stuck on. Polls the
+ * liveness endpoint and, once the backend answers again, reloads to re-bootstrap
+ * cleanly from whatever state the failed boot left behind. A manual retry button
+ * lets the user force an immediate check.
+ */
+export default function ServiceUnavailableScreen() {
+  const { t } = useTranslation();
+  const clearBlocking = useBlockingStore((state) => state.clearBlocking);
+  const queryClient = useQueryClient();
+  const [isChecking, setIsChecking] = useState(false);
+  const isCheckingRef = useRef(false);
+
+  const recover = useCallback(() => {
+    clearBlocking();
+    if (hasEverReachedBackend()) {
+      // The app was already loaded and merely covered by this overlay — its
+      // routes/forms are still mounted with their state. Lift the overlay and
+      // refetch instead of a hard reload that would discard unsaved input.
+      void queryClient.invalidateQueries();
+    } else {
+      // The initial bootstrap never reached the backend (blank loader) — reload
+      // to re-bootstrap cleanly now that it is back.
+      window.location.reload();
+    }
+  }, [clearBlocking, queryClient]);
+
+  // Manual retry: immediate probe with a visible checking state.
+  const handleRetry = useCallback(async () => {
+    if (isCheckingRef.current) return;
+    isCheckingRef.current = true;
+    setIsChecking(true);
+    try {
+      if (await pingBackend()) {
+        recover();
+      }
+    } finally {
+      isCheckingRef.current = false;
+      setIsChecking(false);
+    }
+  }, [recover]);
+
+  // Auto-recovery: probe immediately on mount, then every POLL_INTERVAL_MS.
+  useEffect(() => {
+    let cancelled = false;
+    const tick = async () => {
+      if (cancelled) return;
+      if (await pingBackend()) {
+        if (!cancelled) recover();
+      }
+    };
+    void tick();
+    const id = setInterval(tick, POLL_INTERVAL_MS);
+    return () => {
+      cancelled = true;
+      clearInterval(id);
+    };
+  }, [recover]);
+
+  const screenRef = useFocusTrap<HTMLDivElement>(true, { lockScroll: false });
+
+  return (
+    <div
+      ref={screenRef}
+      role="alertdialog"
+      aria-modal="true"
+      aria-labelledby="service-unavailable-title"
+      tabIndex={-1}
+      className="fixed inset-0 z-[100] flex flex-col items-center justify-center bg-dark-950 p-6"
+    >
+      <div className="w-full max-w-md text-center">
+        {/* Icon */}
+        <div className="mb-8">
+          <div className="mx-auto flex h-24 w-24 items-center justify-center rounded-full bg-dark-800">
+            <CloudWarningIcon className="h-12 w-12 text-warning-500" />
+          </div>
+        </div>
+
+        {/* Title */}
+        <h1 id="service-unavailable-title" className="mb-4 text-2xl font-bold text-white">
+          {t('blocking.serviceUnavailable.title')}
+        </h1>
+
+        {/* Message */}
+        <p className="mb-6 text-lg text-dark-400">{t('blocking.serviceUnavailable.description')}</p>
+
+        {/* Retry button */}
+        <button
+          onClick={handleRetry}
+          disabled={isChecking}
+          className="flex w-full items-center justify-center gap-3 rounded-xl bg-dark-800 px-6 py-4 font-semibold text-white transition-all duration-200 hover:bg-dark-700 disabled:bg-dark-800 disabled:opacity-60"
+        >
+          {isChecking ? (
+            <>
+              <svg
+                className="h-5 w-5 animate-spin"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+              >
+                <circle
+                  className="opacity-25"
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke="currentColor"
+                  strokeWidth="4"
+                />
+                <path
+                  className="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                />
+              </svg>
+              {t('blocking.serviceUnavailable.checking')}
+            </>
+          ) : (
+            <>
+              <RestartIcon className="h-5 w-5" />
+              {t('blocking.serviceUnavailable.retry')}
+            </>
+          )}
+        </button>
+
+        {/* Decorative dots */}
+        <div className="mt-8 flex items-center justify-center gap-2">
+          <div
+            className="h-2 w-2 animate-pulse rounded-full bg-warning-500"
+            style={{ animationDelay: '0ms' }}
+          />
+          <div
+            className="h-2 w-2 animate-pulse rounded-full bg-warning-500"
+            style={{ animationDelay: '300ms' }}
+          />
+          <div
+            className="h-2 w-2 animate-pulse rounded-full bg-warning-500"
+            style={{ animationDelay: '600ms' }}
+          />
+        </div>
+
+        <p className="mt-4 text-sm text-dark-500">{t('blocking.serviceUnavailable.hint')}</p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/blocking/index.ts b/src/components/blocking/index.ts
index 94bced2..041e04c 100644
--- a/src/components/blocking/index.ts
+++ b/src/components/blocking/index.ts
@@ -2,3 +2,4 @@ export { default as MaintenanceScreen } from './MaintenanceScreen';
 export { default as ChannelSubscriptionScreen } from './ChannelSubscriptionScreen';
 export { default as BlacklistedScreen } from './BlacklistedScreen';
 export { default as AccountDeletedScreen } from './AccountDeletedScreen';
+export { default as ServiceUnavailableScreen } from './ServiceUnavailableScreen';
diff --git a/src/components/icons/extended-icons.tsx b/src/components/icons/extended-icons.tsx
index 104eae1..efd452f 100644
--- a/src/components/icons/extended-icons.tsx
+++ b/src/components/icons/extended-icons.tsx
@@ -49,6 +49,7 @@ import {
   PiFlag,
   PiArrowCounterClockwise,
   PiArrowClockwise,
+  PiCloudWarning,
   PiRocket,
   PiFloppyDisk,
   PiPaperPlaneTilt,
@@ -361,6 +362,10 @@ export const RestartIcon = ({ className }: IconProps) => (
   <PiArrowClockwise className={cn('h-5 w-5', className)} />
 );
 
+export const CloudWarningIcon = ({ className }: IconProps) => (
+  <PiCloudWarning className={cn('h-5 w-5', className)} />
+);
+
 export const RocketIcon = ({ className }: IconProps) => (
   <PiRocket className={cn('h-5 w-5', className)} />
 );
diff --git a/src/locales/en.json b/src/locales/en.json
index 7c90329..8243d4b 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -4810,6 +4810,13 @@
       "openBot": "Open the bot",
       "retry": "I pressed /start, retry",
       "hint": "After running /start, return here and tap «Retry»."
+    },
+    "serviceUnavailable": {
+      "title": "Service unavailable",
+      "description": "We can't reach the service right now. It may be undergoing maintenance or there's a temporary connection issue.",
+      "retry": "Try again",
+      "checking": "Checking connection...",
+      "hint": "This page will refresh automatically as soon as the service is back."
     }
   },
   "merge": {
diff --git a/src/locales/fa.json b/src/locales/fa.json
index 5de19d6..82b72dc 100644
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -4470,6 +4470,13 @@
       "openBot": "باز کردن ربات",
       "retry": "من /start را زدم، دوباره امتحان کن",
       "hint": "پس از اجرای /start، به اینجا بازگردید و «دوباره امتحان کنید» را بزنید."
+    },
+    "serviceUnavailable": {
+      "title": "سرویس در دسترس نیست",
+      "description": "در حال حاضر امکان اتصال به سرویس وجود ندارد. ممکن است در حال تعمیر باشد یا مشکل موقتی در اتصال وجود داشته باشد.",
+      "retry": "تلاش مجدد",
+      "checking": "در حال بررسی اتصال...",
+      "hint": "به‌محض در دسترس قرار گرفتن سرویس، این صفحه به‌طور خودکار بازخوانی می‌شود."
     }
   },
   "merge": {
diff --git a/src/locales/ru.json b/src/locales/ru.json
index fda4bbf..01fd8ab 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -5365,6 +5365,13 @@
       "openBot": "Открыть бота",
       "retry": "Я нажал /start, попробовать снова",
       "hint": "После /start вернитесь сюда и нажмите «Попробовать снова»."
+    },
+    "serviceUnavailable": {
+      "title": "Сервис недоступен",
+      "description": "Не удаётся подключиться к сервису. Возможно, идут технические работы или временные неполадки со связью.",
+      "retry": "Повторить попытку",
+      "checking": "Проверяем соединение...",
+      "hint": "Страница обновится автоматически, как только сервис снова станет доступен."
     }
   },
   "merge": {
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 9603d6d..19e7ca5 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -4351,6 +4351,13 @@
       "openBot": "打开机器人",
       "retry": "我已按 /start，重试",
       "hint": "运行 /start 后，返回此处并点击「重试」。"
+    },
+    "serviceUnavailable": {
+      "title": "服务不可用",
+      "description": "暂时无法连接到服务。可能正在进行维护，或存在临时的网络问题。",
+      "retry": "重试",
+      "checking": "正在检查连接...",
+      "hint": "服务恢复后，本页面将自动刷新。"
     }
   },
   "banSystem": {
diff --git a/src/store/auth.ts b/src/store/auth.ts
index cfcf23f..4f9395c 100644
--- a/src/store/auth.ts
+++ b/src/store/auth.ts
@@ -217,6 +217,11 @@ export const useAuthStore = create<AuthState>()(
                 const user = await authApi.getMe();
                 await get().checkAdminStatus();
                 applySession(newToken, refreshToken, user);
+              } else if (tokenRefreshManager.lastFailureWasTransport) {
+                // Backend unreachable, not a rejected token — keep the session
+                // (don't wipe tokens) so the ServiceUnavailableScreen can resume
+                // once the backend returns. Just stop the bootstrap loader.
+                set({ isLoading: false });
               } else {
                 clearSession();
               }
@@ -237,6 +242,11 @@ export const useAuthStore = create<AuthState>()(
                 } catch {
                   clearSession();
                 }
+              } else if (tokenRefreshManager.lastFailureWasTransport) {
+                // Backend unreachable, not a rejected token — keep the session
+                // (don't wipe tokens) so the ServiceUnavailableScreen can resume
+                // once the backend returns. Just stop the bootstrap loader.
+                set({ isLoading: false });
               } else {
                 clearSession();
               }
diff --git a/src/store/blocking.ts b/src/store/blocking.ts
index 160f371..41d0cba 100644
--- a/src/store/blocking.ts
+++ b/src/store/blocking.ts
@@ -5,6 +5,7 @@ export type BlockingType =
   | 'channel_subscription'
   | 'blacklisted'
   | 'account_deleted'
+  | 'backend_unavailable'
   | null;
 
 interface MaintenanceInfo {
@@ -54,6 +55,9 @@ interface BlockingState {
   setChannelSubscription: (info: ChannelSubscriptionInfo) => void;
   setBlacklisted: (info: BlacklistedInfo) => void;
   setAccountDeleted: (info: AccountDeletedInfo) => void;
+  /** Backend is unreachable (transport-level failure). Renders the full-screen
+   *  ServiceUnavailableScreen. No info payload — the screen shows static copy. */
+  setBackendUnavailable: () => void;
   clearBlocking: () => void;
 }
 
@@ -100,6 +104,15 @@ export const useBlockingStore = create<BlockingState>((set) => ({
       blacklistedInfo: null,
     }),
 
+  setBackendUnavailable: () =>
+    set({
+      blockingType: 'backend_unavailable',
+      maintenanceInfo: null,
+      channelInfo: null,
+      blacklistedInfo: null,
+      accountDeletedInfo: null,
+    }),
+
   clearBlocking: () =>
     set({
       blockingType: null,
diff --git a/src/utils/token.ts b/src/utils/token.ts
index ad175ed..5ebbe0c 100644
--- a/src/utils/token.ts
+++ b/src/utils/token.ts
@@ -5,6 +5,8 @@ import {
   deleteCloudStorageItem,
 } from '@telegram-apps/sdk-react';
 import { isInTelegramWebApp } from '../hooks/useTelegramSDK';
+import { API } from '../config/constants';
+import { reportPossibleBackendDown } from '../api/health';
 
 const TOKEN_KEYS = {
   ACCESS: 'access_token',
@@ -205,6 +207,17 @@ class TokenRefreshManager {
   private subscribers: ((token: string | null) => void)[] = [];
   private refreshEndpoint = '/api/cabinet/auth/refresh';
 
+  /**
+   * True when the most recent refresh failed at the TRANSPORT level (backend
+   * unreachable / timeout) rather than because the refresh token was rejected.
+   * Callers read this right after a null `refreshAccessToken()` to decide whether
+   * to destroy the session (rejected token) or KEEP it so the recoverable
+   * ServiceUnavailableScreen can resume once the backend returns. Synchronously
+   * accurate: it is set inside doRefresh before the shared promise resolves, so
+   * every awaiter (including deduped concurrent callers) reads a consistent value.
+   */
+  lastFailureWasTransport = false;
+
   setRefreshEndpoint(endpoint: string): void {
     this.refreshEndpoint = endpoint;
   }
@@ -214,6 +227,8 @@ class TokenRefreshManager {
       return this.refreshPromise;
     }
 
+    this.lastFailureWasTransport = false;
+
     const refreshToken = tokenStorage.getRefreshToken();
     if (!refreshToken) {
       return null;
@@ -238,7 +253,10 @@ class TokenRefreshManager {
       const response = await axios.post<{ access_token?: string }>(
         this.refreshEndpoint,
         { refresh_token: refreshToken },
-        { headers: { 'Content-Type': 'application/json' } },
+        // Without an explicit timeout this inherits axios's default of 0 (no
+        // timeout): on the persisted-token bootstrap path an unreachable backend
+        // would hang the refresh indefinitely, pinning the app on a blank loader.
+        { headers: { 'Content-Type': 'application/json' }, timeout: API.TIMEOUT_MS },
       );
 
       const newAccessToken = response.data.access_token;
@@ -249,7 +267,16 @@ class TokenRefreshManager {
       }
 
       return null;
-    } catch {
+    } catch (err) {
+      // This bare-axios call bypasses the apiClient interceptor, so a dead
+      // backend on the refresh-only bootstrap path would otherwise be swallowed
+      // here and silently fall through to a login redirect. Distinguish a
+      // transport-level failure (no response) from an invalid/expired token (a
+      // 4xx response) and surface the service-unavailable screen for the former.
+      if (axios.isAxiosError(err) && !err.response) {
+        this.lastFailureWasTransport = true;
+        void reportPossibleBackendDown();
+      }
       return null;
     }
   }
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 2e44efe..50297fe 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -7,6 +7,8 @@ interface ImportMetaEnv {
   readonly VITE_TELEGRAM_BOT_USERNAME?: string;
   readonly VITE_APP_NAME?: string;
   readonly VITE_APP_LOGO?: string;
+  /** Optional override for the backend liveness URL (defaults to `<origin>/health/unified`). */
+  readonly VITE_HEALTH_URL?: string;
 }
 
 interface ImportMeta {
diff --git a/vite.config.ts b/vite.config.ts
index f0cb434..923e3b6 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -27,6 +27,13 @@ export default defineConfig({
         // Strip /api prefix: /api/cabinet/auth -> /cabinet/auth
         rewrite: (path) => path.replace(/^\/api/, ''),
       },
+      // The backend serves its liveness endpoint at the host root (not under
+      // /api). Proxy it too so the "service unavailable" detection probe hits the
+      // real backend in dev instead of the Vite server (which would mask outages).
+      '/health': {
+        target: 'http://localhost:8080',
+        changeOrigin: true,
+      },
     },
   },
   build: {

From 7413837fafdf7346054b72bbd05a1c42c4e38bd2 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Thu, 4 Jun 2026 13:06:05 +0300
Subject: [PATCH 19/36] feat(cabinet): bulletproof Close button + kill the
 /login flash on the service-unavailable screen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two Telegram-Mini-App follow-ups to the backend-unavailable screen:

- Reliable "Close" button (Telegram only) that actually EXITS the Mini App
  instead of routing back. closeTelegramApp() tries the legacy
  window.Telegram.WebApp.close() global (telegram-web-app.js), then the SDK
  closeMiniApp(), then the raw postEvent('web_app_close') — all emit the same
  close event, so it can't silently fail. Guarded so the first path never
  silently no-ops.
- Eliminate the flash of the /login page before the outage screen. On the
  bootstrap path (the app has never reached the backend) reportPossibleBackendDown()
  now flips the screen IMMEDIATELY and synchronously instead of waiting on the
  confirm probe, so the overlay is up before isLoading flips and /login can never
  paint uncovered. Add an eager checkBackendOnStartup() liveness ping at launch
  (parallel with auth) so even the no-stored-token / fresh-Telegram path that
  makes no early request shows the screen at once. The confirm-probe still guards
  already-loaded sessions from a one-off blip.

i18n close key added in ru/en/zh/fa.
---
 src/api/health.ts                             | 29 +++++++++++++++++-
 .../blocking/ServiceUnavailableScreen.tsx     | 16 +++++++++-
 src/hooks/useTelegramSDK.ts                   | 30 +++++++++++++++++++
 src/locales/en.json                           |  3 +-
 src/locales/fa.json                           |  3 +-
 src/locales/ru.json                           |  3 +-
 src/locales/zh.json                           |  3 +-
 src/main.tsx                                  |  6 ++++
 src/vite-env.d.ts                             |  2 ++
 9 files changed, 89 insertions(+), 6 deletions(-)

diff --git a/src/api/health.ts b/src/api/health.ts
index 80a7c09..a4cac20 100644
--- a/src/api/health.ts
+++ b/src/api/health.ts
@@ -85,8 +85,18 @@ let confirmInFlight = false;
  * already shown.
  */
 export async function reportPossibleBackendDown(): Promise<void> {
-  if (confirmInFlight) return;
   if (useBlockingStore.getState().blockingType === 'backend_unavailable') return;
+  // During the INITIAL bootstrap (we've never reached the backend yet) the
+  // caller's failed request is itself the confirmation, so flip the screen
+  // IMMEDIATELY and synchronously. A deferred probe here would let the /login
+  // page paint for the ~probe duration before the outage screen — the "jump"
+  // we must avoid. Once the app has loaded, fall through to the confirm-probe so
+  // a one-off network blip can't blank a working session.
+  if (!everReachedBackend) {
+    useBlockingStore.getState().setBackendUnavailable();
+    return;
+  }
+  if (confirmInFlight) return;
   confirmInFlight = true;
   try {
     const reachable = await pingBackend();
@@ -97,3 +107,20 @@ export async function reportPossibleBackendDown(): Promise<void> {
     confirmInFlight = false;
   }
 }
+
+/**
+ * Eager liveness check fired once at app launch (from main.tsx), in parallel
+ * with auth bootstrap. If the backend is already down at launch this paints the
+ * ServiceUnavailableScreen immediately — before the auth flow can flash the
+ * /login page — even on the no-stored-token path that makes no early request.
+ * No-op if the app has already reached the backend or another blocking screen
+ * is showing.
+ */
+export async function checkBackendOnStartup(): Promise<void> {
+  if (everReachedBackend) return;
+  if (useBlockingStore.getState().blockingType !== null) return;
+  const reachable = await pingBackend();
+  if (!reachable && !everReachedBackend && useBlockingStore.getState().blockingType === null) {
+    useBlockingStore.getState().setBackendUnavailable();
+  }
+}
diff --git a/src/components/blocking/ServiceUnavailableScreen.tsx b/src/components/blocking/ServiceUnavailableScreen.tsx
index e5fa9a3..c60eadf 100644
--- a/src/components/blocking/ServiceUnavailableScreen.tsx
+++ b/src/components/blocking/ServiceUnavailableScreen.tsx
@@ -4,7 +4,8 @@ import { useQueryClient } from '@tanstack/react-query';
 import { useBlockingStore } from '../../store/blocking';
 import { useFocusTrap } from '../../hooks/useFocusTrap';
 import { pingBackend, hasEverReachedBackend } from '../../api/health';
-import { CloudWarningIcon, RestartIcon } from '@/components/icons';
+import { isInTelegramWebApp, closeTelegramApp } from '../../hooks/useTelegramSDK';
+import { CloudWarningIcon, RestartIcon, CloseIcon } from '@/components/icons';
 
 const POLL_INTERVAL_MS = 5000;
 
@@ -21,6 +22,7 @@ export default function ServiceUnavailableScreen() {
   const queryClient = useQueryClient();
   const [isChecking, setIsChecking] = useState(false);
   const isCheckingRef = useRef(false);
+  const inTelegram = isInTelegramWebApp();
 
   const recover = useCallback(() => {
     clearBlocking();
@@ -133,6 +135,18 @@ export default function ServiceUnavailableScreen() {
           )}
         </button>
 
+        {/* Close button — Telegram Mini App only (a browser tab can't be closed
+            by script). Reliably exits the Mini App instead of routing back. */}
+        {inTelegram && (
+          <button
+            onClick={closeTelegramApp}
+            className="mt-3 flex w-full items-center justify-center gap-2 rounded-xl border border-dark-700 px-6 py-4 font-semibold text-dark-300 transition-colors duration-200 hover:bg-dark-800 hover:text-white"
+          >
+            <CloseIcon className="h-5 w-5" />
+            {t('blocking.serviceUnavailable.close')}
+          </button>
+        )}
+
         {/* Decorative dots */}
         <div className="mt-8 flex items-center justify-center gap-2">
           <div
diff --git a/src/hooks/useTelegramSDK.ts b/src/hooks/useTelegramSDK.ts
index b2bc9f4..2a95b87 100644
--- a/src/hooks/useTelegramSDK.ts
+++ b/src/hooks/useTelegramSDK.ts
@@ -15,6 +15,8 @@ import {
   retrieveLaunchParams,
   retrieveRawInitData,
   themeParamsState,
+  closeMiniApp as sdkCloseMiniApp,
+  postEvent,
 } from '@telegram-apps/sdk-react';
 
 const FULLSCREEN_CACHE_KEY = 'cabinet_fullscreen_enabled';
@@ -50,6 +52,34 @@ export function isInTelegramWebApp(): boolean {
   return detectTelegram();
 }
 
+/**
+ * Closes the Telegram Mini App as reliably as possible. All three paths emit the
+ * same `web_app_close` event to the Telegram client; we try the most broadly
+ * compatible first and stop at the first that doesn't throw:
+ *   1) the legacy `window.Telegram.WebApp.close()` global (telegram-web-app.js,
+ *      loaded in index.html) — widest client coverage, no SDK-mount dependency;
+ *   2) the modern SDK `closeMiniApp()` (mini app is mounted on init);
+ *   3) the raw `postEvent('web_app_close')` protocol event — no global/mount
+ *      dependency at all.
+ * Outside Telegram it is a safe no-op.
+ */
+export function closeTelegramApp(): void {
+  try {
+    const wa = window.Telegram?.WebApp;
+    if (wa?.close) {
+      wa.close();
+      return;
+    }
+  } catch {}
+  try {
+    sdkCloseMiniApp();
+    return;
+  } catch {}
+  try {
+    postEvent('web_app_close');
+  } catch {}
+}
+
 export function isTelegramMobile(): boolean {
   try {
     const { tgWebAppPlatform } = retrieveLaunchParams();
diff --git a/src/locales/en.json b/src/locales/en.json
index 8243d4b..4f2a27b 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -4816,7 +4816,8 @@
       "description": "We can't reach the service right now. It may be undergoing maintenance or there's a temporary connection issue.",
       "retry": "Try again",
       "checking": "Checking connection...",
-      "hint": "This page will refresh automatically as soon as the service is back."
+      "hint": "This page will refresh automatically as soon as the service is back.",
+      "close": "Close"
     }
   },
   "merge": {
diff --git a/src/locales/fa.json b/src/locales/fa.json
index 82b72dc..fd2cc4d 100644
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -4476,7 +4476,8 @@
       "description": "در حال حاضر امکان اتصال به سرویس وجود ندارد. ممکن است در حال تعمیر باشد یا مشکل موقتی در اتصال وجود داشته باشد.",
       "retry": "تلاش مجدد",
       "checking": "در حال بررسی اتصال...",
-      "hint": "به‌محض در دسترس قرار گرفتن سرویس، این صفحه به‌طور خودکار بازخوانی می‌شود."
+      "hint": "به‌محض در دسترس قرار گرفتن سرویس، این صفحه به‌طور خودکار بازخوانی می‌شود.",
+      "close": "بستن"
     }
   },
   "merge": {
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 01fd8ab..672c5a1 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -5371,7 +5371,8 @@
       "description": "Не удаётся подключиться к сервису. Возможно, идут технические работы или временные неполадки со связью.",
       "retry": "Повторить попытку",
       "checking": "Проверяем соединение...",
-      "hint": "Страница обновится автоматически, как только сервис снова станет доступен."
+      "hint": "Страница обновится автоматически, как только сервис снова станет доступен.",
+      "close": "Закрыть"
     }
   },
   "merge": {
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 19e7ca5..c196113 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -4357,7 +4357,8 @@
       "description": "暂时无法连接到服务。可能正在进行维护，或存在临时的网络问题。",
       "retry": "重试",
       "checking": "正在检查连接...",
-      "hint": "服务恢复后，本页面将自动刷新。"
+      "hint": "服务恢复后，本页面将自动刷新。",
+      "close": "关闭"
     }
   },
   "banSystem": {
diff --git a/src/main.tsx b/src/main.tsx
index 7e61769..022c153 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -24,6 +24,7 @@ import { useAuthStore } from './store/auth';
 import { AppWithNavigator } from './AppWithNavigator';
 import { ErrorBoundary } from './components/ErrorBoundary';
 import { initLogoPreload } from './api/branding';
+import { checkBackendOnStartup } from './api/health';
 import { getCachedFullscreenEnabled, isTelegramMobile } from './hooks/useTelegramSDK';
 import { applyTelegramLanguage } from './i18n';
 import './styles/globals.css';
@@ -106,6 +107,11 @@ if (isTelegramEnv && !alreadyInitialized) {
 // are only available post-init()).
 void useAuthStore.getState().initialize();
 
+// In parallel with auth bootstrap, eagerly check backend liveness so a dead
+// backend paints the ServiceUnavailableScreen immediately instead of flashing
+// the /login page first.
+void checkBackendOnStartup();
+
 if ('requestIdleCallback' in window) {
   requestIdleCallback(() => initLogoPreload());
 } else {
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 50297fe..a05d633 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -19,6 +19,8 @@ interface ImportMeta {
 interface TelegramWebAppGlobal {
   onEvent?: (event: string, callback: () => void) => void;
   offEvent?: (event: string, callback: () => void) => void;
+  /** Closes the Mini App (injected by telegram-web-app.js). */
+  close?: () => void;
 }
 
 /** Telegram Login JS SDK — loaded from https://oauth.telegram.org/js/telegram-login.js */

From 782568e091fbe636c9f3136002f5b230089cdc04 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Thu, 4 Jun 2026 13:38:35 +0300
Subject: [PATCH 20/36] feat(cabinet): premium redesign of all 5 full-screen
 blocking states
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The status screens (service-unavailable, maintenance, channel-subscription,
blacklist, account-deleted) all shared a generic flat look — an icon in a grey
circle, a title, a subtitle, three raw pulsing dots — that didn't match the
app's premium dark-glass aesthetic.

Introduce one shared BlockingShell that all five compose: an opaque themed
canvas with a self-contained accent glow, a centered glass card
(rounded-[--bento-radius] border bg-dark-900/80 backdrop-blur + inset
highlight), a gradient-ringed icon medallion (warning/error/info accent)
instead of a flat grey circle, font-display typography, the canonical Button
for every action, and a subtle framer-motion scale/slide entrance. Accent per
screen: warning (maintenance, account-deleted, service-unavailable), error
(blacklist), info (channel).

Behavior is preserved 1:1 — every i18n key, the channel list + open buttons,
the telegram deep-link, retry/check/close, the recovery poll, focus trap and
aria all carried over verbatim; only the visuals change.
---
 .../blocking/AccountDeletedScreen.tsx         |  58 ++----
 src/components/blocking/BlacklistedScreen.tsx |  50 ++---
 src/components/blocking/BlockingShell.tsx     | 196 ++++++++++++++++++
 .../blocking/ChannelSubscriptionScreen.tsx    | 191 ++++++++---------
 src/components/blocking/MaintenanceScreen.tsx |  69 ++----
 .../blocking/ServiceUnavailableScreen.tsx     | 134 ++++--------
 6 files changed, 373 insertions(+), 325 deletions(-)
 create mode 100644 src/components/blocking/BlockingShell.tsx

diff --git a/src/components/blocking/AccountDeletedScreen.tsx b/src/components/blocking/AccountDeletedScreen.tsx
index fb2e319..1d23e11 100644
--- a/src/components/blocking/AccountDeletedScreen.tsx
+++ b/src/components/blocking/AccountDeletedScreen.tsx
@@ -1,8 +1,10 @@
 import { useTranslation } from 'react-i18next';
 import { usePlatform } from '@/platform';
 import { InfoIcon } from '@/components/icons';
+import { Button } from '@/components/primitives';
 import { useBlockingStore } from '../../store/blocking';
 import { useFocusTrap } from '../../hooks/useFocusTrap';
+import BlockingShell from './BlockingShell';
 
 /**
  * Full-screen block shown when the backend returns
@@ -45,48 +47,26 @@ export default function AccountDeletedScreen() {
   };
 
   return (
-    <div
-      ref={screenRef}
-      role="alertdialog"
-      aria-modal="true"
-      aria-labelledby="account-deleted-title"
-      tabIndex={-1}
-      className="fixed inset-0 z-[100] flex flex-col items-center justify-center bg-dark-950 p-6"
-    >
-      <div className="w-full max-w-md text-center">
-        <div className="mb-8">
-          <div className="mx-auto flex h-24 w-24 items-center justify-center rounded-full bg-dark-800">
-            <InfoIcon className="h-12 w-12 text-warning-400" />
-          </div>
-        </div>
-
-        <h1 id="account-deleted-title" className="mb-4 text-2xl font-bold text-white">
-          {t('blocking.accountDeleted.title')}
-        </h1>
-
-        <p className="mb-6 text-lg text-dark-400">{t('blocking.accountDeleted.description')}</p>
-
-        <div className="space-y-3">
+    <BlockingShell
+      screenRef={screenRef}
+      titleId="account-deleted-title"
+      accent="warning"
+      icon={<InfoIcon className="h-9 w-9" />}
+      title={t('blocking.accountDeleted.title')}
+      description={t('blocking.accountDeleted.description')}
+      footer={t('blocking.accountDeleted.hint')}
+      actions={
+        <>
           {deepLink && (
-            <button
-              type="button"
-              onClick={handleOpenBot}
-              className="block w-full rounded-xl bg-blue-600 px-6 py-3 text-base font-semibold text-white transition-colors hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-dark-950"
-            >
+            <Button variant="primary" size="lg" fullWidth onClick={handleOpenBot}>
               {t('blocking.accountDeleted.openBot')}
-            </button>
+            </Button>
           )}
-          <button
-            type="button"
-            onClick={handleRetry}
-            className="block w-full rounded-xl bg-dark-800 px-6 py-3 text-base font-medium text-dark-200 transition-colors hover:bg-dark-700 focus:outline-none focus:ring-2 focus:ring-dark-400 focus:ring-offset-2 focus:ring-offset-dark-950"
-          >
+          <Button variant="secondary" size="lg" fullWidth onClick={handleRetry}>
             {t('blocking.accountDeleted.retry')}
-          </button>
-        </div>
-
-        <p className="mt-8 text-sm text-dark-500">{t('blocking.accountDeleted.hint')}</p>
-      </div>
-    </div>
+          </Button>
+        </>
+      }
+    />
   );
 }
diff --git a/src/components/blocking/BlacklistedScreen.tsx b/src/components/blocking/BlacklistedScreen.tsx
index de533f5..20481dc 100644
--- a/src/components/blocking/BlacklistedScreen.tsx
+++ b/src/components/blocking/BlacklistedScreen.tsx
@@ -2,6 +2,7 @@ import { useTranslation } from 'react-i18next';
 import { useBlockingStore } from '../../store/blocking';
 import { useFocusTrap } from '../../hooks/useFocusTrap';
 import { BanIcon } from '@/components/icons';
+import BlockingShell from './BlockingShell';
 
 export default function BlacklistedScreen() {
   const { t } = useTranslation();
@@ -9,40 +10,23 @@ export default function BlacklistedScreen() {
   const screenRef = useFocusTrap<HTMLDivElement>(true, { lockScroll: false });
 
   return (
-    <div
-      ref={screenRef}
-      role="alertdialog"
-      aria-modal="true"
-      aria-labelledby="blacklisted-title"
-      tabIndex={-1}
-      className="fixed inset-0 z-[100] flex flex-col items-center justify-center bg-dark-950 p-6"
+    <BlockingShell
+      screenRef={screenRef}
+      titleId="blacklisted-title"
+      accent="error"
+      icon={<BanIcon className="h-9 w-9" />}
+      title={t('blocking.blacklisted.title')}
+      description={t('blocking.blacklisted.defaultMessage')}
+      footer={t('blocking.blacklisted.contactSupport')}
     >
-      <div className="w-full max-w-md text-center">
-        {/* Icon */}
-        <div className="mb-8">
-          <div className="mx-auto flex h-24 w-24 items-center justify-center rounded-full bg-dark-800">
-            <BanIcon className="h-12 w-12 text-error-500" />
-          </div>
+      {blacklistedInfo?.message && (
+        <div className="rounded-xl border border-dark-700/30 bg-dark-800/50 p-4">
+          <p className="mb-1 text-xs font-medium uppercase tracking-wide text-dark-500">
+            {t('blocking.blacklisted.reason')}:
+          </p>
+          <p className="text-sm text-dark-300">{blacklistedInfo.message}</p>
         </div>
-
-        {/* Title */}
-        <h1 id="blacklisted-title" className="mb-4 text-2xl font-bold text-white">
-          {t('blocking.blacklisted.title')}
-        </h1>
-
-        {/* Message */}
-        <p className="mb-6 text-lg text-dark-400">{t('blocking.blacklisted.defaultMessage')}</p>
-
-        {/* Reason */}
-        {blacklistedInfo?.message && (
-          <div className="mb-6 rounded-xl bg-dark-800/50 p-4">
-            <p className="mb-1 text-sm text-dark-500">{t('blocking.blacklisted.reason')}:</p>
-            <p className="text-dark-300">{blacklistedInfo.message}</p>
-          </div>
-        )}
-
-        <p className="mt-8 text-sm text-dark-500">{t('blocking.blacklisted.contactSupport')}</p>
-      </div>
-    </div>
+      )}
+    </BlockingShell>
   );
 }
diff --git a/src/components/blocking/BlockingShell.tsx b/src/components/blocking/BlockingShell.tsx
new file mode 100644
index 0000000..1564cbd
--- /dev/null
+++ b/src/components/blocking/BlockingShell.tsx
@@ -0,0 +1,196 @@
+import { type ReactNode, type Ref } from 'react';
+import { motion } from 'framer-motion';
+import { scale, scaleTransition, slideUp, slideUpTransition } from '../motion/transitions';
+import { cn } from '@/lib/utils';
+
+export type BlockingAccent = 'warning' | 'error' | 'info';
+
+/**
+ * Per-accent class recipe. `info` maps to the theme accent-* scale (default
+ * blue). Colors are theme-driven CSS vars (RGB triples), never hardcoded hex.
+ */
+const accentMap: Record<
+  BlockingAccent,
+  {
+    glow: string;
+    medallion: string;
+    sheen: string;
+    iconColor: string;
+    dot: string;
+    hairline: string;
+  }
+> = {
+  warning: {
+    glow: 'bg-warning-500/10',
+    medallion:
+      'bg-warning-500/10 ring-warning-500/30 shadow-[0_0_44px_-8px_rgba(var(--color-warning-500),0.5)]',
+    sheen: 'from-warning-500/25',
+    iconColor: 'text-warning-400',
+    dot: 'bg-warning-500',
+    hairline: 'via-warning-500/40',
+  },
+  error: {
+    glow: 'bg-error-500/10',
+    medallion:
+      'bg-error-500/10 ring-error-500/30 shadow-[0_0_44px_-8px_rgba(var(--color-error-500),0.5)]',
+    sheen: 'from-error-500/25',
+    iconColor: 'text-error-400',
+    dot: 'bg-error-500',
+    hairline: 'via-error-500/40',
+  },
+  info: {
+    glow: 'bg-accent-500/10',
+    medallion: 'bg-accent-500/10 ring-accent-500/30 shadow-glow-lg',
+    sheen: 'from-accent-500/25',
+    iconColor: 'text-accent-400',
+    dot: 'bg-accent-500',
+    hairline: 'via-accent-500/40',
+  },
+};
+
+interface BlockingShellProps {
+  /** Unique id wired to aria-labelledby (e.g. 'maintenance-title'). */
+  titleId: string;
+  accent: BlockingAccent;
+  /** Rendered icon element (sized by the caller, e.g. <WrenchIcon className="h-9 w-9" />). */
+  icon: ReactNode;
+  /** Already-translated title. */
+  title: string;
+  description?: ReactNode;
+  /** Per-screen body: reason cards, channel list, error block. */
+  children?: ReactNode;
+  /** CTA area — pass canonical <Button> elements. */
+  actions?: ReactNode;
+  /** Hint / contact-support line under the card. */
+  footer?: ReactNode;
+  /** Accent-tinted "working" dots, for screens that actively wait/poll. */
+  pulse?: boolean;
+  /** 'polite' for screens whose state changes (retry/error) should announce. */
+  ariaLive?: 'polite' | 'off';
+  /** Focus-trap ref — owned by the caller so each screen keeps its own trap. */
+  screenRef: Ref<HTMLDivElement>;
+}
+
+/**
+ * Shared premium shell for every full-screen blocking/status state: an opaque
+ * dark canvas with a self-contained accent glow, a centered glass card, and a
+ * gradient-ringed icon medallion. Replaces the old flat grey-circle + three
+ * raw dots look. Behavior (focus trap, aria, actions) is supplied by each
+ * screen; this component owns only the visual chrome.
+ */
+export default function BlockingShell({
+  titleId,
+  accent,
+  icon,
+  title,
+  description,
+  children,
+  actions,
+  footer,
+  pulse = false,
+  ariaLive = 'off',
+  screenRef,
+}: BlockingShellProps) {
+  const a = accentMap[accent];
+
+  return (
+    <div
+      ref={screenRef}
+      role="alertdialog"
+      aria-modal="true"
+      aria-labelledby={titleId}
+      tabIndex={-1}
+      className="fixed inset-0 z-[100] overflow-y-auto bg-dark-950"
+    >
+      {/* Self-contained backdrop — accent glow behind the card. No app reveal:
+          the canvas stays opaque so this remains a hard block. */}
+      <div aria-hidden className="pointer-events-none fixed inset-0 overflow-hidden">
+        <div
+          className={cn(
+            'absolute left-1/2 top-1/2 h-[30rem] w-[30rem] -translate-x-1/2 -translate-y-[58%] rounded-full blur-[130px]',
+            a.glow,
+          )}
+        />
+        <div className="absolute -bottom-24 left-1/2 h-72 w-[22rem] -translate-x-1/2 rounded-full bg-dark-800/30 blur-[120px]" />
+      </div>
+
+      {/* Scroll-safe centering: min-h-full + items-center centers when it fits
+          and scrolls without clipping the top when content is tall. */}
+      <div className="relative flex min-h-full items-center justify-center p-6">
+        <motion.div
+          variants={scale}
+          initial="initial"
+          animate="animate"
+          transition={scaleTransition}
+          aria-live={ariaLive === 'polite' ? 'polite' : undefined}
+          aria-atomic={ariaLive === 'polite' ? true : undefined}
+          className="relative w-full max-w-md overflow-hidden rounded-[var(--bento-radius)] border border-dark-700/40 bg-dark-900/80 p-8 text-center shadow-[0_4px_24px_-4px_rgba(0,0,0,0.4),inset_0_1px_0_0_rgba(255,255,255,0.05)] backdrop-blur-xl sm:p-10"
+        >
+          {/* Top accent hairline */}
+          <div
+            aria-hidden
+            className={cn(
+              'pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent to-transparent',
+              a.hairline,
+            )}
+          />
+
+          {/* Icon medallion — gradient ring + glow, not a flat grey circle */}
+          <motion.div
+            variants={slideUp}
+            initial="initial"
+            animate="animate"
+            transition={slideUpTransition}
+            className="mb-6 flex justify-center"
+          >
+            <span
+              className={cn(
+                'relative flex h-20 w-20 items-center justify-center rounded-full ring-1',
+                a.medallion,
+              )}
+            >
+              <span
+                aria-hidden
+                className={cn(
+                  'absolute inset-0 rounded-full bg-gradient-to-br to-transparent',
+                  a.sheen,
+                )}
+              />
+              <span className={cn('relative', a.iconColor)}>{icon}</span>
+            </span>
+          </motion.div>
+
+          <h1 id={titleId} className="font-display text-2xl font-bold tracking-tight text-dark-50">
+            {title}
+          </h1>
+          {description && (
+            <p className="mt-3 text-base leading-relaxed text-dark-400">{description}</p>
+          )}
+
+          {children && <div className="mt-6 space-y-3 text-left">{children}</div>}
+
+          {actions && <div className="mt-7 flex flex-col gap-3">{actions}</div>}
+
+          {pulse && (
+            <div aria-hidden className="mt-7 flex items-center justify-center gap-1.5">
+              <span
+                className={cn('h-1.5 w-1.5 animate-pulse rounded-full', a.dot)}
+                style={{ animationDelay: '0ms' }}
+              />
+              <span
+                className={cn('h-1.5 w-1.5 animate-pulse rounded-full', a.dot)}
+                style={{ animationDelay: '300ms' }}
+              />
+              <span
+                className={cn('h-1.5 w-1.5 animate-pulse rounded-full', a.dot)}
+                style={{ animationDelay: '600ms' }}
+              />
+            </div>
+          )}
+
+          {footer && <p className="mt-6 text-sm text-dark-500">{footer}</p>}
+        </motion.div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/blocking/ChannelSubscriptionScreen.tsx b/src/components/blocking/ChannelSubscriptionScreen.tsx
index e213c6c..b49e13b 100644
--- a/src/components/blocking/ChannelSubscriptionScreen.tsx
+++ b/src/components/blocking/ChannelSubscriptionScreen.tsx
@@ -1,10 +1,12 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
+import { useState, useEffect, useCallback, useRef, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useBlockingStore } from '../../store/blocking';
 import { apiClient, isChannelSubscriptionError } from '../../api/client';
 import { usePlatform } from '../../platform';
 import { useFocusTrap } from '../../hooks/useFocusTrap';
-import { TelegramIcon, ClockIcon, CheckIcon } from '@/components/icons';
+import { TelegramIcon, ClockIcon, CheckIcon, RestartIcon } from '@/components/icons';
+import { Button } from '@/components/primitives';
+import BlockingShell from './BlockingShell';
 
 const CHECK_COOLDOWN_SECONDS = 5;
 
@@ -84,118 +86,87 @@ export default function ChannelSubscriptionScreen() {
 
   const screenRef = useFocusTrap<HTMLDivElement>(true, { lockScroll: false });
 
+  // Check-subscription button — 3 states (checking / cooldown / idle).
+  let checkIcon: ReactNode;
+  let checkLabel: string;
+  if (isChecking) {
+    checkIcon = <RestartIcon className="h-5 w-5 animate-spin" />;
+    checkLabel = t('blocking.channel.checking');
+  } else if (cooldown > 0) {
+    checkIcon = <ClockIcon className="h-5 w-5" />;
+    checkLabel = t('blocking.channel.waitSeconds', { seconds: cooldown });
+  } else {
+    checkIcon = <CheckIcon className="h-5 w-5" />;
+    checkLabel = t('blocking.channel.checkSubscription');
+  }
+
   return (
-    <div
-      ref={screenRef}
-      role="alertdialog"
-      aria-modal="true"
-      aria-labelledby="channel-sub-title"
-      tabIndex={-1}
-      className="fixed inset-0 z-[100] flex flex-col items-center justify-center bg-dark-950 p-6"
-    >
-      <div className="w-full max-w-md text-center">
-        {/* Icon */}
-        <div className="mb-8">
-          <div className="mx-auto flex h-24 w-24 items-center justify-center rounded-full bg-gradient-to-br from-blue-500/20 to-cyan-500/20">
-            <TelegramIcon className="h-12 w-12 text-blue-400" />
-          </div>
-        </div>
-
-        {/* Title */}
-        <h1 id="channel-sub-title" className="mb-4 text-2xl font-bold text-white">
-          {t('blocking.channel.title')}
-        </h1>
-
-        {/* Message */}
-        <p className="mb-6 text-lg text-dark-400">
-          {channelInfo?.message || t('blocking.channel.defaultMessage')}
-        </p>
-
-        {/* Channel list (only unsubscribed channels) */}
-        {channels.length > 0 && (
-          <div className="mb-6 space-y-3">
-            {channels.map((ch) => (
-              <div
-                key={ch.channel_id}
-                className="flex items-center justify-between rounded-xl border border-error-500/30 bg-error-500/10 p-3"
-              >
-                <span className="text-sm font-medium text-white">{ch.title || ch.channel_id}</span>
-                {ch.channel_link && (
-                  <button
-                    onClick={() => openChannel(ch.channel_link)}
-                    className="rounded-lg bg-blue-500/20 px-3 py-1 text-xs font-medium text-blue-400 hover:bg-blue-500/30"
-                  >
-                    {t('blocking.channel.openChannel')}
-                  </button>
-                )}
-              </div>
-            ))}
-          </div>
-        )}
-
-        {/* Fallback: single channel (legacy) */}
-        {channels.length === 0 && channelInfo?.channel_link && (
-          <button
-            onClick={() => openChannel(channelInfo.channel_link)}
-            className="mb-6 flex w-full items-center justify-center gap-3 rounded-xl bg-accent-500 px-6 py-4 font-semibold text-white transition-colors duration-200 hover:bg-accent-400"
-          >
-            {t('blocking.channel.openChannel')}
-          </button>
-        )}
-
-        {/* Error message */}
-        {error && (
-          <div className="mb-4 rounded-xl border border-error-500/30 bg-error-500/10 p-3">
-            <p className="text-sm text-error-400">{error}</p>
-          </div>
-        )}
-
-        {/* Check subscription button */}
-        <button
+    <BlockingShell
+      screenRef={screenRef}
+      titleId="channel-sub-title"
+      accent="info"
+      ariaLive="polite"
+      icon={<TelegramIcon className="h-9 w-9" />}
+      title={t('blocking.channel.title')}
+      description={channelInfo?.message || t('blocking.channel.defaultMessage')}
+      footer={t('blocking.channel.hint')}
+      actions={
+        <Button
+          variant="secondary"
+          size="lg"
+          fullWidth
           onClick={checkSubscription}
           disabled={isChecking || cooldown > 0}
-          className="flex w-full items-center justify-center gap-3 rounded-xl bg-dark-800 px-6 py-4 font-semibold text-white transition-all duration-200 hover:bg-dark-700 disabled:bg-dark-800 disabled:opacity-60"
+          leftIcon={checkIcon}
         >
-          {isChecking ? (
-            <>
-              <svg
-                className="h-5 w-5 animate-spin"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-              >
-                <circle
-                  className="opacity-25"
-                  cx="12"
-                  cy="12"
-                  r="10"
-                  stroke="currentColor"
-                  strokeWidth="4"
-                />
-                <path
-                  className="opacity-75"
-                  fill="currentColor"
-                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                />
-              </svg>
-              {t('blocking.channel.checking')}
-            </>
-          ) : cooldown > 0 ? (
-            <>
-              <ClockIcon className="h-5 w-5 text-dark-500" />
-              {t('blocking.channel.waitSeconds', { seconds: cooldown })}
-            </>
-          ) : (
-            <>
-              <CheckIcon className="h-5 w-5" />
-              {t('blocking.channel.checkSubscription')}
-            </>
-          )}
-        </button>
+          {checkLabel}
+        </Button>
+      }
+    >
+      {/* Channel list (only unsubscribed channels) */}
+      {channels.length > 0 && (
+        <div className="space-y-2">
+          {channels.map((ch) => (
+            <div
+              key={ch.channel_id}
+              className="flex items-center justify-between gap-3 rounded-xl border border-error-500/30 bg-error-500/10 p-3"
+            >
+              <span className="truncate text-sm font-medium text-dark-50">
+                {ch.title || ch.channel_id}
+              </span>
+              {ch.channel_link && (
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  className="shrink-0"
+                  onClick={() => openChannel(ch.channel_link)}
+                >
+                  {t('blocking.channel.openChannel')}
+                </Button>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
 
-        {/* Hint */}
-        <p className="mt-4 text-sm text-dark-500">{t('blocking.channel.hint')}</p>
-      </div>
-    </div>
+      {/* Fallback: single channel (legacy) */}
+      {channels.length === 0 && channelInfo?.channel_link && (
+        <Button
+          variant="primary"
+          size="lg"
+          fullWidth
+          onClick={() => openChannel(channelInfo.channel_link)}
+        >
+          {t('blocking.channel.openChannel')}
+        </Button>
+      )}
+
+      {/* Error message */}
+      {error && (
+        <div className="rounded-xl border border-error-500/30 bg-error-500/10 p-3">
+          <p className="text-sm text-error-400">{error}</p>
+        </div>
+      )}
+    </BlockingShell>
   );
 }
diff --git a/src/components/blocking/MaintenanceScreen.tsx b/src/components/blocking/MaintenanceScreen.tsx
index 00b392b..89cb110 100644
--- a/src/components/blocking/MaintenanceScreen.tsx
+++ b/src/components/blocking/MaintenanceScreen.tsx
@@ -2,6 +2,7 @@ import { useTranslation } from 'react-i18next';
 import { useBlockingStore } from '../../store/blocking';
 import { useFocusTrap } from '../../hooks/useFocusTrap';
 import { WrenchIcon } from '@/components/icons';
+import BlockingShell from './BlockingShell';
 
 export default function MaintenanceScreen() {
   const { t } = useTranslation();
@@ -9,58 +10,24 @@ export default function MaintenanceScreen() {
   const screenRef = useFocusTrap<HTMLDivElement>(true, { lockScroll: false });
 
   return (
-    <div
-      ref={screenRef}
-      role="alertdialog"
-      aria-modal="true"
-      aria-labelledby="maintenance-title"
-      tabIndex={-1}
-      className="fixed inset-0 z-[100] flex flex-col items-center justify-center bg-dark-950 p-6"
+    <BlockingShell
+      screenRef={screenRef}
+      titleId="maintenance-title"
+      accent="warning"
+      icon={<WrenchIcon className="h-9 w-9" />}
+      title={t('blocking.maintenance.title')}
+      description={maintenanceInfo?.message || t('blocking.maintenance.defaultMessage')}
+      pulse
+      footer={t('blocking.maintenance.waitMessage')}
     >
-      <div className="w-full max-w-md text-center">
-        {/* Icon */}
-        <div className="mb-8">
-          <div className="mx-auto flex h-24 w-24 items-center justify-center rounded-full bg-dark-800">
-            <WrenchIcon className="h-12 w-12 text-warning-500" />
-          </div>
+      {maintenanceInfo?.reason && (
+        <div className="rounded-xl border border-dark-700/30 bg-dark-800/50 p-4">
+          <p className="mb-1 text-xs font-medium uppercase tracking-wide text-dark-500">
+            {t('blocking.maintenance.reason')}:
+          </p>
+          <p className="text-sm text-dark-300">{maintenanceInfo.reason}</p>
         </div>
-
-        {/* Title */}
-        <h1 id="maintenance-title" className="mb-4 text-2xl font-bold text-white">
-          {t('blocking.maintenance.title')}
-        </h1>
-
-        {/* Message */}
-        <p className="mb-6 text-lg text-dark-400">
-          {maintenanceInfo?.message || t('blocking.maintenance.defaultMessage')}
-        </p>
-
-        {/* Reason */}
-        {maintenanceInfo?.reason && (
-          <div className="mb-6 rounded-xl bg-dark-800/50 p-4">
-            <p className="mb-1 text-sm text-dark-500">{t('blocking.maintenance.reason')}:</p>
-            <p className="text-dark-300">{maintenanceInfo.reason}</p>
-          </div>
-        )}
-
-        {/* Decorative dots */}
-        <div className="mt-8 flex items-center justify-center gap-2">
-          <div
-            className="h-2 w-2 animate-pulse rounded-full bg-warning-500"
-            style={{ animationDelay: '0ms' }}
-          />
-          <div
-            className="h-2 w-2 animate-pulse rounded-full bg-warning-500"
-            style={{ animationDelay: '300ms' }}
-          />
-          <div
-            className="h-2 w-2 animate-pulse rounded-full bg-warning-500"
-            style={{ animationDelay: '600ms' }}
-          />
-        </div>
-
-        <p className="mt-4 text-sm text-dark-500">{t('blocking.maintenance.waitMessage')}</p>
-      </div>
-    </div>
+      )}
+    </BlockingShell>
   );
 }
diff --git a/src/components/blocking/ServiceUnavailableScreen.tsx b/src/components/blocking/ServiceUnavailableScreen.tsx
index c60eadf..cfcd64b 100644
--- a/src/components/blocking/ServiceUnavailableScreen.tsx
+++ b/src/components/blocking/ServiceUnavailableScreen.tsx
@@ -6,6 +6,9 @@ import { useFocusTrap } from '../../hooks/useFocusTrap';
 import { pingBackend, hasEverReachedBackend } from '../../api/health';
 import { isInTelegramWebApp, closeTelegramApp } from '../../hooks/useTelegramSDK';
 import { CloudWarningIcon, RestartIcon, CloseIcon } from '@/components/icons';
+import { Button } from '@/components/primitives';
+import { cn } from '@/lib/utils';
+import BlockingShell from './BlockingShell';
 
 const POLL_INTERVAL_MS = 5000;
 
@@ -73,98 +76,45 @@ export default function ServiceUnavailableScreen() {
   const screenRef = useFocusTrap<HTMLDivElement>(true, { lockScroll: false });
 
   return (
-    <div
-      ref={screenRef}
-      role="alertdialog"
-      aria-modal="true"
-      aria-labelledby="service-unavailable-title"
-      tabIndex={-1}
-      className="fixed inset-0 z-[100] flex flex-col items-center justify-center bg-dark-950 p-6"
-    >
-      <div className="w-full max-w-md text-center">
-        {/* Icon */}
-        <div className="mb-8">
-          <div className="mx-auto flex h-24 w-24 items-center justify-center rounded-full bg-dark-800">
-            <CloudWarningIcon className="h-12 w-12 text-warning-500" />
-          </div>
-        </div>
-
-        {/* Title */}
-        <h1 id="service-unavailable-title" className="mb-4 text-2xl font-bold text-white">
-          {t('blocking.serviceUnavailable.title')}
-        </h1>
-
-        {/* Message */}
-        <p className="mb-6 text-lg text-dark-400">{t('blocking.serviceUnavailable.description')}</p>
-
-        {/* Retry button */}
-        <button
-          onClick={handleRetry}
-          disabled={isChecking}
-          className="flex w-full items-center justify-center gap-3 rounded-xl bg-dark-800 px-6 py-4 font-semibold text-white transition-all duration-200 hover:bg-dark-700 disabled:bg-dark-800 disabled:opacity-60"
-        >
-          {isChecking ? (
-            <>
-              <svg
-                className="h-5 w-5 animate-spin"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-              >
-                <circle
-                  className="opacity-25"
-                  cx="12"
-                  cy="12"
-                  r="10"
-                  stroke="currentColor"
-                  strokeWidth="4"
-                />
-                <path
-                  className="opacity-75"
-                  fill="currentColor"
-                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                />
-              </svg>
-              {t('blocking.serviceUnavailable.checking')}
-            </>
-          ) : (
-            <>
-              <RestartIcon className="h-5 w-5" />
-              {t('blocking.serviceUnavailable.retry')}
-            </>
-          )}
-        </button>
-
-        {/* Close button — Telegram Mini App only (a browser tab can't be closed
-            by script). Reliably exits the Mini App instead of routing back. */}
-        {inTelegram && (
-          <button
-            onClick={closeTelegramApp}
-            className="mt-3 flex w-full items-center justify-center gap-2 rounded-xl border border-dark-700 px-6 py-4 font-semibold text-dark-300 transition-colors duration-200 hover:bg-dark-800 hover:text-white"
+    <BlockingShell
+      screenRef={screenRef}
+      titleId="service-unavailable-title"
+      accent="warning"
+      ariaLive="polite"
+      icon={<CloudWarningIcon className="h-9 w-9" />}
+      title={t('blocking.serviceUnavailable.title')}
+      description={t('blocking.serviceUnavailable.description')}
+      pulse
+      footer={t('blocking.serviceUnavailable.hint')}
+      actions={
+        <>
+          <Button
+            variant="secondary"
+            size="lg"
+            fullWidth
+            onClick={handleRetry}
+            disabled={isChecking}
+            leftIcon={<RestartIcon className={cn('h-5 w-5', isChecking && 'animate-spin')} />}
           >
-            <CloseIcon className="h-5 w-5" />
-            {t('blocking.serviceUnavailable.close')}
-          </button>
-        )}
-
-        {/* Decorative dots */}
-        <div className="mt-8 flex items-center justify-center gap-2">
-          <div
-            className="h-2 w-2 animate-pulse rounded-full bg-warning-500"
-            style={{ animationDelay: '0ms' }}
-          />
-          <div
-            className="h-2 w-2 animate-pulse rounded-full bg-warning-500"
-            style={{ animationDelay: '300ms' }}
-          />
-          <div
-            className="h-2 w-2 animate-pulse rounded-full bg-warning-500"
-            style={{ animationDelay: '600ms' }}
-          />
-        </div>
-
-        <p className="mt-4 text-sm text-dark-500">{t('blocking.serviceUnavailable.hint')}</p>
-      </div>
-    </div>
+            {isChecking
+              ? t('blocking.serviceUnavailable.checking')
+              : t('blocking.serviceUnavailable.retry')}
+          </Button>
+          {/* Telegram Mini App only — a browser tab can't be closed by script.
+              Reliably exits the Mini App instead of routing back. */}
+          {inTelegram && (
+            <Button
+              variant="outline"
+              size="lg"
+              fullWidth
+              onClick={closeTelegramApp}
+              leftIcon={<CloseIcon className="h-5 w-5" />}
+            >
+              {t('blocking.serviceUnavailable.close')}
+            </Button>
+          )}
+        </>
+      }
+    />
   );
 }

From f9cc70cba32debc8edb300869ba652b93f774212 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Thu, 4 Jun 2026 13:48:33 +0300
Subject: [PATCH 21/36] fix(cabinet): blocking screens exit via the native
 Telegram back button, drop the in-page Close
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On a full-screen blocking overlay in the Telegram Mini App there were two exit
affordances: the native back button — which ran SPA navigation on the hidden
route underneath, so it didn't dismiss the block and kept flip-flopping between
Back and Close as the route changed — and a redundant in-page "Close" button on
the service-unavailable screen.

Make the native back button the single, stable exit: while any blocking screen
is active, TelegramBackButton shows one Back button whose click closes the Mini
App (closeTelegramApp) instead of navigating the SPA — no route change, no
Back/Close flip-flop. The normal route-based back button is restored once the
block clears. Remove the in-page Close button.
---
 src/AppWithNavigator.tsx                      | 28 +++++++++++-
 .../blocking/ServiceUnavailableScreen.tsx     | 43 ++++++-------------
 2 files changed, 39 insertions(+), 32 deletions(-)

diff --git a/src/AppWithNavigator.tsx b/src/AppWithNavigator.tsx
index c89d016..0aaeb50 100644
--- a/src/AppWithNavigator.tsx
+++ b/src/AppWithNavigator.tsx
@@ -15,9 +15,10 @@ import { ThemeColorsProvider } from './providers/ThemeColorsProvider';
 import { WebSocketProvider } from './providers/WebSocketProvider';
 import { ToastProvider } from './components/Toast';
 import { TooltipProvider } from './components/primitives/Tooltip';
-import { isInTelegramWebApp } from './hooks/useTelegramSDK';
+import { isInTelegramWebApp, closeTelegramApp } from './hooks/useTelegramSDK';
 import { getFallbackParentPath } from './utils/navigation';
 import { subscriptionApi } from './api/subscription';
+import { useBlockingStore } from './store/blocking';
 
 const TWEMOJI_OPTIONS = { className: 'twemoji', folder: 'svg', ext: '.svg' } as const;
 
@@ -44,6 +45,13 @@ function TelegramBackButton() {
   const pathnameRef = useRef(location.pathname);
   pathnameRef.current = location.pathname;
 
+  // A full-screen blocking overlay (maintenance / channel-sub / blacklist /
+  // account-deleted / backend-unavailable) takes over the native back button:
+  // there is nowhere to navigate, so it becomes a single, stable EXIT control.
+  const blockingType = useBlockingStore((state) => state.blockingType);
+  const blockingTypeRef = useRef(blockingType);
+  blockingTypeRef.current = blockingType;
+
   // Reliable in-app navigation depth (the app's entry point is 0). Driven by
   // React Router's navigation TYPE — NOT window.history.state.idx, which the
   // app's own redirects mutate unpredictably and which is the root flake behind
@@ -89,6 +97,15 @@ function TelegramBackButton() {
   subsCountRef.current = subsCount;
 
   useEffect(() => {
+    // On a blocking overlay, keep exactly one visible Back button (its click
+    // exits the app — see handler). Skip the route logic so it can't flip
+    // between Back and Close as the hidden route changes underneath.
+    if (blockingType) {
+      try {
+        showBackButton();
+      } catch {}
+      return;
+    }
     const isTopLevel = location.pathname === '' || BOTTOM_NAV_PATHS.includes(location.pathname);
     // Depth-independent on purpose: whether the user deep-linked in or navigated
     // here in-app, a single-tariff detail whose list just bounces back has no
@@ -103,10 +120,17 @@ function TelegramBackButton() {
         showBackButton();
       }
     } catch {}
-  }, [location, listRedirectsToDetail]);
+  }, [location, listRedirectsToDetail, blockingType]);
 
   // Stable handler — ref prevents re-subscription on every render
   const handler = useCallback(() => {
+    // A blocking overlay is a hard block with nowhere to navigate — the back
+    // button's only job is to EXIT the Mini App (no SPA navigation, so it can't
+    // flip-flop between Back and Close).
+    if (blockingTypeRef.current) {
+      closeTelegramApp();
+      return;
+    }
     // Real in-app history (depth > 0): a normal back. Otherwise we were opened
     // directly on this route via a deep-link — navigate(-1) is a no-op, so fall
     // back to a sensible parent route instead.
diff --git a/src/components/blocking/ServiceUnavailableScreen.tsx b/src/components/blocking/ServiceUnavailableScreen.tsx
index cfcd64b..4cd2287 100644
--- a/src/components/blocking/ServiceUnavailableScreen.tsx
+++ b/src/components/blocking/ServiceUnavailableScreen.tsx
@@ -4,8 +4,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { useBlockingStore } from '../../store/blocking';
 import { useFocusTrap } from '../../hooks/useFocusTrap';
 import { pingBackend, hasEverReachedBackend } from '../../api/health';
-import { isInTelegramWebApp, closeTelegramApp } from '../../hooks/useTelegramSDK';
-import { CloudWarningIcon, RestartIcon, CloseIcon } from '@/components/icons';
+import { CloudWarningIcon, RestartIcon } from '@/components/icons';
 import { Button } from '@/components/primitives';
 import { cn } from '@/lib/utils';
 import BlockingShell from './BlockingShell';
@@ -25,7 +24,6 @@ export default function ServiceUnavailableScreen() {
   const queryClient = useQueryClient();
   const [isChecking, setIsChecking] = useState(false);
   const isCheckingRef = useRef(false);
-  const inTelegram = isInTelegramWebApp();
 
   const recover = useCallback(() => {
     clearBlocking();
@@ -87,33 +85,18 @@ export default function ServiceUnavailableScreen() {
       pulse
       footer={t('blocking.serviceUnavailable.hint')}
       actions={
-        <>
-          <Button
-            variant="secondary"
-            size="lg"
-            fullWidth
-            onClick={handleRetry}
-            disabled={isChecking}
-            leftIcon={<RestartIcon className={cn('h-5 w-5', isChecking && 'animate-spin')} />}
-          >
-            {isChecking
-              ? t('blocking.serviceUnavailable.checking')
-              : t('blocking.serviceUnavailable.retry')}
-          </Button>
-          {/* Telegram Mini App only — a browser tab can't be closed by script.
-              Reliably exits the Mini App instead of routing back. */}
-          {inTelegram && (
-            <Button
-              variant="outline"
-              size="lg"
-              fullWidth
-              onClick={closeTelegramApp}
-              leftIcon={<CloseIcon className="h-5 w-5" />}
-            >
-              {t('blocking.serviceUnavailable.close')}
-            </Button>
-          )}
-        </>
+        <Button
+          variant="secondary"
+          size="lg"
+          fullWidth
+          onClick={handleRetry}
+          disabled={isChecking}
+          leftIcon={<RestartIcon className={cn('h-5 w-5', isChecking && 'animate-spin')} />}
+        >
+          {isChecking
+            ? t('blocking.serviceUnavailable.checking')
+            : t('blocking.serviceUnavailable.retry')}
+        </Button>
       }
     />
   );

From 7d31dc3ffa094683c17b81dbf0ee8a555a34da09 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Thu, 4 Jun 2026 14:06:45 +0300
Subject: [PATCH 22/36] fix(connected-accounts): guide the user to enter the
 existing account's password when merging by email

The backend account-takeover fix now requires the existing account's password
before merging an email that already belongs to another account. Show a clear
message (profile.emailMergePasswordRequired) on that response instead of the
generic "already registered" dead-end, so the legitimate owner knows to enter
that account's password (in both password fields) to complete the merge. i18n
in ru/en/zh/fa.
---
 src/locales/en.json             | 3 ++-
 src/locales/fa.json             | 3 ++-
 src/locales/ru.json             | 3 ++-
 src/locales/zh.json             | 3 ++-
 src/pages/ConnectedAccounts.tsx | 7 ++++++-
 5 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index 4f2a27b..b36979e 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -4594,7 +4594,8 @@
         "vk": "VK"
       },
       "backToAccounts": "Back to accounts"
-    }
+    },
+    "emailMergePasswordRequired": "This email already belongs to another account. To merge the accounts, enter that account's password."
   },
   "theme": {
     "colors": "Theme Colors",
diff --git a/src/locales/fa.json b/src/locales/fa.json
index fd2cc4d..e189012 100644
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -4139,7 +4139,8 @@
         "vk": "VK"
       },
       "backToAccounts": "بازگشت به فهرست حساب‌ها"
-    }
+    },
+    "emailMergePasswordRequired": "این ایمیل قبلاً به حساب دیگری تعلق دارد. برای ادغام حساب‌ها، رمز عبور آن حساب را وارد کنید."
   },
   "theme": {
     "colors": "رنگ‌های تم",
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 672c5a1..2a9899d 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -5146,7 +5146,8 @@
         "vk": "VK"
       },
       "backToAccounts": "К списку аккаунтов"
-    }
+    },
+    "emailMergePasswordRequired": "Этот email уже привязан к другому аккаунту. Чтобы объединить аккаунты, введите пароль от него."
   },
   "theme": {
     "colors": "Цвета темы",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index c196113..557fb7c 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -4138,7 +4138,8 @@
         "vk": "VK"
       },
       "backToAccounts": "返回账户列表"
-    }
+    },
+    "emailMergePasswordRequired": "该邮箱已属于另一个账户。要合并账户，请输入该账户的密码。"
   },
   "theme": {
     "colors": "主题颜色",
diff --git a/src/pages/ConnectedAccounts.tsx b/src/pages/ConnectedAccounts.tsx
index 43df293..0d81f42 100644
--- a/src/pages/ConnectedAccounts.tsx
+++ b/src/pages/ConnectedAccounts.tsx
@@ -409,7 +409,12 @@ export default function ConnectedAccounts() {
     },
     onError: (err: { response?: { data?: { detail?: string } } }) => {
       const detail = err.response?.data?.detail;
-      if (detail?.includes('already registered')) {
+      // The email belongs to another account and merging it requires proving
+      // ownership: the backend asks for THAT account's password (account-takeover
+      // fix). Guide the user to enter it rather than showing a dead-end error.
+      if (detail?.includes('merge')) {
+        setEmailError(t('profile.emailMergePasswordRequired'));
+      } else if (detail?.includes('already registered')) {
         setEmailError(t('profile.emailAlreadyRegistered'));
       } else if (detail?.includes('already have a verified email')) {
         setEmailError(t('profile.alreadyHaveEmail'));

From b4f066942a613027d8a9c347332ef1efdd29e03d Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Thu, 4 Jun 2026 16:54:50 +0300
Subject: [PATCH 23/36] fix(security): validate the deep-link url in
 miniapp/redirect.html (open redirect + DOM-XSS)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

public/miniapp/redirect.html read the `url` query param and assigned it to both
the manual <a href> and window.location.href with no validation. Served on the
cabinet's own origin, this was an open redirect (phishing) and — in Telegram /
WebView contexts that execute javascript: URIs in top-level navigation — a
DOM-XSS able to exfiltrate the refresh_token from localStorage (account takeover).

Add isSafeAppLink(): only a custom app deep link passes (scheme://, excluding
http/https/file/blob/about/intent/content and the javascript/data/vbscript
script schemes); anything else renders the no-URL state instead of navigating or
setting href. Mirrors the validation already in src/pages/DeepLinkRedirect.tsx.
---
 public/miniapp/redirect.html | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/public/miniapp/redirect.html b/public/miniapp/redirect.html
index 81de650..b6e5151 100644
--- a/public/miniapp/redirect.html
+++ b/public/miniapp/redirect.html
@@ -124,7 +124,21 @@
             document.getElementById('errorText').textContent = t.error;
             document.getElementById('manualBtn').textContent = t.btn;
 
-            if (!url) {
+            // SECURITY: this page navigates to a user-supplied `url`. Only open
+            // a custom app deep link. A bare `javascript:`/`data:`/`vbscript:`/
+            // `file:` URI (DOM-XSS) is not scheme://-shaped, and http(s)/intent
+            // are blocked (open redirect / intent abuse) — so only VPN app
+            // schemes (happ://, vless://, ...) pass. Mirrors the validation in
+            // src/pages/DeepLinkRedirect.tsx.
+            function isSafeAppLink(raw) {
+                var s = String(raw || '').trim().toLowerCase();
+                var m = s.match(/^([a-z][a-z0-9+.\-]*):\/\//);
+                if (!m) return false;
+                var blocked = ['http', 'https', 'file', 'blob', 'about', 'javascript', 'data', 'vbscript', 'intent', 'content'];
+                return blocked.indexOf(m[1]) === -1;
+            }
+
+            if (!url || !isSafeAppLink(url)) {
                 document.getElementById('title').textContent = t.noUrl;
                 document.getElementById('subtitle').textContent = '';
                 document.querySelector('.spinner').style.display = 'none';

From c6fc167d80898832504000c24860be8c4099fb93 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Thu, 4 Jun 2026 17:45:43 +0300
Subject: [PATCH 24/36] fix(security): use signed media tokens for ticket
 attachments

Backend now requires a signed, expiring token to download media (a raw file_id
404s). Carry the per-attachment `token` (and the legacy `media_token`) from the
ticket response through MessageMediaGrid and append it in ticketsApi.getMediaUrl,
so attachments keep rendering while leaked URLs expire. Must deploy together with
the backend change.
---
 src/api/tickets.ts                          |  8 +++++---
 src/components/tickets/MessageMediaGrid.tsx | 13 ++++++++++---
 src/types/index.ts                          |  4 ++++
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/api/tickets.ts b/src/api/tickets.ts
index 2794127..86a3d50 100644
--- a/src/api/tickets.ts
+++ b/src/api/tickets.ts
@@ -79,9 +79,11 @@ export const ticketsApi = {
     return response.data;
   },
 
-  // Get media URL for display
-  getMediaUrl: (fileId: string): string => {
+  // Get media URL for display. The signed `token` comes from the ticket
+  // response and is required by the backend (a raw file_id alone 404s).
+  getMediaUrl: (fileId: string, token?: string | null): string => {
     const baseUrl = import.meta.env.VITE_API_URL || '';
-    return `${baseUrl}/cabinet/media/${fileId}`;
+    const suffix = token ? `?token=${encodeURIComponent(token)}` : '';
+    return `${baseUrl}/cabinet/media/${fileId}${suffix}`;
   },
 };
diff --git a/src/components/tickets/MessageMediaGrid.tsx b/src/components/tickets/MessageMediaGrid.tsx
index df3496f..e76fb47 100644
--- a/src/components/tickets/MessageMediaGrid.tsx
+++ b/src/components/tickets/MessageMediaGrid.tsx
@@ -9,12 +9,15 @@ export interface MediaItem {
   type: string;
   file_id: string;
   caption?: string | null;
+  /** Signed, expiring download token from the ticket response. */
+  token?: string | null;
 }
 
 interface MessageLike {
   has_media?: boolean;
   media_type?: string | null;
   media_file_id?: string | null;
+  media_token?: string | null;
   media_caption?: string | null;
   media_items?: MediaItem[] | null;
 }
@@ -33,6 +36,7 @@ function getItems(message: MessageLike): MediaItem[] {
         type: message.media_type,
         file_id: message.media_file_id,
         caption: message.media_caption,
+        token: message.media_token,
       },
     ];
   }
@@ -113,7 +117,7 @@ export function MessageMediaGrid({
                 onClick={() => openFullscreen(originalIdx)}
               >
                 <img
-                  src={ticketsApi.getMediaUrl(item.file_id)}
+                  src={ticketsApi.getMediaUrl(item.file_id, item.token)}
                   alt={item.caption || 'Attached photo'}
                   className="h-full w-full object-cover transition-opacity group-hover:opacity-90"
                   loading="lazy"
@@ -131,7 +135,7 @@ export function MessageMediaGrid({
 
       {/* Non-photo media rendered inline */}
       {otherItems.map((item) => {
-        const mediaUrl = ticketsApi.getMediaUrl(item.file_id);
+        const mediaUrl = ticketsApi.getMediaUrl(item.file_id, item.token);
         if (item.type === 'video') {
           return (
             <div key={item.file_id}>
@@ -203,7 +207,10 @@ export function MessageMediaGrid({
               onClick={closeFullscreen}
             >
               <img
-                src={ticketsApi.getMediaUrl(photoItems[fullscreenIndex].file_id)}
+                src={ticketsApi.getMediaUrl(
+                  photoItems[fullscreenIndex].file_id,
+                  photoItems[fullscreenIndex].token,
+                )}
                 alt={photoItems[fullscreenIndex].caption || 'Attached photo'}
                 className="max-h-full max-w-full object-contain"
                 style={{ touchAction: 'pinch-zoom' }}
diff --git a/src/types/index.ts b/src/types/index.ts
index 84ad78a..f2d8245 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -486,6 +486,8 @@ export interface TicketMediaItem {
   type: 'photo' | 'video' | 'document';
   file_id: string;
   caption?: string | null;
+  /** Signed, expiring download token (response only). */
+  token?: string | null;
 }
 
 export interface TicketMessage {
@@ -495,6 +497,8 @@ export interface TicketMessage {
   has_media: boolean;
   media_type: string | null;
   media_file_id: string | null;
+  /** Signed, expiring download token for the legacy single media_file_id. */
+  media_token?: string | null;
   media_caption: string | null;
   media_items?: TicketMediaItem[] | null;
   created_at: string;

From 322432009502e6b983f286747e1d4840123fb7db Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Thu, 4 Jun 2026 19:06:54 +0300
Subject: [PATCH 25/36] feat(connected-accounts): email-merge confirmation via
 emailed one-time code
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When linking an email that belongs to another account, the backend now mails a
one-time code to it (merge_verification='email_code') instead of asking for that
account's password. Add a 6-digit code step: on the email_code response show the
code input, verify via authApi.verifyEmailMerge → on success redirect to /merge.
Preview/execute already go through apiClient (JWT), so they satisfy the new
initiator-bound merge endpoints. i18n in ru/en/zh/fa.
---
 src/api/auth.ts                 |  13 +-
 src/locales/en.json             |   7 +-
 src/locales/fa.json             |   7 +-
 src/locales/ru.json             |   7 +-
 src/locales/zh.json             |   7 +-
 src/pages/ConnectedAccounts.tsx | 208 +++++++++++++++++++++++---------
 6 files changed, 186 insertions(+), 63 deletions(-)

diff --git a/src/api/auth.ts b/src/api/auth.ts
index 4e7db24..86e4f42 100644
--- a/src/api/auth.ts
+++ b/src/api/auth.ts
@@ -87,7 +87,10 @@ export const authApi = {
     message: string;
     email?: string;
     merge_required?: boolean;
-    merge_token?: string;
+    // 'email_code' means the email belongs to another account: a confirmation
+    // code was mailed to it and must be verified before a merge token is issued.
+    merge_verification?: 'email_code';
+    merge_token?: string | null;
   }> => {
     const response = await apiClient.post('/cabinet/auth/email/register', {
       email,
@@ -97,6 +100,14 @@ export const authApi = {
     return response.data;
   },
 
+  // Confirm an email account merge with the code sent to the existing account.
+  verifyEmailMerge: async (
+    code: string,
+  ): Promise<{ message: string; merge_required?: boolean; merge_token?: string }> => {
+    const response = await apiClient.post('/cabinet/auth/email/merge/verify', { code });
+    return response.data;
+  },
+
   registerEmailStandalone: async (data: {
     email: string;
     password: string;
diff --git a/src/locales/en.json b/src/locales/en.json
index b36979e..b81f0de 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -4595,7 +4595,12 @@
       },
       "backToAccounts": "Back to accounts"
     },
-    "emailMergePasswordRequired": "This email already belongs to another account. To merge the accounts, enter that account's password."
+    "emailMergePasswordRequired": "This email already belongs to another account. To merge the accounts, enter that account's password.",
+    "emailMergeCodeSent": "A confirmation code was sent to that email.",
+    "emailMergeCodeDescription": "This email already belongs to another account. We sent a code to it — enter it to confirm ownership and merge the accounts.",
+    "emailMergeCodeLabel": "Code from the email",
+    "emailMergeConfirm": "Confirm and merge",
+    "emailMergeCodeInvalid": "Invalid or expired code"
   },
   "theme": {
     "colors": "Theme Colors",
diff --git a/src/locales/fa.json b/src/locales/fa.json
index e189012..640e433 100644
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -4140,7 +4140,12 @@
       },
       "backToAccounts": "بازگشت به فهرست حساب‌ها"
     },
-    "emailMergePasswordRequired": "این ایمیل قبلاً به حساب دیگری تعلق دارد. برای ادغام حساب‌ها، رمز عبور آن حساب را وارد کنید."
+    "emailMergePasswordRequired": "این ایمیل قبلاً به حساب دیگری تعلق دارد. برای ادغام حساب‌ها، رمز عبور آن حساب را وارد کنید.",
+    "emailMergeCodeSent": "کد تأیید به آن ایمیل ارسال شد.",
+    "emailMergeCodeDescription": "این ایمیل قبلاً به حساب دیگری تعلق دارد. کدی به آن ارسال کردیم — برای تأیید مالکیت و ادغام حساب‌ها آن را وارد کنید.",
+    "emailMergeCodeLabel": "کد ارسال‌شده در ایمیل",
+    "emailMergeConfirm": "تأیید و ادغام",
+    "emailMergeCodeInvalid": "کد نامعتبر یا منقضی‌شده"
   },
   "theme": {
     "colors": "رنگ‌های تم",
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 2a9899d..3ceed9a 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -5147,7 +5147,12 @@
       },
       "backToAccounts": "К списку аккаунтов"
     },
-    "emailMergePasswordRequired": "Этот email уже привязан к другому аккаунту. Чтобы объединить аккаунты, введите пароль от него."
+    "emailMergePasswordRequired": "Этот email уже привязан к другому аккаунту. Чтобы объединить аккаунты, введите пароль от него.",
+    "emailMergeCodeSent": "Код подтверждения отправлен на тот email.",
+    "emailMergeCodeDescription": "Этот email уже привязан к другому аккаунту. Мы отправили на него код — введите его, чтобы подтвердить владение и объединить аккаунты.",
+    "emailMergeCodeLabel": "Код из письма",
+    "emailMergeConfirm": "Подтвердить и объединить",
+    "emailMergeCodeInvalid": "Неверный или просроченный код"
   },
   "theme": {
     "colors": "Цвета темы",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 557fb7c..7a78ee1 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -4139,7 +4139,12 @@
       },
       "backToAccounts": "返回账户列表"
     },
-    "emailMergePasswordRequired": "该邮箱已属于另一个账户。要合并账户，请输入该账户的密码。"
+    "emailMergePasswordRequired": "该邮箱已属于另一个账户。要合并账户，请输入该账户的密码。",
+    "emailMergeCodeSent": "确认码已发送至该邮箱。",
+    "emailMergeCodeDescription": "该邮箱已属于另一个账户。我们已向其发送验证码——请输入以确认所有权并合并账户。",
+    "emailMergeCodeLabel": "邮件中的验证码",
+    "emailMergeConfirm": "确认并合并",
+    "emailMergeCodeInvalid": "验证码无效或已过期"
   },
   "theme": {
     "colors": "主题颜色",
diff --git a/src/pages/ConnectedAccounts.tsx b/src/pages/ConnectedAccounts.tsx
index 0d81f42..78c3456 100644
--- a/src/pages/ConnectedAccounts.tsx
+++ b/src/pages/ConnectedAccounts.tsx
@@ -318,6 +318,10 @@ export default function ConnectedAccounts() {
   const [emailConfirmPassword, setEmailConfirmPassword] = useState('');
   const [emailError, setEmailError] = useState<string | null>(null);
   const [emailSuccess, setEmailSuccess] = useState<string | null>(null);
+  // Email-merge confirmation: the target email belongs to another account, so a
+  // one-time code was mailed to it; verifying the code yields the merge token.
+  const [emailMergeCodePending, setEmailMergeCodePending] = useState(false);
+  const [emailMergeCode, setEmailMergeCode] = useState('');
   const setUser = useAuthStore((state) => state.setUser);
 
   const { data: emailAuthConfig } = useQuery<EmailAuthEnabled>({
@@ -396,6 +400,15 @@ export default function ConnectedAccounts() {
         navigate(`/merge/${response.merge_token}`, { replace: true });
         return;
       }
+      // The email belongs to another account: a one-time code was mailed to it.
+      // Switch to the code step; verifying it yields the merge token.
+      if (response.merge_required && response.merge_verification === 'email_code') {
+        setEmailMergeCodePending(true);
+        setEmailMergeCode('');
+        setEmailSuccess(t('profile.emailMergeCodeSent'));
+        setEmailError(null);
+        return;
+      }
       setEmailSuccess(t('profile.emailSent'));
       setEmailError(null);
       setEmailValue('');
@@ -425,6 +438,36 @@ export default function ConnectedAccounts() {
     },
   });
 
+  const verifyEmailMergeMutation = useMutation({
+    mutationFn: (code: string) => authApi.verifyEmailMerge(code),
+    onSuccess: (response) => {
+      if (response.merge_token) {
+        navigate(`/merge/${response.merge_token}`, { replace: true });
+      }
+    },
+    onError: (err: { response?: { data?: { detail?: string } } }) => {
+      setEmailError(err.response?.data?.detail || t('profile.emailMergeCodeInvalid'));
+    },
+  });
+
+  const handleVerifyMergeCode = (e: React.SyntheticEvent) => {
+    e.preventDefault();
+    setEmailError(null);
+    const code = emailMergeCode.trim();
+    if (!/^\d{6}$/.test(code)) {
+      setEmailError(t('profile.emailMergeCodeInvalid'));
+      return;
+    }
+    verifyEmailMergeMutation.mutate(code);
+  };
+
+  const cancelEmailMerge = () => {
+    setEmailMergeCodePending(false);
+    setEmailMergeCode('');
+    setEmailError(null);
+    setEmailSuccess(null);
+  };
+
   const handleEmailSubmit = (e: React.SyntheticEvent) => {
     e.preventDefault();
     setEmailError(null);
@@ -685,68 +728,117 @@ export default function ConnectedAccounts() {
                   >
                     <div className="mt-4 border-t border-dark-700/30 pt-4">
                       <p className="mb-4 text-sm text-dark-400">
-                        {t('profile.linkEmailDescription')}
+                        {emailMergeCodePending
+                          ? t('profile.emailMergeCodeDescription')
+                          : t('profile.linkEmailDescription')}
                       </p>
-                      <form onSubmit={handleEmailSubmit} className="space-y-3">
-                        <div>
-                          <label htmlFor="email-link-input" className="label">
-                            Email
-                          </label>
-                          <input
-                            id="email-link-input"
-                            type="email"
-                            value={emailValue}
-                            onChange={(e) => setEmailValue(e.target.value)}
-                            placeholder="email@example.com"
-                            className="input"
-                            autoComplete="email"
-                          />
-                        </div>
-                        <div>
-                          <label htmlFor="email-link-password" className="label">
-                            {t('auth.password')}
-                          </label>
-                          <input
-                            id="email-link-password"
-                            type="password"
-                            value={emailPassword}
-                            onChange={(e) => setEmailPassword(e.target.value)}
-                            placeholder={t('profile.passwordPlaceholder')}
-                            className="input"
-                            autoComplete="new-password"
-                          />
-                          <p className="mt-1 text-xs text-dark-500">{t('profile.passwordHint')}</p>
-                        </div>
-                        <div>
-                          <label htmlFor="email-link-confirm" className="label">
-                            {t('auth.confirmPassword')}
-                          </label>
-                          <input
-                            id="email-link-confirm"
-                            type="password"
-                            value={emailConfirmPassword}
-                            onChange={(e) => setEmailConfirmPassword(e.target.value)}
-                            placeholder={t('profile.confirmPasswordPlaceholder')}
-                            className="input"
-                            autoComplete="new-password"
-                          />
-                        </div>
-
-                        {emailError && (
-                          <div className="rounded-xl border border-error-500/30 bg-error-500/10 p-3 text-sm text-error-400">
-                            {emailError}
+                      {emailMergeCodePending ? (
+                        <form onSubmit={handleVerifyMergeCode} className="space-y-3">
+                          <div>
+                            <label htmlFor="email-merge-code" className="label">
+                              {t('profile.emailMergeCodeLabel')}
+                            </label>
+                            <input
+                              id="email-merge-code"
+                              type="text"
+                              inputMode="numeric"
+                              maxLength={6}
+                              value={emailMergeCode}
+                              onChange={(e) => setEmailMergeCode(e.target.value.replace(/\D/g, ''))}
+                              placeholder="000000"
+                              className="input tracking-[0.5em]"
+                              autoComplete="one-time-code"
+                            />
                           </div>
-                        )}
-                        {emailSuccess && (
-                          <div className="rounded-xl border border-success-500/30 bg-success-500/10 p-3 text-sm text-success-400">
-                            {emailSuccess}
+                          {emailError && (
+                            <div className="rounded-xl border border-error-500/30 bg-error-500/10 p-3 text-sm text-error-400">
+                              {emailError}
+                            </div>
+                          )}
+                          {emailSuccess && (
+                            <div className="rounded-xl border border-success-500/30 bg-success-500/10 p-3 text-sm text-success-400">
+                              {emailSuccess}
+                            </div>
+                          )}
+                          <Button
+                            type="submit"
+                            fullWidth
+                            loading={verifyEmailMergeMutation.isPending}
+                          >
+                            {t('profile.emailMergeConfirm')}
+                          </Button>
+                          <button
+                            type="button"
+                            onClick={cancelEmailMerge}
+                            className="w-full text-sm text-dark-400 transition-colors hover:text-dark-200"
+                          >
+                            {t('common.cancel')}
+                          </button>
+                        </form>
+                      ) : (
+                        <form onSubmit={handleEmailSubmit} className="space-y-3">
+                          <div>
+                            <label htmlFor="email-link-input" className="label">
+                              Email
+                            </label>
+                            <input
+                              id="email-link-input"
+                              type="email"
+                              value={emailValue}
+                              onChange={(e) => setEmailValue(e.target.value)}
+                              placeholder="email@example.com"
+                              className="input"
+                              autoComplete="email"
+                            />
+                          </div>
+                          <div>
+                            <label htmlFor="email-link-password" className="label">
+                              {t('auth.password')}
+                            </label>
+                            <input
+                              id="email-link-password"
+                              type="password"
+                              value={emailPassword}
+                              onChange={(e) => setEmailPassword(e.target.value)}
+                              placeholder={t('profile.passwordPlaceholder')}
+                              className="input"
+                              autoComplete="new-password"
+                            />
+                            <p className="mt-1 text-xs text-dark-500">
+                              {t('profile.passwordHint')}
+                            </p>
+                          </div>
+                          <div>
+                            <label htmlFor="email-link-confirm" className="label">
+                              {t('auth.confirmPassword')}
+                            </label>
+                            <input
+                              id="email-link-confirm"
+                              type="password"
+                              value={emailConfirmPassword}
+                              onChange={(e) => setEmailConfirmPassword(e.target.value)}
+                              placeholder={t('profile.confirmPasswordPlaceholder')}
+                              className="input"
+                              autoComplete="new-password"
+                            />
                           </div>
-                        )}
 
-                        <Button type="submit" fullWidth loading={registerEmailMutation.isPending}>
-                          {t('profile.linkEmail')}
-                        </Button>
-                      </form>
+                          {emailError && (
+                            <div className="rounded-xl border border-error-500/30 bg-error-500/10 p-3 text-sm text-error-400">
+                              {emailError}
+                            </div>
+                          )}
+                          {emailSuccess && (
+                            <div className="rounded-xl border border-success-500/30 bg-success-500/10 p-3 text-sm text-success-400">
+                              {emailSuccess}
+                            </div>
+                          )}
+
+                          <Button type="submit" fullWidth loading={registerEmailMutation.isPending}>
+                            {t('profile.linkEmail')}
+                          </Button>
+                        </form>
+                      )}
                     </div>
                   </motion.div>
                 )}

From 73ee42a0ef38ec36ff6f763304b9521e44d9302a Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Thu, 4 Jun 2026 22:15:43 +0300
Subject: [PATCH 26/36] fix(wheel): stop showing fake wins in the browser
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

After a Stars payment the wheel matched its landing sector to the won prize
by display_name/emoji and, on any miss, span to Math.random()*360 — which
often pointed at a winning slot. The poll result also carried the SPIN id in
prize_id (not the WheelPrize id), so it never matched and always hit that
random fallback. In a backgrounded browser tab the poll often times out,
so the wheel 'landed' on месяц/50₽ while the real result was Ничего; the
Mini App was fine because it gets the result inline.

- Match the sector by prize_id (exact), with name/emoji only as a defensive
  fallback for old payloads.
- Never land on a random angle: when the prize can't be resolved (poll
  timeout/error) land on the neutral 'Nothing' sector instead.
- Carry the real WheelPrize id (now exposed by the bot history endpoint)
  through the poll result.
---
 src/api/wheel.ts    |  3 ++
 src/pages/Wheel.tsx | 95 +++++++++++++++++++++++++++------------------
 2 files changed, 61 insertions(+), 37 deletions(-)

diff --git a/src/api/wheel.ts b/src/api/wheel.ts
index dd47f82..16a005f 100644
--- a/src/api/wheel.ts
+++ b/src/api/wheel.ts
@@ -60,6 +60,9 @@ export interface SpinResult {
 
 export interface SpinHistoryItem {
   id: number;
+  // WheelPrize id of the won prize (null if that prize was later deleted). Used to
+  // land the wheel animation on the exact winning sector after a Stars payment.
+  prize_id: number | null;
   payment_type: string;
   payment_amount: number;
   prize_type: string;
diff --git a/src/pages/Wheel.tsx b/src/pages/Wheel.tsx
index 9f6d4d0..674ec8c 100644
--- a/src/pages/Wheel.tsx
+++ b/src/pages/Wheel.tsx
@@ -22,38 +22,57 @@ const ChevronIcon = ({ expanded }: { expanded: boolean }) => (
 );
 
 /**
- * Calculate rotation degrees for a prize based on its position on the wheel.
+ * Rotation (mod 360) that brings sector `prizeIndex` under the top pointer.
  * Mirrors the backend _calculate_rotation logic in wheel_service.py.
  */
-function calculateRotationForPrize(prizes: WheelPrize[], result: SpinResult): number {
-  // Find prize index by matching display_name + emoji (both must match for safety)
-  let prizeIndex = prizes.findIndex(
-    (p) => p.display_name === result.prize_display_name && p.emoji === result.emoji,
-  );
-
-  // Fallback: match by display_name only
-  if (prizeIndex === -1) {
-    prizeIndex = prizes.findIndex((p) => p.display_name === result.prize_display_name);
-  }
-
-  // Fallback: match by emoji + prize_type
-  if (prizeIndex === -1) {
-    prizeIndex = prizes.findIndex(
-      (p) => p.emoji === result.emoji && p.prize_type === result.prize_type,
-    );
-  }
-
-  if (prizeIndex === -1) {
-    // Can't determine prize position — random angle
-    return Math.random() * 360;
-  }
-
+function rotationForIndex(prizes: WheelPrize[], prizeIndex: number): number {
+  if (prizes.length === 0) return 0;
   const sectorAngle = 360 / prizes.length;
   const baseAngle = prizeIndex * sectorAngle + sectorAngle / 2;
-  const offset = (Math.random() - 0.5) * sectorAngle * 0.6; // ±30% of sector
-  const stopAngle = 360 - baseAngle + offset;
+  const offset = (Math.random() - 0.5) * sectorAngle * 0.6; // ±30% within the sector
+  return 360 - baseAngle + offset;
+}
 
-  return stopAngle;
+/** Index of the "Nothing" sector, or 0 if there isn't one. */
+function neutralIndex(prizes: WheelPrize[]): number {
+  const idx = prizes.findIndex((p) => p.prize_type === 'nothing');
+  return idx === -1 ? 0 : idx;
+}
+
+/**
+ * Rotation that lands the wheel on the ACTUAL won prize's sector.
+ *
+ * Matches by prize_id (exact). It must NEVER land on a random sector: a random
+ * angle was the root cause of "the wheel shows месяц/50₽ but the result is
+ * Ничего" on the browser Stars path — when the prize couldn't be located the old
+ * code span to Math.random()*360, which often pointed at a winning slot. When the
+ * prize can't be resolved we land on the neutral ("Nothing") sector instead, so
+ * the animation never falsely celebrates a win.
+ */
+function calculateRotationForPrize(prizes: WheelPrize[], result: SpinResult): number {
+  let prizeIndex = result.prize_id != null ? prizes.findIndex((p) => p.id === result.prize_id) : -1;
+
+  // Defensive fallbacks for older payloads without prize_id: name+emoji, then name.
+  if (prizeIndex === -1 && result.prize_display_name) {
+    prizeIndex = prizes.findIndex(
+      (p) => p.display_name === result.prize_display_name && p.emoji === result.emoji,
+    );
+    if (prizeIndex === -1) {
+      prizeIndex = prizes.findIndex((p) => p.display_name === result.prize_display_name);
+    }
+  }
+
+  if (prizeIndex === -1) prizeIndex = neutralIndex(prizes); // unknown → neutral, never random
+
+  return rotationForIndex(prizes, prizeIndex);
+}
+
+/**
+ * Rotation used when the real result is unknown (e.g. the Stars-payment poll timed
+ * out). Lands on the neutral ("Nothing") sector — never a random/winning angle.
+ */
+function neutralRotation(prizes: WheelPrize[]): number {
+  return rotationForIndex(prizes, neutralIndex(prizes));
 }
 
 export default function Wheel() {
@@ -144,7 +163,10 @@ export default function Wheel() {
               // Found a new spin! Return it as SpinResult
               return {
                 success: true,
-                prize_id: latestSpin.id,
+                // WheelPrize id — lets the wheel land on the exact won sector.
+                // (Was latestSpin.id, the SPIN id, which never matched a sector and
+                // forced the random-angle fallback → the fake-win bug.)
+                prize_id: latestSpin.prize_id,
                 prize_type: latestSpin.prize_type,
                 prize_value: latestSpin.prize_value,
                 prize_display_name: latestSpin.prize_display_name,
@@ -219,13 +241,11 @@ export default function Wheel() {
 
               if (result) {
                 pendingStarsResultRef.current = result;
-                // Calculate rotation so the wheel lands on the correct prize sector
-                const rotation = config?.prizes
-                  ? calculateRotationForPrize(config.prizes, result)
-                  : Math.random() * 360;
-                setTargetRotation(rotation);
+                // Land on the ACTUAL won sector (matched by prize_id).
+                setTargetRotation(calculateRotationForPrize(config?.prizes ?? [], result));
               } else {
-                // Fallback: couldn't get result — use random rotation
+                // Couldn't get the result — land on the neutral sector (never a
+                // random/winning angle) and tell the user to check their history.
                 pendingStarsResultRef.current = {
                   success: true,
                   prize_id: null,
@@ -239,7 +259,7 @@ export default function Wheel() {
                   promocode: null,
                   error: null,
                 };
-                setTargetRotation(Math.random() * 360);
+                setTargetRotation(neutralRotation(config?.prizes ?? []));
               }
 
               setIsSpinning(true);
@@ -249,7 +269,8 @@ export default function Wheel() {
 
               setIsPayingStars(false);
 
-              // Error polling — spin with random rotation and show generic message
+              // Error polling — land on the neutral sector (never a random/winning
+              // angle) and show the generic "check your history" message.
               pendingStarsResultRef.current = {
                 success: true,
                 prize_id: null,
@@ -263,7 +284,7 @@ export default function Wheel() {
                 promocode: null,
                 error: null,
               };
-              setTargetRotation(Math.random() * 360);
+              setTargetRotation(neutralRotation(config?.prizes ?? []));
               setIsSpinning(true);
             });
         } else if (status !== 'cancelled') {

From 5de43c1071aa1fabb63ce70989afde1e5f431059 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Thu, 4 Jun 2026 22:33:12 +0300
Subject: [PATCH 27/36] fix(admin-wheel): unify statistics rendering + fill
 config UI gaps
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Statistics tab now uses the shared StatCard + BreakdownList (ranked bars +
share %) and the currency-aware formatter — matching the rest of the admin
stats instead of ad-hoc 'card p-4 text-center' / text-3xl tiles — and gains
proper loading, error and empty states.

Also surface backend-supported config the form couldn't reach (forcing DB edits):
- promo_validity_days (model + schema-bounded 1-365) is now editable in Settings.
- per-prize manual_probability override (0-1) now has an input in the prize form.
---
 src/locales/en.json      |  11 ++-
 src/locales/fa.json      |  11 ++-
 src/locales/ru.json      |  11 ++-
 src/locales/zh.json      |  11 ++-
 src/pages/AdminWheel.tsx | 203 ++++++++++++++++++++++++++-------------
 5 files changed, 167 insertions(+), 80 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index b81f0de..32fdaad 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1756,7 +1756,8 @@
         "dailyLimit": "Daily Spin Limit (0 = unlimited)",
         "minSubDays": "Min subscription days for day payment",
         "promocodes": "Promocodes",
-        "promoPrefix": "Promo code prefix"
+        "promoPrefix": "Promo code prefix",
+        "promoValidityDays": "Promo code validity (days)"
       },
       "starsNotEnabledGlobally": "Star payments are not enabled in Payment Methods. Enable \"Telegram Stars\" in the Payment Methods section.",
       "prizes": {
@@ -1783,7 +1784,9 @@
           "emoji": "Emoji",
           "color": "Color",
           "active": "Active",
-          "worth": "Worth"
+          "worth": "Worth",
+          "probability": "Manual probability (0–1)",
+          "probabilityHint": "Empty = auto by RTP"
         },
         "promo": {
           "title": "Promo Code Settings",
@@ -1801,7 +1804,9 @@
         "times": "times",
         "times_one": "{{count}} time",
         "times_other": "{{count}} times",
-        "topWins": "Top Wins"
+        "topWins": "Top Wins",
+        "loadError": "Failed to load statistics",
+        "empty": "No spins yet"
       }
     },
     "broadcasts": {
diff --git a/src/locales/fa.json b/src/locales/fa.json
index 640e433..847874b 100644
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -1432,7 +1432,8 @@
         "promoPrefix": "پیشوند کد تخفیف",
         "spinCost": "هزینه چرخش",
         "limitsAndRtp": "محدودیت‌ها و RTP",
-        "promocodes": "کدهای تخفیف"
+        "promocodes": "کدهای تخفیف",
+        "promoValidityDays": "اعتبار کد تخفیف (روز)"
       },
       "starsNotEnabledGlobally": "پرداخت با ستاره در روش‌های پرداخت فعال نیست. «Telegram Stars» را در بخش «روش‌های پرداخت» فعال کنید.",
       "prizes": {
@@ -1459,7 +1460,9 @@
           "emoji": "ایموجی",
           "color": "رنگ",
           "active": "فعال",
-          "worth": "ارزش"
+          "worth": "ارزش",
+          "probability": "احتمال دستی (۰–۱)",
+          "probabilityHint": "خالی = خودکار بر اساس RTP"
         },
         "promo": {
           "title": "تنظیمات کد تخفیف",
@@ -1476,7 +1479,9 @@
         "prizeDistribution": "توزیع جوایز",
         "times": "بار",
         "times_other": "{{count}} بار",
-        "topWins": "برترین برنده‌ها"
+        "topWins": "برترین برنده‌ها",
+        "loadError": "بارگذاری آمار ناموفق بود",
+        "empty": "هنوز چرخشی انجام نشده"
       }
     },
     "broadcasts": {
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 3ceed9a..588db82 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -1782,7 +1782,8 @@
         "dailyLimit": "Дневной лимит вращений (0 = безлимит)",
         "minSubDays": "Мин. дней подписки для оплаты днями",
         "promocodes": "Промокоды",
-        "promoPrefix": "Префикс промокодов"
+        "promoPrefix": "Префикс промокодов",
+        "promoValidityDays": "Срок действия промокода (дней)"
       },
       "starsNotEnabledGlobally": "Оплата звёздами не включена в платёжных методах. Включите метод «Telegram Stars» в разделе «Платёжные методы».",
       "prizes": {
@@ -1809,7 +1810,9 @@
           "emoji": "Эмодзи",
           "color": "Цвет",
           "active": "Активен",
-          "worth": "Стоимость"
+          "worth": "Стоимость",
+          "probability": "Ручная вероятность (0–1)",
+          "probabilityHint": "Пусто — авто по RTP"
         },
         "promo": {
           "title": "Настройки промокода",
@@ -1828,7 +1831,9 @@
         "times_one": "{{count}} раз",
         "times_few": "{{count}} раза",
         "times_many": "{{count}} раз",
-        "topWins": "Топ выигрышей"
+        "topWins": "Топ выигрышей",
+        "loadError": "Не удалось загрузить статистику",
+        "empty": "Пока нет вращений"
       }
     },
     "broadcasts": {
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 7a78ee1..727becb 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -1509,7 +1509,8 @@
         "promoPrefix": "优惠码前缀",
         "spinCost": "旋转费用",
         "limitsAndRtp": "限制和RTP",
-        "promocodes": "促销码"
+        "promocodes": "促销码",
+        "promoValidityDays": "促销码有效期（天）"
       },
       "starsNotEnabledGlobally": "星星支付未在支付方式中启用。请在「支付方式」中启用「Telegram Stars」。",
       "prizes": {
@@ -1536,7 +1537,9 @@
           "emoji": "表情",
           "color": "颜色",
           "active": "启用",
-          "worth": "价值"
+          "worth": "价值",
+          "probability": "手动概率 (0–1)",
+          "probabilityHint": "留空 = 按 RTP 自动"
         },
         "promo": {
           "title": "优惠码设置",
@@ -1553,7 +1556,9 @@
         "prizeDistribution": "奖品分布",
         "times": "次",
         "times_other": "{{count}} 次",
-        "topWins": "最高奖品"
+        "topWins": "最高奖品",
+        "loadError": "无法加载统计数据",
+        "empty": "暂无抽奖记录"
       }
     },
     "broadcasts": {
diff --git a/src/pages/AdminWheel.tsx b/src/pages/AdminWheel.tsx
index d64f0b3..21b9f05 100644
--- a/src/pages/AdminWheel.tsx
+++ b/src/pages/AdminWheel.tsx
@@ -40,8 +40,13 @@ import {
   StarIcon,
   TicketIcon,
   TrashIcon,
+  WalletIcon,
+  WheelIcon,
   XMarkIcon,
 } from '@/components/icons';
+import { StatCard } from '@/components/stats';
+import { BreakdownList } from '@/components/sales-stats/BreakdownList';
+import { useCurrency } from '@/hooks/useCurrency';
 import { usePlatform } from '../platform/hooks/usePlatform';
 import { toNumber } from '../utils/inputHelpers';
 
@@ -166,6 +171,7 @@ export default function AdminWheel() {
   const confirmDelete = useDestructiveConfirm();
   const { capabilities } = usePlatform();
   const notify = useNotify();
+  const { formatWithCurrency } = useCurrency();
 
   const [activeTab, setActiveTab] = useState<Tab>('settings');
   const [expandedPrizeId, setExpandedPrizeId] = useState<number | null>(null);
@@ -184,6 +190,7 @@ export default function AdminWheel() {
     daily_spin_limit: number | '';
     min_subscription_days_for_day_payment: number | '';
     promo_prefix: string;
+    promo_validity_days: number | '';
   } | null>(null);
 
   // Fetch config
@@ -193,7 +200,11 @@ export default function AdminWheel() {
   });
 
   // Fetch statistics
-  const { data: stats } = useQuery({
+  const {
+    data: stats,
+    isLoading: statsLoading,
+    error: statsError,
+  } = useQuery({
     queryKey: ['admin-wheel-stats'],
     queryFn: () => adminWheelApi.getStatistics(),
     enabled: activeTab === 'statistics',
@@ -214,6 +225,7 @@ export default function AdminWheel() {
           daily_spin_limit: config.daily_spin_limit,
           min_subscription_days_for_day_payment: config.min_subscription_days_for_day_payment,
           promo_prefix: config.promo_prefix,
+          promo_validity_days: config.promo_validity_days,
         };
       });
     }
@@ -232,7 +244,8 @@ export default function AdminWheel() {
       settingsForm.daily_spin_limit !== config.daily_spin_limit ||
       settingsForm.min_subscription_days_for_day_payment !==
         config.min_subscription_days_for_day_payment ||
-      settingsForm.promo_prefix !== config.promo_prefix);
+      settingsForm.promo_prefix !== config.promo_prefix ||
+      settingsForm.promo_validity_days !== config.promo_validity_days);
 
   // Update config mutation
   const updateConfigMutation = useMutation({
@@ -669,6 +682,26 @@ export default function AdminWheel() {
                   className="input w-full"
                 />
               </div>
+              <div>
+                <label className="mb-2 block text-sm font-medium text-dark-300">
+                  {t('admin.wheel.settings.promoValidityDays')}
+                </label>
+                <input
+                  type="number"
+                  value={settingsForm?.promo_validity_days ?? config.promo_validity_days}
+                  onChange={(e) => {
+                    const val = e.target.value;
+                    setSettingsForm((prev) =>
+                      prev
+                        ? { ...prev, promo_validity_days: val === '' ? '' : parseInt(val) || 0 }
+                        : null,
+                    );
+                  }}
+                  min={1}
+                  max={365}
+                  className="input w-full"
+                />
+              </div>
             </div>
           </div>
 
@@ -702,6 +735,10 @@ export default function AdminWheel() {
                       settingsForm.min_subscription_days_for_day_payment,
                       config.min_subscription_days_for_day_payment,
                     ),
+                    promo_validity_days: toNumber(
+                      settingsForm.promo_validity_days,
+                      config.promo_validity_days,
+                    ),
                   });
                 }}
                 disabled={updateConfigMutation.isPending}
@@ -833,79 +870,82 @@ export default function AdminWheel() {
       )}
 
       {/* Statistics Tab */}
-      {activeTab === 'statistics' && stats && (
+      {activeTab === 'statistics' && statsLoading && (
+        <div className="flex justify-center py-12">
+          <div className="h-8 w-8 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
+        </div>
+      )}
+
+      {activeTab === 'statistics' && !statsLoading && statsError && (
+        <div className="bento-card py-8 text-center text-error-400">
+          {t('admin.wheel.statistics.loadError')}
+        </div>
+      )}
+
+      {activeTab === 'statistics' &&
+        !statsLoading &&
+        !statsError &&
+        stats &&
+        stats.total_spins === 0 && (
+          <div className="bento-card py-12 text-center text-dark-400">
+            {t('admin.wheel.statistics.empty')}
+          </div>
+        )}
+
+      {activeTab === 'statistics' && stats && stats.total_spins > 0 && (
         <div className="space-y-4">
-          {/* Stats cards */}
-          <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
-            <div className="card p-4 text-center">
-              <div className="text-3xl font-bold text-accent-400">{stats.total_spins}</div>
-              <div className="text-sm text-dark-400">{t('admin.wheel.statistics.totalSpins')}</div>
-            </div>
-            <div className="card p-4 text-center">
-              <div className="text-3xl font-bold text-success-400">
-                {(stats.total_revenue_kopeks / 100).toFixed(0)}₽
-              </div>
-              <div className="text-sm text-dark-400">{t('admin.wheel.statistics.revenue')}</div>
-            </div>
-            <div className="card p-4 text-center">
-              <div className="text-3xl font-bold text-warning-400">
-                {(stats.total_payout_kopeks / 100).toFixed(0)}₽
-              </div>
-              <div className="text-sm text-dark-400">{t('admin.wheel.statistics.payouts')}</div>
-            </div>
-            <div className="card p-4 text-center">
-              <div
-                className={`text-3xl font-bold ${
-                  stats.actual_rtp_percent <= stats.configured_rtp_percent
-                    ? 'text-success-400'
-                    : 'text-error-400'
-                }`}
-              >
-                {stats.actual_rtp_percent.toFixed(1)}%
-              </div>
-              <div className="text-sm text-dark-400">
-                {t('admin.wheel.statistics.actualRtp')} ({t('admin.wheel.statistics.targetRtp')}:{' '}
-                {stats.configured_rtp_percent}%)
-              </div>
-            </div>
+          {/* Headline metrics — shared StatCard, like the rest of the admin stats */}
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+            <StatCard
+              label={t('admin.wheel.statistics.totalSpins')}
+              value={stats.total_spins}
+              icon={<WheelIcon className="h-5 w-5" />}
+              tone="accent"
+            />
+            <StatCard
+              label={t('admin.wheel.statistics.revenue')}
+              value={formatWithCurrency(stats.total_revenue_kopeks / 100, 0)}
+              icon={<WalletIcon className="h-5 w-5" />}
+              tone="success"
+            />
+            <StatCard
+              label={t('admin.wheel.statistics.payouts')}
+              value={formatWithCurrency(stats.total_payout_kopeks / 100, 0)}
+              icon={<GiftIcon className="h-5 w-5" />}
+              tone="warning"
+            />
+            <StatCard
+              label={`${t('admin.wheel.statistics.actualRtp')} · ${t('admin.wheel.statistics.targetRtp')} ${stats.configured_rtp_percent}%`}
+              value={`${stats.actual_rtp_percent.toFixed(1)}%`}
+              icon={<ChartIcon className="h-5 w-5" />}
+              tone={stats.actual_rtp_percent <= stats.configured_rtp_percent ? 'success' : 'error'}
+            />
           </div>
 
-          {/* Prize distribution */}
+          {/* Prize distribution — shared BreakdownList (ranked bars + share %) */}
           {stats.prizes_distribution.length > 0 && (
-            <div className="card p-4">
-              <h3 className="mb-3 font-semibold text-dark-100">
-                {t('admin.wheel.statistics.prizeDistribution')}
-              </h3>
-              <div className="space-y-2">
-                {stats.prizes_distribution.map((prize, i) => (
-                  <div key={i} className="flex items-center justify-between">
-                    <span className="text-dark-300">{prize.display_name}</span>
-                    <span className="text-dark-100">
-                      {t('admin.wheel.statistics.times', { count: prize.count })}
-                    </span>
-                  </div>
-                ))}
-              </div>
-            </div>
+            <BreakdownList
+              title={t('admin.wheel.statistics.prizeDistribution')}
+              items={stats.prizes_distribution.map((prize) => ({
+                key: prize.display_name,
+                label: prize.display_name,
+                value: prize.count,
+              }))}
+              valueFormatter={(v) => t('admin.wheel.statistics.times', { count: v })}
+            />
           )}
 
-          {/* Top wins */}
+          {/* Top wins — same BreakdownList, ranked by win value */}
           {stats.top_wins.length > 0 && (
-            <div className="card p-4">
-              <h3 className="mb-3 font-semibold text-dark-100">
-                {t('admin.wheel.statistics.topWins')}
-              </h3>
-              <div className="space-y-2">
-                {stats.top_wins.slice(0, 5).map((win, i) => (
-                  <div key={i} className="flex items-center justify-between">
-                    <span className="text-dark-300">{win.username || `User #${win.user_id}`}</span>
-                    <span className="text-dark-100">
-                      {win.prize_display_name} ({(win.prize_value_kopeks / 100).toFixed(0)}₽)
-                    </span>
-                  </div>
-                ))}
-              </div>
-            </div>
+            <BreakdownList
+              title={t('admin.wheel.statistics.topWins')}
+              items={stats.top_wins.slice(0, 8).map((win, i) => ({
+                key: `${win.user_id}-${i}`,
+                label: `${win.username || `#${win.user_id}`} · ${win.prize_display_name}`,
+                value: win.prize_value_kopeks / 100,
+              }))}
+              valueFormatter={(v) => formatWithCurrency(v, 0)}
+            />
           )}
         </div>
       )}
@@ -1097,6 +1137,33 @@ function InlinePrizeForm({
         </label>
       </div>
 
+      {/* Manual probability override (optional; empty = auto by RTP) */}
+      <div>
+        <label className="mb-2 block text-sm font-medium text-dark-300">
+          {t('admin.wheel.prizes.fields.probability')}
+        </label>
+        <input
+          type="number"
+          value={formData.manual_probability ?? ''}
+          onChange={(e) => {
+            const val = e.target.value;
+            setFormData({
+              ...formData,
+              manual_probability:
+                val === '' ? null : Math.min(1, Math.max(0, parseFloat(val) || 0)),
+            });
+          }}
+          min={0}
+          max={1}
+          step={0.01}
+          placeholder="0.00 – 1.00"
+          className="input w-full sm:w-1/2"
+        />
+        <p className="mt-1 text-xs text-dark-500">
+          {t('admin.wheel.prizes.fields.probabilityHint')}
+        </p>
+      </div>
+
       {/* Promocode settings */}
       {formData.prize_type === 'promocode' && (
         <div className="space-y-3 rounded-lg bg-dark-700/50 p-3">

From e4b3c8640bdbcf18430c736b8027abb51ce612cc Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Thu, 4 Jun 2026 22:41:55 +0300
Subject: [PATCH 28/36] fix(admin-wheel): unify prize-order banner buttons +
 drop hardcoded i18n fallbacks
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The unsaved-order banner used ad-hoc inline button classes (rounded-lg
bg-warning-500 / border bg-dark-700) instead of the shared btn-primary /
btn-secondary, plus t(...) || 'русский текст' fallbacks that would leak
Russian to non-RU locales. The keys exist in all four locales, so the
fallbacks were dead code — switched to the shared buttons and plain keys.
---
 src/pages/AdminWheel.tsx | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/pages/AdminWheel.tsx b/src/pages/AdminWheel.tsx
index 21b9f05..dd7b75b 100644
--- a/src/pages/AdminWheel.tsx
+++ b/src/pages/AdminWheel.tsx
@@ -777,28 +777,22 @@ export default function AdminWheel() {
               <div className="flex items-center gap-3 rounded-xl border border-warning-500/30 bg-warning-500/10 p-4">
                 <div className="flex-1">
                   <p className="text-sm font-medium text-warning-400">
-                    {t('admin.wheel.prizes.unsavedOrder') || 'Есть несохраненные изменения порядка'}
+                    {t('admin.wheel.prizes.unsavedOrder')}
                   </p>
                   <p className="text-xs text-warning-400/70">
-                    {t('admin.wheel.prizes.unsavedOrderHint') ||
-                      'Сохраните изменения или отмените их'}
+                    {t('admin.wheel.prizes.unsavedOrderHint')}
                   </p>
                 </div>
                 <div className="flex gap-2">
-                  <button
-                    onClick={handleDiscardOrderChanges}
-                    className="rounded-lg border border-dark-600 bg-dark-700 px-4 py-2 text-sm text-dark-200 transition-colors hover:bg-dark-600"
-                  >
-                    {t('common.cancel') || 'Отменить'}
+                  <button onClick={handleDiscardOrderChanges} className="btn-secondary">
+                    {t('common.cancel')}
                   </button>
                   <button
                     onClick={handleSavePrizeOrder}
                     disabled={reorderPrizesMutation.isPending}
-                    className="rounded-lg bg-warning-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-warning-600 disabled:opacity-50"
+                    className="btn-primary"
                   >
-                    {reorderPrizesMutation.isPending
-                      ? t('common.saving') || 'Сохранение...'
-                      : t('common.save') || 'Сохранить'}
+                    {reorderPrizesMutation.isPending ? t('common.saving') : t('common.save')}
                   </button>
                 </div>
               </div>

From c39c164d51fac8616b994f87ba8bc027a4bf0726 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Thu, 4 Jun 2026 22:53:51 +0300
Subject: [PATCH 29/36] fix(connected-accounts): keep status/unlink inside the
 card on long IDs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A long Google sub (numeric, ~21 digits) pushed 'Привязан' and 'Отвязать'
past the right edge of the account card on mobile. Classic flex overflow:
the left identifier column had no min-w-0, the identifier <p> no truncate,
and the right actions no shrink-0. Add min-w-0 + truncate to the text column
and shrink-0 to the actions so the id ellipsizes and the controls stay put.
---
 src/pages/ConnectedAccounts.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/pages/ConnectedAccounts.tsx b/src/pages/ConnectedAccounts.tsx
index 78c3456..f3ec7e5 100644
--- a/src/pages/ConnectedAccounts.tsx
+++ b/src/pages/ConnectedAccounts.tsx
@@ -671,19 +671,19 @@ export default function ConnectedAccounts() {
       {data?.providers.map((provider) => (
         <motion.div key={provider.provider} variants={staggerItem}>
           <Card>
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-3">
+            <div className="flex items-center justify-between gap-3">
+              <div className="flex min-w-0 items-center gap-3">
                 <ProviderIcon provider={provider.provider} />
-                <div>
-                  <p className="font-medium text-dark-100">
+                <div className="min-w-0">
+                  <p className="truncate font-medium text-dark-100">
                     {t(`profile.accounts.providers.${provider.provider}`)}
                   </p>
                   {provider.identifier && (
-                    <p className="text-sm text-dark-400">{provider.identifier}</p>
+                    <p className="truncate text-sm text-dark-400">{provider.identifier}</p>
                   )}
                 </div>
               </div>
-              <div className="flex items-center gap-2">
+              <div className="flex shrink-0 items-center gap-2">
                 {provider.linked ? (
                   <>
                     <span className="text-sm text-success-500">{t('profile.accounts.linked')}</span>

From 63863a048bf71793f08a560b26bb41cc3a24bdba Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Thu, 4 Jun 2026 23:03:42 +0300
Subject: [PATCH 30/36] fix(cabinet): stop long user data overflowing flex rows
 on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Same flex-overflow class as the Connected-Accounts card — a long
user-controlled string with no truncation pushes its sibling badge/button
out of the card on narrow screens. Found via a scan of the high-risk
screens; fixed with min-w-0 + truncate/break-words on the text column and
shrink-0 on the fixed siblings:
- Balance: promocode-target tariff name vs days-left badge
- ReferralNetwork CampaignDetailPanel: start_parameter + top-referrer username
- ServerManagementSheet: country/server name vs flag emoji
- Contests / Polls: contest/poll title vs prize/reward badge
---
 .../sheets/ServerManagementSheet.tsx          | 14 ++++++-------
 src/pages/Balance.tsx                         |  6 +++---
 src/pages/Contests.tsx                        |  8 ++++----
 src/pages/Polls.tsx                           |  8 ++++----
 .../components/CampaignDetailPanel.tsx        | 20 +++++++++++--------
 5 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/src/components/subscription/sheets/ServerManagementSheet.tsx b/src/components/subscription/sheets/ServerManagementSheet.tsx
index 353a0c8..ab7d916 100644
--- a/src/components/subscription/sheets/ServerManagementSheet.tsx
+++ b/src/components/subscription/sheets/ServerManagementSheet.tsx
@@ -168,15 +168,15 @@ export function ServerManagementSheet({
                             : 'border-champagne-300/60 bg-champagne-200/40 hover:border-champagne-400'
                     } ${!country.is_available && !isCurrentlyConnected ? 'cursor-not-allowed opacity-50' : ''}`}
                   >
-                    <div className="flex items-center gap-3">
-                      <span className="text-lg">
+                    <div className="flex min-w-0 items-center gap-3">
+                      <span className="shrink-0 text-lg">
                         {willBeAdded ? '➕' : willBeRemoved ? '➖' : isSelected ? '✅' : '⚪'}
                       </span>
-                      <div>
-                        <div className="flex items-center gap-2 font-medium text-dark-100">
-                          {country.name}
+                      <div className="min-w-0">
+                        <div className="flex min-w-0 items-center gap-2 font-medium text-dark-100">
+                          <span className="truncate">{country.name}</span>
                           {country.has_discount && !isCurrentlyConnected && (
-                            <span className="rounded bg-success-500/20 px-1.5 py-0.5 text-xs text-success-400">
+                            <span className="shrink-0 rounded bg-success-500/20 px-1.5 py-0.5 text-xs text-success-400">
                               -{country.discount_percent}%
                             </span>
                           )}
@@ -217,7 +217,7 @@ export function ServerManagementSheet({
                       </div>
                     </div>
                     {country.country_code && (
-                      <span className="text-xl">{getFlagEmoji(country.country_code)}</span>
+                      <span className="shrink-0 text-xl">{getFlagEmoji(country.country_code)}</span>
                     )}
                   </button>
                 );
diff --git a/src/pages/Balance.tsx b/src/pages/Balance.tsx
index cb53eeb..7dfb2bd 100644
--- a/src/pages/Balance.tsx
+++ b/src/pages/Balance.tsx
@@ -275,10 +275,10 @@ export default function Balance() {
                   key={sub.id}
                   onClick={() => handlePromocodeActivate(sub.id)}
                   disabled={promocodeLoading}
-                  className="flex w-full items-center justify-between rounded-linear border border-dark-600 bg-dark-700 px-3 py-2 text-sm text-dark-200 transition-colors hover:border-accent-500/50 hover:bg-dark-600"
+                  className="flex w-full min-w-0 items-center justify-between gap-3 rounded-linear border border-dark-600 bg-dark-700 px-3 py-2 text-sm text-dark-200 transition-colors hover:border-accent-500/50 hover:bg-dark-600"
                 >
-                  <span>{sub.tariff_name}</span>
-                  <span className="text-dark-400">
+                  <span className="truncate">{sub.tariff_name}</span>
+                  <span className="shrink-0 text-dark-400">
                     {t('balance.promocode.daysLeft', '{{count}} дн.', { count: sub.days_left })}
                   </span>
                 </button>
diff --git a/src/pages/Contests.tsx b/src/pages/Contests.tsx
index c15196a..ddaed5c 100644
--- a/src/pages/Contests.tsx
+++ b/src/pages/Contests.tsx
@@ -198,14 +198,14 @@ export default function Contests() {
         <div className="grid gap-4 sm:grid-cols-2">
           {contests.map((contest) => (
             <div key={contest.id} className="card">
-              <div className="flex items-start justify-between">
-                <div>
-                  <h3 className="text-lg font-semibold">{contest.name}</h3>
+              <div className="flex items-start justify-between gap-2">
+                <div className="min-w-0">
+                  <h3 className="break-words text-lg font-semibold">{contest.name}</h3>
                   {contest.description && (
                     <p className="mt-1 text-sm text-dark-400">{contest.description}</p>
                   )}
                 </div>
-                <div className="flex items-center gap-1 text-accent-400">
+                <div className="flex shrink-0 items-center gap-1 text-accent-400">
                   <TrophyIcon />
                   <span className="text-sm font-medium">
                     +{t('contests.days', { count: contest.prize_days })}
diff --git a/src/pages/Polls.tsx b/src/pages/Polls.tsx
index 2b46fba..4ed64ed 100644
--- a/src/pages/Polls.tsx
+++ b/src/pages/Polls.tsx
@@ -205,9 +205,9 @@ export default function Polls() {
         <div className="grid gap-4 sm:grid-cols-2">
           {polls.map((poll) => (
             <div key={poll.id} className="card">
-              <div className="flex items-start justify-between">
-                <div className="flex-1">
-                  <h3 className="text-lg font-semibold">{poll.title}</h3>
+              <div className="flex items-start justify-between gap-2">
+                <div className="min-w-0 flex-1">
+                  <h3 className="break-words text-lg font-semibold">{poll.title}</h3>
                   {poll.description && (
                     <p className="mt-1 text-sm text-dark-400">{poll.description}</p>
                   )}
@@ -219,7 +219,7 @@ export default function Polls() {
                   </div>
                 </div>
                 {poll.reward_amount && (
-                  <div className="flex items-center gap-1 text-accent-400">
+                  <div className="flex shrink-0 items-center gap-1 text-accent-400">
                     <GiftIcon className="h-5 w-5" />
                     <span className="text-sm font-medium">+{poll.reward_amount}</span>
                   </div>
diff --git a/src/pages/ReferralNetwork/components/CampaignDetailPanel.tsx b/src/pages/ReferralNetwork/components/CampaignDetailPanel.tsx
index 2661911..90383e9 100644
--- a/src/pages/ReferralNetwork/components/CampaignDetailPanel.tsx
+++ b/src/pages/ReferralNetwork/components/CampaignDetailPanel.tsx
@@ -60,11 +60,13 @@ export function CampaignDetailPanel({ campaignId, className }: CampaignDetailPan
           <div className="space-y-5">
             {/* Info */}
             <div className="space-y-2">
-              <div className="flex items-center justify-between text-sm">
-                <span className="text-dark-500">
+              <div className="flex items-center justify-between gap-2 text-sm">
+                <span className="shrink-0 text-dark-500">
                   {t('admin.referralNetwork.campaign.startParam')}
                 </span>
-                <span className="font-mono text-dark-200">{campaign.start_parameter}</span>
+                <span className="min-w-0 truncate font-mono text-dark-200">
+                  {campaign.start_parameter}
+                </span>
               </div>
               <div className="flex justify-end">
                 <span
@@ -133,17 +135,19 @@ export function CampaignDetailPanel({ campaignId, className }: CampaignDetailPan
                   {campaign.top_referrers.map((referrer, index) => (
                     <div
                       key={referrer.user_id}
-                      className="flex items-center justify-between text-sm"
+                      className="flex items-center justify-between gap-2 text-sm"
                     >
-                      <div className="flex items-center gap-2">
-                        <span className="flex h-5 w-5 items-center justify-center rounded-full bg-dark-700 text-[10px] font-medium text-dark-300">
+                      <div className="flex min-w-0 items-center gap-2">
+                        <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-dark-700 text-[10px] font-medium text-dark-300">
                           {index + 1}
                         </span>
-                        <span className="text-dark-200">
+                        <span className="truncate text-dark-200">
                           {referrer.username ? `@${referrer.username}` : `#${referrer.user_id}`}
                         </span>
                       </div>
-                      <span className="font-mono text-dark-300">{referrer.referral_count}</span>
+                      <span className="shrink-0 font-mono text-dark-300">
+                        {referrer.referral_count}
+                      </span>
                     </div>
                   ))}
                 </div>

From 7383505a127efc11b166d307eb2f06e1a70972e0 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Thu, 4 Jun 2026 23:17:57 +0300
Subject: [PATCH 31/36] fix(connected-accounts): stack status + unlink so the
 full ID shows on mobile

Truncating the Google/Discord sub id with an ellipsis hid it. Stack the
status badge above the unlink button (flex-col) on the right so the right
column is narrow and the identifier gets the room to render in full;
truncate stays only as a safety net for extreme values.
---
 src/pages/ConnectedAccounts.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ConnectedAccounts.tsx b/src/pages/ConnectedAccounts.tsx
index f3ec7e5..d6131aa 100644
--- a/src/pages/ConnectedAccounts.tsx
+++ b/src/pages/ConnectedAccounts.tsx
@@ -683,7 +683,7 @@ export default function ConnectedAccounts() {
                   )}
                 </div>
               </div>
-              <div className="flex shrink-0 items-center gap-2">
+              <div className="flex shrink-0 flex-col items-end gap-1.5">
                 {provider.linked ? (
                   <>
                     <span className="text-sm text-success-500">{t('profile.accounts.linked')}</span>

From 800daf7506c1c1d1718971d672a8fabb38dfa8e8 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Thu, 4 Jun 2026 23:32:59 +0300
Subject: [PATCH 32/36] fix(cabinet): sweep mobile flex-overflow across all
 pages + components

Full scan of every page/component for the Connected-Accounts overflow class
(long user data with no truncation pushing siblings off the card on mobile),
adversarially verified. Applied min-w-0 + truncate (break-all for copyable
values, break-words for titles) on text columns and shrink-0 on fixed
siblings across ~23 files: AppHeader, dashboard/SubscriptionCardActive,
subscription purchase/sheets (TariffPurchaseForm, ClassicPurchaseWizard,
SwitchTariffSheet), SuccessNotificationModal, PurchaseSuccess, Wheel sub
picker, ReferralNetwork UserDetailPanel, and the admin pages (AnalyticsTab,
BrandingTab, SubscriptionSubRow, user-detail Info/Referrals tabs,
ApplicationReview, PartnerCampaignAssign, Partners, PromocodeStats,
PromoOfferSend, RemnawaveSquadDetail, TariffCreate, Tickets, Withdrawals).
---
 src/components/SuccessNotificationModal.tsx        | 10 +++++++---
 src/components/admin/AnalyticsTab.tsx              | 12 ++++++------
 src/components/admin/BrandingTab.tsx               |  6 +++---
 .../admin/bulkActions/SubscriptionSubRow.tsx       |  2 +-
 src/components/admin/userDetail/InfoTab.tsx        | 10 +++++-----
 src/components/admin/userDetail/ReferralsTab.tsx   | 10 +++++-----
 .../dashboard/SubscriptionCardActive.tsx           |  2 +-
 src/components/layout/AppShell/AppHeader.tsx       |  8 +++++---
 .../purchase/ClassicPurchaseWizard.tsx             |  4 ++--
 .../subscription/purchase/TariffPurchaseForm.tsx   |  6 +++---
 .../subscription/sheets/SwitchTariffSheet.tsx      | 12 ++++++------
 src/pages/AdminApplicationReview.tsx               |  8 +++++---
 src/pages/AdminPartnerCampaignAssign.tsx           |  8 +++++---
 src/pages/AdminPartners.tsx                        | 10 ++++++----
 src/pages/AdminPromoOfferSend.tsx                  | 14 +++++++-------
 src/pages/AdminPromocodeStats.tsx                  |  2 +-
 src/pages/AdminRemnawaveSquadDetail.tsx            |  4 ++--
 src/pages/AdminTariffCreate.tsx                    | 10 +++++++---
 src/pages/AdminTickets.tsx                         |  2 +-
 src/pages/AdminWithdrawals.tsx                     |  2 +-
 src/pages/PurchaseSuccess.tsx                      |  4 ++--
 .../ReferralNetwork/components/UserDetailPanel.tsx | 12 ++++++------
 src/pages/Wheel.tsx                                |  6 +++---
 23 files changed, 90 insertions(+), 74 deletions(-)

diff --git a/src/components/SuccessNotificationModal.tsx b/src/components/SuccessNotificationModal.tsx
index 4d656de..5af94fd 100644
--- a/src/components/SuccessNotificationModal.tsx
+++ b/src/components/SuccessNotificationModal.tsx
@@ -256,9 +256,13 @@ export default function SuccessNotificationModal() {
 
           {/* Tariff name */}
           {data.tariffName && (
-            <div className="flex items-center justify-between rounded-xl bg-dark-800/50 px-4 py-3">
-              <span className="text-dark-400">{t('successNotification.tariff', 'Tariff')}</span>
-              <span className="font-semibold text-dark-100">{data.tariffName}</span>
+            <div className="flex items-center justify-between gap-3 rounded-xl bg-dark-800/50 px-4 py-3">
+              <span className="shrink-0 text-dark-400">
+                {t('successNotification.tariff', 'Tariff')}
+              </span>
+              <span className="min-w-0 truncate font-semibold text-dark-100">
+                {data.tariffName}
+              </span>
             </div>
           )}
 
diff --git a/src/components/admin/AnalyticsTab.tsx b/src/components/admin/AnalyticsTab.tsx
index 0a1ba98..9b0062b 100644
--- a/src/components/admin/AnalyticsTab.tsx
+++ b/src/components/admin/AnalyticsTab.tsx
@@ -268,9 +268,9 @@ export function AnalyticsTab() {
                 </button>
               </div>
             ) : (
-              <div className="flex items-center gap-2">
+              <div className="flex min-w-0 items-center gap-2">
                 <span
-                  className={`text-base ${analytics?.google_ads_id ? 'font-mono text-dark-100' : 'text-dark-500'}`}
+                  className={`min-w-0 truncate text-base ${analytics?.google_ads_id ? 'font-mono text-dark-100' : 'text-dark-500'}`}
                 >
                   {analytics?.google_ads_id || t('admin.settings.notConfigured')}
                 </span>
@@ -280,7 +280,7 @@ export function AnalyticsTab() {
                     setEditingGoogleId(true);
                     setError(null);
                   }}
-                  className="rounded-lg p-1.5 text-dark-400 transition-colors hover:bg-dark-700 hover:text-dark-200"
+                  className="shrink-0 rounded-lg p-1.5 text-dark-400 transition-colors hover:bg-dark-700 hover:text-dark-200"
                 >
                   <PencilIcon className="h-4 w-4" />
                 </button>
@@ -322,9 +322,9 @@ export function AnalyticsTab() {
                 </button>
               </div>
             ) : (
-              <div className="flex items-center gap-2">
+              <div className="flex min-w-0 items-center gap-2">
                 <span
-                  className={`text-base ${analytics?.google_ads_label ? 'font-mono text-dark-100' : 'text-dark-500'}`}
+                  className={`min-w-0 truncate text-base ${analytics?.google_ads_label ? 'font-mono text-dark-100' : 'text-dark-500'}`}
                 >
                   {analytics?.google_ads_label || t('admin.settings.notConfigured')}
                 </span>
@@ -334,7 +334,7 @@ export function AnalyticsTab() {
                     setEditingGoogleLabel(true);
                     setError(null);
                   }}
-                  className="rounded-lg p-1.5 text-dark-400 transition-colors hover:bg-dark-700 hover:text-dark-200"
+                  className="shrink-0 rounded-lg p-1.5 text-dark-400 transition-colors hover:bg-dark-700 hover:text-dark-200"
                 >
                   <PencilIcon className="h-4 w-4" />
                 </button>
diff --git a/src/components/admin/BrandingTab.tsx b/src/components/admin/BrandingTab.tsx
index 951f557..6f13c67 100644
--- a/src/components/admin/BrandingTab.tsx
+++ b/src/components/admin/BrandingTab.tsx
@@ -180,8 +180,8 @@ export function BrandingTab({ accentColor = '#3b82f6' }: BrandingTabProps) {
                 </button>
               </div>
             ) : (
-              <div className="flex items-center gap-2">
-                <span className="text-lg text-dark-100">
+              <div className="flex min-w-0 items-center gap-2">
+                <span className="min-w-0 truncate text-lg text-dark-100">
                   {branding?.name || t('admin.settings.notSpecified')}
                 </span>
                 <button
@@ -189,7 +189,7 @@ export function BrandingTab({ accentColor = '#3b82f6' }: BrandingTabProps) {
                     setNewName(branding?.name ?? '');
                     setEditingName(true);
                   }}
-                  className="rounded-lg p-1.5 text-dark-400 transition-colors hover:bg-dark-700 hover:text-dark-200"
+                  className="shrink-0 rounded-lg p-1.5 text-dark-400 transition-colors hover:bg-dark-700 hover:text-dark-200"
                 >
                   <PencilIcon />
                 </button>
diff --git a/src/components/admin/bulkActions/SubscriptionSubRow.tsx b/src/components/admin/bulkActions/SubscriptionSubRow.tsx
index 387ff02..d90f720 100644
--- a/src/components/admin/bulkActions/SubscriptionSubRow.tsx
+++ b/src/components/admin/bulkActions/SubscriptionSubRow.tsx
@@ -93,7 +93,7 @@ export function SubscriptionSubRow({
                 />
               </svg>
             </span>
-            <span className="text-xs font-semibold text-dark-200">
+            <span className="min-w-0 flex-1 truncate text-xs font-semibold text-dark-200">
               {subscription.tariff_name || '—'}
             </span>
           </div>
diff --git a/src/components/admin/userDetail/InfoTab.tsx b/src/components/admin/userDetail/InfoTab.tsx
index 226687d..45deaac 100644
--- a/src/components/admin/userDetail/InfoTab.tsx
+++ b/src/components/admin/userDetail/InfoTab.tsx
@@ -421,16 +421,16 @@ export function InfoTab(props: InfoTabProps) {
                   onClick={() => navigate(`/admin/users/${ref.id}`)}
                   className="flex w-full items-center justify-between rounded-lg bg-dark-700/50 p-2 text-left transition-colors hover:bg-dark-700"
                 >
-                  <div className="flex items-center gap-2">
-                    <div className="flex h-7 w-7 items-center justify-center rounded-full bg-dark-600 text-xs font-bold text-dark-300">
+                  <div className="flex min-w-0 items-center gap-2">
+                    <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-dark-600 text-xs font-bold text-dark-300">
                       {ref.first_name?.[0] || ref.username?.[0] || '?'}
                     </div>
-                    <div>
-                      <div className="text-sm text-dark-100">{ref.full_name}</div>
+                    <div className="min-w-0">
+                      <div className="truncate text-sm text-dark-100">{ref.full_name}</div>
                       <div className="text-xs text-dark-500">{formatDate(ref.created_at)}</div>
                     </div>
                   </div>
-                  <div className="text-xs text-dark-400">
+                  <div className="shrink-0 text-xs text-dark-400">
                     {formatWithCurrency(ref.total_spent_kopeks / 100)}
                   </div>
                 </button>
diff --git a/src/components/admin/userDetail/ReferralsTab.tsx b/src/components/admin/userDetail/ReferralsTab.tsx
index 05acd29..e64c801 100644
--- a/src/components/admin/userDetail/ReferralsTab.tsx
+++ b/src/components/admin/userDetail/ReferralsTab.tsx
@@ -462,13 +462,13 @@ export function ReferralsTab({ user, userId, onUserRefresh }: ReferralsTabProps)
               >
                 <button
                   onClick={() => navigate(`/admin/users/${ref.id}`)}
-                  className="flex items-center gap-3 text-left"
+                  className="flex min-w-0 items-center gap-3 text-left"
                 >
-                  <div className="flex h-9 w-9 items-center justify-center rounded-full bg-dark-600/50 text-sm font-bold text-dark-300">
+                  <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-dark-600/50 text-sm font-bold text-dark-300">
                     {(ref.full_name || ref.username || '?')[0].toUpperCase()}
                   </div>
-                  <div>
-                    <div className="text-sm font-medium text-dark-100">
+                  <div className="min-w-0">
+                    <div className="truncate text-sm font-medium text-dark-100">
                       {ref.full_name || ref.username || `ID: ${ref.id}`}
                     </div>
                     <div className="text-xs text-dark-500">
@@ -479,7 +479,7 @@ export function ReferralsTab({ user, userId, onUserRefresh }: ReferralsTabProps)
                 <button
                   onClick={() => handleRemoveReferral(ref.id)}
                   disabled={actionLoading}
-                  className="rounded-lg p-2 text-dark-500 transition-colors hover:bg-error-500/10 hover:text-error-400 disabled:opacity-50"
+                  className="shrink-0 rounded-lg p-2 text-dark-500 transition-colors hover:bg-error-500/10 hover:text-error-400 disabled:opacity-50"
                   title={t('admin.users.detail.referrals.removeReferral')}
                 >
                   <XIcon className="h-4 w-4" />
diff --git a/src/components/dashboard/SubscriptionCardActive.tsx b/src/components/dashboard/SubscriptionCardActive.tsx
index 6aa7be5..e78d044 100644
--- a/src/components/dashboard/SubscriptionCardActive.tsx
+++ b/src/components/dashboard/SubscriptionCardActive.tsx
@@ -283,7 +283,7 @@ export default function SubscriptionCardActive({
           >
             {t('dashboard.tariff')}
           </div>
-          <div className="text-base font-bold leading-tight tracking-tight text-dark-50">
+          <div className="min-w-0 truncate text-base font-bold leading-tight tracking-tight text-dark-50">
             {subscription.tariff_name || t('subscription.currentPlan')}
           </div>
           <div className="mt-0.5 font-mono text-[10px] text-dark-50/30">
diff --git a/src/components/layout/AppShell/AppHeader.tsx b/src/components/layout/AppShell/AppHeader.tsx
index 4dba295..653b948 100644
--- a/src/components/layout/AppShell/AppHeader.tsx
+++ b/src/components/layout/AppShell/AppHeader.tsx
@@ -343,9 +343,11 @@ export function AppHeader({
                   >
                     <UserIcon className="h-5 w-5" />
                   </div>
-                  <div>
-                    <div className="text-sm font-medium text-dark-100">{displayName(user)}</div>
-                    <div className="text-xs text-dark-500">
+                  <div className="min-w-0">
+                    <div className="truncate text-sm font-medium text-dark-100">
+                      {displayName(user)}
+                    </div>
+                    <div className="truncate text-xs text-dark-500">
                       @{user?.username || `ID: ${user?.telegram_id}`}
                     </div>
                   </div>
diff --git a/src/components/subscription/purchase/ClassicPurchaseWizard.tsx b/src/components/subscription/purchase/ClassicPurchaseWizard.tsx
index 9b46bea..6e75574 100644
--- a/src/components/subscription/purchase/ClassicPurchaseWizard.tsx
+++ b/src/components/subscription/purchase/ClassicPurchaseWizard.tsx
@@ -400,8 +400,8 @@ export function ClassicPurchaseWizard({
                         >
                           {selectedServers.includes(server.uuid) && <CheckIcon />}
                         </div>
-                        <div>
-                          <div className="font-medium text-dark-100">
+                        <div className="min-w-0">
+                          <div className="truncate font-medium text-dark-100">
                             <Twemoji options={{ className: 'twemoji', folder: 'svg', ext: '.svg' }}>
                               {server.name}
                             </Twemoji>
diff --git a/src/components/subscription/purchase/TariffPurchaseForm.tsx b/src/components/subscription/purchase/TariffPurchaseForm.tsx
index 720ed8d..d67087a 100644
--- a/src/components/subscription/purchase/TariffPurchaseForm.tsx
+++ b/src/components/subscription/purchase/TariffPurchaseForm.tsx
@@ -105,9 +105,9 @@ export function TariffPurchaseForm({
 
   return (
     <div ref={ref} className="space-y-6">
-      <div className="flex items-center justify-between">
-        <h3 className="text-lg font-medium text-dark-100">{tariff.name}</h3>
-        <button onClick={onBack} className="text-dark-400 hover:text-dark-200">
+      <div className="flex items-center justify-between gap-2">
+        <h3 className="min-w-0 truncate text-lg font-medium text-dark-100">{tariff.name}</h3>
+        <button onClick={onBack} className="shrink-0 text-dark-400 hover:text-dark-200">
           ← {t('common.back')}
         </button>
       </div>
diff --git a/src/components/subscription/sheets/SwitchTariffSheet.tsx b/src/components/subscription/sheets/SwitchTariffSheet.tsx
index 97d8f12..8007a78 100644
--- a/src/components/subscription/sheets/SwitchTariffSheet.tsx
+++ b/src/components/subscription/sheets/SwitchTariffSheet.tsx
@@ -142,15 +142,15 @@ export function SwitchTariffSheet({
           return (
             <>
               <div className="space-y-2 text-sm">
-                <div className="flex justify-between text-dark-300">
-                  <span>{t('subscription.switchTariff.currentTariff')}</span>
-                  <span className="font-medium text-dark-100">
+                <div className="flex justify-between gap-2 text-dark-300">
+                  <span className="shrink-0">{t('subscription.switchTariff.currentTariff')}</span>
+                  <span className="min-w-0 truncate font-medium text-dark-100">
                     {switchPreview.current_tariff_name || '-'}
                   </span>
                 </div>
-                <div className="flex justify-between text-dark-300">
-                  <span>{t('subscription.switchTariff.newTariff')}</span>
-                  <span className="font-medium text-accent-400">
+                <div className="flex justify-between gap-2 text-dark-300">
+                  <span className="shrink-0">{t('subscription.switchTariff.newTariff')}</span>
+                  <span className="min-w-0 truncate font-medium text-accent-400">
                     {switchPreview.new_tariff_name}
                   </span>
                 </div>
diff --git a/src/pages/AdminApplicationReview.tsx b/src/pages/AdminApplicationReview.tsx
index fdcc93b..3fcc113 100644
--- a/src/pages/AdminApplicationReview.tsx
+++ b/src/pages/AdminApplicationReview.tsx
@@ -88,9 +88,11 @@ export default function AdminApplicationReview() {
           <div className="space-y-3">
             <div className="flex items-start justify-between gap-4">
               <div className="min-w-0 flex-1">
-                <div className="mb-1 flex items-center gap-2">
-                  <span className="font-medium text-dark-100">{displayName}</span>
-                  {app.username && <span className="text-sm text-dark-500">@{app.username}</span>}
+                <div className="mb-1 flex min-w-0 items-center gap-2">
+                  <span className="truncate font-medium text-dark-100">{displayName}</span>
+                  {app.username && (
+                    <span className="shrink-0 text-sm text-dark-500">@{app.username}</span>
+                  )}
                 </div>
               </div>
             </div>
diff --git a/src/pages/AdminPartnerCampaignAssign.tsx b/src/pages/AdminPartnerCampaignAssign.tsx
index 3888042..575f83b 100644
--- a/src/pages/AdminPartnerCampaignAssign.tsx
+++ b/src/pages/AdminPartnerCampaignAssign.tsx
@@ -87,9 +87,11 @@ export default function AdminPartnerCampaignAssign() {
                       </span>
                     )}
                   </div>
-                  <div className="mt-1 flex items-center gap-3 text-xs text-dark-500">
-                    <span className="font-mono">?start={campaign.start_parameter}</span>
-                    <span>
+                  <div className="mt-1 flex min-w-0 items-center gap-3 text-xs text-dark-500">
+                    <span className="min-w-0 truncate font-mono">
+                      ?start={campaign.start_parameter}
+                    </span>
+                    <span className="shrink-0">
                       {campaign.registrations_count}{' '}
                       {t('admin.campaigns.overview.registrations').toLowerCase()}
                     </span>
diff --git a/src/pages/AdminPartners.tsx b/src/pages/AdminPartners.tsx
index b1d07fe..4b03d94 100644
--- a/src/pages/AdminPartners.tsx
+++ b/src/pages/AdminPartners.tsx
@@ -129,12 +129,14 @@ export default function AdminPartners() {
                 >
                   <div className="flex items-start justify-between gap-4">
                     <div className="min-w-0 flex-1">
-                      <div className="mb-1 flex items-center gap-2">
+                      <div className="mb-1 flex min-w-0 items-center gap-2">
                         <h3 className="truncate font-medium text-dark-100">
                           {partner.first_name || partner.username || `#${partner.user_id}`}
                         </h3>
                         {partner.username && (
-                          <span className="text-sm text-dark-500">@{partner.username}</span>
+                          <span className="shrink-0 text-sm text-dark-500">
+                            @{partner.username}
+                          </span>
                         )}
                       </div>
                       <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm text-dark-400">
@@ -177,12 +179,12 @@ export default function AdminPartners() {
                 <div key={app.id} className="rounded-xl border border-dark-700 bg-dark-800 p-4">
                   <div className="mb-3 flex items-start justify-between gap-4">
                     <div className="min-w-0 flex-1">
-                      <div className="mb-1 flex items-center gap-2">
+                      <div className="mb-1 flex min-w-0 items-center gap-2">
                         <h3 className="truncate font-medium text-dark-100">
                           {app.first_name || app.username || `#${app.user_id}`}
                         </h3>
                         {app.username && (
-                          <span className="text-sm text-dark-500">@{app.username}</span>
+                          <span className="shrink-0 text-sm text-dark-500">@{app.username}</span>
                         )}
                       </div>
                       {app.company_name && (
diff --git a/src/pages/AdminPromoOfferSend.tsx b/src/pages/AdminPromoOfferSend.tsx
index 2c8f5a2..be40cad 100644
--- a/src/pages/AdminPromoOfferSend.tsx
+++ b/src/pages/AdminPromoOfferSend.tsx
@@ -339,18 +339,18 @@ export default function AdminPromoOfferSend() {
               <div ref={searchRef} className="relative">
                 {selectedUser ? (
                   // Selected user display
-                  <div className="flex items-center justify-between rounded-lg border border-accent-500 bg-accent-500/10 px-3 py-2.5">
-                    <div className="flex items-center gap-3">
-                      <div className="flex h-8 w-8 items-center justify-center rounded-full bg-dark-600">
+                  <div className="flex items-center justify-between gap-2 rounded-lg border border-accent-500 bg-accent-500/10 px-3 py-2.5">
+                    <div className="flex min-w-0 items-center gap-3">
+                      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-dark-600">
                         <UserIcon />
                       </div>
-                      <div>
-                        <div className="text-sm font-medium text-dark-100">
+                      <div className="min-w-0">
+                        <div className="truncate text-sm font-medium text-dark-100">
                           {selectedUser.full_name ||
                             selectedUser.username ||
                             `ID: ${selectedUser.telegram_id}`}
                         </div>
-                        <div className="text-xs text-dark-400">
+                        <div className="truncate text-xs text-dark-400">
                           {selectedUser.username && `@${selectedUser.username} · `}
                           Telegram: {selectedUser.telegram_id}
                         </div>
@@ -358,7 +358,7 @@ export default function AdminPromoOfferSend() {
                     </div>
                     <button
                       onClick={handleClearUser}
-                      className="rounded-lg p-1.5 text-dark-400 transition-colors hover:bg-dark-600 hover:text-dark-100"
+                      className="shrink-0 rounded-lg p-1.5 text-dark-400 transition-colors hover:bg-dark-600 hover:text-dark-100"
                     >
                       <CloseIcon className="h-4 w-4" />
                     </button>
diff --git a/src/pages/AdminPromocodeStats.tsx b/src/pages/AdminPromocodeStats.tsx
index e52e240..a72c3bb 100644
--- a/src/pages/AdminPromocodeStats.tsx
+++ b/src/pages/AdminPromocodeStats.tsx
@@ -100,7 +100,7 @@ export default function AdminPromocodeStats() {
           <AdminBackButton to="/admin/promocodes" />
           <div className="flex flex-wrap items-center gap-2">
             <div
-              className={`rounded-lg px-3 py-1.5 font-mono text-lg font-bold ${getTypeColor(promocode.type)}`}
+              className={`min-w-0 break-all rounded-lg px-3 py-1.5 font-mono text-lg font-bold ${getTypeColor(promocode.type)}`}
             >
               {promocode.code}
             </div>
diff --git a/src/pages/AdminRemnawaveSquadDetail.tsx b/src/pages/AdminRemnawaveSquadDetail.tsx
index c13ad9f..985767e 100644
--- a/src/pages/AdminRemnawaveSquadDetail.tsx
+++ b/src/pages/AdminRemnawaveSquadDetail.tsx
@@ -229,11 +229,11 @@ export default function AdminRemnawaveSquadDetail() {
                 key={idx}
                 className="flex items-center justify-between rounded-lg bg-dark-700/50 px-4 py-3"
               >
-                <span className="text-sm text-dark-200">
+                <span className="min-w-0 flex-1 truncate text-sm text-dark-200">
                   {String(inbound.tag || inbound.uuid || `Inbound ${idx + 1}`)}
                 </span>
                 {typeof inbound.type === 'string' && (
-                  <span className="rounded bg-dark-600 px-2 py-1 text-xs text-dark-400">
+                  <span className="ml-2 shrink-0 rounded bg-dark-600 px-2 py-1 text-xs text-dark-400">
                     {inbound.type}
                   </span>
                 )}
diff --git a/src/pages/AdminTariffCreate.tsx b/src/pages/AdminTariffCreate.tsx
index 39a49d6..80db442 100644
--- a/src/pages/AdminTariffCreate.tsx
+++ b/src/pages/AdminTariffCreate.tsx
@@ -697,8 +697,10 @@ export default function AdminTariffCreate() {
                       >
                         {isSelected && <CheckIcon />}
                       </div>
-                      <span className="flex-1 text-sm font-medium">{squad.name}</span>
-                      <span className="text-xs text-dark-500">
+                      <span className="min-w-0 flex-1 truncate text-sm font-medium">
+                        {squad.name}
+                      </span>
+                      <span className="shrink-0 text-xs text-dark-500">
                         {squad.members_count} {t('admin.tariffs.externalSquadUsers')}
                       </span>
                     </button>
@@ -1059,7 +1061,9 @@ export default function AdminTariffCreate() {
                       >
                         {isSelected && <CheckIcon />}
                       </div>
-                      <span className="flex-1 text-sm font-medium">{group.name}</span>
+                      <span className="min-w-0 flex-1 truncate text-sm font-medium">
+                        {group.name}
+                      </span>
                     </button>
                   );
                 })}
diff --git a/src/pages/AdminTickets.tsx b/src/pages/AdminTickets.tsx
index d33bc9d..e779476 100644
--- a/src/pages/AdminTickets.tsx
+++ b/src/pages/AdminTickets.tsx
@@ -443,7 +443,7 @@ export default function AdminTickets() {
                     </span>
                   </div>
                 </div>
-                <div className="mb-4 flex items-center gap-2 text-sm text-dark-500">
+                <div className="mb-4 flex flex-wrap items-center gap-2 text-sm text-dark-500">
                   <span>
                     {t('admin.tickets.from')}: {formatUser(selectedTicket)}
                     {selectedTicket.user?.telegram_id && (
diff --git a/src/pages/AdminWithdrawals.tsx b/src/pages/AdminWithdrawals.tsx
index 2af61d6..e1bb16a 100644
--- a/src/pages/AdminWithdrawals.tsx
+++ b/src/pages/AdminWithdrawals.tsx
@@ -116,7 +116,7 @@ export default function AdminWithdrawals() {
                   <div className="min-w-0 flex-1">
                     {/* User and amount */}
                     <div className="mb-2 flex items-center gap-2">
-                      <span className="truncate font-medium text-dark-100">
+                      <span className="min-w-0 truncate font-medium text-dark-100">
                         {item.username
                           ? `@${item.username}`
                           : item.first_name || `#${item.user_id}`}
diff --git a/src/pages/PurchaseSuccess.tsx b/src/pages/PurchaseSuccess.tsx
index 653d2c8..c71368b 100644
--- a/src/pages/PurchaseSuccess.tsx
+++ b/src/pages/PurchaseSuccess.tsx
@@ -60,9 +60,9 @@ function CopyableField({ label, value }: { label: string; value: string }) {
 
   return (
     <div className="flex items-center gap-2 rounded-xl bg-dark-800/50 px-4 py-3">
-      <div className="flex-1 text-left">
+      <div className="min-w-0 flex-1 text-left">
         <p className="text-xs text-dark-400">{label}</p>
-        <p className="mt-0.5 font-mono text-sm text-dark-100">{value}</p>
+        <p className="mt-0.5 break-all font-mono text-sm text-dark-100">{value}</p>
       </div>
       <button
         type="button"
diff --git a/src/pages/ReferralNetwork/components/UserDetailPanel.tsx b/src/pages/ReferralNetwork/components/UserDetailPanel.tsx
index bab4dce..f17be20 100644
--- a/src/pages/ReferralNetwork/components/UserDetailPanel.tsx
+++ b/src/pages/ReferralNetwork/components/UserDetailPanel.tsx
@@ -61,9 +61,9 @@ export function UserDetailPanel({ userId, className }: UserDetailPanelProps) {
             {/* Identity */}
             <div className="space-y-2">
               {user.username && (
-                <div className="flex items-center justify-between text-sm">
-                  <span className="text-dark-500">@</span>
-                  <span className="font-mono text-dark-200">{user.username}</span>
+                <div className="flex items-center justify-between gap-2 text-sm">
+                  <span className="shrink-0 text-dark-500">@</span>
+                  <span className="min-w-0 truncate font-mono text-dark-200">{user.username}</span>
                 </div>
               )}
               {user.tg_id && (
@@ -196,11 +196,11 @@ export function UserDetailPanel({ userId, className }: UserDetailPanelProps) {
                   </span>
                 </div>
                 {user.campaign_name && (
-                  <div className="flex items-center justify-between text-sm">
-                    <span className="text-dark-400">
+                  <div className="flex items-center justify-between gap-2 text-sm">
+                    <span className="shrink-0 text-dark-400">
                       {t('admin.referralNetwork.user.fromCampaign')}
                     </span>
-                    <span className="text-dark-200">{user.campaign_name}</span>
+                    <span className="min-w-0 truncate text-dark-200">{user.campaign_name}</span>
                   </div>
                 )}
               </div>
diff --git a/src/pages/Wheel.tsx b/src/pages/Wheel.tsx
index 674ec8c..0a742f1 100644
--- a/src/pages/Wheel.tsx
+++ b/src/pages/Wheel.tsx
@@ -599,16 +599,16 @@ export default function Wheel() {
                           key={sub.id}
                           onClick={() => setSelectedSubscriptionId(sub.id)}
                           disabled={isSpinning}
-                          className={`flex w-full items-center justify-between rounded-lg px-3 py-2 text-sm transition-all ${
+                          className={`flex w-full items-center justify-between gap-2 rounded-lg px-3 py-2 text-sm transition-all ${
                             selectedSubscriptionId === sub.id
                               ? 'bg-accent-500/15 text-accent-400'
                               : 'text-dark-400 hover:text-dark-200'
                           }`}
                         >
-                          <span className="font-medium">
+                          <span className="min-w-0 truncate font-medium">
                             {sub.tariff_name || t('subscription.defaultName', 'Подписка')}
                           </span>
-                          <span className="text-xs opacity-60">
+                          <span className="shrink-0 text-xs opacity-60">
                             {sub.days_left} {t('common.units.days', 'дней')}
                           </span>
                         </button>

From e4cd975d9c2a8d7b2c7b6ac44739adfe9de7f008 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Fri, 5 Jun 2026 00:16:01 +0300
Subject: [PATCH 33/36] refactor(desktop-header): elegant labeled nav, drop
 hover-reveal + dead sidebar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The desktop top-bar nav rendered icon-only buttons whose label only slid out
on hover (max-w-0 -> group-hover:max-w-40) — mystery-meat, jumpy, hard to
scan. Replace with always-visible 'icon + label' links and a single
framer-motion pill (shared layoutId) that smoothly slides to the active item;
compact spacing, refined active/hover states.

Also delete DesktopSidebar.tsx — dead code since the cabinet's inception
(never imported anywhere, only re-exported from the barrel).
---
 src/components/layout/AppShell/AppShell.tsx   | 126 +++++------
 .../layout/AppShell/DesktopSidebar.tsx        | 212 ------------------
 src/components/layout/AppShell/index.ts       |   1 -
 3 files changed, 51 insertions(+), 288 deletions(-)
 delete mode 100644 src/components/layout/AppShell/DesktopSidebar.tsx

diff --git a/src/components/layout/AppShell/AppShell.tsx b/src/components/layout/AppShell/AppShell.tsx
index 76bae6f..4eef427 100644
--- a/src/components/layout/AppShell/AppShell.tsx
+++ b/src/components/layout/AppShell/AppShell.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { useLocation, Link } from 'react-router';
 import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
+import { motion } from 'framer-motion';
 
 import { useAuthStore } from '@/store/auth';
 import { useHaptic } from '@/platform';
@@ -109,11 +110,13 @@ export function AppShell({ children }: AppShellProps) {
     };
   }, []);
 
-  // Desktop navigation items
-  const desktopNavItems = [
+  // Desktop navigation — labels always visible (no hover-reveal gimmick)
+  const desktopNav = [
     { path: '/', label: t('nav.dashboard'), icon: HomeIcon },
     { path: '/subscriptions', label: t('nav.subscription'), icon: SubscriptionIcon },
     { path: '/balance', label: t('nav.balance'), icon: CreditCardIcon },
+    ...(referralEnabled ? [{ path: '/referral', label: t('nav.referral'), icon: UsersIcon }] : []),
+    ...(giftEnabled ? [{ path: '/gift', label: t('nav.gift'), icon: GiftIcon }] : []),
     { path: '/support', label: t('nav.support'), icon: ChatIcon },
     { path: '/info', label: t('nav.info'), icon: InfoIcon },
     { path: '/profile', label: t('nav.profile'), icon: UserIcon },
@@ -128,6 +131,48 @@ export function AppShell({ children }: AppShellProps) {
     haptic.impact('light');
   };
 
+  // A single elegant nav link: icon + label always visible, with a shared
+  // framer-motion pill that slides to the active item on navigation.
+  const renderNavLink = (
+    path: string,
+    label: string,
+    Icon: React.ComponentType<{ className?: string }>,
+    admin = false,
+  ) => {
+    const active = admin ? location.pathname.startsWith('/admin') : isActive(path);
+    return (
+      <Link
+        key={path}
+        to={path}
+        onClick={handleNavClick}
+        aria-label={label}
+        className={cn(
+          'relative flex items-center gap-2 rounded-lg px-3 py-1.5 text-[13px] font-medium transition-colors duration-200',
+          active
+            ? admin
+              ? 'text-warning-400'
+              : 'text-dark-50'
+            : admin
+              ? 'text-warning-500/70 hover:bg-warning-500/10 hover:text-warning-400'
+              : 'text-dark-400 hover:bg-dark-800/50 hover:text-dark-100',
+        )}
+      >
+        {active && (
+          <motion.span
+            layoutId="desktop-nav-active"
+            className={cn(
+              'absolute inset-0 rounded-lg',
+              admin ? 'bg-warning-500/10' : 'bg-dark-800',
+            )}
+            transition={{ type: 'spring', stiffness: 500, damping: 35 }}
+          />
+        )}
+        <Icon className="relative h-[17px] w-[17px] shrink-0" />
+        <span className="relative whitespace-nowrap">{label}</span>
+      </Link>
+    );
+  };
+
   // headerHeight comes from useHeaderHeight() — accounts for TG safe area in fullscreen
 
   return (
@@ -170,81 +215,12 @@ export function AppShell({ children }: AppShellProps) {
           </Link>
 
           {/* Center Navigation */}
-          <nav className="flex min-w-0 items-center gap-1">
-            {desktopNavItems.map((item) => (
-              <Link
-                key={item.path}
-                to={item.path}
-                onClick={handleNavClick}
-                aria-label={item.label}
-                className={cn(
-                  'group flex items-center rounded-xl px-2.5 py-2 transition-all duration-200',
-                  isActive(item.path)
-                    ? 'bg-dark-800 text-dark-50'
-                    : 'text-dark-400 hover:bg-dark-800/50 hover:text-dark-200',
-                )}
-              >
-                <item.icon className="h-[18px] w-[18px] shrink-0" />
-                <span className="max-w-0 overflow-hidden whitespace-nowrap text-xs font-medium opacity-0 transition-all duration-200 group-focus-within:ml-2 group-focus-within:max-w-40 group-focus-within:opacity-100 group-hover:ml-2 group-hover:max-w-40 group-hover:opacity-100">
-                  {item.label}
-                </span>
-              </Link>
-            ))}
-            {referralEnabled && (
-              <Link
-                to="/referral"
-                onClick={handleNavClick}
-                aria-label={t('nav.referral')}
-                className={cn(
-                  'group flex items-center rounded-xl px-2.5 py-2 transition-all duration-200',
-                  isActive('/referral')
-                    ? 'bg-dark-800 text-dark-50'
-                    : 'text-dark-400 hover:bg-dark-800/50 hover:text-dark-200',
-                )}
-              >
-                <UsersIcon className="h-[18px] w-[18px] shrink-0" />
-                <span className="max-w-0 overflow-hidden whitespace-nowrap text-xs font-medium opacity-0 transition-all duration-200 group-focus-within:ml-2 group-focus-within:max-w-40 group-focus-within:opacity-100 group-hover:ml-2 group-hover:max-w-40 group-hover:opacity-100">
-                  {t('nav.referral')}
-                </span>
-              </Link>
-            )}
-            {giftEnabled && (
-              <Link
-                to="/gift"
-                onClick={handleNavClick}
-                aria-label={t('nav.gift')}
-                className={cn(
-                  'group flex items-center rounded-xl px-2.5 py-2 transition-all duration-200',
-                  isActive('/gift')
-                    ? 'bg-dark-800 text-dark-50'
-                    : 'text-dark-400 hover:bg-dark-800/50 hover:text-dark-200',
-                )}
-              >
-                <GiftIcon className="h-[18px] w-[18px] shrink-0" />
-                <span className="max-w-0 overflow-hidden whitespace-nowrap text-xs font-medium opacity-0 transition-all duration-200 group-focus-within:ml-2 group-focus-within:max-w-40 group-focus-within:opacity-100 group-hover:ml-2 group-hover:max-w-40 group-hover:opacity-100">
-                  {t('nav.gift')}
-                </span>
-              </Link>
-            )}
+          <nav className="flex min-w-0 items-center justify-center gap-0.5">
+            {desktopNav.map((item) => renderNavLink(item.path, item.label, item.icon))}
             {isAdmin && (
               <>
-                <div className="mx-1 h-5 w-px shrink-0 bg-dark-700" />
-                <Link
-                  to="/admin"
-                  onClick={handleNavClick}
-                  aria-label={t('admin.nav.title')}
-                  className={cn(
-                    'group flex items-center rounded-xl px-2.5 py-2 transition-all duration-200',
-                    location.pathname.startsWith('/admin')
-                      ? 'bg-warning-500/10 text-warning-400'
-                      : 'text-warning-500/70 hover:bg-warning-500/10 hover:text-warning-400',
-                  )}
-                >
-                  <ShieldIcon className="h-[18px] w-[18px] shrink-0" />
-                  <span className="max-w-0 overflow-hidden whitespace-nowrap text-xs font-medium opacity-0 transition-all duration-200 group-focus-within:ml-2 group-focus-within:max-w-40 group-focus-within:opacity-100 group-hover:ml-2 group-hover:max-w-40 group-hover:opacity-100">
-                    {t('admin.nav.title')}
-                  </span>
-                </Link>
+                <div className="mx-1.5 h-5 w-px shrink-0 bg-dark-700/70" />
+                {renderNavLink('/admin', t('admin.nav.title'), ShieldIcon, true)}
               </>
             )}
           </nav>
diff --git a/src/components/layout/AppShell/DesktopSidebar.tsx b/src/components/layout/AppShell/DesktopSidebar.tsx
deleted file mode 100644
index 6f44363..0000000
--- a/src/components/layout/AppShell/DesktopSidebar.tsx
+++ /dev/null
@@ -1,212 +0,0 @@
-import { Link, useLocation } from 'react-router';
-import { useTranslation } from 'react-i18next';
-import { motion } from 'framer-motion';
-import { useQuery } from '@tanstack/react-query';
-
-import { useAuthStore } from '@/store/auth';
-import { displayName } from '@/utils/displayName';
-import {
-  brandingApi,
-  getCachedBranding,
-  setCachedBranding,
-  preloadLogo,
-  isLogoPreloaded,
-} from '@/api/branding';
-import { cn } from '@/lib/utils';
-import { usePlatform } from '@/platform';
-// Icons
-import {
-  HomeIcon,
-  SubscriptionIcon,
-  WalletIcon,
-  UsersIcon,
-  ChatIcon,
-  UserIcon,
-  LogoutIcon,
-  GamepadIcon,
-  ClipboardIcon,
-  InfoIcon,
-  CogIcon,
-  WheelIcon,
-} from './icons';
-
-const FALLBACK_NAME = import.meta.env.VITE_APP_NAME || 'Cabinet';
-const FALLBACK_LOGO = import.meta.env.VITE_APP_LOGO || 'V';
-
-interface DesktopSidebarProps {
-  isAdmin?: boolean;
-  wheelEnabled?: boolean;
-  referralEnabled?: boolean;
-  hasContests?: boolean;
-  hasPolls?: boolean;
-}
-
-export function DesktopSidebar({
-  isAdmin,
-  wheelEnabled,
-  referralEnabled,
-  hasContests,
-  hasPolls,
-}: DesktopSidebarProps) {
-  const { t } = useTranslation();
-  const location = useLocation();
-  const user = useAuthStore((state) => state.user);
-  const logout = useAuthStore((state) => state.logout);
-  const { haptic } = usePlatform();
-
-  // Branding
-  const { data: branding } = useQuery({
-    queryKey: ['branding'],
-    queryFn: async () => {
-      const data = await brandingApi.getBranding();
-      setCachedBranding(data);
-      await preloadLogo(data);
-      return data;
-    },
-    initialData: getCachedBranding() ?? undefined,
-    initialDataUpdatedAt: 0,
-    staleTime: 60000,
-    refetchOnWindowFocus: true,
-    retry: 1,
-  });
-
-  const appName = branding ? branding.name : FALLBACK_NAME;
-  const logoLetter = branding?.logo_letter || FALLBACK_LOGO;
-  const hasCustomLogo = branding?.has_custom_logo || false;
-  const logoUrl = branding ? brandingApi.getLogoUrl(branding) : null;
-
-  const isActive = (path: string) =>
-    path === '/' ? location.pathname === '/' : location.pathname.startsWith(path);
-  const isAdminActive = () => location.pathname.startsWith('/admin');
-
-  const navItems = [
-    { path: '/', label: t('nav.dashboard'), icon: HomeIcon },
-    { path: '/subscriptions', label: t('nav.subscription'), icon: SubscriptionIcon },
-    { path: '/balance', label: t('nav.balance'), icon: WalletIcon },
-    ...(referralEnabled ? [{ path: '/referral', label: t('nav.referral'), icon: UsersIcon }] : []),
-    { path: '/support', label: t('nav.support'), icon: ChatIcon },
-    ...(hasContests ? [{ path: '/contests', label: t('nav.contests'), icon: GamepadIcon }] : []),
-    ...(hasPolls ? [{ path: '/polls', label: t('nav.polls'), icon: ClipboardIcon }] : []),
-    ...(wheelEnabled ? [{ path: '/wheel', label: t('nav.wheel'), icon: WheelIcon }] : []),
-    { path: '/info', label: t('nav.info'), icon: InfoIcon },
-  ];
-
-  const handleNavClick = () => {
-    haptic.impact('light');
-  };
-
-  return (
-    <aside className="h-viewport fixed left-0 top-0 z-40 flex w-60 flex-col border-r border-dark-700/30 bg-dark-950/80 backdrop-blur-linear">
-      {/* Logo */}
-      <div className="flex h-16 items-center gap-3 border-b border-dark-700/30 px-4">
-        <Link to="/" className="flex items-center gap-3" onClick={handleNavClick}>
-          <div className="relative flex h-10 w-10 flex-shrink-0 items-center justify-center overflow-hidden rounded-linear-lg border border-dark-700/50 bg-dark-800/80">
-            <span
-              className={cn(
-                'absolute text-lg font-bold text-accent-400 transition-opacity duration-200',
-                hasCustomLogo && isLogoPreloaded() ? 'opacity-0' : 'opacity-100',
-              )}
-            >
-              {logoLetter}
-            </span>
-            {hasCustomLogo && logoUrl && (
-              <img
-                src={logoUrl}
-                alt={appName || 'Logo'}
-                className={cn(
-                  'absolute h-full w-full object-contain transition-opacity duration-200',
-                  isLogoPreloaded() ? 'opacity-100' : 'opacity-0',
-                )}
-              />
-            )}
-          </div>
-          {appName && (
-            <span className="whitespace-nowrap text-base font-semibold text-dark-100">
-              {appName}
-            </span>
-          )}
-        </Link>
-      </div>
-
-      {/* Navigation */}
-      <nav className="flex-1 space-y-1 overflow-y-auto p-3">
-        {navItems.map((item) => (
-          <Link
-            key={item.path}
-            to={item.path}
-            onClick={handleNavClick}
-            className={cn(
-              'group flex items-center gap-3 rounded-linear px-3 py-2.5 text-sm font-medium transition-all duration-200',
-              isActive(item.path)
-                ? 'bg-accent-500/10 text-accent-400'
-                : 'text-dark-400 hover:bg-dark-800/50 hover:text-dark-100',
-            )}
-          >
-            <item.icon className="h-5 w-5 shrink-0" />
-            <span>{item.label}</span>
-            {isActive(item.path) && (
-              <motion.div
-                layoutId="sidebar-active-indicator"
-                className="absolute left-0 h-8 w-0.5 rounded-r-full bg-accent-400"
-                transition={{ type: 'spring', stiffness: 500, damping: 30 }}
-              />
-            )}
-          </Link>
-        ))}
-
-        {/* Admin section */}
-        {isAdmin && (
-          <>
-            <div className="my-3 h-px bg-dark-700/30" />
-            <Link
-              to="/admin"
-              onClick={handleNavClick}
-              className={cn(
-                'group flex items-center gap-3 rounded-linear px-3 py-2.5 text-sm font-medium transition-all duration-200',
-                isAdminActive()
-                  ? 'bg-warning-500/10 text-warning-400'
-                  : 'text-warning-500/70 hover:bg-warning-500/10 hover:text-warning-400',
-              )}
-            >
-              <CogIcon className="h-5 w-5 shrink-0" />
-              <span>{t('admin.nav.title')}</span>
-            </Link>
-          </>
-        )}
-      </nav>
-
-      {/* User section */}
-      <div className="border-t border-dark-700/30 p-3">
-        <Link
-          to="/profile"
-          onClick={handleNavClick}
-          className={cn(
-            'group flex items-center gap-3 rounded-linear px-3 py-2.5 transition-all duration-200',
-            isActive('/profile') ? 'bg-dark-800/80' : 'hover:bg-dark-800/50',
-          )}
-        >
-          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-dark-700">
-            <UserIcon className="h-4 w-4 text-dark-400" />
-          </div>
-          <div className="min-w-0 flex-1">
-            <p className="truncate text-sm font-medium text-dark-100">{displayName(user)}</p>
-            <p className="truncate text-xs text-dark-500">
-              @{user?.username || `ID: ${user?.telegram_id}`}
-            </p>
-          </div>
-        </Link>
-
-        <button
-          onClick={() => {
-            haptic.impact('light');
-            logout();
-          }}
-          className="mt-2 flex w-full items-center gap-3 rounded-linear px-3 py-2.5 text-sm text-dark-400 transition-all duration-200 hover:bg-error-500/10 hover:text-error-400"
-        >
-          <LogoutIcon className="h-5 w-5 shrink-0" />
-          <span>{t('nav.logout')}</span>
-        </button>
-      </div>
-    </aside>
-  );
-}
diff --git a/src/components/layout/AppShell/index.ts b/src/components/layout/AppShell/index.ts
index 233b39d..37de912 100644
--- a/src/components/layout/AppShell/index.ts
+++ b/src/components/layout/AppShell/index.ts
@@ -1,4 +1,3 @@
 export { AppShell } from './AppShell';
-export { DesktopSidebar } from './DesktopSidebar';
 export { MobileBottomNav } from './MobileBottomNav';
 export { AppHeader } from './AppHeader';

From 864aeaf600eb3af20f700af2c68f6570abbf1115 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Fri, 5 Jun 2026 00:32:32 +0300
Subject: [PATCH 34/36] fix(desktop-header): full-width row so all nav items
 fit (no overflow/overlap)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The nav was centered inside a max-w-6xl grid column; 8 icon+label items were
wider than that column, so the centered overflow spilled LEFT over the logo
(ZeroPing's tail poked out from under 'Главная'). Switch to a full-width flex
row — logo (shrink-0) | nav | controls (shrink-0, pinned right via ml-auto) —
widen the container cap to 1600px, slightly compact the items, and drop the
invisible theme toggle from layout when it's not toggleable. Icons + labels
all stay visible: no scroll, no shrink, no overlap.
---
 src/components/layout/AppShell/AppShell.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/layout/AppShell/AppShell.tsx b/src/components/layout/AppShell/AppShell.tsx
index 4eef427..ad9e7c8 100644
--- a/src/components/layout/AppShell/AppShell.tsx
+++ b/src/components/layout/AppShell/AppShell.tsx
@@ -147,7 +147,7 @@ export function AppShell({ children }: AppShellProps) {
         onClick={handleNavClick}
         aria-label={label}
         className={cn(
-          'relative flex items-center gap-2 rounded-lg px-3 py-1.5 text-[13px] font-medium transition-colors duration-200',
+          'relative flex shrink-0 items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-[13px] font-medium transition-colors duration-200',
           active
             ? admin
               ? 'text-warning-400'
@@ -167,7 +167,7 @@ export function AppShell({ children }: AppShellProps) {
             transition={{ type: 'spring', stiffness: 500, damping: 35 }}
           />
         )}
-        <Icon className="relative h-[17px] w-[17px] shrink-0" />
+        <Icon className="relative h-4 w-4 shrink-0" />
         <span className="relative whitespace-nowrap">{label}</span>
       </Link>
     );
@@ -188,9 +188,9 @@ export function AppShell({ children }: AppShellProps) {
 
       {/* Desktop Header */}
       <header className="fixed left-0 right-0 top-0 z-50 hidden border-b border-dark-800/50 bg-dark-950/95 lg:block">
-        <div className="mx-auto grid h-14 max-w-6xl grid-cols-[auto_1fr_auto] items-center gap-4 px-6">
+        <div className="mx-auto flex h-14 max-w-[1600px] items-center gap-5 px-6">
           {/* Logo */}
-          <Link to="/" className="flex items-center gap-2.5" onClick={handleNavClick}>
+          <Link to="/" className="flex shrink-0 items-center gap-2.5" onClick={handleNavClick}>
             <div className="relative flex h-8 w-8 flex-shrink-0 items-center justify-center overflow-hidden rounded-lg bg-dark-800">
               <span
                 className={cn(
@@ -214,8 +214,8 @@ export function AppShell({ children }: AppShellProps) {
             <span className="text-base font-semibold text-dark-100">{appName}</span>
           </Link>
 
-          {/* Center Navigation */}
-          <nav className="flex min-w-0 items-center justify-center gap-0.5">
+          {/* Navigation — labels always visible, all items shown, no scroll/shrink */}
+          <nav className="flex items-center gap-0.5">
             {desktopNav.map((item) => renderNavLink(item.path, item.label, item.icon))}
             {isAdmin && (
               <>
@@ -225,8 +225,8 @@ export function AppShell({ children }: AppShellProps) {
             )}
           </nav>
 
-          {/* Right side actions */}
-          <div className="flex items-center justify-end gap-2">
+          {/* Right side actions — pinned right, never shrink */}
+          <div className="ml-auto flex shrink-0 items-center gap-2">
             <button
               onClick={() => {
                 haptic.impact('light');
@@ -234,7 +234,7 @@ export function AppShell({ children }: AppShellProps) {
               }}
               className={cn(
                 'rounded-xl border border-dark-700/50 bg-dark-800/50 p-2 text-dark-400 transition-colors duration-200 hover:bg-dark-700 hover:text-accent-400',
-                !canToggleTheme && 'pointer-events-none invisible',
+                !canToggleTheme && 'hidden',
               )}
               aria-label={
                 isDark ? t('theme.light') || 'Light mode' : t('theme.dark') || 'Dark mode'

From 7de9b3b51be095da15a9035c98d0aefa4b526838 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Fri, 5 Jun 2026 17:21:21 +0300
Subject: [PATCH 35/36] feat(desktop-header): group nav into a centered
 segmented capsule
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wrap the always-visible nav items in a single rounded track (segmented-control
look): rounded-full border + subtle bg + backdrop blur, centered between the
logo and the right-side actions via mx-auto (fills the previously empty middle).

- All items stay visible with icon + label — no scroll, no shrink, no collapse,
  no hover-reveal. Purely a visual grouping.
- Items become rounded-full pills; the framer-motion active indicator slides
  within the capsule and is lifted above the track (bg + ring + shadow).
- Admin link stays inside the capsule after a thin divider, warning-tinted.
- Right-side actions sit at the edge (dropped ml-auto since nav now centers).
---
 src/components/layout/AppShell/AppShell.tsx | 27 ++++++++++++---------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/layout/AppShell/AppShell.tsx b/src/components/layout/AppShell/AppShell.tsx
index ad9e7c8..a8370f3 100644
--- a/src/components/layout/AppShell/AppShell.tsx
+++ b/src/components/layout/AppShell/AppShell.tsx
@@ -147,22 +147,25 @@ export function AppShell({ children }: AppShellProps) {
         onClick={handleNavClick}
         aria-label={label}
         className={cn(
-          'relative flex shrink-0 items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-[13px] font-medium transition-colors duration-200',
+          'relative flex shrink-0 items-center gap-1.5 rounded-full px-3 py-1.5 text-[13px] font-medium transition-colors duration-200',
           active
             ? admin
-              ? 'text-warning-400'
+              ? 'text-warning-300'
               : 'text-dark-50'
             : admin
-              ? 'text-warning-500/70 hover:bg-warning-500/10 hover:text-warning-400'
-              : 'text-dark-400 hover:bg-dark-800/50 hover:text-dark-100',
+              ? 'text-warning-500/70 hover:bg-warning-500/10 hover:text-warning-300'
+              : 'text-dark-400 hover:bg-dark-800/60 hover:text-dark-100',
         )}
       >
         {active && (
           <motion.span
             layoutId="desktop-nav-active"
             className={cn(
-              'absolute inset-0 rounded-lg',
-              admin ? 'bg-warning-500/10' : 'bg-dark-800',
+              // Подсветка-пилюля активного пункта — «приподнята» над треком капсулы
+              'absolute inset-0 rounded-full shadow-sm',
+              admin
+                ? 'bg-warning-500/15 ring-1 ring-warning-500/20'
+                : 'bg-dark-700/80 ring-1 ring-dark-600/40',
             )}
             transition={{ type: 'spring', stiffness: 500, damping: 35 }}
           />
@@ -214,19 +217,21 @@ export function AppShell({ children }: AppShellProps) {
             <span className="text-base font-semibold text-dark-100">{appName}</span>
           </Link>
 
-          {/* Navigation — labels always visible, all items shown, no scroll/shrink */}
-          <nav className="flex items-center gap-0.5">
+          {/* Navigation — единая «капсула» (segmented control): все пункты видны
+              всегда, без скролла/сжатия/сворачивания. Капсула центрируется в
+              свободном пространстве между логотипом и кнопками (mx-auto). */}
+          <nav className="mx-auto flex items-center gap-0.5 rounded-full border border-dark-800/70 bg-dark-900/50 p-1 shadow-sm backdrop-blur-sm">
             {desktopNav.map((item) => renderNavLink(item.path, item.label, item.icon))}
             {isAdmin && (
               <>
-                <div className="mx-1.5 h-5 w-px shrink-0 bg-dark-700/70" />
+                <div className="mx-1 h-5 w-px shrink-0 bg-dark-700/60" />
                 {renderNavLink('/admin', t('admin.nav.title'), ShieldIcon, true)}
               </>
             )}
           </nav>
 
-          {/* Right side actions — pinned right, never shrink */}
-          <div className="ml-auto flex shrink-0 items-center gap-2">
+          {/* Right side actions — pinned right (nav centers via mx-auto), never shrink */}
+          <div className="flex shrink-0 items-center gap-2">
             <button
               onClick={() => {
                 haptic.impact('light');

From 9fc681b56da18c1453bc2e034d306019c454c771 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Fri, 5 Jun 2026 17:29:55 +0300
Subject: [PATCH 36/36] fix(desktop-header): stop layout jumping via 3-column
 grid
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The header used flex with the capsule centered by mx-auto, so the capsule's
auto-margins recomputed whenever anything in the row changed (and compounded
with framer-motion's shared-layout measurement on route change) — making the
whole row, incl. the language button, twitch when navigating (notably into
/admin).

Switch the inner row to grid grid-cols-[1fr_auto_1fr]: the capsule is anchored
to the true viewport center by the symmetric side columns, and the actions are
pinned to the right column (justify-self-end). A width change in one zone can no
longer shift another, so nothing jumps.
---
 src/components/layout/AppShell/AppShell.tsx | 22 ++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/layout/AppShell/AppShell.tsx b/src/components/layout/AppShell/AppShell.tsx
index a8370f3..4afc448 100644
--- a/src/components/layout/AppShell/AppShell.tsx
+++ b/src/components/layout/AppShell/AppShell.tsx
@@ -191,9 +191,17 @@ export function AppShell({ children }: AppShellProps) {
 
       {/* Desktop Header */}
       <header className="fixed left-0 right-0 top-0 z-50 hidden border-b border-dark-800/50 bg-dark-950/95 lg:block">
-        <div className="mx-auto flex h-14 max-w-[1600px] items-center gap-5 px-6">
+        {/* 3-зонный grid: лого | капсула | действия. Колонки 1fr_auto_1fr держат
+            капсулу строго по центру вьюпорта НЕЗАВИСИМО от ширины лого/действий,
+            а действия — у правого края. Поэтому ничего не «скачет» при переходах
+            (в т.ч. в админку): смена ширины в одной зоне не двигает другие. */}
+        <div className="mx-auto grid h-14 max-w-[1600px] grid-cols-[1fr_auto_1fr] items-center gap-4 px-6">
           {/* Logo */}
-          <Link to="/" className="flex shrink-0 items-center gap-2.5" onClick={handleNavClick}>
+          <Link
+            to="/"
+            className="flex shrink-0 items-center gap-2.5 justify-self-start"
+            onClick={handleNavClick}
+          >
             <div className="relative flex h-8 w-8 flex-shrink-0 items-center justify-center overflow-hidden rounded-lg bg-dark-800">
               <span
                 className={cn(
@@ -218,9 +226,9 @@ export function AppShell({ children }: AppShellProps) {
           </Link>
 
           {/* Navigation — единая «капсула» (segmented control): все пункты видны
-              всегда, без скролла/сжатия/сворачивания. Капсула центрируется в
-              свободном пространстве между логотипом и кнопками (mx-auto). */}
-          <nav className="mx-auto flex items-center gap-0.5 rounded-full border border-dark-800/70 bg-dark-900/50 p-1 shadow-sm backdrop-blur-sm">
+              всегда, без скролла/сжатия/сворачивания. Центрируется средней
+              колонкой grid (justify-self-center), а не auto-margin'ами. */}
+          <nav className="flex items-center gap-0.5 justify-self-center rounded-full border border-dark-800/70 bg-dark-900/50 p-1 shadow-sm backdrop-blur-sm">
             {desktopNav.map((item) => renderNavLink(item.path, item.label, item.icon))}
             {isAdmin && (
               <>
@@ -230,8 +238,8 @@ export function AppShell({ children }: AppShellProps) {
             )}
           </nav>
 
-          {/* Right side actions — pinned right (nav centers via mx-auto), never shrink */}
-          <div className="flex shrink-0 items-center gap-2">
+          {/* Right side actions — правая колонка grid, прижата к краю, не сжимается */}
+          <div className="flex shrink-0 items-center gap-2 justify-self-end">
             <button
               onClick={() => {
                 haptic.impact('light');