feat(bookmarks): shared useBookmarks panel + wired into all four readers

frontend/src/readers/PdfReader.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState, type KeyboardEvent } from "react";
 import * as pdfjs from "pdfjs-dist";
 import { apiRaw } from "../api/client";
+import { useBookmarks } from "../components/Bookmarks";
 import { btn } from "../components/ui";
 import { useProgressSaver, type ReaderProps } from "../lib/useProgress";
 
@@ -12,14 +13,22 @@ pdfjs.GlobalWorkerOptions.workerPort = new Worker(
 
 type RenderTask = { cancel(): void; promise: Promise<void> };
 
-export default function PdfReader({ book, initialLocator }: ReaderProps) {
+export default function PdfReader({ book, initialLocator, initialPercent }: ReaderProps) {
   const wrapRef = useRef<HTMLDivElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const docRef = useRef<pdfjs.PDFDocumentProxy | null>(null);
   const docTaskRef = useRef<{ destroy(): Promise<void> } | null>(null);
   const taskRef = useRef<RenderTask | null>(null);
   const restored = useRef(false);
-  const saver = useProgressSaver(book.id);
+  const saver = useProgressSaver(book.id, { locator: initialLocator, percent: initialPercent });
+  const bm = useBookmarks({
+    book,
+    capture: saver.capture,
+    seek: (l) => {
+      const p = Number(l.page);
+      if (Number.isInteger(p) && p >= 0 && p < num) setPage(p);
+    },
+  });
   const [num, setNum] = useState(0);
   const [page, setPage] = useState(0); // 0 基
   const [err, setErr] = useState("");
@@ -130,7 +139,7 @@ export default function PdfReader({ book, initialLocator }: ReaderProps) {
       tabIndex={0}
       onKeyDown={onKey}
       aria-label="PDF 阅读器,可用左右方向键翻页"
-      className="grid h-full grid-rows-[1fr_auto] focus:outline-none"
+      className="relative grid h-full grid-rows-[1fr_auto] focus:outline-none"
     >
       <div ref={wrapRef} className="flex min-h-0 items-start justify-center overflow-y-auto bg-stone-900/70 p-4">
         <canvas ref={canvasRef} className="max-w-3xl rounded-md shadow-2xl ring-1 ring-stone-700/50" />
@@ -151,7 +160,9 @@ export default function PdfReader({ book, initialLocator }: ReaderProps) {
         <button className={btn} disabled={page >= num - 1} onClick={() => setPage(num - 1)} aria-label="最后一页">
           末页
         </button>
+        {bm.btn}
       </div>
+      {bm.panel}
     </div>
   );
 }