fix: hide inactive devices usage summary

frontend/src/webapp/screens/DevicesScreen.svelte

@@ -12,6 +12,7 @@
 
   export let devicesBusy = false;
   export let devicesData = {};
+  export let devicesErrorCode = "";
   export let devicesIsError = false;
   export let devicesLoaded = false;
   export let devicesStatus = "";
@@ -21,54 +22,72 @@
   export let openDeviceDisconnectDialog = () => {};
   export let openDeviceTopupModal = () => {};
   export let t = (key) => key;
+
+  $: deviceList = Array.isArray(devicesData?.devices) ? devicesData.devices : [];
+  $: hasDevices = deviceList.length > 0;
+  $: subscriptionNotActiveError =
+    devicesErrorCode === "subscription_not_active" ||
+    devicesStatus === "Subscription is not active";
+  $: hideDevicesSummary = !subscription?.active && !hasDevices;
+  $: showInactiveDevicesNotice =
+    hideDevicesSummary &&
+    !(devicesBusy && !devicesLoaded) &&
+    (!devicesStatus || subscriptionNotActiveError);
 </script>
 
 <main class="content with-nav">
-  <Card class="devices-summary-card">
-    <div class="devices-summary-head">
-      <Smartphone size={28} />
-      <span>
-        <strong>{t("wa_devices_title")}</strong>
-        <small>{devicesCountLabel(devicesData, t)}</small>
-      </span>
-      <Button
-        variant="icon"
-        size="icon"
-        onclick={() => loadDevices(true)}
-        disabled={devicesBusy}
-        aria-label={t("wa_devices_refresh")}
-      >
-        <RefreshCw size={18} />
-      </Button>
-    </div>
-    <LinearProgress
-      class="devices-progress"
-      value={devicesPercent(devicesData)}
-      label={t("wa_devices_title")}
-    />
-    {#if Number(subscription?.extra_hwid_devices || 0) > 0 && subscription?.extra_hwid_devices_valid_until_text}
-      <p class="devices-topup-validity">
-        {t("wa_hwid_devices_valid_until", {
-          count: Number(subscription.extra_hwid_devices || 0),
-          date: subscription.extra_hwid_devices_valid_until_text,
-        })}
-      </p>
-    {/if}
-    {#if subscription?.active && subscription?.max_devices !== 0 && subscription?.can_topup_devices}
-      <Button variant="secondary" class="wide" onclick={openDeviceTopupModal}>
-        <Plus size={17} />
-        {t("wa_buy_hwid_devices")}
-      </Button>
-    {/if}
-  </Card>
+  {#if !hideDevicesSummary}
+    <Card class="devices-summary-card">
+      <div class="devices-summary-head">
+        <Smartphone size={28} />
+        <span>
+          <strong>{t("wa_devices_title")}</strong>
+          <small>{devicesCountLabel(devicesData, t)}</small>
+        </span>
+        <Button
+          variant="icon"
+          size="icon"
+          onclick={() => loadDevices(true)}
+          disabled={devicesBusy}
+          aria-label={t("wa_devices_refresh")}
+        >
+          <RefreshCw size={18} />
+        </Button>
+      </div>
+      <LinearProgress
+        class="devices-progress"
+        value={devicesPercent(devicesData)}
+        label={t("wa_devices_title")}
+      />
+      {#if Number(subscription?.extra_hwid_devices || 0) > 0 && subscription?.extra_hwid_devices_valid_until_text}
+        <p class="devices-topup-validity">
+          {t("wa_hwid_devices_valid_until", {
+            count: Number(subscription.extra_hwid_devices || 0),
+            date: subscription.extra_hwid_devices_valid_until_text,
+          })}
+        </p>
+      {/if}
+      {#if subscription?.active && subscription?.max_devices !== 0 && subscription?.can_topup_devices}
+        <Button variant="secondary" class="wide" onclick={openDeviceTopupModal}>
+          <Plus size={17} />
+          {t("wa_buy_hwid_devices")}
+        </Button>
+      {/if}
+    </Card>
+  {/if}
 
   {#if devicesBusy && !devicesLoaded}
     <EmptyCard>{t("wa_devices_loading")}</EmptyCard>
+  {:else if showInactiveDevicesNotice}
+    <EmptyCard class="devices-empty-card devices-inactive-card">
+      <CircleX size={28} />
+      <span>{t("wa_home_subscription_inactive")}</span>
+    </EmptyCard>
   {:else if devicesStatus}
     <EmptyCard>
       <StatusMessage error={devicesIsError}>{devicesStatus}</StatusMessage>
     </EmptyCard>
-  {:else if !devicesData?.devices?.length}
+  {:else if !hasDevices}
     <EmptyCard class="devices-empty-card">
       <Smartphone size={28} />
       <span>{t("wa_devices_empty")}</span>
@@ -76,7 +95,7 @@
     </EmptyCard>
   {:else}
     <div class="devices-list">
-      {#each devicesData.devices as device (device.token || device.index)}
+      {#each deviceList as device (device.token || device.index)}
         <Card class="device-card">
           <div class="device-card-head">
             <div class="device-icon"><Smartphone size={20} /></div>