Client fixes

client/src/components/CurrentWeather.vue

@@ -60,9 +60,9 @@ onMounted(async () => {
 }
 
 .today-label {
-	font-size: 16px;
+	font-size: 12px;
 	font-weight: 600;
-	color: var(--text);
+	color: var(--text-muted);
 }
 
 .hi-lo {
@@ -125,8 +125,8 @@ onMounted(async () => {
 	<div class="today-card">
 		<div class="flex-r align-items-center justify-between px-3">
 			<div class="flex-c justify-center align-items-center">
+				<img v-if="data.icon" :src="'https://openweathermap.org/img/wn/' + data.icon + '@2x.png'" class="today-icon" alt="weather" />
 				<div class="today-label">{{ data.label }}</div>
-				<img v-if="data.icon" :src="BASE + data.icon" class="today-icon" alt="weather" />
 			</div>
 			<div class="flex-r align-items-center gap-2">
 				<div class="fs-6">

client/src/components/MapView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { AirTrafficLayer } from '@/services/airtraffic.ts'
+import {api} from '@/services/api.ts';
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import Map from 'ol/Map'
 import View from 'ol/View'
@@ -176,9 +177,10 @@ function buildStationLayer(lat: number, lon: number, dark: boolean): VectorLayer
 
 onMounted(async () => {
 	await fetchRadarFrames()
+	const position = await api.position();
 
-	const lat = (current.value.latitude as number) || 0
-	const lon = (current.value.longitude as number) || 0
+	const lat = position?.latitude || 0
+	const lon = position?.longitude || 0
 
 	stationLayer = buildStationLayer(lat, lon, props.dark)
 
@@ -226,19 +228,6 @@ watch(() => props.dark, dark => {
 	stationLayer = buildStationLayer(lat, lon, dark)
 	map.addLayer(stationLayer)
 })
-
-let positioned = false
-watch(() => current.value, () => {
-	const lat = (current.value.latitude as number) || 0
-	const lon = (current.value.longitude 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>
 
 <style scoped lang="scss">

client/src/components/MetricCard.vue

@@ -27,6 +27,7 @@ const label = computed(() => props.data[`${props.metricKey.replace(/_[^_]+$/, ''
   cursor: pointer;
   transition: background 0.15s, transform 0.1s;
   user-select: none;
+  overflow: hidden;
 
   &:hover   { background: var(--hover); }
   &:active  { transform: scale(0.97); }

client/src/services/api.ts

@@ -13,6 +13,7 @@ async function get<T>(path: string, params: Record<string, string> = {}): Promis
 }
 
 export const api = {
+  position: (fields?: string) => get<{latitude: number, longitude: number, altitude: number}>('/api/position', fields ? { fields } : {}),
   current:  (fields?: string)                                     => get<DataRow>('/api/current', fields ? { fields } : {}),
   hourly:   (start?: string, end?: string, fields?: string)      => get<DataRow[]>('/api/hourly', { ...(start ? { start } : {}), ...(end ? { end } : {}), ...(fields ? { fields } : {}) }),
   daily:    (start?: string, end?: string, fields?: string)      => get<DataRow[]>('/api/daily',  { ...(start ? { start } : {}), ...(end ? { end } : {}), ...(fields ? { fields } : {}) }),