Basic app functions are working

definitely on the "minimal" side but this *mostly* covers my own usage
of the old mobile.weather.gov app

src/views/WeatherView.vue

@@ -0,0 +1,139 @@
+<script setup>
+import { mapStores } from 'pinia'
+import { useWeatherStore } from '../stores/weather'
+import { useLocationStore } from '../stores/location'
+</script>
+
+<script>
+export default {
+
+    data() {
+        return {
+            coordinates: null,
+        }
+    },
+
+    computed: {
+        ...mapStores(useWeatherStore, useLocationStore),
+
+        panelHeadingTitle() {
+            if (!this.weatherStore.forecast) {
+                return "Forecast"
+            }
+
+            let generated = new Date(this.weatherStore.forecast.properties.generatedAt)
+            generated = generated.toLocaleTimeString('en-US', {timeStyle: 'short'})
+            return `Forecast @ ${generated}`
+        },
+    },
+
+    activated() {
+        this.fetchWeather()
+    },
+
+    methods: {
+
+        coordinatesUpdated(coordinates) {
+            this.weatherStore.clearWeather()
+            this.weatherStore.setCoordinates(coordinates)
+            this.fetchWeather()
+        },
+
+        async fetchWeather() {
+
+            if (!this.weatherStore.coordinates) {
+                this.$router.push('/')
+                return
+            }
+
+            const forecast = await this.weatherStore.getForecast()
+            this.coordinates = this.weatherStore.coordinates
+        },
+
+        showHourly(period) {
+            this.$router.push('/hourly')
+        },
+    },
+}
+</script>
+
+<template>
+  <main>
+    <div style="display: flex; flex-direction: column;">
+
+      <o-field>
+        <o-select v-if="weatherStore.weather"
+                  v-model="coordinates"
+                  @update:model-value="coordinatesUpdated">
+          <option v-for="location in locationStore.locations"
+                  :key="location.coordinates"
+                  :value="location.coordinates">
+            {{ location.cityState }}
+          </option>
+        </o-select>
+      </o-field>
+
+      <nav class="panel weather-panel">
+
+        <p class="panel-heading">
+          {{ panelHeadingTitle }}
+        </p>
+
+        <div class="panel-block">
+
+          <div v-if="weatherStore.forecast"
+               style="display: flex;">
+
+            <div v-for="period in weatherStore.forecast.properties.periods"
+                 :key="period.number"
+                 class="weather-period is-size-7 has-text-weight-bold"
+                 :class="{daytime: period.isDaytime}"
+                 @click="showHourly(period)">
+
+              <p>{{ period.name }}</p>
+
+              <div>
+                <img :src="period.icon" />
+              </div>
+
+              <p>{{ period.shortForecast }}</p>
+
+              <p>
+                <span v-if="period.isDaytime">Hi</span>
+                <span v-else>Lo</span>
+                {{ period.temperature }} &deg; {{ period.temperatureUnit }}
+              </p>
+
+            </div>
+
+          </div>
+
+          <div v-if="!weatherStore.forecast">
+            fetching weather data...
+          </div>
+
+        </div>
+      </nav>
+    </div>
+  </main>
+</template>
+
+<style scoped>
+
+.weather-period {
+    width: 100px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    background-color: gray;
+    color: white;
+    padding: 0.5rem;
+}
+
+.weather-period.daytime {
+    background-color: white;
+    color: black;
+}
+
+</style>