From 7780ef42a38aa47c7ed8bfca4e637fcf76078e01 Mon Sep 17 00:00:00 2001
From: jtricerolph <info@tricerolph.com>
Date: Tue, 25 Aug 2026 13:18:19 +0000
Subject: [PATCH] Hide trivial rain% (<15%) -- was contradicting the 'Dry
 today' headline

The headline is icon-based (does any hour have a rain-classified icon), not
precip_prob-based, so an hour can have a non-rain icon and still carry a
token 5% chance -- both numbers are real, they're just independent fields.
Nothing was gating the tiny one from display, so a hour card could show
'5%' right next to 'Dry today'. New MIN_PRECIP_DISPLAY threshold (15) hides
percentages below that everywhere it's shown (hourly cards, next-2-days
cards, the Now hero line) rather than second-guessing the provider's own
icon classification.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 frontend/src/pages/Display.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/Display.tsx b/frontend/src/pages/Display.tsx
index da37a09..2286120 100644
--- a/frontend/src/pages/Display.tsx
+++ b/frontend/src/pages/Display.tsx
@@ -33,6 +33,12 @@ function compassFromDeg(deg: number): string {
   return COMPASS[Math.round(deg / 45) % 8]
 }
 
+// Below this, a rain% reads as noise, not information — and worse, it can visibly
+// contradict the "Dry today" headline (which is icon-based, not precip_prob-based:
+// an hour can have a non-rain icon and still carry a token 5% chance). Hiding trivial
+// percentages keeps what's shown consistent with what "Dry today" is actually saying.
+const MIN_PRECIP_DISPLAY = 15
+
 function roundTemp(c: number): string {
   return `${Math.round(c)}°`
 }
@@ -55,14 +61,15 @@ function AstroRow({ astro }: { astro?: Astro }) {
 // the text size for today's hourly cards; the next-2-days cards stay at the
 // smaller default so today still reads as the primary/detailed view.
 function PointMeta({ point, large }: { point: ForecastPoint; large?: boolean }) {
-  if (point.precip_prob == null && point.wind_speed_mph == null) return null
+  const showPrecip = point.precip_prob != null && point.precip_prob >= MIN_PRECIP_DISPLAY
+  if (!showPrecip && point.wind_speed_mph == null) return null
   const iconSize = large ? 13 : 10
   return (
     <span className={`wx-meta${large ? ' wx-meta-lg' : ''}`}>
-      {point.precip_prob != null && (
+      {showPrecip && (
         <span className="wx-meta-line wx-meta-precip">
           <Droplet size={iconSize} strokeWidth={2} />
-          {Math.round(point.precip_prob)}%
+          {Math.round(point.precip_prob!)}%
         </span>
       )}
       {point.wind_speed_mph != null && (
@@ -165,8 +172,8 @@ export default function Display() {
             {data.summary && <span className="wx-summary-headline">{data.summary.headline}</span>}
             <span>
               {currentPoint.feels_like_c != null && <>Feels like {roundTemp(currentPoint.feels_like_c)}</>}
-              {currentPoint.feels_like_c != null && currentPoint.precip_prob != null && ' · '}
-              {currentPoint.precip_prob != null && <>{Math.round(currentPoint.precip_prob)}% chance of rain</>}
+              {currentPoint.feels_like_c != null && currentPoint.precip_prob != null && currentPoint.precip_prob >= MIN_PRECIP_DISPLAY && ' · '}
+              {currentPoint.precip_prob != null && currentPoint.precip_prob >= MIN_PRECIP_DISPLAY && <>{Math.round(currentPoint.precip_prob)}% chance of rain</>}
             </span>
             {data.summary?.note && <span className="wx-summary-note">{data.summary.note}</span>}
           </div>