From 2de09b2a5d4570bc90915fa051d581e647f06ec6 Mon Sep 17 00:00:00 2001
From: Julien Herr <julien@herr.fr>
Date: Sat, 23 May 2026 17:39:55 +0200
Subject: [PATCH] refactor(home): dedupe byte formatting in storage cards

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/routes/home.tsx | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/routes/home.tsx b/src/routes/home.tsx
index b683630..5dd862a 100644
--- a/src/routes/home.tsx
+++ b/src/routes/home.tsx
@@ -50,6 +50,10 @@ function tierPercent(used: number, total: number): number {
   return Math.round((used / total) * 100);
 }
 
+function formatBytesOrDash(bytes?: number): string {
+  return bytes === undefined ? "—" : formatBytes(bytes);
+}
+
 type Tone = "success" | "danger";
 
 type StatProps = {
@@ -90,10 +94,14 @@ export async function handle(c: Context<{ Bindings: Env }>): Promise<Response> {
       ? (stats.emails_received / stats.feeds_created).toFixed(1)
       : "—";
 
-  const kvBytes = stats.kv_bytes_estimated;
-  const kvPercent = tierPercent(kvBytes ?? 0, KV_FREE_TIER_BYTES);
-  const r2Bytes = stats.attachments_bytes;
-  const r2Percent = tierPercent(r2Bytes ?? 0, R2_FREE_TIER_BYTES);
+  const kvPercent = tierPercent(
+    stats.kv_bytes_estimated ?? 0,
+    KV_FREE_TIER_BYTES,
+  );
+  const r2Percent = tierPercent(
+    stats.attachments_bytes ?? 0,
+    R2_FREE_TIER_BYTES,
+  );
 
   return c.html(
     <Layout title="Status" label="status">
@@ -184,7 +192,7 @@ export async function handle(c: Context<{ Bindings: Env }>): Promise<Response> {
           <div class="stats-grid">
             <Stat
               label="KV space used (est.)"
-              value={kvBytes === undefined ? "—" : formatBytes(kvBytes)}
+              value={formatBytesOrDash(stats.kv_bytes_estimated)}
               title={`${kvPercent}% of 1 GB free tier — estimate`}
               tone={kvPercent >= 80 ? "danger" : undefined}
             />
@@ -196,7 +204,7 @@ export async function handle(c: Context<{ Bindings: Env }>): Promise<Response> {
                 />
                 <Stat
                   label="R2 space used"
-                  value={r2Bytes === undefined ? "—" : formatBytes(r2Bytes)}
+                  value={formatBytesOrDash(stats.attachments_bytes)}
                   title={`${r2Percent}% of 10 GB free tier`}
                   tone={r2Percent >= 80 ? "danger" : undefined}
                 />