Basic layout and navigation

src/components/ArchiveCard.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+
+import {
+  IonButton,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonIcon,
+  IonNote,
+IonLabel, IonItem,
+    IonList
+} from "@ionic/vue";
+import {chevronForward} from "ionicons/icons";
+
+const emit = defineEmits<{(e: "back"): void, (e: "disconnect"): void, (e: "details"):void}>();
+
+const back = () => {
+  emit("back");
+}
+
+const disconnect = () => {
+  emit("disconnect");
+};
+
+const details = () => {
+  emit("details");
+}
+
+</script>
+
+<template>
+  <ion-card>
+    <ion-card-header class="two-column">
+      <div class="header-column">
+        <ion-card-title>ARCHIVE</ion-card-title>
+        <ion-card-title>Board</ion-card-title>
+        <ion-card-subtitle>v1.1.1</ion-card-subtitle>
+      </div>
+      <div style="flex-grow: 1"></div>
+      <div>
+        <ion-button @click="disconnect">Disconnect</ion-button>
+      </div>
+    </ion-card-header>
+
+    <ion-card-content>
+      <ion-button @click="back">Back</ion-button>
+      <ion-list lines="full" class="item-scroll">
+        <ion-item :button="true" v-for="i in 10" :key="i" @click="details">
+          <ion-label>
+            <strong>v{{i}}</strong> <br>
+            <ion-note>date</ion-note>
+          </ion-label>
+          <div slot="end" class="metadata-end-wrapper">
+            <ion-icon color="medium" :icon="chevronForward"></ion-icon>
+          </div>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</template>
+
+<style scoped>
+.two-column {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.item-scroll {
+  max-height: 200px;
+  overflow: scroll;
+}
+.metadata-end-wrapper {
+  position: absolute;
+
+  top: 10px;
+  inset-inline-end: 10px;
+
+  font-size: 0.8rem;
+
+  display: flex;
+  align-items: center;
+}
+</style>