feat: enhance subscription list UX with progress bars, status badges, and glass theme

- SubscriptionListCard: replace status dot with localized status badge,
  add traffic progress bar with color coding, use locale-aware date format
- Subscriptions page: apply glass theme colors, improve empty state styling,
  add SVG plus icon for buy button, skeleton loader with glass theme
- Subscription detail: invalidate subscriptions-list cache on mutations

src/components/subscription/SubscriptionListCard.tsx

@@ -4,15 +4,10 @@ import { getGlassColors } from '../../utils/glassTheme';
 import { useHaptic } from '../../platform';
 import type { SubscriptionListItem } from '../../types';
 
-function formatTrafficDisplay(used: number, limit: number): string {
+function formatDate(iso: string | null, locale?: string): string {
-  if (limit === 0) return '∞';
-  return `${used.toFixed(1)} / ${limit} ГБ`;
-}
-
-function formatDate(iso: string | null): string {
   if (!iso) return '—';
   try {
-    return new Date(iso).toLocaleDateString('ru-RU', {
+    return new Date(iso).toLocaleDateString(locale ?? undefined, {
       day: '2-digit',
       month: '2-digit',
       year: 'numeric',
@@ -22,14 +17,40 @@ function formatDate(iso: string | null): string {
   }
 }
 
-function StatusDot({ status }: { status: string }) {
+function StatusBadge({
-  const color =
+  status,
-    status === 'active' || status === 'trial'
+  t,
-      ? 'bg-emerald-400'
+}: {
-      : status === 'limited'
+  status: string;
-        ? 'bg-amber-400'
+  t: (key: string, fallback: string) => string;
-        : 'bg-red-400';
+}) {
-  return <span className={`inline-block h-2.5 w-2.5 rounded-full ${color}`} />;
+  const isActive = status === 'active' || status === 'trial';
+  const isLimited = status === 'limited';
+  const isExpired = status === 'expired' || status === 'disabled';
+
+  const color = isActive
+    ? 'bg-emerald-400/15 text-emerald-400 border-emerald-400/20'
+    : isLimited
+      ? 'bg-amber-400/15 text-amber-400 border-amber-400/20'
+      : 'bg-red-400/15 text-red-400 border-red-400/20';
+
+  const label = isActive
+    ? status === 'trial'
+      ? t('subscription.statusTrial', 'Тестовая')
+      : t('subscription.statusActive', 'Активна')
+    : isLimited
+      ? t('subscription.statusLimited', 'Ограничена')
+      : isExpired
+        ? t('subscription.statusExpired', 'Истекла')
+        : status;
+
+  return (
+    <span
+      className={`inline-flex items-center rounded-full border px-2 py-0.5 text-[10px] font-semibold ${color}`}
+    >
+      {label}
+    </span>
+  );
 }
 
 export default function SubscriptionListCard({
@@ -39,7 +60,7 @@ export default function SubscriptionListCard({
   subscription: SubscriptionListItem;
   onClick: () => void;
 }) {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const { isDark } = useTheme();
   const g = getGlassColors(isDark);
   const { impact } = useHaptic();
@@ -49,54 +70,121 @@ export default function SubscriptionListCard({
     onClick();
   };
 
+  const isActive = subscription.status === 'active' || subscription.status === 'trial';
+  const isExpired = subscription.status === 'expired' || subscription.status === 'disabled';
+  const trafficLimit = subscription.traffic_limit_gb;
+  const trafficUsed = subscription.traffic_used_gb;
+  const isUnlimited = trafficLimit === 0;
+  const trafficPercent = isUnlimited
+    ? 0
+    : trafficLimit > 0
+      ? Math.min(100, (trafficUsed / trafficLimit) * 100)
+      : 0;
+  const trafficColor =
+    trafficPercent >= 90 ? 'bg-red-400' : trafficPercent >= 70 ? 'bg-amber-400' : 'bg-emerald-400';
+
   return (
     <button
       onClick={handleClick}
-      className="bento-card w-full text-left transition-all duration-200 hover:scale-[1.01] active:scale-[0.99]"
+      className="w-full rounded-2xl border p-4 text-left transition-all duration-200 hover:scale-[1.01] active:scale-[0.99]"
-      style={{ background: g.cardBg, borderColor: g.cardBorder }}
+      style={{
+        background: isExpired
+          ? isDark
+            ? 'rgba(255,59,92,0.04)'
+            : 'rgba(255,59,92,0.03)'
+          : g.cardBg,
+        borderColor: isExpired ? 'rgba(255,59,92,0.15)' : g.cardBorder,
+      }}
     >
-      <div className="flex items-center justify-between">
+      {/* Header: tariff name + status badge + chevron */}
-        <div className="flex items-center gap-2">
+      <div className="flex items-center justify-between gap-2">
-          <StatusDot status={subscription.status} />
+        <div className="flex min-w-0 items-center gap-2">
-          <span className="text-base font-semibold">
+          <span className="truncate text-base font-semibold" style={{ color: g.text }}>
             {subscription.tariff_name || t('subscription.defaultName', 'Подписка')}
           </span>
+          <StatusBadge status={subscription.status} t={t} />
         </div>
         <svg
-          className="h-5 w-5 opacity-40"
+          className="h-4 w-4 shrink-0 opacity-30"
           fill="none"
           viewBox="0 0 24 24"
           stroke="currentColor"
-          strokeWidth={2}
+          strokeWidth={2.5}
         >
           <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
         </svg>
       </div>
 
-      <div className="mt-3 grid grid-cols-3 gap-3 text-sm opacity-70">
+      {/* Traffic mini progress bar */}
-        <div>
+      {isActive && (
-          <div className="text-xs opacity-60">{t('subscription.traffic', 'Трафик')}</div>
+        <div className="mt-3">
-          <div>
+          <div className="mb-1 flex items-baseline justify-between">
-            {formatTrafficDisplay(subscription.traffic_used_gb, subscription.traffic_limit_gb)}
+            <span className="text-[11px] font-medium" style={{ color: g.textSecondary }}>
+              {t('subscription.traffic', 'Трафик')}
+            </span>
+            <span className="text-[11px] tabular-nums" style={{ color: g.textSecondary }}>
+              {isUnlimited
+                ? '∞'
+                : `${trafficUsed.toFixed(1)} / ${trafficLimit} ${t('common.units.gb', 'ГБ')}`}
+            </span>
           </div>
-        </div>
+          {!isUnlimited && (
-        <div>
+            <div className="h-1.5 overflow-hidden rounded-full" style={{ background: g.innerBg }}>
-          <div className="text-xs opacity-60">{t('subscription.devices', 'Устройства')}</div>
+              <div
-          <div>{subscription.device_limit}</div>
+                className={`h-full rounded-full transition-all ${trafficColor}`}
-        </div>
+                style={{ width: `${Math.max(1, trafficPercent)}%` }}
-        <div>
+              />
-          <div className="text-xs opacity-60">{t('subscription.until', 'До')}</div>
+            </div>
-          <div>{formatDate(subscription.end_date)}</div>
+          )}
-        </div>
-      </div>
-
-      {subscription.is_trial && (
-        <div className="mt-2">
-          <span className="inline-block rounded-full bg-amber-500/20 px-2 py-0.5 text-xs text-amber-300">
-            {t('subscription.trial', 'Тестовая')}
-          </span>
         </div>
       )}
+
+      {/* Stats row */}
+      <div
+        className="mt-2.5 flex items-center gap-4 text-[12px]"
+        style={{ color: g.textSecondary }}
+      >
+        <span className="flex items-center gap-1">
+          <svg
+            className="h-3.5 w-3.5 opacity-50"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <rect x="5" y="2" width="14" height="20" rx="2" />
+            <path d="M12 18h.01" />
+          </svg>
+          {subscription.device_limit}
+        </span>
+        <span className="flex items-center gap-1">
+          <svg
+            className="h-3.5 w-3.5 opacity-50"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <rect x="3" y="4" width="18" height="18" rx="2" />
+            <path d="M16 2v4M8 2v4M3 10h18" />
+          </svg>
+          {formatDate(subscription.end_date, i18n.language)}
+        </span>
+        {subscription.autopay_enabled && (
+          <span className="flex items-center gap-1 text-emerald-400/70">
+            <svg
+              className="h-3 w-3"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2.5}
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+            </svg>
+            {t('subscription.autopay', 'Автопродление')}
+          </span>
+        )}
+      </div>
     </button>
   );
 }

src/pages/Subscription.tsx

@@ -265,6 +265,7 @@ export default function Subscription() {
     mutationFn: () => subscriptionApi.togglePause(subscriptionId),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['subscription', subscriptionId] });
+      queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
       queryClient.invalidateQueries({ queryKey: ['balance'] });
     },
   });
@@ -290,6 +291,7 @@ export default function Subscription() {
     mutationFn: () => subscriptionApi.purchaseDevices(devicesToAdd, subscriptionId),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['subscription', subscriptionId] });
+      queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
       queryClient.invalidateQueries({ queryKey: ['devices', subscriptionId] });
       queryClient.invalidateQueries({ queryKey: ['device-price'] });
       setShowDeviceTopup(false);
@@ -321,6 +323,7 @@ export default function Subscription() {
     mutationFn: () => subscriptionApi.reduceDevices(targetDeviceLimit, subscriptionId),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['subscription', subscriptionId] });
+      queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
       queryClient.invalidateQueries({ queryKey: ['devices', subscriptionId] });
       queryClient.invalidateQueries({ queryKey: ['device-reduction-info', subscriptionId] });
       setShowDeviceReduction(false);
@@ -339,6 +342,7 @@ export default function Subscription() {
     mutationFn: (gb: number) => subscriptionApi.purchaseTraffic(gb, subscriptionId),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['subscription', subscriptionId] });
+      queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
       setShowTrafficTopup(false);
       setSelectedTrafficPackage(null);
     },
@@ -364,6 +368,7 @@ export default function Subscription() {
     mutationFn: (countries: string[]) => subscriptionApi.updateCountries(countries, subscriptionId),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['subscription', subscriptionId] });
+      queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
       queryClient.invalidateQueries({ queryKey: ['countries', subscriptionId] });
       setShowServerManagement(false);
     },

src/pages/Subscriptions.tsx

@@ -2,20 +2,47 @@ import { useQuery } from '@tanstack/react-query';
 import { useNavigate } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import { subscriptionApi } from '../api/subscription';
+import { useTheme } from '../hooks/useTheme';
+import { getGlassColors } from '../utils/glassTheme';
 import SubscriptionListCard from '../components/subscription/SubscriptionListCard';
 
 function EmptyState({ onBuy }: { onBuy: () => void }) {
   const { t } = useTranslation();
+  const { isDark } = useTheme();
+  const g = getGlassColors(isDark);
+
   return (
-    <div className="bento-card p-6 text-center">
+    <div
-      <div className="mb-3 text-4xl">📋</div>
+      className="rounded-2xl border p-8 text-center"
-      <h3 className="mb-1 text-lg font-semibold">{t('subscriptions.empty', 'Нет подписок')}</h3>
+      style={{ background: g.cardBg, borderColor: g.cardBorder }}
-      <p className="mb-4 text-sm opacity-60">
+    >
+      <div
+        className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl"
+        style={{ background: g.innerBg }}
+      >
+        <svg
+          className="h-7 w-7 opacity-40"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={1.5}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V19.5a2.25 2.25 0 002.25 2.25h.75"
+          />
+        </svg>
+      </div>
+      <h3 className="mb-1 text-lg font-semibold" style={{ color: g.text }}>
+        {t('subscriptions.empty', 'Нет подписок')}
+      </h3>
+      <p className="mb-5 text-sm" style={{ color: g.textSecondary }}>
         {t('subscriptions.emptyDesc', 'У вас пока нет активных подписок')}
       </p>
       <button
         onClick={onBuy}
-        className="rounded-xl bg-blue-500 px-6 py-2.5 text-sm font-medium text-white transition-colors hover:bg-blue-600"
+        className="rounded-xl bg-accent-500 px-6 py-2.5 text-sm font-medium text-white transition-colors hover:bg-accent-600"
       >
         {t('subscriptions.buy', 'Купить подписку')}
       </button>
@@ -26,6 +53,8 @@ function EmptyState({ onBuy }: { onBuy: () => void }) {
 export default function Subscriptions() {
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const { isDark } = useTheme();
+  const g = getGlassColors(isDark);
 
   const { data, isLoading } = useQuery({
     queryKey: ['subscriptions-list'],
@@ -45,12 +74,18 @@ export default function Subscriptions() {
 
   return (
     <div className="mx-auto max-w-lg space-y-4 p-4">
-      <h1 className="text-2xl font-bold">{t('subscriptions.title', 'Мои подписки')}</h1>
+      <h1 className="text-2xl font-bold" style={{ color: g.text }}>
+        {t('subscriptions.title', 'Мои подписки')}
+      </h1>
 
       {isLoading && (
         <div className="space-y-3">
           {[1, 2].map((i) => (
-            <div key={i} className="h-28 animate-pulse rounded-2xl bg-white/5" />
+            <div
+              key={i}
+              className="h-28 animate-pulse rounded-2xl"
+              style={{ background: g.innerBg }}
+            />
           ))}
         </div>
       )}
@@ -70,9 +105,18 @@ export default function Subscriptions() {
       {!isLoading && subscriptions.length > 0 && (
         <button
           onClick={() => navigate('/subscription/purchase')}
-          className="flex w-full items-center justify-center gap-2 rounded-2xl border border-dashed border-white/20 p-4 text-sm opacity-60 transition-opacity hover:opacity-100"
+          className="flex w-full items-center justify-center gap-2 rounded-2xl border border-dashed p-4 text-sm transition-all hover:border-accent-400/30 hover:opacity-80"
+          style={{ borderColor: g.cardBorder, color: g.textSecondary }}
         >
-          <span className="text-lg">+</span>
+          <svg
+            className="h-5 w-5"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+          </svg>
           {t('subscriptions.buyAnother', 'Купить ещё тариф')}
         </button>
       )}