redesign: inline delete confirmation on web — expands in place instead of modal/sheet

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,11 +1272,11 @@ export default function Subscription() {
 
       {/* Delete expired subscription */}
       {isMultiTariff && subscription && !subscription.is_active && !subscription.is_trial && (
-        <>
+        <div className="space-y-3">
+          {!showDeleteSheet ? (
             <button
               onClick={async () => {
                 if (platform === 'telegram') {
-                // Telegram: native destructive popup
                   const confirmed = await destructiveConfirm(
                     t(
                       'subscription.deleteWarning',
@@ -1303,7 +1295,6 @@ export default function Subscription() {
                     setDeleteLoading(false);
                   }
                 } else {
-                // Web: show Sheet
                   setShowDeleteSheet(true);
                 }
               }}
@@ -1323,24 +1314,23 @@ export default function Subscription() {
                   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('subscription.delete', 'Удалить подписку')}
-              ? t('common.processing', 'Удаление...')
-              : t('subscription.delete', 'Удалить подписку')}
             </button>
-
+          ) : (
-          {/* Web: Sheet confirmation */}
+            <div
-          <Sheet open={showDeleteSheet} onOpenChange={setShowDeleteSheet}>
+              className="rounded-2xl border border-red-400/20 p-4"
-            <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">
+              style={{ background: 'rgba(255,59,92,0.04)' }}
-              <SheetHeader>
+            >
-                <SheetTitle>{t('subscription.deleteTitle', 'Удалить подписку?')}</SheetTitle>
+              <div className="mb-3 text-sm font-semibold text-red-400">
-                <SheetDescription>
+                {t('subscription.deleteTitle', 'Удалить подписку?')}
+              </div>
+              <div className="mb-4 text-xs" style={{ color: g.textSecondary }}>
                 {t(
                   'subscription.deleteWarning',
                   'Подписка будет удалена безвозвратно. Все данные, устройства и настройки будут потеряны. Это действие нельзя отменить.',
                 )}
-                </SheetDescription>
+              </div>
-              </SheetHeader>
+              <div className="flex gap-2">
-              <SheetFooter>
                 <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>
+              </div>
-            </SheetContent>
+            </div>
-          </Sheet>
+          )}
-        </>
+        </div>
       )}
 
       {/* Additional Options (Buy Devices) */}