feat: add quota settings UI to dashboard (#101)

* feat: add quota settings UI to dashboard (#92)

Allow users to configure quota refresh interval, warning thresholds,
and skip-exhausted toggle directly from the web dashboard instead of
editing YAML manually.

* docs: update CHANGELOG for quota settings UI

---------

Co-authored-by: icebear0828 <icebear0828@users.noreply.github.com>

CHANGELOG.md

@@ -6,6 +6,10 @@
 
 ## [Unreleased]
 
+### Added
+
+- Dashboard 额度设置面板：可在 Web UI 直接调整额度刷新间隔、主/次预警阈值、自动跳过耗尽账号开关，无需手动编辑 YAML；API `GET/POST /admin/quota-settings` 支持鉴权 (#92)
+
 ### Fixed
 
 - macOS Electron 桌面版登录报 `spawn Unknown system error -86`：CI 在 arm64 runner 上同时构建 arm64/x64 DMG，但只下载 arm64 的 curl-impersonate，导致 Intel Mac 用户 spawn 失败（EBADARCH）；拆分为 per-arch 构建 + `setup-curl.ts` 支持 `--arch` 交叉下载；错误提示改为明确的架构不匹配诊断 (#96)

shared/hooks/use-quota-settings.ts

@@ -0,0 +1,63 @@
+import { useState, useEffect, useCallback } from "preact/hooks";
+
+export interface QuotaSettingsData {
+  refresh_interval_minutes: number;
+  warning_thresholds: { primary: number[]; secondary: number[] };
+  skip_exhausted: boolean;
+}
+
+export function useQuotaSettings(apiKey: string | null) {
+  const [data, setData] = useState<QuotaSettingsData | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [saved, setSaved] = useState(false);
+
+  const load = useCallback(async () => {
+    try {
+      const resp = await fetch("/admin/quota-settings");
+      if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+      const result: QuotaSettingsData = await resp.json();
+      setData(result);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  }, []);
+
+  const save = useCallback(async (patch: Partial<QuotaSettingsData>) => {
+    setSaving(true);
+    setSaved(false);
+    setError(null);
+    try {
+      const headers: Record<string, string> = { "Content-Type": "application/json" };
+      if (apiKey) {
+        headers["Authorization"] = `Bearer ${apiKey}`;
+      }
+      const resp = await fetch("/admin/quota-settings", {
+        method: "POST",
+        headers,
+        body: JSON.stringify(patch),
+      });
+      if (!resp.ok) {
+        const body = await resp.json().catch(() => ({ error: `HTTP ${resp.status}` }));
+        throw new Error((body as { error?: string }).error ?? `HTTP ${resp.status}`);
+      }
+      const result = await resp.json() as { success: boolean } & QuotaSettingsData;
+      setData({
+        refresh_interval_minutes: result.refresh_interval_minutes,
+        warning_thresholds: result.warning_thresholds,
+        skip_exhausted: result.skip_exhausted,
+      });
+      setSaved(true);
+      setTimeout(() => setSaved(false), 3000);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setSaving(false);
+    }
+  }, [apiKey]);
+
+  useEffect(() => { load(); }, [load]);
+
+  return { data, saving, saved, error, save, load };
+}

shared/i18n/translations.ts

@@ -181,6 +181,14 @@ export const translations = {
     statusSkip: "Skip",
     quotaCriticalWarning: "{count} account(s) approaching quota limit",
     quotaWarning: "{count} account(s) quota usage elevated",
+    quotaSettings: "Quota Settings",
+    quotaRefreshInterval: "Refresh Interval",
+    quotaRefreshIntervalHint: "How often to check account quota in the background.",
+    quotaPrimaryThresholds: "Primary Warning Thresholds (%)",
+    quotaSecondaryThresholds: "Secondary Warning Thresholds (%)",
+    quotaThresholdsHint: "Comma-separated percentages (1–100). Highest = critical, rest = warning.",
+    quotaSkipExhausted: "Auto-skip exhausted accounts",
+    quotaSaved: "Saved",
   },
   zh: {
     serverOnline: "\u670d\u52a1\u8fd0\u884c\u4e2d",
@@ -367,6 +375,14 @@ export const translations = {
     statusSkip: "\u8df3\u8fc7",
     quotaCriticalWarning: "{count} \u4e2a\u8d26\u53f7\u989d\u5ea6\u5373\u5c06\u8017\u5c3d",
     quotaWarning: "{count} \u4e2a\u8d26\u53f7\u989d\u5ea6\u7528\u91cf\u8f83\u9ad8",
+    quotaSettings: "\u989d\u5ea6\u8bbe\u7f6e",
+    quotaRefreshInterval: "\u5237\u65b0\u95f4\u9694",
+    quotaRefreshIntervalHint: "\u540e\u53f0\u68c0\u67e5\u8d26\u53f7\u989d\u5ea6\u7684\u9891\u7387\u3002",
+    quotaPrimaryThresholds: "\u4e3b\u989d\u5ea6\u9884\u8b66\u9608\u503c (%)",
+    quotaSecondaryThresholds: "\u6b21\u989d\u5ea6\u9884\u8b66\u9608\u503c (%)",
+    quotaThresholdsHint: "\u9017\u53f7\u5206\u9694\u7684\u767e\u5206\u6bd4 (1\u2013100)\uff0c\u6700\u9ad8\u503c=\u4e25\u91cd\uff0c\u5176\u4f59=\u8b66\u544a\u3002",
+    quotaSkipExhausted: "\u81ea\u52a8\u8df3\u8fc7\u989d\u5ea6\u8017\u5c3d\u8d26\u53f7",
+    quotaSaved: "\u5df2\u4fdd\u5b58",
   },
 } as const;
 

src/routes/__tests__/quota-settings.test.ts

@@ -0,0 +1,201 @@
+/**
+ * Tests for quota settings endpoints.
+ * GET  /admin/quota-settings — read current quota config
+ * POST /admin/quota-settings — update quota config
+ */
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+// --- Mocks (before any imports) ---
+
+const mockConfig = {
+  server: { proxy_api_key: null as string | null },
+  quota: {
+    refresh_interval_minutes: 5,
+    warning_thresholds: { primary: [80, 90], secondary: [80, 90] },
+    skip_exhausted: true,
+  },
+};
+
+vi.mock("../../config.js", () => ({
+  getConfig: vi.fn(() => mockConfig),
+  reloadAllConfigs: vi.fn(),
+}));
+
+vi.mock("../../paths.js", () => ({
+  getConfigDir: vi.fn(() => "/tmp/test-config"),
+  getPublicDir: vi.fn(() => "/tmp/test-public"),
+  getDesktopPublicDir: vi.fn(() => "/tmp/test-desktop"),
+  getDataDir: vi.fn(() => "/tmp/test-data"),
+  getBinDir: vi.fn(() => "/tmp/test-bin"),
+  isEmbedded: vi.fn(() => false),
+}));
+
+vi.mock("../../utils/yaml-mutate.js", () => ({
+  mutateYaml: vi.fn(),
+}));
+
+vi.mock("../../tls/transport.js", () => ({
+  getTransport: vi.fn(),
+  getTransportInfo: vi.fn(() => ({})),
+}));
+
+vi.mock("../../tls/curl-binary.js", () => ({
+  getCurlDiagnostics: vi.fn(() => ({})),
+}));
+
+vi.mock("../../fingerprint/manager.js", () => ({
+  buildHeaders: vi.fn(() => ({})),
+}));
+
+vi.mock("../../update-checker.js", () => ({
+  getUpdateState: vi.fn(() => ({})),
+  checkForUpdate: vi.fn(),
+  isUpdateInProgress: vi.fn(() => false),
+}));
+
+vi.mock("../../self-update.js", () => ({
+  getProxyInfo: vi.fn(() => ({})),
+  canSelfUpdate: vi.fn(() => false),
+  checkProxySelfUpdate: vi.fn(),
+  applyProxySelfUpdate: vi.fn(),
+  isProxyUpdateInProgress: vi.fn(() => false),
+  getCachedProxyUpdateResult: vi.fn(() => null),
+  getDeployMode: vi.fn(() => "git"),
+}));
+
+vi.mock("@hono/node-server/serve-static", () => ({
+  serveStatic: vi.fn(() => vi.fn()),
+}));
+
+vi.mock("@hono/node-server/conninfo", () => ({
+  getConnInfo: vi.fn(() => ({ remote: { address: "127.0.0.1" } })),
+}));
+
+import { createWebRoutes } from "../web.js";
+import { mutateYaml } from "../../utils/yaml-mutate.js";
+
+const mockPool = {
+  getAll: vi.fn(() => []),
+  acquire: vi.fn(),
+  release: vi.fn(),
+} as unknown as Parameters<typeof createWebRoutes>[0];
+
+describe("GET /admin/quota-settings", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockConfig.quota = {
+      refresh_interval_minutes: 5,
+      warning_thresholds: { primary: [80, 90], secondary: [80, 90] },
+      skip_exhausted: true,
+    };
+  });
+
+  it("returns current quota config", async () => {
+    const app = createWebRoutes(mockPool);
+    const res = await app.request("/admin/quota-settings");
+    expect(res.status).toBe(200);
+    const data = await res.json();
+    expect(data).toEqual({
+      refresh_interval_minutes: 5,
+      warning_thresholds: { primary: [80, 90], secondary: [80, 90] },
+      skip_exhausted: true,
+    });
+  });
+});
+
+describe("POST /admin/quota-settings", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockConfig.server.proxy_api_key = null;
+    mockConfig.quota = {
+      refresh_interval_minutes: 5,
+      warning_thresholds: { primary: [80, 90], secondary: [80, 90] },
+      skip_exhausted: true,
+    };
+  });
+
+  it("updates refresh interval", async () => {
+    const app = createWebRoutes(mockPool);
+    const res = await app.request("/admin/quota-settings", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ refresh_interval_minutes: 10 }),
+    });
+    expect(res.status).toBe(200);
+    const data = await res.json();
+    expect(data.success).toBe(true);
+    expect(mutateYaml).toHaveBeenCalledOnce();
+  });
+
+  it("updates warning thresholds", async () => {
+    const app = createWebRoutes(mockPool);
+    const res = await app.request("/admin/quota-settings", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        warning_thresholds: { primary: [70, 85, 95], secondary: [60] },
+      }),
+    });
+    expect(res.status).toBe(200);
+    const data = await res.json();
+    expect(data.success).toBe(true);
+  });
+
+  it("validates refresh_interval_minutes >= 1", async () => {
+    const app = createWebRoutes(mockPool);
+    const res = await app.request("/admin/quota-settings", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ refresh_interval_minutes: 0 }),
+    });
+    expect(res.status).toBe(400);
+  });
+
+  it("validates thresholds 1-100", async () => {
+    const app = createWebRoutes(mockPool);
+    const res = await app.request("/admin/quota-settings", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        warning_thresholds: { primary: [101] },
+      }),
+    });
+    expect(res.status).toBe(400);
+  });
+
+  it("requires auth when proxy_api_key is set", async () => {
+    mockConfig.server.proxy_api_key = "my-secret";
+    const app = createWebRoutes(mockPool);
+
+    // No auth → 401
+    const res1 = await app.request("/admin/quota-settings", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ refresh_interval_minutes: 10 }),
+    });
+    expect(res1.status).toBe(401);
+
+    // With auth → 200
+    const res2 = await app.request("/admin/quota-settings", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: "Bearer my-secret",
+      },
+      body: JSON.stringify({ refresh_interval_minutes: 10 }),
+    });
+    expect(res2.status).toBe(200);
+  });
+
+  it("updates skip_exhausted", async () => {
+    const app = createWebRoutes(mockPool);
+    const res = await app.request("/admin/quota-settings", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ skip_exhausted: false }),
+    });
+    expect(res.status).toBe(200);
+    expect((await res.json()).success).toBe(true);
+  });
+});

src/routes/web.ts

@@ -451,6 +451,86 @@ export function createWebRoutes(accountPool: AccountPool): Hono {
     return c.json({ proxy_api_key: config.server.proxy_api_key });
   });
 
+  // --- Quota settings endpoints ---
+
+  app.get("/admin/quota-settings", (c) => {
+    const config = getConfig();
+    return c.json({
+      refresh_interval_minutes: config.quota.refresh_interval_minutes,
+      warning_thresholds: config.quota.warning_thresholds,
+      skip_exhausted: config.quota.skip_exhausted,
+    });
+  });
+
+  app.post("/admin/quota-settings", async (c) => {
+    const config = getConfig();
+    const currentKey = config.server.proxy_api_key;
+
+    // Auth: if a key is currently set, require Bearer token matching it
+    if (currentKey) {
+      const authHeader = c.req.header("Authorization") ?? "";
+      const token = authHeader.startsWith("Bearer ") ? authHeader.slice(7) : "";
+      if (token !== currentKey) {
+        c.status(401);
+        return c.json({ error: "Invalid current API key" });
+      }
+    }
+
+    const body = await c.req.json() as {
+      refresh_interval_minutes?: number;
+      warning_thresholds?: { primary?: number[]; secondary?: number[] };
+      skip_exhausted?: boolean;
+    };
+
+    // Validate refresh_interval_minutes
+    if (body.refresh_interval_minutes !== undefined) {
+      if (!Number.isInteger(body.refresh_interval_minutes) || body.refresh_interval_minutes < 1) {
+        c.status(400);
+        return c.json({ error: "refresh_interval_minutes must be an integer >= 1" });
+      }
+    }
+
+    // Validate thresholds (1-100)
+    const validateThresholds = (arr?: number[]): boolean => {
+      if (!arr) return true;
+      return arr.every((v) => Number.isInteger(v) && v >= 1 && v <= 100);
+    };
+    if (body.warning_thresholds) {
+      if (!validateThresholds(body.warning_thresholds.primary) ||
+          !validateThresholds(body.warning_thresholds.secondary)) {
+        c.status(400);
+        return c.json({ error: "Thresholds must be integers between 1 and 100" });
+      }
+    }
+
+    const configPath = resolve(getConfigDir(), "default.yaml");
+    mutateYaml(configPath, (data) => {
+      if (!data.quota) data.quota = {};
+      const quota = data.quota as Record<string, unknown>;
+      if (body.refresh_interval_minutes !== undefined) {
+        quota.refresh_interval_minutes = body.refresh_interval_minutes;
+      }
+      if (body.warning_thresholds) {
+        const existing = (quota.warning_thresholds ?? {}) as Record<string, unknown>;
+        if (body.warning_thresholds.primary) existing.primary = body.warning_thresholds.primary;
+        if (body.warning_thresholds.secondary) existing.secondary = body.warning_thresholds.secondary;
+        quota.warning_thresholds = existing;
+      }
+      if (body.skip_exhausted !== undefined) {
+        quota.skip_exhausted = body.skip_exhausted;
+      }
+    });
+    reloadAllConfigs();
+
+    const updated = getConfig();
+    return c.json({
+      success: true,
+      refresh_interval_minutes: updated.quota.refresh_interval_minutes,
+      warning_thresholds: updated.quota.warning_thresholds,
+      skip_exhausted: updated.quota.skip_exhausted,
+    });
+  });
+
   app.post("/admin/settings", async (c) => {
     const config = getConfig();
     const currentKey = config.server.proxy_api_key;

web/src/App.tsx

@@ -10,6 +10,7 @@ import { ApiConfig } from "./components/ApiConfig";
 import { AnthropicSetup } from "./components/AnthropicSetup";
 import { CodeExamples } from "./components/CodeExamples";
 import { SettingsPanel } from "./components/SettingsPanel";
+import { QuotaSettings } from "./components/QuotaSettings";
 import { TestConnection } from "./components/TestConnection";
 import { Footer } from "./components/Footer";
 import { ProxySettings } from "./pages/ProxySettings";
@@ -148,6 +149,7 @@ function Dashboard() {
             serviceTier={status.selectedSpeed}
           />
           <SettingsPanel />
+          <QuotaSettings />
           <TestConnection />
         </div>
       </main>

web/src/components/QuotaSettings.tsx

@@ -0,0 +1,183 @@
+import { useState, useCallback } from "preact/hooks";
+import { useT } from "../../../shared/i18n/context";
+import { useQuotaSettings } from "../../../shared/hooks/use-quota-settings";
+import { useSettings } from "../../../shared/hooks/use-settings";
+
+export function QuotaSettings() {
+  const t = useT();
+  const settings = useSettings();
+  const qs = useQuotaSettings(settings.apiKey);
+
+  const [draftInterval, setDraftInterval] = useState<string | null>(null);
+  const [draftPrimary, setDraftPrimary] = useState<string | null>(null);
+  const [draftSecondary, setDraftSecondary] = useState<string | null>(null);
+  const [draftSkip, setDraftSkip] = useState<boolean | null>(null);
+  const [collapsed, setCollapsed] = useState(true);
+
+  const currentInterval = qs.data?.refresh_interval_minutes ?? 5;
+  const currentPrimary = qs.data?.warning_thresholds.primary ?? [80, 90];
+  const currentSecondary = qs.data?.warning_thresholds.secondary ?? [80, 90];
+  const currentSkip = qs.data?.skip_exhausted ?? true;
+
+  const displayInterval = draftInterval ?? String(currentInterval);
+  const displayPrimary = draftPrimary ?? currentPrimary.join(", ");
+  const displaySecondary = draftSecondary ?? currentSecondary.join(", ");
+  const displaySkip = draftSkip ?? currentSkip;
+
+  const isDirty =
+    draftInterval !== null ||
+    draftPrimary !== null ||
+    draftSecondary !== null ||
+    draftSkip !== null;
+
+  const parseThresholds = (str: string): number[] | null => {
+    if (!str.trim()) return [];
+    const parts = str.split(",").map((s) => s.trim()).filter(Boolean);
+    const nums = parts.map(Number);
+    if (nums.some((n) => isNaN(n) || !Number.isInteger(n) || n < 1 || n > 100)) return null;
+    return nums.sort((a, b) => a - b);
+  };
+
+  const handleSave = useCallback(async () => {
+    const patch: Record<string, unknown> = {};
+
+    if (draftInterval !== null) {
+      const val = parseInt(draftInterval, 10);
+      if (isNaN(val) || val < 1) return;
+      patch.refresh_interval_minutes = val;
+    }
+
+    if (draftPrimary !== null || draftSecondary !== null) {
+      const thresholds: Record<string, number[]> = {};
+      if (draftPrimary !== null) {
+        const parsed = parseThresholds(draftPrimary);
+        if (!parsed) return;
+        thresholds.primary = parsed;
+      }
+      if (draftSecondary !== null) {
+        const parsed = parseThresholds(draftSecondary);
+        if (!parsed) return;
+        thresholds.secondary = parsed;
+      }
+      patch.warning_thresholds = thresholds;
+    }
+
+    if (draftSkip !== null) {
+      patch.skip_exhausted = draftSkip;
+    }
+
+    await qs.save(patch);
+    setDraftInterval(null);
+    setDraftPrimary(null);
+    setDraftSecondary(null);
+    setDraftSkip(null);
+  }, [draftInterval, draftPrimary, draftSecondary, draftSkip, qs]);
+
+  const inputCls =
+    "w-full px-3 py-2 bg-white dark:bg-bg-dark border border-gray-200 dark:border-border-dark rounded-lg text-[0.78rem] font-mono text-slate-700 dark:text-text-main outline-none focus:ring-1 focus:ring-primary";
+
+  return (
+    <section class="bg-white dark:bg-card-dark border border-gray-200 dark:border-border-dark rounded-xl shadow-sm transition-colors">
+      <button
+        onClick={() => setCollapsed(!collapsed)}
+        class="w-full flex items-center justify-between p-5 cursor-pointer select-none"
+      >
+        <div class="flex items-center gap-2">
+          <svg class="size-5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
+          </svg>
+          <h2 class="text-[0.95rem] font-bold">{t("quotaSettings")}</h2>
+        </div>
+        <svg class={`size-5 text-slate-400 dark:text-text-dim transition-transform ${collapsed ? "" : "rotate-180"}`} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+        </svg>
+      </button>
+
+      {!collapsed && (
+        <div class="px-5 pb-5 border-t border-slate-100 dark:border-border-dark pt-4 space-y-4">
+          {/* Refresh interval */}
+          <div class="space-y-1.5">
+            <label class="text-xs font-semibold text-slate-700 dark:text-text-main">
+              {t("quotaRefreshInterval")}
+            </label>
+            <p class="text-xs text-slate-400 dark:text-text-dim">{t("quotaRefreshIntervalHint")}</p>
+            <div class="flex items-center gap-2">
+              <input
+                type="number"
+                min="1"
+                class={`${inputCls} max-w-[120px]`}
+                value={displayInterval}
+                onInput={(e) => setDraftInterval((e.target as HTMLInputElement).value)}
+              />
+              <span class="text-xs text-slate-500 dark:text-text-dim">{t("minutes")}</span>
+            </div>
+          </div>
+
+          {/* Primary thresholds */}
+          <div class="space-y-1.5">
+            <label class="text-xs font-semibold text-slate-700 dark:text-text-main">
+              {t("quotaPrimaryThresholds")}
+            </label>
+            <p class="text-xs text-slate-400 dark:text-text-dim">{t("quotaThresholdsHint")}</p>
+            <input
+              type="text"
+              class={inputCls}
+              value={displayPrimary}
+              onInput={(e) => setDraftPrimary((e.target as HTMLInputElement).value)}
+              placeholder="80, 90"
+            />
+          </div>
+
+          {/* Secondary thresholds */}
+          <div class="space-y-1.5">
+            <label class="text-xs font-semibold text-slate-700 dark:text-text-main">
+              {t("quotaSecondaryThresholds")}
+            </label>
+            <input
+              type="text"
+              class={inputCls}
+              value={displaySecondary}
+              onInput={(e) => setDraftSecondary((e.target as HTMLInputElement).value)}
+              placeholder="80, 90"
+            />
+          </div>
+
+          {/* Skip exhausted */}
+          <div class="flex items-center gap-2">
+            <input
+              type="checkbox"
+              id="skip-exhausted"
+              checked={displaySkip}
+              onChange={(e) => setDraftSkip((e.target as HTMLInputElement).checked)}
+              class="w-4 h-4 rounded border-gray-300 dark:border-border-dark text-primary focus:ring-primary cursor-pointer"
+            />
+            <label for="skip-exhausted" class="text-xs font-semibold text-slate-700 dark:text-text-main cursor-pointer">
+              {t("quotaSkipExhausted")}
+            </label>
+          </div>
+
+          {/* Save button + status */}
+          <div class="flex items-center gap-3">
+            <button
+              onClick={handleSave}
+              disabled={qs.saving || !isDirty}
+              class={`px-4 py-2 text-sm font-medium rounded-lg transition-colors whitespace-nowrap ${
+                isDirty && !qs.saving
+                  ? "bg-primary text-white hover:bg-primary/90 cursor-pointer"
+                  : "bg-slate-100 dark:bg-[#21262d] text-slate-400 dark:text-text-dim cursor-not-allowed"
+              }`}
+            >
+              {qs.saving ? "..." : t("submit")}
+            </button>
+            {qs.saved && (
+              <span class="text-xs font-medium text-green-600 dark:text-green-400">{t("quotaSaved")}</span>
+            )}
+            {qs.error && (
+              <span class="text-xs font-medium text-red-500">{qs.error}</span>
+            )}
+          </div>
+        </div>
+      )}
+    </section>
+  );
+}