From 312a34f7159be3a836865a5120a7cc6f0640f699 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Tue, 26 May 2026 23:23:47 +0300
Subject: [PATCH] fix(subscription): clear critique P0 + P1 + part of P2
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three issues from the post-PRODUCT.md /impeccable critique pass:

P0 — backdrop-blur-xl shipped to mobile on the two hero cards
(SubscriptionCardActive + Subscription detail). DESIGN.md
'Mobile-Without-Blur Rule' restricts backdrop-blur to ≥1024px.
Gate with lg: prefix so phones (half the audience) get the opaque
surface and skip the scroll-jank-inducing GPU blur layer.

P1 — Two destructive device-deletion sites still called the bare
browser confirm(). The codebase already imports useDestructiveConfirm
and uses it correctly for revoke (line 484). Bring the all-devices
and per-device delete paths onto the same platform-aware path, so
inside Telegram the user gets the native destructive popup with
haptic + theme, and on web they get the inline destructive panel.

P2 (partial) — Removed the decorative ambient radial-gradient halo
behind the Subscription detail hero card and the trial-shimmer border
overlay. Same chrome was distilled out of SubscriptionCardActive
earlier in this branch; the rationale is identical (zone/accent hue
leaking into pure decoration violates DESIGN.md Tunable-but-Scarce
+ Status-Hue Lockout rules). Trial state is conveyed by the header
badge.
---
 .../dashboard/SubscriptionCardActive.tsx      |  2 +-
 src/pages/Subscription.tsx                    | 57 +++++++++----------
 2 files changed, 27 insertions(+), 32 deletions(-)

diff --git a/src/components/dashboard/SubscriptionCardActive.tsx b/src/components/dashboard/SubscriptionCardActive.tsx
index 0f2ebbb..b62c859 100644
--- a/src/components/dashboard/SubscriptionCardActive.tsx
+++ b/src/components/dashboard/SubscriptionCardActive.tsx
@@ -72,7 +72,7 @@ export default function SubscriptionCardActive({
 
   return (
     <div
-      className="relative overflow-hidden rounded-3xl backdrop-blur-xl"
+      className="relative overflow-hidden rounded-3xl lg:backdrop-blur-xl"
       style={{
         background: g.cardBg,
         border: subscription.is_trial
diff --git a/src/pages/Subscription.tsx b/src/pages/Subscription.tsx
index 743f80d..742f8b7 100644
--- a/src/pages/Subscription.tsx
+++ b/src/pages/Subscription.tsx
@@ -547,7 +547,7 @@ export default function Subscription() {
 
           return (
             <div
-              className="relative overflow-hidden rounded-3xl backdrop-blur-xl"
+              className="relative overflow-hidden rounded-3xl lg:backdrop-blur-xl"
               style={{
                 background: g.cardBg,
                 border: subscription.is_trial
@@ -561,28 +561,13 @@ export default function Subscription() {
                 padding: '28px 28px 24px',
               }}
             >
-              {/* Trial shimmer border */}
-              {subscription.is_trial && (
-                <div
-                  className="pointer-events-none absolute inset-[-1px] animate-trial-glow rounded-3xl"
-                  aria-hidden="true"
-                />
-              )}
-
-              {/* Background glow */}
-              <div
-                className="pointer-events-none absolute"
-                style={{
-                  top: -60,
-                  right: -60,
-                  width: 200,
-                  height: 200,
-                  borderRadius: '50%',
-                  background: `radial-gradient(circle, ${zone.mainHex}${g.glowAlpha} 0%, transparent 70%)`,
-                  transition: 'background 0.8s ease',
-                }}
-                aria-hidden="true"
-              />
+              {/* Decorative ambient radial + trial shimmer border were
+                  removed: they carried no information, leaked zone/accent
+                  hue into pure decoration (violates DESIGN.md
+                  Tunable-but-Scarce + Status-Hue Lockout rules), and the
+                  same chrome was distilled out of SubscriptionCardActive
+                  earlier in this branch. Trial state is conveyed by the
+                  header badge. */}
 
               {/* ─── Header ─── */}
               <div className="mb-6 flex items-start justify-between">
@@ -1509,10 +1494,17 @@ export default function Subscription() {
             </h2>
             {devicesData && devicesData.devices.length > 0 && (
               <button
-                onClick={() => {
-                  if (confirm(t('subscription.confirmDeleteAllDevices'))) {
-                    deleteAllDevicesMutation.mutate();
-                  }
+                onClick={async () => {
+                  // Platform-aware destructive confirm: Telegram native popup
+                  // in Mini App, inline panel on web. Replaces the bare
+                  // browser confirm() which broke premium frame + lost
+                  // haptic / theming inside Telegram.
+                  const confirmed = await destructiveConfirm(
+                    t('subscription.confirmDeleteAllDevices'),
+                    t('subscription.deleteAllDevices'),
+                    t('subscription.deleteAllDevices'),
+                  );
+                  if (confirmed) deleteAllDevicesMutation.mutate();
                 }}
                 disabled={deleteAllDevicesMutation.isPending}
                 className="text-[11px] font-medium transition-colors"
@@ -1706,10 +1698,13 @@ export default function Subscription() {
                           </button>
                           <button
                             type="button"
-                            onClick={() => {
-                              if (confirm(t('subscription.confirmDeleteDevice'))) {
-                                deleteDeviceMutation.mutate(device.hwid);
-                              }
+                            onClick={async () => {
+                              const confirmed = await destructiveConfirm(
+                                t('subscription.confirmDeleteDevice'),
+                                t('subscription.deleteDevice'),
+                                t('subscription.deleteDevice'),
+                              );
+                              if (confirmed) deleteDeviceMutation.mutate(device.hwid);
                             }}
                             disabled={deleteDeviceMutation.isPending}
                             className="p-2 transition-colors"