Updated UI

2026-06-22 01:54:52 -04:00
parent 4300ebc532
commit 8fe35b820a
7 changed files with 464 additions and 168 deletions
--- a/client/src/components/CurrentWeather.vue
+++ b/client/src/components/CurrentWeather.vue
@@ -3,69 +3,92 @@ import { computed } from 'vue'
 import type { DataRow } from '../services/api'

 const props = defineProps<{ data: DataRow }>()
+const d = computed(() => props.data)

-const temp    = computed(() => props.data.env_temp_c    != null ? `${(props.data.env_temp_c as number).toFixed(1)}°C`   : '—')
-const feels   = computed(() => props.data.env_heat_index_c != null ? `Feels ${(props.data.env_heat_index_c as number).toFixed(1)}°C` : '')
-const icon    = computed(() => props.data.forecast_weather_icon  as string | null)
-const label   = computed(() => props.data.forecast_weather_label as string | null)
-const humidity = computed(() => props.data.env_humidity != null ? `${(props.data.env_humidity as number).toFixed(0)}%` : '—')
-const wind    = computed(() => props.data.wind_speed_kmh  != null ? `${(props.data.wind_speed_kmh as number).toFixed(1)} km/h` : '—')
-const uvi     = computed(() => props.data.light_uvi != null ? `UV ${(props.data.light_uvi as number).toFixed(1)}` : null)
-const sunrise = computed(() => props.data.sun_sunrise ? new Date(props.data.sun_sunrise as string).toLocaleTimeString('en', { hour: '2-digit', minute: '2-digit' }) : '—')
-const sunset  = computed(() => props.data.sun_sunset  ? new Date(props.data.sun_sunset  as string).toLocaleTimeString('en', { hour: '2-digit', minute: '2-digit' }) : '—')
+const fmt  = (v: unknown, dec = 1, unit = '') => v != null ? `${(v as number).toFixed(dec)}${unit}` : '—'
+const time = (v: unknown) => v ? new Date(v as string).toLocaleTimeString('en', { hour: '2-digit', minute: '2-digit' }) : '—'
+
+const high       = computed(() => fmt(d.value.env_temp_max_c, 1, '°C'))
+const low        = computed(() => fmt(d.value.env_temp_min_c, 1, '°C'))
+const sunrise    = computed(() => time(d.value.sun_sunrise))
+const sunset     = computed(() => time(d.value.sun_sunset))
+const ghMornEnd  = computed(() => time(d.value.sun_golden_hour_morning_end))
+const ghEveStart = computed(() => time(d.value.sun_golden_hour_evening_start))
+const dayLen     = computed(() => d.value.sun_day_length_hours != null ? `${(d.value.sun_day_length_hours as number).toFixed(2)}h` : '—')
+const uviMax     = computed(() => fmt(d.value.light_uvi_max, 1))
+const precipProb = computed(() => d.value.forecast_precipitation_probability != null ? `${d.value.forecast_precipitation_probability}%` : '—')
+const precipMm   = computed(() => fmt(d.value.forecast_precipitation_mm, 1, 'mm'))
+const precipHrs  = computed(() => d.value.precipitation_hours != null ? `${d.value.precipitation_hours}h` : null)
+const windMax    = computed(() => fmt(d.value.wind_speed_max_kmh, 1, ' km/h'))
+const gustMax    = computed(() => fmt(d.value.wind_gusts_max_kmh, 1, ' km/h'))
+const icon       = computed(() => d.value.forecast_weather_icon as string | null)
+const label      = computed(() => d.value.forecast_weather_label as string | null)
+const solarSum   = computed(() => d.value.light_solar_wm2_sum != null ? `${(d.value.light_solar_wm2_sum as number).toFixed(1)} W/m²` : null)
 </script>

 <style scoped lang="scss">
-.hero {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 16px;
+.today-card {
 	border-radius: 12px;
 	background: var(--surface);
 	border: 1px solid var(--border);
+	padding: 14px;
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
 }

-.top {
+.today-header {
 	display: flex;
 	align-items: center;
 	gap: 12px;
 }

-.weather-icon {
-  width: 64px;
-  height: 64px;
+.today-icon {
+	width: 52px;
+	height: 52px;
 	object-fit: contain;
+	flex-shrink: 0;
 }

-.temps {
+.today-title {
 	flex: 1;
+	min-width: 0;
 }

-.temp-main {
-  font-size: 42px;
+.today-date {
+	font-size: 11px;
 	font-weight: 700;
-  line-height: 1;
-  color: var(--text);
-}
-
-.temp-feel {
-  font-size: 13px;
+	text-transform: uppercase;
+	letter-spacing: 0.08em;
 	color: var(--text-muted);
 }

-.weather-label {
-  font-size: 14px;
-  font-weight: 500;
+.today-label {
+	font-size: 16px;
+	font-weight: 600;
 	color: var(--text);
 }

-.stats {
+.hi-lo {
 	display: flex;
-  gap: 16px;
-  flex-wrap: wrap;
-  border-top: 1px solid var(--border);
-  padding-top: 10px;
+	gap: 8px;
+	font-size: 15px;
+	font-weight: 600;
+	margin-top: 2px;
+
+	.hi { color: var(--text); }
+	.lo { color: var(--text-muted); font-weight: 400; }
+}
+
+.divider {
+	height: 1px;
+	background: var(--border);
+}
+
+.stat-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
+	gap: 10px;
 }

 .stat {
@@ -74,26 +97,73 @@ const sunset  = computed(() => props.data.sun_sunset  ? new Date(props.data.sun_
 	gap: 2px;
 }

-.stat-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; }
-.stat-value { font-size: 14px; font-weight: 600; color: var(--text); }
+.stat-label {
+	font-size: 10px;
+	text-transform: uppercase;
+	letter-spacing: 0.06em;
+	color: var(--text-muted);
+}
+
+.stat-value {
+	font-size: 14px;
+	font-weight: 600;
+	color: var(--text);
+}
+
+.stat-sub {
+	font-size: 11px;
+	color: var(--text-muted);
+}
+
+.section-label {
+	font-size: 10px;
+	font-weight: 700;
+	text-transform: uppercase;
+	letter-spacing: 0.08em;
+	color: var(--text-muted);
+	margin-bottom: -4px;
+}
 </style>

 <template>
-  <div class="hero">
-    <div class="top">
-      <img v-if="icon" :src="icon" class="weather-icon" alt="weather" />
-      <div class="temps">
-        <div class="temp-main">{{ temp }}</div>
-        <div class="temp-feel">{{ feels }}</div>
-        <div class="weather-label">{{ label }}</div>
+	<div class="today-card">
+
+		<div class="today-header">
+			<img v-if="icon" :src="icon" class="today-icon" alt="weather" />
+			<div class="today-title">
+				<div class="today-date">Today · {{ new Date().toLocaleDateString('en', { weekday: 'long', month: 'long', day: 'numeric' }) }}</div>
+				<div class="today-label">{{ label }}</div>
+				<div class="hi-lo">
+					<span class="hi">↑ {{ high }}</span>
+					<span class="lo">↓ {{ low }}</span>
 				</div>
 			</div>
-    <div class="stats">
-      <div class="stat"><span class="stat-label">Humidity</span><span class="stat-value">{{ humidity }}</span></div>
-      <div class="stat"><span class="stat-label">Wind</span><span class="stat-value">{{ wind }}</span></div>
-      <div v-if="uvi" class="stat"><span class="stat-label">UV</span><span class="stat-value">{{ uvi }}</span></div>
+		</div>
+
+		<div class="divider" />
+
+		<!-- Sun -->
+		<div class="section-label">☀️ Sun</div>
+		<div class="stat-grid">
 			<div class="stat"><span class="stat-label">Sunrise</span><span class="stat-value">{{ sunrise }}</span></div>
 			<div class="stat"><span class="stat-label">Sunset</span><span class="stat-value">{{ sunset }}</span></div>
+			<div class="stat"><span class="stat-label">Day Length</span><span class="stat-value">{{ dayLen }}</span></div>
+			<div class="stat"><span class="stat-label">UV Max</span><span class="stat-value">{{ uviMax }}</span></div>
+			<div class="stat"><span class="stat-label">Golden AM</span><span class="stat-value">{{ ghMornEnd }}</span></div>
+			<div class="stat"><span class="stat-label">Golden PM</span><span class="stat-value">{{ ghEveStart }}</span></div>
+			<div v-if="solarSum" class="stat"><span class="stat-label">Solar</span><span class="stat-value">{{ solarSum }}</span></div>
 		</div>
+
+		<div class="divider" />
+
+		<!-- Precip & Wind -->
+		<div class="section-label">🌧️ Precipitation & Wind</div>
+		<div class="stat-grid">
+			<div class="stat"><span class="stat-label">Chance</span><span class="stat-value">{{ precipProb }}</span></div>
+			<div class="stat"><span class="stat-label">Amount</span><span class="stat-value">{{ precipMm }}</span><span v-if="precipHrs" class="stat-sub">over {{ precipHrs }}</span></div>
+			<div class="stat"><span class="stat-label">Wind Max</span><span class="stat-value">{{ windMax }}</span></div>
+			<div class="stat"><span class="stat-label">Gust Max</span><span class="stat-value">{{ gustMax }}</span></div>
+		</div>
+
 	</div>
 </template>
--- a/client/src/components/ForecastStrip.vue
+++ b/client/src/components/ForecastStrip.vue
@@ -4,30 +4,35 @@ import type { DataRow } from '../services/api'

 const props = defineProps<{ days: DataRow[] }>()

-const items = computed(() => props.days.slice(0, 5).map(d => ({
+const items = computed(() => props.days.slice(0, 7).map(d => ({
 	date:  new Date(d.time as string).toLocaleDateString('en', { weekday: 'short', month: 'short', day: 'numeric' }),
 	icon:  d.forecast_weather_icon  as string | null,
 	label: d.forecast_weather_label as string,
 	high:  d.env_temp_max_c != null ? `${(d.env_temp_max_c as number).toFixed(1)}°` : '—',
 	low:   d.env_temp_min_c != null ? `${(d.env_temp_min_c as number).toFixed(1)}°` : '—',
 	rain:  d.forecast_precipitation_probability != null ? `${d.forecast_precipitation_probability}%` : null,
+	precip: d.forecast_precipitation_mm != null ? `${(d.forecast_precipitation_mm as number).toFixed(1)}mm` : null,
 })))
 </script>

 <style scoped lang="scss">
+.forecast-wrap {
+	width: 100%;
+}
+
 .strip {
 	display: flex;
 	gap: 8px;
 	overflow-x: auto;
-  padding-bottom: 4px;
+	padding-bottom: 6px;
+	width: 100%;

 	&::-webkit-scrollbar { height: 4px; }
 	&::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
 }

 .day {
-  flex: 1;
-  min-width: 80px;
+	flex: 0 0 100px;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -38,15 +43,17 @@ const items = computed(() => props.days.slice(0, 5).map(d => ({
 	border: 1px solid var(--border);
 }

-.day-name  { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; }
+.day-name   { font-size: 10px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; text-align: center; }
 .day-icon   { width: 36px; height: 36px; object-fit: contain; }
 .day-label  { font-size: 10px; color: var(--text-muted); text-align: center; line-height: 1.2; }
 .day-temps  { display: flex; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); }
 .day-low    { color: var(--text-muted); font-weight: 400; }
 .day-rain   { font-size: 11px; color: #38bdf8; }
+.day-precip { font-size: 10px; color: var(--text-muted); }
 </style>

 <template>
+	<div class="forecast-wrap">
 		<div class="strip">
 			<div v-for="item in items" :key="item.date" class="day">
 				<div class="day-name">{{ item.date }}</div>
@@ -57,6 +64,8 @@ const items = computed(() => props.days.slice(0, 5).map(d => ({
 					<span class="day-low">{{ item.low }}</span>
 				</div>
 				<div v-if="item.rain" class="day-rain">🌧 {{ item.rain }}</div>
+				<div v-if="item.precip" class="day-precip">{{ item.precip }}</div>
+			</div>
 		</div>
 	</div>
 </template>
--- a/client/src/components/MapView.vue
+++ b/client/src/components/MapView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import {AirTrafficLayer} from '@/services/airtraffic.ts';
-import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { AirTrafficLayer } from '@/services/airtraffic.ts'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import Map from 'ol/Map'
 import View from 'ol/View'
 import TileLayer from 'ol/layer/Tile'
@@ -10,59 +10,139 @@ import XYZ from 'ol/source/XYZ'
 import Feature from 'ol/Feature'
 import Point from 'ol/geom/Point'
 import CircleGeom from 'ol/geom/Circle'
-import { fromLonLat } from 'ol/proj'
+import { fromLonLat, toLonLat } from 'ol/proj'
 import { Style, Fill, Stroke, Circle as CircleStyle } from 'ol/style'
 import { current } from '../services/weather'
 import 'ol/ol.css'

 const props  = defineProps<{ dark: boolean }>()
 const mapEl  = ref<HTMLDivElement>()
-const OWM_KEY = import.meta.env.VITE_OWM_API_KEY || ''
 const showOverlays = ref(false)
 const atActive = ref(true)

 const NM = 1852

+const radarFrames = ref<{ path: string; time: number }[]>([])
+const radarFrameIndex = ref(0)
+const radarPath = computed(() => radarFrames.value[radarFrameIndex.value]?.path ?? '')
+const nowcastStartIndex = ref(0)
+
+const showWind = ref(false)
+const windSrc = ref('')
+
 const OVERLAYS = [
-	{ id: 'rain',     label: 'Rain',     icon: '🌧️', url: (ts: number) => `https://tilecache.rainviewer.com/v2/radar/${ts}/256/{z}/{x}/{y}/4/1_1.png`, needsTs: false  },
-	{ id: 'clouds',   label: 'Clouds',   icon: '☁️',  url: () => `https://tile.openweathermap.org/map/clouds_new/{z}/{x}/{y}.png?appid=${OWM_KEY}`,    needsTs: false },
-	{ id: 'wind',     label: 'Wind',     icon: '💨',  url: () => `https://tile.openweathermap.org/map/wind_new/{z}/{x}/{y}.png?appid=${OWM_KEY}`,      needsTs: false },
-	{ id: 'temp',     label: 'Temp',     icon: '🌡️', url: () => `https://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=${OWM_KEY}`,      needsTs: false },
-	{ id: 'pressure', label: 'Pressure', icon: '📊',  url: () => `https://tile.openweathermap.org/map/pressure_new/{z}/{x}/{y}.png?appid=${OWM_KEY}`,  needsTs: false },
+	{ id: 'rain', label: 'Rain', icon: '🌧️', url: () => `https://tilecache.rainviewer.com${radarPath.value}/256/{z}/{x}/{y}/2/1_1.png` },
+	{ id: 'wind', label: 'Wind', icon: '💨',  url: () => '' },
 ]

-const activeOverlays = ref<Set<string>>(new Set([]))
-const radarTs        = ref(Math.floor(Date.now() / 1000))
-const overlayLayers: {[key: string]: any} = {}
+const activeOverlays = ref<Set<string>>(new Set(['rain']))
+const overlayLayers: { [key: string]: any } = {}

 let map: Map
 let stationLayer: VectorLayer<VectorSource>
 let radarInterval: ReturnType<typeof setInterval>
 let airTraffic: AirTrafficLayer

+const hourTickIndices = computed(() => {
+	const indices: number[] = []
+	let lastHour = -1
+	radarFrames.value.forEach((f, i) => {
+		const h = new Date(f.time * 1000).getHours()
+		if (h !== lastHour) { indices.push(i); lastHour = h }
+	})
+	return indices
+})
+
+function buildWindSrc(lat: number, lon: number, zoom: number) {
+	return `https://embed.windy.com/embed2.html?lat=${lat.toFixed(4)}&lon=${lon.toFixed(4)}&detailLat=${lat.toFixed(4)}&detailLon=${lon.toFixed(4)}&zoom=${Math.round(zoom)}&level=surface&overlay=wind&product=ecmwf&menu=&message=&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=&metricWind=kt&metricTemp=%C2%B0C&radarRange=-1`
+}
+
+function syncWindSrc() {
+	const view   = map.getView()
+	const center = toLonLat(view.getCenter()!)
+	windSrc.value = buildWindSrc(center[1], center[0], view.getZoom() ?? 8)
+}
+
+async function fetchRadarFrames() {
+	const res  = await fetch('https://api.rainviewer.com/public/weather-maps.json')
+	const data = await res.json()
+	const past    = data.radar.past    ?? []
+	const nowcast = data.radar.nowcast ?? []
+	radarFrames.value = [...past, ...nowcast]
+	nowcastStartIndex.value = past.length
+	radarFrameIndex.value = past.length - 1
+}
+
+function seekRadar(index: number) {
+	radarFrameIndex.value = index
+	const layer = overlayLayers['rain']
+	if (layer) {
+		layer.setSource(new XYZ({ url: OVERLAYS.find(o => o.id === 'rain')!.url(), maxZoom: 7 }))
+	}
+}
+
+function onSliderInput(e: Event) {
+	seekRadar(Number((e.target as HTMLInputElement).value))
+}
+
+function frameLabel(frame: { time: number }) {
+	return new Date(frame.time * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+}
+
+function hourLabel(frame: { time: number }) {
+	return new Date(frame.time * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false })
+}
+
+function tickPercent(index: number) {
+	return (index / (radarFrames.value.length - 1)) * 100
+}
+
 function toggleAT() {
 	atActive.value ? airTraffic.hide() : airTraffic.show()
 	atActive.value = !atActive.value
 }

+function toggleOverlay(id: string) {
+	if (id === 'wind') {
+		if (activeOverlays.value.has('wind')) {
+			activeOverlays.value.delete('wind')
+			showWind.value = false
+		} else {
+			activeOverlays.value.add('wind')
+			syncWindSrc()
+			showWind.value = true
+		}
+		return
+	}
+
+	if (activeOverlays.value.has(id)) {
+		activeOverlays.value.delete(id)
+		const layer = overlayLayers[id]
+		if (layer) { map.removeLayer(layer); delete overlayLayers[id] }
+	} else {
+		activeOverlays.value.add(id)
+		const layer = buildOverlayLayer(id)
+		overlayLayers[id] = layer
+		map.addLayer(layer)
+	}
+}
+
 function buildBaseLayer(dark: boolean) {
 	return new TileLayer({
 		source: new XYZ({
 			url: dark
-				? 'https://{a-d}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
-				: 'https://{a-d}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',
-			attributions: '© OpenStreetMap © CARTO',
-			maxZoom: 19,
+				? 'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}.png'
+				: 'https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}.png',
+			attributions: '© Stadia Maps © OpenMapTiles © OpenStreetMap',
 		}),
-		zIndex: 0,
 	})
 }

 function buildOverlayLayer(id: string): TileLayer<XYZ> {
 	const def = OVERLAYS.find(o => o.id === id)!
 	return new TileLayer({
-		source: new XYZ({ url: def.url(radarTs.value), attributions: '' }),
-		opacity: 0.6,
+		source: new XYZ({ url: def.url(), attributions: '', maxZoom: 7 }),
+		opacity: 0.2,
 		zIndex:  5,
 	})
 }
@@ -70,7 +150,6 @@ function buildOverlayLayer(id: string): TileLayer<XYZ> {
 function buildStationLayer(lat: number, lon: number, dark: boolean): VectorLayer<VectorSource> {
 	const center     = fromLonLat([lon, lat])
 	const source     = new VectorSource()
-	const ringColor  = dark ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.18)'
 	const ringStroke = dark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.35)'

 	for (const nm of [50, 100, 150, 200]) {
@@ -95,20 +174,9 @@ function buildStationLayer(lat: number, lon: number, dark: boolean): VectorLayer
 	return new VectorLayer({ source, zIndex: 20 })
 }

-function toggleOverlay(id: string) {
-	if (activeOverlays.value.has(id)) {
-		activeOverlays.value.delete(id)
-		const layer = overlayLayers[id]
-		if (layer) { map.removeLayer(layer); delete overlayLayers[id] }
-	} else {
-		activeOverlays.value.add(id)
-		const layer = buildOverlayLayer(id)
-		overlayLayers[id] = layer
-		map.addLayer(layer)
-	}
-}
+onMounted(async () => {
+	await fetchRadarFrames()

-onMounted(() => {
 	const lat = (current.value.gps_lat as number) || 0
 	const lon = (current.value.gps_lon as number) || 0

@@ -117,7 +185,7 @@ onMounted(() => {
 	map = new Map({
 		target:   mapEl.value!,
 		layers:   [buildBaseLayer(props.dark), stationLayer],
-		view:     new View({ center: fromLonLat([lon, lat]), zoom: 8 }),
+		view:     new View({ center: fromLonLat([lon, lat]), zoom: 8, maxZoom: 13 }),
 		controls: [],
 	})

@@ -125,17 +193,22 @@ onMounted(() => {
 	airTraffic.show()

 	for (const id of activeOverlays.value) {
+		if (id === 'wind') continue
 		const layer = buildOverlayLayer(id)
 		overlayLayers[id] = layer
 		map.addLayer(layer)
 	}

-	radarInterval = setInterval(() => {
-		radarTs.value = Math.floor(Date.now() / 1000)
+	// Sync windy src when OL map finishes moving
+	map.on('moveend', () => {
+		if (showWind.value) syncWindSrc()
+	})
+
+	radarInterval = setInterval(async () => {
+		await fetchRadarFrames()
 		const layer = overlayLayers['rain']
 		if (layer) {
-			const def = OVERLAYS.find(o => o.id === 'rain')!
-			layer.setSource(new XYZ({ url: def.url(radarTs.value) }))
+			layer.setSource(new XYZ({ url: OVERLAYS.find(o => o.id === 'rain')!.url() }))
 		}
 	}, 5 * 60 * 1000)
 })
@@ -154,15 +227,17 @@ watch(() => props.dark, dark => {
 	map.addLayer(stationLayer)
 })

+let positioned = false
 watch(() => current.value, () => {
 	const lat = (current.value.gps_lat as number) || 0
 	const lon = (current.value.gps_lon as number) || 0
-
+	if (!positioned) {
+		positioned = true
 		map.getView().animate({ center: fromLonLat([lon, lat]), duration: 500 })
-
 		map.removeLayer(stationLayer)
 		stationLayer = buildStationLayer(lat, lon, props.dark)
 		map.addLayer(stationLayer)
+	}
 })
 </script>

@@ -180,7 +255,15 @@ watch(() => current.value, () => {
 	height: 100%;
 }

-// Shared button style
+.wind-iframe {
+	position: absolute;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+	border: none;
+	z-index: 10;
+}
+
 .overlay-btn {
 	display: flex;
 	align-items: center;
@@ -204,7 +287,6 @@ watch(() => current.value, () => {
 	&:hover:not(.active) { background: var(--hover); }
 }

-// Desktop bar
 .overlay-toggles {
 	position: absolute;
 	bottom: 16px;
@@ -220,11 +302,10 @@ watch(() => current.value, () => {
 	backdrop-filter: blur(8px);
 }

-// Mobile layers menu
 .layers-menu {
 	position: absolute;
 	bottom: 16px;
-	right: 16px;
+	right: 10px;
 	z-index: 100;
 	display: flex;
 	flex-direction: column;
@@ -255,13 +336,82 @@ watch(() => current.value, () => {
 	backdrop-filter: blur(8px);
 }

-// Visibility switching
+.radar-timeline {
+	position: absolute;
+	bottom: 72px;
+	left: 50%;
+	transform: translateX(-50%);
+	z-index: 100;
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	background: var(--surface);
+	border-radius: 16px;
+	padding: 8px 16px;
+	box-shadow: 0 2px 12px rgba(0,0,0,0.2);
+	backdrop-filter: blur(8px);
+	width: min(600px, calc(100vw - 32px));
+}
+
+.slider-wrap {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.slider-ticks {
+	position: relative;
+	height: 16px;
+}
+
+.tick {
+	position: absolute;
+	transform: translateX(-50%);
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 2px;
+
+	&__line {
+		width: 1px;
+		height: 5px;
+		background: var(--border);
+	}
+
+	&__label {
+		font-size: 9px;
+		color: var(--text-muted, #888);
+		white-space: nowrap;
+	}
+
+	&.nowcast &__line  { background: #6ab4ff; }
+	&.nowcast &__label { color: #6ab4ff; }
+}
+
+input[type='range'] {
+	width: 100%;
+	accent-color: var(--accent);
+	cursor: pointer;
+}
+
+.timeline-label {
+	font-size: 12px;
+	color: var(--text);
+	min-width: 42px;
+	text-align: right;
+	flex-shrink: 0;
+}
+
 .desktop { display: flex; }
 .mobile  { display: none; }

@media (max-width: 768px) {
 	.desktop { display: none; }
 	.mobile  { display: flex; }
+	.radar-timeline { bottom: 10px; }
+	.overlay-toggles { bottom: 70px; }
+	.layers-menu { bottom: 70px; }
 }
 </style>

@@ -269,8 +419,45 @@ watch(() => current.value, () => {
 	<div class="map-wrap">
 		<div ref="mapEl" class="map-el" />

+		<!-- Windy animated wind iframe -->
+		<iframe
+			v-if="showWind"
+			class="wind-iframe"
+			:src="windSrc"
+			frameborder="0"
+			allowfullscreen
+		/>
+
+		<!-- Radar Timeline -->
+		<div v-if="activeOverlays.has('rain') && radarFrames.length" class="radar-timeline">
+			<div class="slider-wrap">
+				<div class="slider-ticks">
+					<div
+						v-for="i in hourTickIndices" :key="i"
+						class="tick"
+						:class="{ nowcast: i >= nowcastStartIndex }"
+						:style="{ left: tickPercent(i) + '%' }"
+					>
+						<div class="tick__line" />
+						<span class="tick__label">{{ hourLabel(radarFrames[i]) }}</span>
+					</div>
+				</div>
+				<input
+					type="range"
+					:min="0"
+					:max="radarFrames.length - 1"
+					:value="radarFrameIndex"
+					@input="onSliderInput"
+				/>
+			</div>
+			<span class="timeline-label">{{ frameLabel(radarFrames[radarFrameIndex]) }}</span>
+		</div>
+
 		<!-- Desktop toggles -->
 		<div class="overlay-toggles desktop">
+			<button class="overlay-btn" :class="{ active: atActive }" @click="toggleAT">
+				✈️ Traffic
+			</button>
 			<button
 				v-for="o in OVERLAYS" :key="o.id"
 				class="overlay-btn"
@@ -287,6 +474,9 @@ watch(() => current.value, () => {
 				⚙️ Layers
 			</button>
 			<div v-if="showOverlays" class="layers-dropdown">
+				<button class="overlay-btn" :class="{ active: atActive }" @click="toggleAT">
+					✈️ Traffic
+				</button>
 				<button
 					v-for="o in OVERLAYS" :key="o.id"
 					class="overlay-btn"
@@ -295,9 +485,6 @@ watch(() => current.value, () => {
 				>
 					{{ o.icon }} {{ o.label }}
 				</button>
-				<button class="overlay-btn" :class="{ active: atActive }" @click="toggleAT">
-					✈️ Traffic
-				</button>
 			</div>
 		</div>
 	</div>
--- a/client/src/services/airtraffic.ts
+++ b/client/src/services/airtraffic.ts
@@ -248,7 +248,16 @@ export class AirTrafficLayer {

 	private async _fetch() {
 		const j = await fetch(`${API}/air-traffic`).then(r => r.json())
-		this.data = j.data || []
+		this.data = (j.data || []).map((a: any) => ({
+			...a,
+			icao:      a.hex,
+			latitude:  a.lat,
+			longitude: a.lon,
+			heading:   a.track,
+			speed:     a.gs,
+			climb:     a.baro_rate ?? a.geom_rate ?? 0,
+			name:      a.flight?.trim(),
+		}))
 	}

 	private _draw() {
--- a/client/src/services/api.ts
+++ b/client/src/services/api.ts
@@ -2,6 +2,14 @@ export const BASE = import.meta.env.DEV ? 'http://10.69.5.23:3000' : ''

 export type DataRow = Record<string, number | string | null>

+export async function fetchDaily(start?: string, end?: string): Promise<DataRow[]> {
+  const params = new URLSearchParams()
+  if (start) params.set('start', start)
+  if (end)   params.set('end', end)
+  const res = await fetch(`/api/daily?${params}`)
+  return res.json()
+}
+
 async function get<T>(path: string, params: Record<string, string> = {}): Promise<T> {
  const url = new URL(`${BASE}${path}`, window.location.origin)
  Object.entries(params).forEach(([k, v]) => url.searchParams.set(k, v))
--- a/client/src/services/weather.ts
+++ b/client/src/services/weather.ts
@@ -8,8 +8,13 @@ export const loading   = ref(false)
 export const lastFetch = ref<Date | null>(null)

 export async function fetchAll() {
+  const date = (d: Date = new Date()) => `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')}`
+
  loading.value = true
-  const [c, h, d] = await Promise.allSettled([api.current(), api.hourly(), api.daily()])
+  const start = new Date(), end = new Date();
+  start.setDate(start.getDate() + 1);
+  end.setDate(end.getDate() + 5);
+  const [c, h, d] = await Promise.allSettled([api.current(), api.hourly(), api.daily(date(start), date(end))])
  if (c.status === 'fulfilled') current.value  = c.value
  if (h.status === 'fulfilled') hourly.value   = h.value
  if (d.status === 'fulfilled') daily.value    = d.value
--- a/client/src/views/Dashboard.vue
+++ b/client/src/views/Dashboard.vue
@@ -9,7 +9,6 @@ import MetricCard       from '../components/MetricCard.vue'
 import GraphModal       from '../components/GraphModal.vue'

 const props = defineProps<{ dark: boolean }>()
-
 const selectedMetric = ref<string | null>(null)
 let   interval: ReturnType<typeof setInterval>

@@ -73,9 +72,15 @@ const groupedMetrics = computed(() => {
 }

 .metric-grid {
-	display: grid;
-	grid-template-columns: 1fr 1fr;
+	display: flex;
+	flex-wrap: wrap;
 	gap: 8px;
+	min-width: 0;
+
+	> * {
+		flex: 1 1 140px;  // grow, shrink, min width before wrapping
+		min-width: 0;
+	}
 }

 .loading-bar {
@@ -96,6 +101,7 @@ const groupedMetrics = computed(() => {
 	.dashboard {
 		flex-direction: column;
 		overflow-y: auto;
+		overflow-x: hidden;  // ← added
 		height: 100dvh;
 	}

@@ -113,7 +119,9 @@ const groupedMetrics = computed(() => {
 		border-left: none;
 		border-top: 1px solid var(--border);
 		overflow-y: visible;
+		overflow-x: hidden;  // ← added
 		-webkit-overflow-scrolling: touch;
+		box-sizing: border-box;  // ← added

 		&::before { display: none; }
 		&::-webkit-scrollbar { display: none; }