Many tweaks to booking form.

src/components/boat/BoatComponent.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>My component</div>
+</template>
+
+<script setup lang="ts">
+</script>

src/components/boat/BoatPickerComponent.vue

@@ -0,0 +1,40 @@
+<template>
+  <q-select
+    v-model="boat"
+    :options="boats"
+    option-value="id"
+    option-label="name"
+    label="Boat"
+  >
+    <template v-slot:prepend>
+      <q-item-section avatar>
+        <q-img v-if="boat?.iconsrc" :src="boat?.iconsrc" />
+        <q-icon v-else name="sailing" />
+      </q-item-section>
+    </template>
+
+    <template v-slot:option="scope">
+      <q-item v-bind="scope.itemProps">
+        <q-item-section avatar>
+          <q-img :src="scope.opt.iconsrc" />
+        </q-item-section>
+        <q-item-section>
+          <q-item-label>{{ scope.opt.name }}</q-item-label>
+          <q-item-label caption>{{ scope.opt.class }}</q-item-label>
+        </q-item-section>
+        <q-item-section avatar v-if="scope.opt.defects">
+          <q-icon name="warning" color="warning" />
+          <q-tooltip class="bg-amber text-black shadow-7"
+            >This boat has notices. Select it to see details.
+          </q-tooltip>
+        </q-item-section>
+      </q-item>
+    </template>
+  </q-select>
+</template>
+
+<script setup lang="ts">
+import { Boat, useBoatStore } from 'src/stores/boat';
+const boats = useBoatStore().boats;
+const boat = <Boat | undefined>undefined;
+</script>

src/components/boat/BoatPreviewComponent.vue

@@ -0,0 +1,29 @@
+<template>
+  <q-card v-for="boat in boats" :key="boat.id" flat class="mobile-card">
+    <q-card-section>
+      <q-img :src="boat.imgsrc" :fit="'scale-down'">
+        <div class="row absolute-top">
+          <div class="col text-h5 text-left">{{ boat.name }}</div>
+          <div class="col text-right">{{ boat.class }}</div>
+        </div>
+      </q-img>
+    </q-card-section>
+
+    <q-separator />
+
+    <q-card-actions align="evenly">
+      <q-btn flat>Info</q-btn>
+      <q-btn flat>Book</q-btn>
+      <q-btn flat>Check-Out</q-btn>
+      <q-btn flat>Check-In</q-btn>
+    </q-card-actions>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import { Boat } from 'src/stores/boat';
+
+defineProps({
+  boats: Array<Boat>,
+});
+</script>