feat: add currently_reading and read and repsonsive menu

2026-09-30 21:55:40 +02:00
parent 1f6061b998
commit ccb8dd3d15
11 changed files with 207 additions and 43 deletions
@@ -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>