feat(RelaysView): add main view for all relays

src/App.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="min-h-screen flex flex-col">
     <StaHeader />
-    <main class="grow px-6 py-10 max-w-4xl mx-auto w-full"></main>
+    <main class="grow px-6 py-10 max-w-4xl mx-auto w-full">
+      <RelaysView />
+    </main>
     <StaFooter />
   </div>
 </template>
@@ -9,4 +11,5 @@
 <script setup lang="ts">
 import StaHeader from './components/StaHeader.vue';
 import StaFooter from './components/StaFooter.vue';
+import RelaysView from './pages/RelaysView.vue';
 </script>

src/components/StaHeader.vue

@@ -3,7 +3,7 @@
     class="sticky top-0 z-10 bg-background-900 border-b border-background-900 shadow-sm px-6 py-4"
   >
     <nav class="flex items-center justify-between max-w-4xl mx-auto">
-      <span class="font-heading text-lg"> STA </span>
+      <span class="text-lg"> STA </span>
     </nav>
   </header>
 </template>

src/pages/RelaysView.vue

@@ -0,0 +1,24 @@
+<template>
+  <div v-if="isLoading && !relays">
+    <ProgressSpinner class="--p-progressspinner-color-primary" />
+  </div>
+  <div v-else-if="error" class="bg-accent text-background py-4 px-3 rounded-md">
+    {{ error }}
+  </div>
+  <div v-else class="flex flex-row flex-wrap gap-2">
+    <div v-for="relay in relays">
+      {{ relay.id }}
+    </div>
+  </div>
+  <div class="flex flex-row flex-wrap"></div>
+</template>
+
+<script setup lang="ts">
+import { useRelayPolling } from '../composables/useRelayPolling';
+import { ProgressSpinner } from 'primevue';
+
+const { relays, isLoading, error, refresh } = useRelayPolling();
+refresh();
+</script>
+
+<style lang="less"></style>