v0.0.3

src/web/js/80-settings-realtime.js

@@ -2,29 +2,46 @@
 async function loadQuota() {
   const summary = $("#quota-summary span");
   const bar = $("#quota-bar");
-  if (!summary || !bar) return;
-  summary.textContent = "Loading quota…";
-  bar.style.width = "0%";
+  const sidebar = $("#folder-quota");
+  const sidebarText = $("#folder-quota-text");
+  const sidebarBar = $("#folder-quota-bar");
+  if (!summary && !sidebarText) return;
+  if (summary) summary.textContent = tr("loading_quota", "Loading quota…");
+  if (bar) bar.style.width = "0%";
+  if (sidebarText) sidebarText.textContent = tr("loading", "Loading…");
+  if (sidebarBar) sidebarBar.style.width = "0%";
+  const setLevel = (level) => {
+    for (const box of [$("#quota-summary"), sidebar]) {
+      box?.classList.toggle("quota-warning", level === "warning");
+      box?.classList.toggle("quota-danger", level === "danger");
+    }
+  };
   try {
     const quota = await request("/quota", { method: "GET" });
     const used = Number(quota.usage_bytes || 0);
     const limit = Number(quota.limit_bytes || 0);
     if (limit > 0) {
       const percent = Math.max(0, Math.min(100, (used / limit) * 100));
-      summary.textContent = `${formatBytes(used)} of ${formatBytes(limit)} (${percent.toFixed(1)}%)`;
-      bar.style.width = `${percent}%`;
-      const quotaBox = $("#quota-summary");
+      if (summary) summary.textContent = `${formatBytes(used)} ${tr("of", "of")} ${formatBytes(limit)} (${percent.toFixed(1)}%)`;
+      if (bar) bar.style.width = `${percent}%`;
+      if (sidebarText) sidebarText.textContent = `${percent.toFixed(0)}% · ${formatBytes(used)} / ${formatBytes(limit)}`;
+      if (sidebarBar) sidebarBar.style.width = `${percent}%`;
       const level = percent >= 95 ? "danger" : percent >= 80 ? "warning" : "normal";
-      quotaBox?.classList.toggle("quota-warning", level === "warning");
-      quotaBox?.classList.toggle("quota-danger", level === "danger");
+      setLevel(level);
       if (level !== "normal" && state.quotaWarningLevel !== `${state.accountId}:${level}`) {
         state.quotaWarningLevel = `${state.accountId}:${level}`;
         toast(level === "danger" ? `Mailbox storage is ${percent.toFixed(0)}% full` : `Mailbox storage is ${percent.toFixed(0)}% used`, level === "danger" ? "error" : "warning");
       }
     } else {
-      summary.textContent = `${formatBytes(used)} used · server limit unavailable`;
+      if (summary) summary.textContent = `${formatBytes(used)} ${tr("used", "used")} · ${tr("server_limit_unavailable", "server limit unavailable")}`;
+      if (sidebarText) sidebarText.textContent = `${formatBytes(used)} ${tr("used", "used")}`;
+      setLevel("normal");
     }
-  } catch (error) { summary.textContent = `Quota unavailable: ${error.message}`; }
+  } catch (error) {
+    if (summary) summary.textContent = `${tr("quota_unavailable", "Quota unavailable")}: ${error.message}`;
+    if (sidebarText) sidebarText.textContent = tr("unavailable", "Unavailable");
+    setLevel("normal");
+  }
 }
 
 function openSettings(tab = "appearance") {