feat: add wishlist

2026-09-30 19:15:57 +02:00
parent ab3bbb6338
commit 1f6061b998
57 changed files with 638 additions and 232 deletions
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+useHead({ title: 'Wunschzettel' })
+
+const search = ref('')
+const sort = ref<WishlistSort>('title')
+const sortItems = [
+  { label: 'Author', value: 'author' },
+  { label: 'Titel', value: 'title' }
+]
+
+const { books, total, error, status } = useWishlist(search, sort)
+</script>
+
+<template>
+  <UMain>
+    <UContainer class="py-8">
+      <div class="mb-8 flex flex-wrap items-center justify-between gap-3">
+        <h1 class="text-2xl font-semibold text-highlighted">
+          Huaqo's Wunschzettel
+        </h1>
+        <div class="flex w-full items-center gap-2 sm:w-auto">
+          <UInput
+            v-model="search"
+            icon="i-lucide-search"
+            placeholder="Title, author, ISBN or link"
+            class="flex-1 sm:w-72 sm:flex-none"
+          />
+          <USelect v-model="sort" :items="sortItems" icon="i-lucide-arrow-down-a-z" class="w-32" />
+        </div>
+      </div>
+
+      <UAlert
+        v-if="error"
+        color="error"
+        variant="subtle"
+        icon="i-lucide-triangle-alert"
+        title="Couldn't load the wishlist"
+        :description="(error.data as { statusMessage?: string } | undefined)?.statusMessage || error.statusMessage || error.message"
+        class="mb-6"
+      />
+
+      <div class="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
+        <WishlistCard v-for="book in books" :key="book.id" :book="book" />
+      </div>
+
+      <p v-if="!books.length && !error && status !== 'pending'" class="py-16 text-center text-muted">
+        {{ search ? 'No book matches your search.' : 'The wishlist is empty.' }}
+      </p>
+    </UContainer>
+  </UMain>
+</template>