feat(books): improve list view with series badges and click navigation

client/src/features/book/components/BookListRow.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import type { BookCard, BookFileRef } from '@projectx/types'
+import { bookCoverStyle } from '../lib/book-cover'
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const props = defineProps<{ book: BookCard }>()
+
+const coverStyle = computed(() => bookCoverStyle(props.book.title ?? String(props.book.id)))
+const authorLine = computed(() => props.book.authors.join(', ') || null)
+const seriesLine = computed(() => {
+  if (!props.book.seriesName) return null
+  const idx = props.book.seriesIndex
+  return idx != null ? `${props.book.seriesName} #${idx % 1 === 0 ? Math.floor(idx) : idx}` : props.book.seriesName
+})
+
+const primaryFile = computed(() => props.book.files.find((f) => f.role === 'primary') ?? props.book.files[0] ?? null)
+const extraFiles = computed(() => (props.book.files.length > 1 ? props.book.files : []))
+
+const coverLoaded = ref(false)
+const coverFailed = ref(false)
+
+function openFile(file: BookFileRef) {
+  router.push({
+    name: 'reader',
+    params: { bookId: props.book.id, fileId: file.id },
+    query: { format: file.format ?? 'epub' },
+  })
+}
+</script>
+
+<template>
+  <div
+    class="flex items-center gap-3 py-2 px-2 rounded-md transition-colors"
+    :class="primaryFile ? 'cursor-pointer hover:bg-muted/50' : 'cursor-default opacity-60'"
+    @click="primaryFile && openFile(primaryFile)"
+  >
+    <!-- Cover -->
+    <div class="h-16 w-12 rounded shrink-0 overflow-hidden relative" :style="coverLoaded ? {} : coverStyle">
+      <img
+        v-if="!coverFailed"
+        :src="`/api/books/${book.id}/thumbnail`"
+        class="absolute inset-0 w-full h-full object-cover transition-opacity duration-200"
+        :class="coverLoaded ? 'opacity-100' : 'opacity-0'"
+        loading="lazy"
+        :alt="book.title ?? ''"
+        @load="coverLoaded = true"
+        @error="coverFailed = true"
+      />
+    </div>
+
+    <!-- Main info -->
+    <div class="flex flex-col min-w-0 flex-1 gap-0.5">
+      <span class="text-sm font-medium text-foreground truncate leading-snug">{{ book.title ?? '-' }}</span>
+      <span v-if="authorLine" class="text-xs text-muted-foreground truncate">{{ authorLine }}</span>
+      <span v-if="seriesLine" class="text-xs text-muted-foreground/70 truncate italic">{{ seriesLine }}</span>
+    </div>
+
+    <!-- Right badges -->
+    <div class="flex flex-col items-end gap-1 shrink-0" @click.stop>
+      <span
+        v-if="book.status === 'missing'"
+        class="text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded bg-destructive text-destructive-foreground"
+      >
+        Missing
+      </span>
+      <button
+        v-for="file in extraFiles"
+        :key="file.id"
+        class="text-[10px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded bg-muted text-muted-foreground hover:bg-muted/70 transition-colors"
+        :class="file.role === 'primary' ? 'text-foreground' : 'text-muted-foreground'"
+        :title="`Open as ${file.format?.toUpperCase() ?? 'unknown'}`"
+        @click="openFile(file)"
+      >
+        {{ file.format ?? '?' }}
+      </button>
+    </div>
+  </div>
+</template>

client/src/views/HomeView.vue

@@ -2,8 +2,8 @@
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ArrowDownAZ, ArrowUpAZ, Filter, X } from 'lucide-vue-next'
-import BookCoverImage from '@/features/book/components/BookCoverImage.vue'
 import BookCoverCard from '@/features/book/components/BookCoverCard.vue'
+import BookListRow from '@/features/book/components/BookListRow.vue'
 import BookFilterBuilder from '@/features/book/components/BookFilterBuilder.vue'
 import AppHeader from '@/components/AppHeader.vue'
 import ViewHeader from '@/components/ViewHeader.vue'
@@ -143,7 +143,11 @@ watch(loading, (isLoading) => {
           <button
             @click="filterOpen = !filterOpen"
             class="flex items-center gap-1.5 h-8 px-3 rounded-md border text-sm transition-colors"
-            :class="activeFilterCount > 0 ? 'border-primary text-primary bg-primary/10' : 'border-input text-muted-foreground bg-background hover:text-foreground hover:bg-muted'"
+            :class="
+              activeFilterCount > 0
+                ? 'border-primary text-primary bg-primary/10'
+                : 'border-input text-muted-foreground bg-background hover:text-foreground hover:bg-muted'
+            "
           >
             <Filter :size="13" />
             <span>Filters</span>
@@ -180,17 +184,7 @@ watch(loading, (isLoading) => {
 
         <!-- List view -->
         <div v-else class="flex flex-col divide-y divide-border">
-          <div
-            v-for="book in books"
-            :key="book.id"
-            class="flex items-center gap-3 py-2.5 px-1 hover:bg-muted/50 rounded-md transition-colors cursor-pointer"
-          >
-            <BookCoverImage :book-id="book.id" type="cover" class="h-12 w-9 object-cover rounded shrink-0 bg-muted" :alt="book.title ?? ''" />
-            <div class="flex flex-col min-w-0">
-              <span class="text-sm font-medium text-foreground truncate">{{ book.title ?? '-' }}</span>
-              <span v-if="book.authors.length" class="text-xs text-muted-foreground truncate">{{ book.authors.join(', ') }}</span>
-            </div>
-          </div>
+          <BookListRow v-for="book in books" :key="book.id" :book="book" />
         </div>
 
         <div ref="sentinel" class="h-8 mt-4 flex items-center justify-center">

server/src/db/migrations/meta/_journal.json

@@ -5,7 +5,7 @@
     {
       "idx": 0,
       "version": "7",
-      "when": 1769091323340,
+      "when": 1769224478680,
       "tag": "0000_baseline",
       "breakpoints": true
     }