feat: add currently_reading and read and repsonsive menu

layers/wishlist/app/components/WishlistCard.vue

@@ -20,7 +20,7 @@ const authors = computed(() => props.book.authors.map(wishlistAuthorName).join('
       <img
         v-if="cover && !imageFailed"
         :src="cover"
-        :alt="`Cover of ${book.title}`"
+        :alt="`Cover von ${book.title}`"
         loading="lazy"
         class="size-full object-cover"
         @error="imageFailed = true"

layers/wishlist/app/components/WishlistControls.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+defineProps<{ floating?: boolean }>()
+
+const search = defineModel<string>('search', { required: true })
+const sort = defineModel<WishlistSort>('sort', { required: true })
+
+const sortItems = [
+  { label: 'Autor', value: 'author' },
+  { label: 'Titel', value: 'title' }
+]
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <UInput
+      v-model="search"
+      icon="i-lucide-search"
+      placeholder="Titel oder Autor"
+      :variant="floating ? 'none' : 'outline'"
+      class="min-w-0 flex-1"
+      :ui="{ trailing: 'pe-1' }"
+    >
+      <template v-if="search" #trailing>
+        <UButton
+          icon="i-lucide-x"
+          color="neutral"
+          variant="link"
+          size="sm"
+          aria-label="Suche leeren"
+          @click="search = ''"
+        />
+      </template>
+    </UInput>
+    <USelect
+      v-model="sort"
+      :items="sortItems"
+      icon="i-lucide-arrow-down-a-z"
+      :variant="floating ? 'soft' : 'outline'"
+      class="w-28 shrink-0"
+      :class="{ 'rounded-full': floating }"
+    />
+  </div>
+</template>

layers/wishlist/app/components/WishlistShelf.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps<{ title: string, books: WishlistShelfBook[], total: number }>()
+</script>
+
+<template>
+  <section class="mt-16 border-t border-default pt-8">
+    <h2 class="mb-6 text-xl font-semibold text-highlighted">
+      {{ title }}
+      <span class="text-base font-normal text-muted tabular-nums">{{ books.length === total ? total : `${books.length} / ${total}` }}</span>
+    </h2>
+
+    <ul class="columns-1 gap-x-8 sm:columns-2 lg:columns-3">
+      <li v-for="book in books" :key="book.id" class="mb-3 break-inside-avoid text-sm leading-snug sm:mb-2">
+        <span class="block text-highlighted sm:inline">{{ book.title }}</span>
+        <span v-if="book.authors.length" class="block text-muted sm:ms-1.5 sm:inline">{{ book.authors.map(wishlistAuthorName).join(', ') }}</span>
+      </li>
+    </ul>
+  </section>
+</template>