Refactor components. Improve design. Improve routing

src/components/BoatPreviewComponent.vue

@@ -0,0 +1,55 @@
+<template>
+  <q-card
+    v-for="boat in boats"
+    :key="boat.id"
+    flat
+    bordered
+    class="my-card"
+    :class="$q.dark.isActive ? 'bg-grey-9' : 'bg-grey-2'"
+  >
+    <q-card-section>
+      <div class="row items-center no-wrap">
+        <div class="col">
+          <div class="text-h6">{{ boat.name }}</div>
+          <div class="text-subtitle2">{{ boat.class }}</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>Favourite</q-item-section>
+                </q-item>
+                <q-item clickable>
+                  <q-item-section>Report Problem</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </div>
+      </div>
+    </q-card-section>
+
+    <q-card-section>
+      <!-- {{ lorem }} -->
+    </q-card-section>
+
+    <q-separator />
+
+    <q-card-actions>
+      <q-btn>Book</q-btn>
+      <q-btn>Info</q-btn>
+      <q-btn>Check-Out</q-btn>
+      <q-btn>Check-In</q-btn>
+    </q-card-actions>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import { Boat } from './models';
+
+defineProps({
+  boats: Array<Boat>,
+});
+</script>

src/components/LeftDrawer.vue

@@ -17,6 +17,10 @@
             <q-item-section> {{ link.name }} </q-item-section>
           </q-item>
         </template>
+        <q-item clickable v-ripple @click="logout(router)">
+          <q-item-section avatar><q-icon name="logout" /></q-item-section
+          ><q-item-section>Logout</q-item-section>
+        </q-item>
       </q-list>
     </q-scroll-area>
   </q-drawer>
@@ -25,6 +29,10 @@
 <script lang="ts" setup>
 import { defineComponent } from 'vue';
 import { links } from 'src/router/navlinks.js';
+import { logout } from 'boot/appwrite';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
 
 defineProps(['drawer']);
 defineEmits(['drawer-toggle']);

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>

src/components/models.ts

@@ -1,4 +1,5 @@
 export interface Boat {
+  id: number;
   name: string;
   class: string;
   year: number;
@@ -7,3 +8,10 @@ export interface Boat {
 export interface test {
   totalCount: number;
 }
+
+export interface ReferenceEntry {
+  id: number;
+  title: string;
+  subtitle: string;
+  content: string;
+}