393 files

custom_components/maintenance_supporter/frontend-src/components/budget-section-card.ts

@@ -10,7 +10,7 @@ import { LitElement, html, css, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 import { t, syncLocaleFromHass, currencySymbolOf, langOf, formatCost, syncCurrencyDecimals} from "../styles";
 import { registerCustomCard } from "../helpers/register-card";
-import { describeWsError } from "../ws-errors";
+import { runWs } from "../helpers/ws-run";
 import { sectionCardSharedStyles } from "./section-card-shared-styles";
 import type { BudgetStatus, HomeAssistant } from "../types";
 
@@ -59,43 +59,33 @@ export class MaintenanceBudgetSectionCard extends LitElement {
   }
 
   private async _load(): Promise<void> {
-    try {
-      const r = await this.hass.connection.sendMessagePromise<BudgetStatus>({
-        type: "maintenance_supporter/budget_status",
-      });
-      this._status = r;
-      syncCurrencyDecimals(r);
-      this._localMonthly = r.monthly_budget ? String(r.monthly_budget) : "";
-      this._localYearly = r.yearly_budget ? String(r.yearly_budget) : "";
-      this._dirty = false;
-    } catch (e) {
-      this._error = describeWsError(e, this._lang);
-    }
+    const r = await runWs<BudgetStatus>(this, { type: "maintenance_supporter/budget_status" }, {
+      onError: (m) => { this._error = m; },
+    });
+    if (!r) return;
+    this._status = r;
+    syncCurrencyDecimals(r);
+    this._localMonthly = r.monthly_budget ? String(r.monthly_budget) : "";
+    this._localYearly = r.yearly_budget ? String(r.yearly_budget) : "";
+    this._dirty = false;
   }
 
   private async _save(): Promise<void> {
     if (!this._isAdmin) return;
-    this._busy = true;
     this._error = "";
-    try {
-      // An emptied field means "remove this budget" and must SEND 0 (the
-      // backend's off-state) — omitting the key kept the old value, so a
-      // budget could never be cleared from this card (bug audit 2026-08-22).
-      const m = this._localMonthly.trim() === "" ? 0 : parseFloat(this._localMonthly);
-      const y = this._localYearly.trim() === "" ? 0 : parseFloat(this._localYearly);
-      const settings: Record<string, number> = {};
-      if (!isNaN(m) && m >= 0) settings.budget_monthly = m;
-      if (!isNaN(y) && y >= 0) settings.budget_yearly = y;
-      await this.hass.connection.sendMessagePromise({
-        type: "maintenance_supporter/global/update",
-        settings,
-      });
-      await this._load();
-    } catch (e) {
-      this._error = describeWsError(e, this._lang);
-    } finally {
-      this._busy = false;
-    }
+    // An emptied field means "remove this budget" and must SEND 0 (the
+    // backend's off-state) — omitting the key kept the old value, so a
+    // budget could never be cleared from this card (bug audit 2026-08-22).
+    const m = this._localMonthly.trim() === "" ? 0 : parseFloat(this._localMonthly);
+    const y = this._localYearly.trim() === "" ? 0 : parseFloat(this._localYearly);
+    const settings: Record<string, number> = {};
+    if (!isNaN(m) && m >= 0) settings.budget_monthly = m;
+    if (!isNaN(y) && y >= 0) settings.budget_yearly = y;
+    await runWs(this, { type: "maintenance_supporter/global/update", settings }, {
+      busy: (b) => { this._busy = b; },
+      reload: () => this._load(),
+      onError: (msg) => { this._error = msg; },
+    });
   }
 
   private _onDeepLink(): void {
@@ -257,8 +247,10 @@ export class MaintenanceBudgetSectionCard extends LitElement {
     .bar-fill.ok { background: var(--primary-color); }
     .bar-fill.warning { background: #ff9800; }
     .bar-fill.danger { background: var(--error-color, #f44336); }
+    /* minmax(0, …): a bare 1fr never shrinks below the number inputs'
+       natural width — the row was 420 px wide on a phone (2026-09-27). */
     .inputs-row {
-      display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
+      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
       padding-top: 4px; border-top: 1px solid var(--divider-color);
     }
     .input-field { display: flex; flex-direction: column; gap: 4px; }
@@ -268,7 +260,7 @@ export class MaintenanceBudgetSectionCard extends LitElement {
     }
     .input-wrap { position: relative; display: flex; align-items: center; }
     .input-wrap input {
-      flex: 1; padding: 6px 32px 6px 8px; font-size: 13px;
+      flex: 1; min-width: 0; width: 100%; box-sizing: border-box; padding: 6px 32px 6px 8px; font-size: 13px;
       background: var(--secondary-background-color, #2c2c2c);
       color: var(--primary-text-color);
       border: 1px solid var(--divider-color); border-radius: 6px;