Fix icons

client/src/components/HourlyForecast.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import Loading from '@/components/Loading.vue';
+import {formatDate} from '@ztimson/utils';
+import {onMounted, ref} from 'vue';
+import {api, BASE} from '../services/api';
+
+const hours = ref<any[]>();
+const open = ref(false);
+const filler = [1, 2, 3, 4, 5, 6, 7, 8];
+
+function dir(deg: number) {
+	if(deg > 22.5 && deg <= 67.5) return 'NE';
+	if(deg > 67.5 && deg <= 112.5) return 'E';
+	if(deg > 112.5 && deg <= 157.5) return 'SE';
+	if(deg > 157.5 && deg <= 202.5) return 'S';
+	if(deg > 202.5 && deg <= 247.5) return 'SW';
+	if(deg > 247.5 && deg <= 292.5) return 'W';
+	if(deg > 292.5 && deg <= 337.5) return 'NW';
+	return 'N';
+}
+
+onMounted(async () => {
+	hours.value = await api.hourly();
+});
+</script>
+
+<style scoped lang="scss">
+.card {
+	background: var(--surface);
+	border: 1px solid var(--border);
+	border-radius: 10px;
+}
+
+.card-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 10px 14px;
+	cursor: pointer;
+	user-select: none;
+
+	.title     { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
+	.chevron   { font-size: 10px; color: var(--text-muted); transition: transform 0.2s; &.open { transform: rotate(180deg); } }
+	.preview   { display: flex; gap: 6px; align-items: center; }
+	.prev-icon { width: 20px; height: 20px; object-fit: contain; }
+	.prev-temp { font-size: 13px; font-weight: 700; color: var(--text); }
+}
+
+.hour-list {
+	border-top: 1px solid var(--border);
+}
+
+.hour-row {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 8px 14px;
+	border-bottom: 1px solid var(--border);
+
+	&:last-child { border-bottom: none; }
+
+	.hour-time  { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; width: 52px; flex-shrink: 0; }
+	.hour-icon  { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
+	.hour-label { font-size: 11px; color: var(--text-muted); flex: 1; }
+	.hour-temp  { font-size: 13px; font-weight: 700; color: var(--text); }
+	.hour-meta  { display: flex; gap: 8px; font-size: 10px; color: var(--text-muted); }
+}
+
+.filler-row {
+	height: 42px;
+	pos-rel: relative;
+	overflow: hidden;
+	border-bottom: 1px solid var(--border);
+	&:last-child { border-bottom: none; }
+}
+</style>
+
+<template>
+	<div class="card">
+		<div class="card-header" @click="open = !open">
+			<span class="title">24hr Forecast</span>
+			<span class="chevron" :class="{ open }">▼</span>
+		</div>
+
+		<div style="max-height: 50vh; overflow-y: auto">
+			<div v-if="open" class="hour-list">
+				<template v-if="hours?.length">
+					<div v-for="h in hours" class="hour-row">
+						<span class="hour-time">{{ formatDate('h A', h.time) }}</span>
+						<img :src="BASE + h.icon" class="hour-icon" :alt="h.label?.toString() || ''" />
+						<span class="hour-label">{{ h.label }}</span>
+						<div class="hour-meta">
+							<span>🌧️ {{ (h.precipitation as any || 0).toFixed(1) }}mm</span>
+							<span>🍃 {{ ~~h.wind_gusts }}kph {{ dir(h.wind_dir) }}</span>
+						</div>
+						<span class="hour-temp">{{ ~~h.temperature }}°</span>
+					</div>
+				</template>
+				<template v-else>
+					<div v-for="f in filler" class="filler-row p-2">
+						<div class="br-1 pos-rel w-100 overflow-hidden" style="height: 100%">
+							<Loading />
+						</div>
+					</div>
+				</template>
+			</div>
+		</div>
+	</div>
+</template>

client/src/components/MapView.vue

@@ -399,8 +399,8 @@ input[type='range'] {
 	.desktop { display: none; }
 	.mobile  { display: flex; }
 	.radar-timeline { bottom: 10px; }
-	.overlay-toggles { bottom: 70px; }
-	.layers-menu { bottom: 70px; }
+	.overlay-toggles { bottom: 10px; }
+	.layers-menu { bottom: 10px; }
 }
 </style>