From 98b3cdb593fa44b1b8f2356bc43ba9788e80c729 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Mon, 30 Mar 2026 18:08:18 -0400
Subject: [PATCH] feat: add weather condition icons to WeatherCard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Maps WMO condition strings to emoji icons for current conditions and
forecast days. No external dependencies — pure emoji lookup by condition text.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/WeatherCard.vue | 32 +++++++++++++++++++++----
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/WeatherCard.vue b/frontend/src/components/WeatherCard.vue
index e83f604..1793a35 100644
--- a/frontend/src/components/WeatherCard.vue
+++ b/frontend/src/components/WeatherCard.vue
@@ -25,6 +25,23 @@ const props = defineProps<{
   tempUnit?: string
 }>()
 
+function weatherIcon(condition: string): string {
+  const c = condition.toLowerCase()
+  if (c.includes('thunderstorm')) return '⛈️'
+  if (c.includes('hail')) return '🌨️'
+  if (c.includes('snow showers')) return '🌨️'
+  if (c.includes('snow')) return '❄️'
+  if (c.includes('rain showers: violent')) return '⛈️'
+  if (c.includes('rain showers')) return '🌦️'
+  if (c.includes('drizzle') || c.includes('rain')) return '🌧️'
+  if (c.includes('fog')) return '🌫️'
+  if (c.includes('overcast')) return '☁️'
+  if (c.includes('partly cloudy')) return '⛅'
+  if (c.includes('mainly clear')) return '🌤️'
+  if (c.includes('clear')) return '☀️'
+  return '🌡️'
+}
+
 const unit = computed(() => props.tempUnit ?? 'C')
 
 const tempDelta = computed(() => {
@@ -56,6 +73,7 @@ const fetchedAtLabel = computed(() => {
       <span class="weather-fetched-at">as of {{ fetchedAtLabel }}</span>
     </div>
     <div class="weather-current">
+      <span class="weather-icon">{{ weatherIcon(weather.condition) }}</span>
       <span class="weather-temp">{{ weather.current_temp }}°{{ unit }}</span>
       <span class="weather-condition">{{ weather.condition }}</span>
     </div>
@@ -66,7 +84,7 @@ const fetchedAtLabel = computed(() => {
     <div class="weather-forecast" v-if="weather.forecast.length">
       <div v-for="day in weather.forecast" :key="day.day" class="weather-forecast-day">
         <span class="forecast-day-name">{{ day.day }}</span>
-        <span class="forecast-condition">{{ day.condition }}</span>
+        <span class="forecast-icon">{{ weatherIcon(day.condition) }}</span>
         <span class="forecast-temps">{{ day.high }}° / {{ day.low }}°</span>
       </div>
     </div>
@@ -110,6 +128,11 @@ const fetchedAtLabel = computed(() => {
   margin-bottom: 0.5rem;
 }
 
+.weather-icon {
+  font-size: 2rem;
+  line-height: 1;
+}
+
 .weather-temp {
   font-size: 2rem;
   font-weight: 700;
@@ -153,10 +176,9 @@ const fetchedAtLabel = computed(() => {
   font-weight: 600;
 }
 
-.forecast-condition {
-  color: var(--color-text-muted);
-  font-size: 0.75rem;
-  text-align: center;
+.forecast-icon {
+  font-size: 1.2rem;
+  line-height: 1;
 }
 
 .forecast-temps {