refactor(weather): share the day weather anchor and icon map between desktop and phone

The day plan, the day panel, the phone timeline and the phone day sheet read
the day local weather anchor from dayWeatherAnchor, and every weather icon
comes from one map in weatherIcons.

client/src/components/Weather/WeatherWidget.tsx

@@ -1,20 +1,8 @@
 import { useState, useEffect } from 'react'
-import { Sun, Cloud, CloudRain, CloudSnow, CloudDrizzle, CloudLightning, Wind } from 'lucide-react'
 import { fetchWeather } from '../../services/weatherQueue'
 import { useSettingsStore } from '../../store/settingsStore'
 import { Tooltip } from '../shared/Tooltip'
-
-const WEATHER_ICON_MAP = {
-  Clear: Sun,
-  Clouds: Cloud,
-  Rain: CloudRain,
-  Drizzle: CloudDrizzle,
-  Thunderstorm: CloudLightning,
-  Snow: CloudSnow,
-  Mist: Wind,
-  Fog: Wind,
-  Haze: Wind,
-}
+import { weatherIconFor } from './weatherIcons'
 
 interface WeatherIconProps {
   main: string
@@ -22,7 +10,7 @@ interface WeatherIconProps {
 }
 
 function WeatherIcon({ main, size = 13 }: WeatherIconProps) {
-  const Icon = WEATHER_ICON_MAP[main] || Cloud
+  const Icon = weatherIconFor(main)
   return <Icon size={size} strokeWidth={1.8} />
 }
 

client/src/components/Weather/weatherIcons.test.ts

@@ -0,0 +1,35 @@
+// FE-WEATHER-ICONS-001 to -002: the one condition-to-icon map behind the day plan's
+// weather badge, the desktop day panel and the phone's timeline and day sheet.
+// FE-WEATHER-ICONS-001 is the case FE-MOB-PTLM-041 held while the map lived in the
+// phone's timeline model.
+import { Cloud, CloudDrizzle, CloudLightning, CloudRain, CloudSnow, Sun, Wind } from 'lucide-react';
+import { describe, expect, it } from 'vitest';
+
+import { WEATHER_ICON_MAP, weatherIconFor } from './weatherIcons';
+
+describe('weatherIcons', () => {
+  it('FE-WEATHER-ICONS-001: maps the known conditions and defaults to a cloud', () => {
+    expect(weatherIconFor('Clear')).toBe(Sun);
+    expect(weatherIconFor('Rain')).toBe(CloudRain);
+    expect(weatherIconFor('Thunderstorm')).toBe(CloudLightning);
+    expect(weatherIconFor('Snow')).toBe(CloudSnow);
+    expect(weatherIconFor('Haze')).toBe(Wind);
+    expect(weatherIconFor('Tornado')).toBe(Cloud);
+    expect(weatherIconFor(undefined)).toBe(Cloud);
+    expect(weatherIconFor('')).toBe(Cloud);
+  });
+
+  it('FE-WEATHER-ICONS-002: covers every condition the forecast names', () => {
+    expect(WEATHER_ICON_MAP).toEqual({
+      Clear: Sun,
+      Clouds: Cloud,
+      Rain: CloudRain,
+      Drizzle: CloudDrizzle,
+      Thunderstorm: CloudLightning,
+      Snow: CloudSnow,
+      Mist: Wind,
+      Fog: Wind,
+      Haze: Wind,
+    });
+  });
+});

client/src/components/Weather/weatherIcons.ts

@@ -0,0 +1,19 @@
+import { Cloud, CloudDrizzle, CloudLightning, CloudRain, CloudSnow, Sun, Wind, type LucideIcon } from 'lucide-react';
+
+/** The icon for each weather condition the forecast names. */
+export const WEATHER_ICON_MAP: Record<string, LucideIcon> = {
+  Clear: Sun,
+  Clouds: Cloud,
+  Rain: CloudRain,
+  Drizzle: CloudDrizzle,
+  Thunderstorm: CloudLightning,
+  Snow: CloudSnow,
+  Mist: Wind,
+  Fog: Wind,
+  Haze: Wind,
+};
+
+/** The icon for a forecast's condition; an unknown or missing one shows a cloud. */
+export function weatherIconFor(main: string | undefined): LucideIcon {
+  return (main && WEATHER_ICON_MAP[main]) || Cloud;
+}