fix(subscription): clear critique P0 + P1 + part of P2

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.
This commit is contained in:
c0mrade
2026-05-26 23:23:47 +03:00
parent c77d1e948e
commit 312a34f715
2 changed files with 27 additions and 32 deletions

View File

@@ -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

View File

@@ -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"