Merge branch 'dev' into feature/funk

frontend/src/components/PhoneHomeIndicator.vue

@@ -6,17 +6,23 @@ import { usePhoneStore } from '@/stores/phone'
 const route = useRoute()
 const router = useRouter()
 const phone = usePhoneStore()
-const isApp = computed(() => route.name === 'app')
+const HOME_PAGE = 1
+const canGoHome = computed(
+  () => route.name !== 'home' || phone.currentPage !== HOME_PAGE,
+)
 
 function goHome(): void {
-  if (isApp.value) void router.push('/')
+  if (!canGoHome.value) return
+
+  phone.setCurrentPage(HOME_PAGE)
+  if (route.name !== 'home') void router.push('/')
 }
 </script>
 
 <template>
   <button
     class="phone-home-indicator"
-    :class="{ 'phone-home-indicator--interactive': isApp }"
+    :class="{ 'phone-home-indicator--interactive': canGoHome }"
     type="button"
     :aria-label="phone.t('Common.home')"
     @pointerdown.stop="goHome"

frontend/src/components/WeatherConditionIcon.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import clearIcon from '@/assets/img/weather-icons/clear.webp'
+import cloudyIcon from '@/assets/img/weather-icons/cloudy.webp'
+import fogIcon from '@/assets/img/weather-icons/fog.webp'
+import partlyCloudyIcon from '@/assets/img/weather-icons/partly_cloudy.webp'
+import rainIcon from '@/assets/img/weather-icons/rain.webp'
+import snowIcon from '@/assets/img/weather-icons/snow.webp'
+import sunnyIcon from '@/assets/img/weather-icons/sunny.webp'
+import thunderIcon from '@/assets/img/weather-icons/thunder.webp'
+import type { WeatherConditionId } from '@/types/weather'
+
+const props = withDefaults(
+  defineProps<{
+    condition: WeatherConditionId
+    size?: number
+    timestamp?: number
+  }>(),
+  { size: 24, timestamp: undefined },
+)
+
+const icons: Record<WeatherConditionId, string> = {
+  sunny: sunnyIcon,
+  clear: clearIcon,
+  partly_cloudy: partlyCloudyIcon,
+  cloudy: cloudyIcon,
+  rain: rainIcon,
+  thunder: thunderIcon,
+  fog: fogIcon,
+  snow: snowIcon,
+}
+
+const iconSource = computed(() => {
+  if (props.condition !== 'clear' || props.timestamp === undefined) {
+    return icons[props.condition]
+  }
+
+  const hour = new Date(props.timestamp).getUTCHours()
+  return hour >= 7 && hour < 20 ? sunnyIcon : clearIcon
+})
+</script>
+
+<template>
+  <img
+    class="weather-condition-icon"
+    :src="iconSource"
+    :width="size"
+    :height="size"
+    alt=""
+    aria-hidden="true"
+    draggable="false"
+  />
+</template>
+
+<style scoped>
+.weather-condition-icon {
+  display: block;
+  object-fit: contain;
+}
+</style>