feat: tablet-first dashboard tiles and match the Hyprland border speed

1 files changed, 25 insertions, 26 deletions

diff --git a/static/modules/sbbuilder.js b/static/modules/sbbuilder.js
index 02493af..751ffdd 100644
--- a/static/modules/sbbuilder.js
+++ b/static/modules/sbbuilder.js
@@ -1,11 +1,5 @@
 const gib = (b) => (b == null ? "?" : (b / 1073741824).toFixed(1));
 const pct = (n) => (n == null ? "?" : `${Math.round(n)}%`);
-const up = (s) => {
-  if (s == null) return "?";
-  const d = Math.floor(s / 86400);
-  const h = Math.floor((s % 86400) / 3600);
-  return d ? `${d}d ${h}h` : `${h}h`;
-};
 const ago = (ts) => {
   if (!ts) return "—";
   const d = Math.max(0, Math.floor(Date.now() / 1000 - ts));
@@ -16,17 +10,20 @@ const ago = (ts) => {
 
 const ACTIVE = ["running", "busy", "starting"];
 
-function metric(label, value) {
-  const row = document.createElement("div");
-  row.className = "metric";
-  const k = document.createElement("span");
-  k.className = "k";
-  k.textContent = label;
+function tile(label, value, sub) {
+  const d = document.createElement("div");
+  d.className = "mtile";
+  const l = document.createElement("span");
+  l.className = "mlabel";
+  l.textContent = label;
   const v = document.createElement("span");
-  v.className = "v num";
+  v.className = "mvalue num";
   v.textContent = value;
-  row.append(k, v);
-  return row;
+  const s = document.createElement("span");
+  s.className = "msub";
+  s.textContent = sub || "";
+  d.append(l, v, s);
+  return d;
 }
 
 export default {
@@ -47,26 +44,28 @@ export default {
     const s = state.stats ?? {};
     const p = s.packages ?? {};
     const sr = s.slackrepo ?? {};
+    const results = sr.results ?? {};
     const jobs = state.jobs ?? [];
-
     const running = jobs.find((j) => ACTIVE.includes(j.status));
+
     const now = document.createElement("div");
     now.className = "sbb-now";
-    now.textContent = running ? `● ${running.kind || "job"} running` : "idle";
+    now.textContent = running ? `● ${running.kind || "job"}` : "idle";
     now.classList.toggle("warn", Boolean(running));
     box.append(now);
 
     const overlays = Object.entries(p).filter(([k]) => k !== "total" && k !== "shadowed");
-    const results = Object.entries(sr.results ?? {});
     box.append(
-      metric("CPU · load", `${pct(s.cpu)} · ${s.load ? s.load[0].toFixed(2) : "?"}`),
-      metric("Uptime", up(s.uptime)),
-      metric("Memory", `${gib((s.mem?.total ?? 0) - (s.mem?.available ?? 0))} / ${gib(s.mem?.total)} GiB`),
-      metric("Disk free", `${gib(s.disk?.free)} / ${gib(s.disk?.total)} GiB`),
-      metric("Packages", `${p.total ?? "?"}${overlays.length ? " · " + overlays.map(([k, v]) => `${k} ${v}`).join(" · ") : ""}`),
-      metric("Shadowed · orphans", `${p.shadowed ?? "?"} · ${s.orphans ?? "?"}`),
-      metric("Built · results", `${sr.built ?? "?"}${results.length ? " · " + results.map(([k, v]) => `${v} ${k}`).join(" · ") : ""}`),
-      metric("Overlay pulls", Object.entries(s.sync ?? {}).map(([k, v]) => `${k} ${ago(v)}`).join(" · ") || "—"),
+      tile("Packages", String(p.total ?? "?"), overlays.map(([k, v]) => `${k} ${v}`).join(" · ")),
+      tile("Failed", String(results.failed ?? 0), `${sr.built ?? "?"} built`),
+      tile("Disk free", `${gib(s.disk?.free)}`, `of ${gib(s.disk?.total)} GiB`),
+      tile("CPU", pct(s.cpu), `load ${s.load ? s.load[0].toFixed(2) : "?"}`),
     );
+
+    const foot = document.createElement("div");
+    foot.className = "mfoot";
+    foot.textContent = `orphans ${s.orphans ?? "?"} · ${
+      Object.entries(s.sync ?? {}).map(([k, v]) => `${k} ${ago(v)}`).join(" · ") || "no pulls"}`;
+    box.append(foot);
   },
 };