fix: mark depleted traffic on webapp home

frontend/src/styles/webapp.css

@@ -337,6 +337,33 @@ a {
   cursor: pointer;
 }
 
+.traffic-card-depleted {
+  border-color: var(--danger-border);
+  background:
+    linear-gradient(
+      135deg,
+      color-mix(in srgb, var(--danger) 16%, var(--surface-sheen-soft)),
+      var(--surface-sheen-soft)
+    ),
+    var(--panel);
+}
+
+.traffic-card-depleted .traffic-top span,
+.traffic-card-depleted .traffic-top strong,
+.traffic-card-depleted .traffic-meta,
+.traffic-card-depleted .traffic-percent {
+  color: var(--danger-text);
+}
+
+.traffic-card-depleted .progress {
+  background: color-mix(in srgb, var(--danger) 18%, transparent);
+}
+
+.traffic-card-depleted .progress span {
+  background: linear-gradient(90deg, var(--danger), color-mix(in srgb, var(--danger) 68%, white));
+  box-shadow: 0 0 18px color-mix(in srgb, var(--danger) 40%, transparent);
+}
+
 .card-click-target {
   position: absolute;
   z-index: 6;

frontend/src/webapp/screens/HomeScreen.svelte

@@ -51,6 +51,22 @@
   function trafficResetLabel(sub) {
     return trafficResetLabelFn(sub, t);
   }
+  function regularTrafficDepleted(sub = subscription) {
+    const used = Number(sub?.traffic_used_bytes || 0);
+    const limit = Number(sub?.traffic_limit_bytes || 0);
+    return limit > 0 && used >= limit;
+  }
+  function regularTrafficCardClass(sub = subscription) {
+    return [
+      regularTrafficTopupBarClickable ? "traffic-card-clickable" : "",
+      regularTrafficDepleted(sub) ? "traffic-card-depleted" : "",
+    ]
+      .filter(Boolean)
+      .join(" ");
+  }
+  function regularTrafficMetaLabel(sub = subscription) {
+    return regularTrafficDepleted(sub) ? t("wa_traffic_depleted") : trafficResetLabel(sub);
+  }
   function premiumTrafficPercent(sub) {
     return premiumTrafficPercentFn(sub);
   }
@@ -140,7 +156,7 @@
     </Card>
 
     {#if subscription.active}
-      <Card class={regularTrafficTopupBarClickable ? "traffic-card-clickable" : ""}>
+      <Card class={regularTrafficCardClass(subscription)}>
         {#if regularTrafficTopupBarClickable}
           <button
             class="card-click-target"
@@ -155,7 +171,7 @@
         </div>
         <LinearProgress value={trafficPercent(subscription)} label={t("wa_home_traffic_used")} />
         <div class="traffic-meta">
-          <span>{trafficResetLabel(subscription)}</span>
+          <span>{regularTrafficMetaLabel(subscription)}</span>
           <span class="traffic-percent">{trafficPercent(subscription)}%</span>
         </div>
       </Card>

locales/en.json

@@ -821,6 +821,7 @@
   "wa_method_other_title": "Other methods",
   "wa_unlimited_traffic": "Unlimited traffic",
   "wa_traffic_of": "{used} of {limit}",
+  "wa_traffic_depleted": "Traffic depleted",
   "wa_language_default": "English",
   "wa_telegram_not_linked": "Telegram not linked",
   "wa_tg_id_not_linked": "TG ID not linked",

locales/ru.json

@@ -821,6 +821,7 @@
   "wa_method_other_title": "Другие способы",
   "wa_unlimited_traffic": "Безлимитный трафик",
   "wa_traffic_of": "{used} из {limit}",
+  "wa_traffic_depleted": "Трафик закончился",
   "wa_language_default": "Русский",
   "wa_telegram_not_linked": "Telegram не привязан",
   "wa_tg_id_not_linked": "TG ID не привязан",