fix: show actual connected devices count instead of device limit

src/components/dashboard/SubscriptionCardActive.tsx

@@ -19,6 +19,7 @@ interface SubscriptionCardActiveProps {
   } | null;
   refreshTrafficMutation: UseMutationResult<unknown, unknown, void, unknown>;
   trafficRefreshCooldown: number;
+  connectedDevices: number;
 }
 
 const RefreshIcon = ({ className = 'w-4 h-4' }: { className?: string }) => (
@@ -43,6 +44,7 @@ export default function SubscriptionCardActive({
   trafficData,
   refreshTrafficMutation,
   trafficRefreshCooldown,
+  connectedDevices,
 }: SubscriptionCardActiveProps) {
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -225,7 +227,7 @@ export default function SubscriptionCardActive({
             </div>
             <div className="mt-0.5 text-[11px] text-white/30">
               {t('dashboard.devicesOfMax', {
-                used: subscription.device_limit,
+                used: connectedDevices,
                 max: subscription.device_limit,
               })}
             </div>
@@ -238,9 +240,8 @@ export default function SubscriptionCardActive({
                 key={i}
                 className="h-[7px] w-[7px] rounded-full transition-all duration-300"
                 style={{
-                  background:
+                  background: i < connectedDevices ? zone.mainHex : 'rgba(255,255,255,0.08)',
-                    i < subscription.device_limit ? zone.mainHex : 'rgba(255,255,255,0.08)',
+                  boxShadow: i < connectedDevices ? `0 0 6px ${zone.mainHex}50` : 'none',
-                  boxShadow: i < subscription.device_limit ? `0 0 6px ${zone.mainHex}50` : 'none',
                 }}
               />
             ))}

src/pages/Dashboard.tsx

@@ -61,6 +61,13 @@ export default function Dashboard() {
     enabled: !subscription && !subLoading,
   });
 
+  const { data: devicesData } = useQuery({
+    queryKey: ['devices'],
+    queryFn: subscriptionApi.getDevices,
+    enabled: !!subscription,
+    staleTime: API.BALANCE_STALE_TIME_MS,
+  });
+
   const { data: referralInfo, isLoading: refLoading } = useQuery({
     queryKey: ['referral-info'],
     queryFn: referralApi.getReferralInfo,
@@ -241,6 +248,7 @@ export default function Dashboard() {
           trafficData={trafficData}
           refreshTrafficMutation={refreshTrafficMutation}
           trafficRefreshCooldown={trafficRefreshCooldown}
+          connectedDevices={devicesData?.total ?? 0}
         />
       ) : null}