feat: add a page for details about contact transactions (which I'll fill in soon)

src/views/ContactAmountsView.vue

@@ -0,0 +1,70 @@
+<template>
+  <!-- QUICK NAV -->
+  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200">
+    <ul class="flex text-2xl p-2 gap-2">
+      <!-- Home Feed -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <router-link :to="{ name: 'home' }" class="block text-center py-3 px-1"
+          ><fa icon="house-chimney" class="fa-fw"></fa
+        ></router-link>
+      </li>
+      <!-- Search -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <router-link
+          :to="{ name: 'discover' }"
+          class="block text-center py-3 px-1"
+          ><fa icon="magnifying-glass" class="fa-fw"></fa
+        ></router-link>
+      </li>
+      <!-- Contacts -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <router-link
+          :to="{ name: 'projects' }"
+          class="block text-center py-3 px-1"
+          ><fa icon="folder-open" class="fa-fw"></fa
+        ></router-link>
+      </li>
+      <!-- Contacts -->
+      <li class="basis-1/5 rounded-md text-slate-400">
+        <router-link
+          :to="{ name: 'contacts' }"
+          class="block text-center py-3 px-1"
+          ><fa icon="users" class="fa-fw"></fa
+        ></router-link>
+      </li>
+      <!-- Profile -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <router-link
+          :to="{ name: 'account' }"
+          class="block text-center py-3 px-1"
+          ><fa icon="circle-user" class="fa-fw"></fa
+        ></router-link>
+      </li>
+    </ul>
+  </nav>
+
+  <section id="Content" class="p-6 pb-24">
+    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+      Transactions with {{ contact?.name }}
+    </h1>
+    <div>{{ contact?.did }}</div>
+  </section>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+import { Contact } from "@/db/tables/contacts";
+import { db } from "@/db";
+
+@Options({})
+export default class ContactsView extends Vue {
+  contact: Contact | null = null;
+
+  // 'created' hook runs when the Vue instance is first created
+  async created() {
+    await db.open();
+    const contactDid = this.$route.query.contactDid as string;
+    this.contact = (await db.contacts.get(contactDid)) || null;
+  }
+}
+</script>