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 ?? '—' }}

client/src/features/book/composables/useBooks.ts

@@ -1,5 +1,11 @@
 import { ref, computed, type Ref } from 'vue'
 
+export interface BookFile {
+  id: number
+  format: string | null
+  role: string
+}
+
 export interface Book {
   id: number
   status: string
@@ -7,6 +13,7 @@ export interface Book {
   authors: string[]
   seriesName: string | null
   seriesIndex: number | null
+  files: BookFile[]
 }
 
 interface BooksPage {

client/src/features/reader/ReaderView.vue

@@ -22,7 +22,9 @@ import type { FoliateRenderer } from './composables/useFoliate'
 
 const route = useRoute()
 const router = useRouter()
-const bookId = Number(route.params.id)
+const bookId = Number(route.params.bookId)
+const fileId = Number(route.params.fileId)
+const fileFormat = (route.query.format as string) || 'epub'
 
 const containerRef = ref<HTMLElement | null>(null)
 const showSidebar = ref(false)
@@ -51,7 +53,7 @@ const {
   setFlow,
 } = readerState
 
-const progress = useReaderProgress(bookId)
+const progress = useReaderProgress(bookId, fileId)
 const { cfi, chapterTitle, sectionIndex, totalSections, fraction, updateHeadsFeet } = progress
 
 const visibility = useVisibility()
@@ -115,7 +117,7 @@ onMounted(async () => {
   onUnmounted(() => document.removeEventListener('fullscreenchange', onFullscreenChange))
 
   await progress.load()
-  await open(bookId, progress.cfi.value)
+  await open(fileId, fileFormat, progress.cfi.value)
   setChapters(getChapters())
   sectionFractions.value = getSectionFractions()
   await bookmarks.load(bookId)
@@ -306,7 +308,13 @@ function navigateSearch(cfiTarget: string) {
       @search="onSearchQuery"
       @clear="onSearchClear"
       @navigate="navigateSearch($event)"
-      @close="() => { onSearchClear(); searchInitialQuery = ''; showSearch = false }"
+      @close="
+        () => {
+          onSearchClear()
+          searchInitialQuery = ''
+          showSearch = false
+        }
+      "
     />
 
     <ReaderSettingsPanel v-if="showSettings" :state="state" @update="applyUpdate" @close="showSettings = false" />

client/src/features/reader/composables/useFoliate.ts

@@ -48,7 +48,7 @@ export function useFoliate(
     await customElements.whenDefined('foliate-view')
   }
 
-  async function open(bookId: number, cfi?: string | null) {
+  async function open(fileId: number, format: string, cfi?: string | null) {
     const el = container()
     if (!el) return
 
@@ -103,10 +103,12 @@ export function useFoliate(
         loading.value = false
       })
 
-      const res = await fetch(`/api/books/${bookId}/file`)
-      if (!res.ok) throw new Error(`Failed to fetch book: ${res.status}`)
+      const mimeType = format === 'pdf' ? 'application/pdf' : format === 'cbz' ? 'application/zip' : 'application/epub+zip'
+      const ext = format === 'pdf' ? 'pdf' : format === 'cbz' ? 'cbz' : 'epub'
+      const res = await fetch(`/api/books/files/${fileId}/serve`)
+      if (!res.ok) throw new Error(`Failed to fetch book file: ${res.status}`)
       const blob = await res.blob()
-      const file = new File([blob], `book-${bookId}.epub`, { type: 'application/epub+zip' })
+      const file = new File([blob], `book-file-${fileId}.${ext}`, { type: mimeType })
       await view.open(file)
       if (onApplyStyles) onApplyStyles(view.renderer)
       await view.goTo(cfi ?? 0).catch(() => {})

client/src/features/reader/composables/useReaderProgress.ts

@@ -1,8 +1,9 @@
 import { ref } from 'vue'
 import type { FoliateRenderer, RelocateDetail } from './useFoliate'
 
-export function useReaderProgress(bookId: number) {
+export function useReaderProgress(bookId: number, fileId: number) {
   const cfi = ref<string | null>(null)
+  const pageNumber = ref<number | null>(null)
   const percentage = ref(0)
   const chapterTitle = ref('')
   const sectionIndex = ref(0)
@@ -12,10 +13,11 @@ export function useReaderProgress(bookId: number) {
   let saveTimer: ReturnType<typeof setTimeout> | null = null
 
   async function load() {
-    const res = await fetch(`/api/books/${bookId}/progress`)
+    const res = await fetch(`/api/books/files/${fileId}/progress`)
     if (!res.ok) return
     const data = await res.json()
     cfi.value = data.cfi ?? null
+    pageNumber.value = data.pageNumber ?? null
     percentage.value = data.percentage ?? 0
   }
 
@@ -32,10 +34,10 @@ export function useReaderProgress(bookId: number) {
   }
 
   async function save() {
-    await fetch(`/api/books/${bookId}/progress`, {
+    await fetch(`/api/books/files/${fileId}/progress`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ cfi: cfi.value, percentage: percentage.value }),
+      body: JSON.stringify({ cfi: cfi.value, pageNumber: pageNumber.value, percentage: percentage.value }),
     })
   }
 
@@ -122,6 +124,7 @@ export function useReaderProgress(bookId: number) {
 
   return {
     cfi,
+    pageNumber,
     percentage,
     chapterTitle,
     sectionIndex,

client/src/router/index.ts

@@ -10,7 +10,7 @@ const router = createRouter({
       component: HomeView,
     },
     {
-      path: '/read/:id',
+      path: '/read/:bookId/:fileId',
       name: 'reader',
       component: () => import('@/features/reader/ReaderView.vue'),
     },