From ede982f61026a9c5dee0dc5f1829b830e0a33601 Mon Sep 17 00:00:00 2001
From: Emi Griffith <me@emigriffith.dev>
Date: Fri, 10 Jul 2026 18:27:45 -0700
Subject: [PATCH] Weekly page: no-rain visuals adopt the dry-streak look
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On the Weekly page, no-rain (0") days now warm with the dry-streak ramp
(tan→red, deepening to a 14-day cap) instead of a flat blue/tan, matching
the Dry chart and calendar's dry-period language:

- Precip trend chart: no-rain day dots colored by drynessColor(dsr).
- "Daily, graded" timeline strip: Rain-row dry cells tinted by dsr via a
  new optional color override on rdCell.

Rain days keep their intensity-tier colors; unknown streaks fall back to
the prior flat color, so nothing regresses.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019VP23wKmjS2ozk1g5a9g1Z
---
 static/app.js | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/static/app.js b/static/app.js
index e27d13c..08703a3 100644
--- a/static/app.js
+++ b/static/app.js
@@ -169,11 +169,11 @@ function render(data) {
 // One tinted value cell: background + value colored by the day's grade tier for
 // that metric (the same diverging scale as everywhere else). Carries the date so
 // tapping any cell opens that day's full breakdown.
-function rdCell(g, fmt, date, isFc, isToday) {
+function rdCell(g, fmt, date, isFc, isToday, override) {
   const dd = date ? ` data-date="${date}"` : "";
   const cls = "rd-c" + (isFc ? " rd-fc" : isToday ? " rd-today" : "");
   if (!g) return `<span class="${cls}"${dd}>—</span>`;
-  const col = TIER_COLORS[g.class] || "";
+  const col = override || TIER_COLORS[g.class] || "";
   return `<span class="${cls}"${dd} style="--c:${col}">${fmt(g.value)}</span>`;
 }
 
@@ -197,7 +197,14 @@ function daysTable(rows, todayDate) {
   }).join("");
   const body = RD_METRICS.map(([key, label, fmt]) =>
     `<div class="rd-mlabel">${label}</div>` +
-    rows.map((d) => rdCell(d[key], fmt, d.date, isFc(d), d.date === todayDate)).join("")
+    rows.map((d) => {
+      // No-rain days in the Rain row take the dry-streak warmth (tan→red, deepening
+      // with the streak) — matching the Dry chart and calendar — instead of one flat
+      // "dry" tint. Falls back to the flat dry color when the streak is unknown.
+      const dry = key === "precip" && d.precip && d.precip.class === "dry";
+      const override = dry ? drynessColor(d.dsr) : null;
+      return rdCell(d[key], fmt, d.date, isFc(d), d.date === todayDate, override);
+    }).join("")
   ).join("");
   return `<div class="rd-scroll"><div class="rd-grid" style="${cols}">${header}${body}</div></div>`;
 }
@@ -578,7 +585,9 @@ function precipChart(days, n, xFor, C) {
     days, n, xFor, C, key: "precip", color: C.precip, fan: RAIN_FAN, hasNormals: true, baseZero: true,
     getVal: (d) => (d.precip ? d.precip.value : null),
     getPct: (d) => (d.precip ? d.precip.percentile : null),
-    dotColor: (d) => (d.precip && d.precip.value > 0 ? (TIER_COLORS[d.precip.class] || C.precip) : C.precip),
+    // Rain days take their intensity-tier color; no-rain days warm with the dry
+    // streak (tan→red) so a dry spell reads as dry, matching the Dry chart.
+    dotColor: (d) => (d.precip && d.precip.value > 0 ? (TIER_COLORS[d.precip.class] || C.precip) : (drynessColor(d.dsr) || C.precip)),
     fmtAxis: (v) => `${v.toFixed(2)}"`,
     fmtLabel: (v) => `${v.toFixed(2)}"`,
     labelOn: (v) => v > 0,   // only label rain days; dry days rest on the baseline