Refactor components. Improve design. Improve routing

src/components/ReferencePreviewComponent.vue

@@ -0,0 +1,51 @@
+<template>
+  <q-card
+    flat
+    bordered
+    class="my-card"
+    :class="$q.dark.isActive ? 'bg-grey-9' : 'bg-grey-2'"
+    v-for="entry in entries"
+    :key="entry.title"
+  >
+    <q-card-section>
+      <div class="row items-center no-wrap">
+        <div class="col">
+          <div class="text-h6">{{ entry.title }}</div>
+          <div class="text-subtitle2">{{ entry.subtitle }}</div>
+        </div>
+
+        <div class="col-auto">
+          <q-btn color="grey-7" round flat icon="more_vert">
+            <q-menu cover auto-close>
+              <q-list>
+                <q-item clickable>
+                  <q-item-section>Remove Card</q-item-section>
+                </q-item>
+                <q-item clickable>
+                  <q-item-section>Send Feedback</q-item-section>
+                </q-item>
+                <q-item clickable>
+                  <q-item-section>Share</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </div>
+      </div>
+    </q-card-section>
+
+    <q-separator />
+
+    <q-card-actions>
+      <q-btn flat :to="'reference/' + entry.id + '/view'">Read</q-btn>
+    </q-card-actions>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import { ReferenceEntry } from './models';
+
+defineProps({
+  entries: Array<ReferenceEntry>,
+});
+</script>