feat(dashboard): подключение устройства прикреплено к карточке подписки

На главной подключение жило отдельной плиткой под карточкой, и показывалось
только когда подписка одна: при нескольких «выбор устройства неоднозначен».
Получалось три плитки-ровни подряд — подписка, действие над этой подпиской и
покупка новой, — из которых вторая ровней не была. При нескольких подписках
подключение с главной пропадало вовсе.

Теперь это подвал самой карточки: тело ведёт в подписку, подвал — в
подключение. Одна карточка на подписку при любом их числе, отдельных плиток
нет. Карточка снаружи перестала быть `<button>` — вложенные кнопки невалидны
и ведут себя в браузерах непредсказуемо, поэтому это обёртка с двумя зонами
нажатия.

Подвал включается пропом `connect` и задан только на главной: список «Все
подписки» остаётся перечнем без действий. Где подвал есть, из строки
статистики убран счётчик лимита устройств — он дублировал бы счётчик подвала.

Акцентом подсвечивается только подписка без единого устройства: там действие
и нужно. У остальных подвал приглушён и не спорит с карточкой.

Исчерпанный лимит не блокирует кнопку, а ведёт в разбор: сколько слотов даёт
тариф, какие устройства их занимают, отключить лишнее либо добавить слоты.
Докупка скрыта на тестовой подписке и при безлимите — те же условия, что у
блока докупки на странице подписки, — и тогда текст не обещает того, чего
сделать нельзя.

Пока счётчик устройств не пришёл, подвал показывает скелетон, а не догадку о
состоянии. Его высоту задаёт невидимый спан с той же типографикой: подбор
числом даёт дробные пиксели строчного бокса, и карточка дёргается. Проверено
замером — сдвиг 0px на всех состояниях.

ResponsiveSheet: на телефоне нижний шит, с 640px обычное центрированное окно.
Шит на десктопе — плашка у нижнего края с ручкой перетаскивания, бессмысленной
для мыши. Компонент общий, остальные шиты кабинета смогут его переиспользовать.

ConnectDeviceTile не тронут и продолжает жить в карточке подписки одиночного
тарифа вместе с якорем онбординга.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/components/subscription/SubscriptionListCard.tsx

@@ -4,6 +4,8 @@ import { getGlassColors } from '../../utils/glassTheme';
 import { useHaptic } from '../../platform';
 import { CalendarIcon, CheckIcon, ChevronRightIcon, DevicesIcon } from '@/components/icons';
 import type { SubscriptionListItem } from '../../types';
+import { connectFooterState } from './connectFooterState';
+import { SubscriptionConnectFooter } from './SubscriptionConnectFooter';
 
 function formatDate(iso: string | null, locale?: string): string {
   if (!iso) return '—';
@@ -68,9 +70,20 @@ function StatusBadge({
 export default function SubscriptionListCard({
   subscription,
   onClick,
+  connect,
 }: {
   subscription: SubscriptionListItem;
   onClick: () => void;
+  /**
+   * Подключение устройства прямо из карточки. Задаётся только на главной:
+   * список «Все подписки» остаётся простым перечнем без действий.
+   */
+  connect?: {
+    /** `undefined`, пока число устройств не загрузилось. */
+    connectedDevices: number | undefined;
+    onConnect: () => void;
+    onManage: () => void;
+  };
 }) {
   const { t, i18n } = useTranslation();
   const { isDark } = useTheme();
@@ -123,89 +136,113 @@ export default function SubscriptionListCard({
           : 'rgba(255,59,92,0.03)'
         : g.cardBg;
 
+  const footer = connect
+    ? connectFooterState({
+        status: subscription.status,
+        subscriptionUrl: subscription.subscription_url,
+        deviceLimit: subscription.device_limit,
+        connected: connect.connectedDevices,
+      })
+    : { kind: 'hidden' as const };
+
+  // Подвал — своя зона нажатия, поэтому карточка снаружи не `<button>`:
+  // вложенные кнопки невалидны и ведут себя в браузерах непредсказуемо.
   return (
-    <button
-      onClick={handleClick}
-      className="w-full rounded-2xl border p-4 text-left transition-all duration-200 hover:scale-[1.01] active:scale-[0.99]"
+    <div
+      className="overflow-hidden rounded-2xl border transition-all duration-200 hover:scale-[1.01] active:scale-[0.99]"
       style={{ background: bgColor, borderColor }}
     >
-      {/* Header: tariff name + status badge + chevron */}
-      <div className="flex items-center justify-between gap-2">
-        <div className="flex min-w-0 items-center gap-2">
-          <span className="truncate text-base font-semibold" style={{ color: g.text }}>
-            {subscription.tariff_name || t('subscription.defaultName', 'Подписка')}
-          </span>
-          <StatusBadge status={subscription.status} isTrial={isTrial} t={t} />
-        </div>
-        <ChevronRightIcon className="h-4 w-4 shrink-0 opacity-30" />
-      </div>
-
-      {/* Traffic mini progress bar */}
-      {isActive && (
-        <div className="mt-3">
-          <div className="mb-1 flex items-baseline justify-between">
-            <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', 'ГБ')}`}
+      <button onClick={handleClick} className="w-full p-4 text-left">
+        {/* Header: tariff name + status badge + chevron */}
+        <div className="flex items-center justify-between gap-2">
+          <div className="flex min-w-0 items-center gap-2">
+            <span className="truncate text-base font-semibold" style={{ color: g.text }}>
+              {subscription.tariff_name || t('subscription.defaultName', 'Подписка')}
             </span>
+            <StatusBadge status={subscription.status} isTrial={isTrial} t={t} />
           </div>
-          {!isUnlimited && (
-            <div className="h-1.5 overflow-hidden rounded-full" style={{ background: g.innerBg }}>
-              <div
-                className={`h-full rounded-full transition-all ${trafficColor}`}
-                style={{ width: `${Math.max(1, trafficPercent)}%` }}
-              />
-            </div>
-          )}
+          <ChevronRightIcon className="h-4 w-4 shrink-0 opacity-30" />
         </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">
-          <DevicesIcon className="h-3.5 w-3.5 opacity-50" />
-          {subscription.device_limit}
-        </span>
-        <span className="flex items-center gap-1">
-          <CalendarIcon className="h-3.5 w-3.5 opacity-50" />
-          {formatDate(subscription.end_date, i18n.language)}
-        </span>
-        {!isTrial &&
-          (() => {
-            const isDaily = subscription.is_daily;
-            const enabled = isDaily ? !subscription.is_daily_paused : subscription.autopay_enabled;
-            const label = isDaily
-              ? t('subscription.dailyAutoCharge', 'Автосписание')
-              : t('subscription.autopay', 'Автопродление');
-            return (
-              <span
-                className={`flex items-center gap-1 ${enabled ? 'text-success-400/70' : 'text-error-400/50'}`}
-              >
-                {enabled ? (
-                  <CheckIcon className="h-3 w-3" />
-                ) : (
-                  <svg
-                    className="h-3 w-3"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth={2.5}
-                  >
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-                  </svg>
-                )}
-                {label}
+        {/* Traffic mini progress bar */}
+        {isActive && (
+          <div className="mt-3">
+            <div className="mb-1 flex items-baseline justify-between">
+              <span className="text-[11px] font-medium" style={{ color: g.textSecondary }}>
+                {t('subscription.traffic', 'Трафик')}
               </span>
-            );
-          })()}
-      </div>
-    </button>
+              <span className="text-[11px] tabular-nums" style={{ color: g.textSecondary }}>
+                {isUnlimited
+                  ? '∞'
+                  : `${trafficUsed.toFixed(1)} / ${trafficLimit} ${t('common.units.gb', 'ГБ')}`}
+              </span>
+            </div>
+            {!isUnlimited && (
+              <div className="h-1.5 overflow-hidden rounded-full" style={{ background: g.innerBg }}>
+                <div
+                  className={`h-full rounded-full transition-all ${trafficColor}`}
+                  style={{ width: `${Math.max(1, trafficPercent)}%` }}
+                />
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Stats row */}
+        <div
+          className="mt-2.5 flex items-center gap-4 text-[12px]"
+          style={{ color: g.textSecondary }}
+        >
+          {footer.kind === 'hidden' && (
+            <span className="flex items-center gap-1">
+              <DevicesIcon className="h-3.5 w-3.5 opacity-50" />
+              {subscription.device_limit}
+            </span>
+          )}
+          <span className="flex items-center gap-1">
+            <CalendarIcon className="h-3.5 w-3.5 opacity-50" />
+            {formatDate(subscription.end_date, i18n.language)}
+          </span>
+          {!isTrial &&
+            (() => {
+              const isDaily = subscription.is_daily;
+              const enabled = isDaily
+                ? !subscription.is_daily_paused
+                : subscription.autopay_enabled;
+              const label = isDaily
+                ? t('subscription.dailyAutoCharge', 'Автосписание')
+                : t('subscription.autopay', 'Автопродление');
+              return (
+                <span
+                  className={`flex items-center gap-1 ${enabled ? 'text-success-400/70' : 'text-error-400/50'}`}
+                >
+                  {enabled ? (
+                    <CheckIcon className="h-3 w-3" />
+                  ) : (
+                    <svg
+                      className="h-3 w-3"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth={2.5}
+                    >
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                  )}
+                  {label}
+                </span>
+              );
+            })()}
+        </div>
+      </button>
+
+      <SubscriptionConnectFooter
+        state={footer}
+        borderColor={borderColor}
+        mutedColor={g.textSecondary}
+        onConnect={() => connect?.onConnect()}
+        onManage={() => connect?.onManage()}
+      />
+    </div>
   );
 }