feat(reader): track reading progress per file with per-format navigation

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Book } from '../composables/useBooks'
+import type { Book, BookFile } from '../composables/useBooks'
 import { bookCoverStyle } from '../composables/useBooks'
 import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
@@ -9,29 +9,42 @@ const router = useRouter()
 const props = defineProps<{ book: Book }>()
 
 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)
+// Only show format chips when there are multiple files
+const extraFiles = computed(() => (props.book.files.length > 1 ? props.book.files : []))
+
 const coverUrl = `/api/books/${props.book.id}/cover`
 const coverLoaded = ref(false)
 const coverFailed = ref(false)
+
+function openFile(file: BookFile) {
+  router.push({
+    name: 'reader',
+    params: { bookId: props.book.id, fileId: file.id },
+    query: { format: file.format ?? 'epub' },
+  })
+}
 </script>
 
 <template>
-  <div class="group cursor-pointer flex flex-col gap-1.5" @click="router.push(`/read/${props.book.id}`)">
+  <div
+    class="group flex flex-col gap-1.5"
+    :class="primaryFile ? 'cursor-pointer' : 'cursor-default opacity-60'"
+    @click="primaryFile && openFile(primaryFile)"
+  >
     <!-- Cover -->
     <div
       class="relative w-full rounded-sm overflow-hidden shadow-md group-hover:shadow-xl group-hover:scale-[1.02] transition-all duration-150"
       style="aspect-ratio: 2/3"
       :style="coverLoaded ? {} : coverStyle"
     >
-      <!-- Real cover image -->
       <img
         v-if="!coverFailed"
         :src="coverUrl"
@@ -42,7 +55,7 @@ const coverFailed = ref(false)
         :alt="book.title ?? ''"
       />
 
-      <!-- Series badge top-left -->
+      <!-- Series badge -->
       <div v-if="seriesLine" class="absolute top-1.5 left-1.5 right-1.5">
         <span
           class="text-[8px] font-semibold uppercase tracking-widest px-1.5 py-0.5 rounded bg-black/30 backdrop-blur-sm line-clamp-1"
@@ -52,6 +65,20 @@ const coverFailed = ref(false)
         </span>
       </div>
 
+      <!-- Format chips — only shown when book has multiple files -->
+      <div v-if="extraFiles.length > 0" class="absolute bottom-1.5 right-1.5 flex flex-col gap-1 items-end" @click.stop>
+        <button
+          v-for="file in extraFiles"
+          :key="file.id"
+          class="text-[9px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded bg-black/50 backdrop-blur-sm hover:bg-black/70 transition-colors"
+          :class="file.role === 'primary' ? 'text-white' : 'text-white/70'"
+          :title="`Open as ${file.format?.toUpperCase() ?? 'unknown'}`"
+          @click="openFile(file)"
+        >
+          {{ file.format ?? '?' }}
+        </button>
+      </div>
+
       <!-- Missing overlay -->
       <div v-if="book.status === 'missing'" class="absolute inset-0 bg-black/60 flex items-center justify-center">
         <span class="text-[10px] font-semibold uppercase tracking-widest text-destructive-foreground bg-destructive px-2 py-0.5 rounded">
@@ -59,7 +86,7 @@ const coverFailed = ref(false)
         </span>
       </div>
 
-      <!-- Title + author pinned to bottom (shown when no real cover) -->
+      <!-- Title + author (shown when no real cover) -->
       <div v-if="!coverLoaded" class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/60 to-transparent">
         <p class="text-xs font-bold leading-tight line-clamp-3" :style="{ color: coverStyle.color }">
           {{ book.title ?? '—' }}