From 324aaa1f33475650e8c678b63f4370a2dae8cca2 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Tue, 24 Mar 2026 19:11:48 +0300
Subject: [PATCH] =?UTF-8?q?redesign:=20inline=20delete=20confirmation=20on?=
 =?UTF-8?q?=20web=20=E2=80=94=20expands=20in=20place=20instead=20of=20moda?=
 =?UTF-8?q?l/sheet?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Subscription.tsx | 137 +++++++++++++++++--------------------
 1 file changed, 64 insertions(+), 73 deletions(-)

diff --git a/src/pages/Subscription.tsx b/src/pages/Subscription.tsx
index 09b87ee..84f8aa4 100644
--- a/src/pages/Subscription.tsx
+++ b/src/pages/Subscription.tsx
@@ -4,14 +4,6 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router';
 import { subscriptionApi } from '../api/subscription';
 import { WebBackButton } from '../components/WebBackButton';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-} from '../components/primitives/Sheet';
 import { useDestructiveConfirm } from '../platform/hooks/useNativeDialog';
 import { usePlatform } from '../platform';
 import TrafficProgressBar from '../components/dashboard/TrafficProgressBar';
@@ -1280,67 +1272,65 @@ export default function Subscription() {
 
       {/* Delete expired subscription */}
       {isMultiTariff && subscription && !subscription.is_active && !subscription.is_trial && (
-        <>
-          <button
-            onClick={async () => {
-              if (platform === 'telegram') {
-                // Telegram: native destructive popup
-                const confirmed = await destructiveConfirm(
-                  t(
-                    'subscription.deleteWarning',
-                    'Подписка будет удалена безвозвратно. Все данные, устройства и настройки будут потеряны.',
-                  ),
-                  t('subscription.confirmDelete', 'Да, удалить'),
-                  t('subscription.deleteTitle', 'Удалить подписку?'),
-                );
-                if (!confirmed) return;
-                setDeleteLoading(true);
-                try {
-                  await subscriptionApi.deleteSubscription(subscription.id);
-                  queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
-                  navigate('/subscriptions', { replace: true });
-                } catch {
-                  setDeleteLoading(false);
+        <div className="space-y-3">
+          {!showDeleteSheet ? (
+            <button
+              onClick={async () => {
+                if (platform === 'telegram') {
+                  const confirmed = await destructiveConfirm(
+                    t(
+                      'subscription.deleteWarning',
+                      'Подписка будет удалена безвозвратно. Все данные, устройства и настройки будут потеряны.',
+                    ),
+                    t('subscription.confirmDelete', 'Да, удалить'),
+                    t('subscription.deleteTitle', 'Удалить подписку?'),
+                  );
+                  if (!confirmed) return;
+                  setDeleteLoading(true);
+                  try {
+                    await subscriptionApi.deleteSubscription(subscription.id);
+                    queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
+                    navigate('/subscriptions', { replace: true });
+                  } catch {
+                    setDeleteLoading(false);
+                  }
+                } else {
+                  setShowDeleteSheet(true);
                 }
-              } else {
-                // Web: show Sheet
-                setShowDeleteSheet(true);
-              }
-            }}
-            disabled={deleteLoading}
-            className="flex w-full items-center justify-center gap-2 rounded-2xl border border-red-400/20 bg-red-400/5 p-3.5 text-sm font-medium text-red-400 transition-colors hover:bg-red-400/10 disabled:opacity-50"
-          >
-            <svg
-              className="h-4 w-4"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth={2}
+              }}
+              disabled={deleteLoading}
+              className="flex w-full items-center justify-center gap-2 rounded-2xl border border-red-400/20 bg-red-400/5 p-3.5 text-sm font-medium text-red-400 transition-colors hover:bg-red-400/10 disabled:opacity-50"
             >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-              />
-            </svg>
-            {deleteLoading
-              ? t('common.processing', 'Удаление...')
-              : t('subscription.delete', 'Удалить подписку')}
-          </button>
-
-          {/* Web: Sheet confirmation */}
-          <Sheet open={showDeleteSheet} onOpenChange={setShowDeleteSheet}>
-            <SheetContent className="sm:inset-x-auto sm:left-1/2 sm:right-auto sm:mb-4 sm:max-w-md sm:-translate-x-1/2 sm:rounded-2xl">
-              <SheetHeader>
-                <SheetTitle>{t('subscription.deleteTitle', 'Удалить подписку?')}</SheetTitle>
-                <SheetDescription>
-                  {t(
-                    'subscription.deleteWarning',
-                    'Подписка будет удалена безвозвратно. Все данные, устройства и настройки будут потеряны. Это действие нельзя отменить.',
-                  )}
-                </SheetDescription>
-              </SheetHeader>
-              <SheetFooter>
+              <svg
+                className="h-4 w-4"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth={2}
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                />
+              </svg>
+              {t('subscription.delete', 'Удалить подписку')}
+            </button>
+          ) : (
+            <div
+              className="rounded-2xl border border-red-400/20 p-4"
+              style={{ background: 'rgba(255,59,92,0.04)' }}
+            >
+              <div className="mb-3 text-sm font-semibold text-red-400">
+                {t('subscription.deleteTitle', 'Удалить подписку?')}
+              </div>
+              <div className="mb-4 text-xs" style={{ color: g.textSecondary }}>
+                {t(
+                  'subscription.deleteWarning',
+                  'Подписка будет удалена безвозвратно. Все данные, устройства и настройки будут потеряны. Это действие нельзя отменить.',
+                )}
+              </div>
+              <div className="flex gap-2">
                 <button
                   onClick={async () => {
                     setDeleteLoading(true);
@@ -1354,7 +1344,7 @@ export default function Subscription() {
                     }
                   }}
                   disabled={deleteLoading}
-                  className="w-full rounded-xl bg-red-500 py-3 text-sm font-semibold text-white transition-colors hover:bg-red-600 disabled:opacity-50"
+                  className="flex-1 rounded-xl bg-red-500 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-red-600 disabled:opacity-50"
                 >
                   {deleteLoading
                     ? t('common.processing', 'Удаление...')
@@ -1362,14 +1352,15 @@ export default function Subscription() {
                 </button>
                 <button
                   onClick={() => setShowDeleteSheet(false)}
-                  className="w-full rounded-xl border border-dark-700 bg-dark-800 py-3 text-sm font-medium text-dark-300 transition-colors hover:bg-dark-700"
+                  className="flex-1 rounded-xl border border-dark-700 py-2.5 text-sm font-medium transition-colors hover:bg-dark-700"
+                  style={{ color: g.textSecondary }}
                 >
                   {t('common.cancel', 'Отмена')}
                 </button>
-              </SheetFooter>
-            </SheetContent>
-          </Sheet>
-        </>
+              </div>
+            </div>
+          )}
+        </div>
       )}
 
       {/* Additional Options (Buy Devices) */}