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

frontend/src/readers/CbzReader.tsx

@@ -2,6 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 import { useEffect, useMemo, useRef, useState, type MouseEvent } from "react";
 import { api, formatPageUrl } from "../api/client";
 import { btn } from "../components/ui";
+import { useBookmarks } from "../components/Bookmarks";
 import { fetchObjectUrl } from "../lib/authImage";
 import { useProgressSaver, type ReaderProps } from "../lib/useProgress";
 import { PageHeights } from "../lib/virt";
@@ -76,7 +77,7 @@ function PageImg({
   );
 }
 
-export default function CbzReader({ book, initialLocator, chrome }: ReaderProps) {
+export default function CbzReader({ book, initialLocator, initialPercent, chrome }: ReaderProps) {
   const countQ = useQuery({
     queryKey: ["pages", book.id],
     queryFn: () => api.pageCount(book.pages_url ?? ""),
@@ -87,7 +88,8 @@ export default function CbzReader({ book, initialLocator, chrome }: ReaderProps)
   const chapters = countQ.data?.chapters ?? null; // 包内目录结构(第N話/上中下卷)
   const [toc, setToc] = useState(false);
   const activeRow = useRef<HTMLButtonElement>(null);
-  const saver = useProgressSaver(book.id);
+  const saver = useProgressSaver(book.id, { locator: initialLocator, percent: initialPercent });
+  const bm = useBookmarks({ book, capture: saver.capture, seek: (l) => jump(Number(l.page) || 0) });
   const boxRef = useRef<HTMLDivElement>(null);
   const [width, setWidth] = useState(480);
   const [vh, setVh] = useState(600);
@@ -291,6 +293,7 @@ export default function CbzReader({ book, initialLocator, chrome }: ReaderProps)
             >
               {MODE_LABEL[mode]}
             </button>
+            {bm.btn}
             {chapters && (
               <>
                 <button className="rd-btn" aria-expanded={toc} aria-controls="cbz-toc" onClick={() => setToc((v) => !v)}>
@@ -348,6 +351,7 @@ export default function CbzReader({ book, initialLocator, chrome }: ReaderProps)
           </nav>
         </>
       )}
+      {bm.panel}
     </div>
   );
 }