feat: add currently_reading and read and repsonsive menu

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>