fix: remove binary files

.gitignore

@@ -1,4 +1,29 @@
 node_modules
+dist
+frontend/dist
+frontend/dist/assets
+frontend/dist/assets/index.html
+frontend/dist/assets/index.html.gz
+frontend/dist/assets/index.html.br
+frontend/dist/assets/index.html.brotli
+frontend/dist/assets/index.html.gzip
+frontend/dist/assets/index.html.br
+frontend/dist/assets/index.html.brotli
+frontend/dist/assets/index.html.gzip
+frontend/dist/assets/index.html.br
+frontend/dist/assets/index.html.brotli
+frontend/dist/assets/index.html.gzip
+frontend/dist/assets/index.html.br
+frontend/dist/assets/index.html.brotli
+frontend/dist/assets/index.html.gzip
+frontend/dist/assets/index.html.br
+frontend/dist/assets/index.html.brotli
+frontend/dist/assets/index.html.gzip
+mobile/dist
+backend/media
+backend/staticfiles
+backend/media
+backend/staticfiles
 .pycache__
 __pycache__
 *.pyc

backend/media/ebooks/2026/06/03/q.epub

@@ -1 +0,0 @@
-x

backend/media/ebooks/2026/06/03/test.epub

@@ -1 +0,0 @@
-fake

frontend/dist/assets/ReaderToolbar-wmOf7G3U.js

@@ -1 +0,0 @@
-import{X as c,j as e}from"./index-BQiEVoRj.js";function h({bookTitle:s,chapterTitle:l,progress:a,onBack:t,onToggleToc:n,onToggleSettings:o,onToggleMarkers:i}){const{t:r}=c(),d=(a==null?void 0:a.percentage)??0;return e.jsxs(e.Fragment,{children:[e.jsxs("header",{className:"reader-top-bar",children:[t?e.jsx("button",{type:"button",className:"reader-bar-btn",onClick:t,"aria-label":r("reader.backToLibraryAria"),children:e.jsx("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:e.jsx("path",{d:"M20 12H4M10 18l-6-6 6-6"})})}):e.jsx("button",{type:"button",className:"reader-bar-btn",onClick:n,"aria-label":r("reader.tocAria"),children:e.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("line",{x1:"3",y1:"6",x2:"21",y2:"6"}),e.jsx("line",{x1:"3",y1:"12",x2:"21",y2:"12"}),e.jsx("line",{x1:"3",y1:"18",x2:"21",y2:"18"})]})}),e.jsxs("div",{className:"reader-bar-title",children:[e.jsx("span",{className:"reader-bar-book",children:s}),e.jsx("span",{className:"reader-bar-chapter",children:l})]}),e.jsxs("div",{className:"reader-bar-actions",children:[t&&e.jsx("button",{type:"button",className:"reader-bar-btn",onClick:n,"aria-label":r("reader.tocAria"),children:e.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("line",{x1:"3",y1:"6",x2:"21",y2:"6"}),e.jsx("line",{x1:"3",y1:"12",x2:"21",y2:"12"}),e.jsx("line",{x1:"3",y1:"18",x2:"21",y2:"18"})]})}),i&&e.jsx("button",{type:"button",className:"reader-bar-btn",onClick:i,"aria-label":r("annotations.inBookPanel"),children:e.jsx("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:e.jsx("path",{d:"M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"})})}),e.jsx("button",{type:"button",className:"reader-bar-btn",onClick:o,"aria-label":r("reader.settingsAria"),children:e.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("circle",{cx:"12",cy:"12",r:"3"}),e.jsx("path",{d:"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"})]})})]})]}),e.jsx("div",{className:"reader-progress-bar",children:e.jsx("div",{className:"reader-progress-fill",style:{width:`${Math.min(d,100)}%`}})})]})}export{h as default};

frontend/dist/assets/ReadingSettingsPanel-Bt3-VHc7.js

@@ -1 +0,0 @@
-import{X as m,j as e}from"./index-BQiEVoRj.js";const g=[{value:"sepia",labelKey:"reader.themeSepia"},{value:"dark",labelKey:"reader.themeDark"},{value:"light",labelKey:"reader.themeLight"},{value:"paper",labelKey:"reader.themePaper"}],u=[{value:"sans-serif",labelKey:"reader.fontSans"},{value:"serif",labelKey:"reader.fontSerif"},{value:"monospace",labelKey:"reader.fontMonospace"}],x=[{value:"auto",labelKey:"reader.orientationAuto"},{value:"portrait",labelKey:"reader.orientationPortrait"},{value:"landscape",labelKey:"reader.orientationLandscape"}];function v({settings:t,isOpen:c,onClose:d,onUpdate:o,onFlush:h}){const{t:s}=m(),n=()=>{h(),d()},i=(a,r)=>{o({[a]:r},"debounced")},l=(a,r)=>{o({[a]:r},"immediate")};return e.jsxs(e.Fragment,{children:[c&&e.jsx("div",{className:"settings-overlay",onClick:n,onKeyDown:a=>{a.key==="Escape"&&n()},role:"presentation"}),e.jsxs("aside",{className:`settings-drawer ${c?"settings-drawer--open":""}`,children:[e.jsxs("div",{className:"settings-header",children:[e.jsx("h2",{className:"settings-title",children:s("reader.settingsTitle")}),e.jsx("button",{type:"button",className:"settings-close-btn",onClick:n,"aria-label":s("reader.closeSettingsAria"),children:e.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})]}),e.jsxs("div",{className:"settings-body",children:[e.jsxs("section",{className:"settings-section",children:[e.jsx("h3",{className:"settings-section-title",children:s("reader.theme")}),e.jsx("div",{className:"theme-grid",children:g.map(a=>e.jsx("button",{type:"button",className:`theme-btn ${t.theme===a.value?"theme-btn--active":""}`,onClick:()=>l("theme",a.value),children:s(a.labelKey)},a.value))})]}),e.jsxs("section",{className:"settings-section",children:[e.jsx("h3",{className:"settings-section-title",children:s("reader.font")}),e.jsx("div",{className:"font-grid",children:u.map(a=>e.jsx("button",{type:"button",className:`font-btn ${t.font_family===a.value?"font-btn--active":""}`,onClick:()=>l("font_family",a.value),children:s(a.labelKey)},a.value))})]}),e.jsxs("section",{className:"settings-section",children:[e.jsx("h3",{className:"settings-section-title",children:s("reader.fontSize",{size:String(t.font_size)})}),e.jsx("input",{type:"range",min:"12",max:"32",value:t.font_size,onChange:a=>i("font_size",Number(a.target.value)),className:"settings-slider","aria-label":s("reader.fontSizeAria")})]}),e.jsxs("section",{className:"settings-section",children:[e.jsx("h3",{className:"settings-section-title",children:s("reader.lineHeight",{value:t.line_height.toFixed(1)})}),e.jsx("input",{type:"range",min:"1.2",max:"2.0",step:"0.1",value:t.line_height,onChange:a=>i("line_height",Number(a.target.value)),className:"settings-slider","aria-label":s("reader.lineHeightAria")})]}),e.jsxs("section",{className:"settings-section",children:[e.jsx("h3",{className:"settings-section-title",children:s("reader.margins",{value:String(t.margin_width)})}),e.jsx("input",{type:"range",min:"8",max:"48",value:t.margin_width,onChange:a=>i("margin_width",Number(a.target.value)),className:"settings-slider","aria-label":s("reader.marginWidthAria")})]}),e.jsxs("section",{className:"settings-section",children:[e.jsx("h3",{className:"settings-section-title",children:s("reader.brightness",{value:String(t.brightness)})}),e.jsx("input",{type:"range",min:"0",max:"100",value:t.brightness,onChange:a=>i("brightness",Number(a.target.value)),className:"settings-slider","aria-label":s("reader.brightnessAria")})]}),e.jsxs("section",{className:"settings-section",children:[e.jsx("h3",{className:"settings-section-title",children:s("reader.orientation")}),e.jsx("div",{className:"orientation-grid",children:x.map(a=>e.jsx("button",{type:"button",className:`orientation-btn ${t.orientation_lock===a.value?"orientation-btn--active":""}`,onClick:()=>l("orientation_lock",a.value),children:s(a.labelKey)},a.value))})]})]})]})]})}export{v as default};

frontend/package.json

@@ -12,13 +12,12 @@
   },
   "dependencies": {
     "axios": "^1.7.9",
-    "dompurify": "^3.4.7",
+    "react-router-dom": "^7.1.0",
     "pdfjs-dist": "^4.10.38",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-i18n-lite": "^1.0.10",
-    "react-reader": "^2.0.15",
-    "react-router-dom": "^7.1.0"
+    "react-reader": "^2.0.15"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { lazy, Suspense, useState } from "react";
+import React, { lazy, Suspense } from "react";
 import { BrowserRouter, Navigate, Route, Routes, useParams } from "react-router-dom";
 import { AuthProvider, useAuth } from "./context/AuthContext";
 import { I18nProvider } from "./i18n/I18nProvider";
@@ -13,14 +13,7 @@ const SettingsPage = lazy(() => import("./pages/Settings").then((m) => ({ defaul
 const BookmarksNotesPage = lazy(() => import("./components/annotations/BookmarksNotesPage").then((m) => ({ default: m.BookmarksNotesPage })));
 const ReadingPage = lazy(() => import("./pages/ReadingPage").then((m) => ({ default: m.default })));
 
-const AuthPage = lazy(() =>
-  import("./pages/AuthPage").then((m) => ({
-    default: () => {
-      const [isLogin, setIsLogin] = useState(true);
-      return isLogin ? <m.LoginPage onToggle={() => setIsLogin(false)} /> : <m.RegisterPage onToggle={() => setIsLogin(true)} />;
-    },
-  })),
-);
+const AuthPage = lazy(() => import("./pages/AuthPage"));
 
 function LoadingFallback() {
   const { t } = useTranslation();

frontend/src/api/annotations.ts

@@ -27,6 +27,3 @@ export async function createMarker(
 export async function deleteBookmark(id: string): Promise<void> {
   await api.delete(`/annotations/bookmarks/${id}/`);
 }
-
-/** @deprecated Use createMarker */
-export const createBookmark = createMarker;

frontend/src/api/loadEbookWithProgress.ts

@@ -0,0 +1,14 @@
+import { booksApi } from "@/api/books";
+import { getReadingProgress } from "@/api/reader";
+import type { ReadingProgress } from "@/types/reader";
+
+export async function loadEbookWithProgress(bookId: number): Promise<{
+  progressData: ReadingProgress | null;
+  blob: Blob;
+}> {
+  const [progressData, blob] = await Promise.all([
+    getReadingProgress(bookId).catch(() => null),
+    booksApi.getEbookFile(bookId),
+  ]);
+  return { progressData, blob };
+}

frontend/src/api/reader.ts

@@ -1,22 +1,10 @@
 /**
- * API client for the reader module — reading settings, chapters, and progress.
+ * API client for the reader module — reading settings and progress.
  * Uses the shared axios client so JWT auth is attached automatically.
  */
 
 import api from "./client";
-import type {
-  ChapterDetail,
-  ChapterSummary,
-  ReadingProgress,
-  ReadingSettings,
-} from "../types/reader";
-
-interface TocChapter {
-  id: number;
-  title: string;
-  index: number;
-  href?: string;
-}
+import type { ReadingProgress, ReadingSettings } from "../types/reader";
 
 export async function getReadingSettings(): Promise<ReadingSettings> {
   const { data } = await api.get<ReadingSettings>("/reader/settings/");
@@ -30,39 +18,6 @@ export async function updateReadingSettings(
   return data;
 }
 
-export async function getChapters(bookId: number): Promise<ChapterSummary[]> {
-  const { data } = await api.get<{ chapters: TocChapter[] }>(
-    `/books/ebooks/${bookId}/toc/`,
-  );
-  const chapters = data.chapters ?? [];
-  return chapters.map((ch) => ({
-    id: ch.id,
-    book: bookId,
-    title: ch.title,
-    number: ch.index + 1,
-  }));
-}
-
-export async function getChapterContent(
-  bookId: number,
-  chapterNumber: number,
-): Promise<ChapterDetail> {
-  const { data } = await api.get<{
-    page: number;
-    chapter_title: string;
-    content: string;
-  }>(`/books/ebooks/${bookId}/content/`, { params: { page: chapterNumber } });
-  return {
-    id: chapterNumber,
-    book: bookId,
-    title: data.chapter_title ?? "",
-    number: data.page ?? chapterNumber,
-    content: data.content ?? "",
-    created_at: "",
-    updated_at: "",
-  };
-}
-
 export async function getReadingProgress(
   bookId: number,
 ): Promise<ReadingProgress> {

frontend/src/components/annotations/MarkerPassageActions.tsx

@@ -0,0 +1,20 @@
+import { useTranslation } from "react-i18n-lite";
+
+interface MarkerPassageActionsProps {
+  onGoToPassage: () => void;
+  onDelete: () => void;
+}
+
+export function MarkerPassageActions({ onGoToPassage, onDelete }: MarkerPassageActionsProps) {
+  const { t } = useTranslation();
+  return (
+    <div className="annotation-actions">
+      <button type="button" className="btn btn-sm" onClick={onGoToPassage}>
+        {t("annotations.goToPassage")}
+      </button>
+      <button type="button" className="btn btn-sm btn-danger" onClick={onDelete}>
+        {t("common.delete")}
+      </button>
+    </div>
+  );
+}

frontend/src/components/annotations/MarkerThreadsView.tsx

@@ -6,6 +6,7 @@ import {
   CollapsibleMarkerPassage,
   CollapsibleMarkerThought,
 } from "@/components/annotations/CollapsibleMarkerText";
+import { MarkerPassageActions } from "@/components/annotations/MarkerPassageActions";
 
 interface MarkerThreadsViewProps {
   ebookIdFilter?: string;
@@ -91,22 +92,10 @@ export function MarkerThreadsView({
                     ) : (
                       <span className="annotation-kind-badge bookmark-badge">{t("annotations.bookmarkOnly")}</span>
                     )}
-                    <div className="annotation-actions">
-                      <button
-                        type="button"
-                        className="btn btn-sm"
-                        onClick={() => onGoToPassage(m.ebook_id, m.epub_cfi)}
-                      >
-                        {t("annotations.goToPassage")}
-                      </button>
-                      <button
-                        type="button"
-                        className="btn btn-sm btn-danger"
-                        onClick={() => removeBookmark(m.id)}
-                      >
-                        {t("common.delete")}
-                      </button>
-                    </div>
+                    <MarkerPassageActions
+                      onGoToPassage={() => onGoToPassage(m.ebook_id, m.epub_cfi)}
+                      onDelete={() => removeBookmark(m.id)}
+                    />
                   </li>
                 ))}
               </ul>

frontend/src/components/annotations/index.ts

@@ -1,2 +0,0 @@
-export { BookmarksNotesPage } from "./BookmarksNotesPage";
-export { MarkerThreadsView } from "./MarkerThreadsView";

frontend/src/components/layout/Layout.tsx

@@ -1,28 +0,0 @@
-import React from "react";
-import { useTranslation } from "react-i18n-lite";
-
-interface LayoutProps {
-  children: React.ReactNode;
-  title?: string;
-}
-
-export function Layout({
-  children,
-  title,
-}: LayoutProps): React.ReactElement {
-  const { t } = useTranslation();
-  const pageTitle = title ?? t("common.appName");
-
-  return (
-    <div className="app-container">
-      <header className="app-header">
-        <h1 className="app-title">{pageTitle}</h1>
-        <nav className="app-nav">
-          <a href="/" className="nav-link">{t("annotations.home")}</a>
-          <a href="/bookmarks-notes" className="nav-link">{t("annotations.bookmarksNotes")}</a>
-        </nav>
-      </header>
-      <main className="app-main">{children}</main>
-    </div>
-  );
-}

frontend/src/components/layout/SimpleFormPageLayout.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+import { useTranslation } from "react-i18n-lite";
+
+interface SimpleFormPageLayoutProps {
+  title: string;
+  onBack: () => void;
+  children: ReactNode;
+}
+
+export function SimpleFormPageLayout({ title, onBack, children }: SimpleFormPageLayoutProps) {
+  const { t } = useTranslation();
+  return (
+    <div style={{ maxWidth: 500, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}>
+      <header style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 24, padding: "16px 0", borderBottom: "1px solid #eee" }}>
+        <button
+          type="button"
+          onClick={onBack}
+          style={{ padding: "8px 16px", borderRadius: 6, border: "1px solid #ddd", background: "#fff", cursor: "pointer", fontSize: 14 }}
+        >
+          ← {t("common.back")}
+        </button>
+        <h1 style={{ fontSize: 24, fontWeight: 700, color: "#1a1a2e", margin: 0 }}>{title}</h1>
+      </header>
+      {children}
+    </div>
+  );
+}

frontend/src/components/layout/index.ts

@@ -1 +0,0 @@
-export { Layout } from "./Layout";

frontend/src/components/library/FinishedBooksShelf.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18n-lite";
 import styles from "./FinishedBooksShelf.module.css";
 
-export interface ShelfBook {
+interface ShelfBook {
   id: number;
   title: string;
   author: string;

frontend/src/components/library/LibraryBookCard.tsx

@@ -2,14 +2,14 @@ import { useTranslation } from "react-i18n-lite";
 import { readingStatusKey } from "@/locales";
 import styles from "../../pages/Library.module.css";
 
-export const LIBRARY_STATUS_COLORS: Record<string, { bg: string; text: string }> = {
+const LIBRARY_STATUS_COLORS: Record<string, { bg: string; text: string }> = {
   want_to_read: { bg: "#dbeafe", text: "#1d4ed8" },
   reading: { bg: "#dcfce7", text: "#16a34a" },
   finished: { bg: "#f3e8ff", text: "#9333ea" },
   dnf: { bg: "#fef3c7", text: "#b45309" },
 };
 
-export interface LibraryBookCardData {
+interface LibraryBookCardData {
   id: number;
   title: string;
   author: string;

frontend/src/components/reader/BookMarkersPanel.tsx

@@ -6,6 +6,7 @@ import {
   CollapsibleMarkerPassage,
   CollapsibleMarkerThought,
 } from "@/components/annotations/CollapsibleMarkerText";
+import { MarkerPassageActions } from "@/components/annotations/MarkerPassageActions";
 
 interface BookMarkersPanelProps {
   ebookId: number;
@@ -67,18 +68,10 @@ export function BookMarkersPanel({
                   ) : (
                     <span className="annotation-kind-badge bookmark-badge">{t("annotations.bookmarkOnly")}</span>
                   )}
-                  <div className="annotation-actions">
-                    <button type="button" className="btn btn-sm" onClick={() => onGoToPassage(m)}>
-                      {t("annotations.goToPassage")}
-                    </button>
-                    <button
-                      type="button"
-                      className="btn btn-sm btn-danger"
-                      onClick={() => removeBookmark(m.id)}
-                    >
-                      {t("common.delete")}
-                    </button>
-                  </div>
+                  <MarkerPassageActions
+                    onGoToPassage={() => onGoToPassage(m)}
+                    onDelete={() => removeBookmark(m.id)}
+                  />
                 </li>
               ))}
             </ul>

frontend/src/components/reader/EpubReadingView.tsx

@@ -2,7 +2,7 @@
  * EpubReadingView — full-screen EPUB reading powered by react-reader (epub.js).
  */
 
-import { lazy, Suspense, useCallback, useEffect, useMemo, useState } from "react";
+import { lazy, useCallback, useEffect, useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18n-lite";
 import { EpubView, EpubViewStyle } from "react-reader";
@@ -12,6 +12,10 @@ import { useEpubHighlights } from "../../hooks/useEpubHighlights";
 import { useEpubReader } from "../../hooks/useEpubReader";
 import { useEpubSelection } from "../../hooks/useEpubSelection";
 import { useReadingSettings } from "../../hooks/useReadingSettings";
+import { useReaderOrientationCss } from "../../hooks/useReaderOrientationCss";
+import { ReaderErrorScreen } from "./ReaderErrorScreen";
+import { ReaderLoadingScreen } from "./ReaderLoadingScreen";
+import { ReaderSuspenseShell } from "./ReaderSuspenseShell";
 import type { EBookDetail } from "../../types/book";
 import type { EpubTocItem } from "./TableOfContents";
 import { SelectionPopover } from "./SelectionPopover";
@@ -82,17 +86,7 @@ export function EpubReadingView({ book, bookId, initialEpubLocation }: EpubReadi
     applySettings(settings);
   }, [settings, applySettings]);
 
-  useEffect(() => {
-    const root = document.documentElement;
-    if (settings.orientation_lock !== "auto") {
-      root.style.setProperty(
-        "--reader-orientation",
-        settings.orientation_lock === "portrait" ? "portrait" : "landscape",
-      );
-    } else {
-      root.style.removeProperty("--reader-orientation");
-    }
-  }, [settings.orientation_lock]);
+  useReaderOrientationCss(settings.orientation_lock);
 
   const handleTocChanged = useCallback((toc: EpubTocItem[]) => {
     setTocItems(toc);
@@ -122,34 +116,20 @@ export function EpubReadingView({ book, bookId, initialEpubLocation }: EpubReadi
   );
 
   if (epubLoading) {
-    return (
-      <div className="reader-loading">
-        <div className="spinner" />
-        <p>{t("reader.loading")}</p>
-      </div>
-    );
+    return <ReaderLoadingScreen />;
   }
 
   if (epubError || !epubUrl) {
     return (
-      <div className="reader-loading">
-        <p className="reader-error">{epubError ?? t("reader.unableToOpen")}</p>
-        <button type="button" className="back-button" onClick={() => navigate("/")}>
-          {t("reader.backToLibrary")}
-        </button>
-      </div>
+      <ReaderErrorScreen
+        message={epubError ?? t("reader.unableToOpen")}
+        onBack={() => navigate("/")}
+      />
     );
   }
 
   return (
-    <Suspense
-      fallback={
-        <div className="reader-loading">
-          <div className="spinner" />
-        </div>
-      }
-    >
-      <div className="reader-container" data-theme={settings.theme}>
+    <ReaderSuspenseShell theme={settings.theme}>
         <ReaderToolbar
           bookTitle={book.title}
           chapterTitle={chapterTitle || t("reader.reading")}
@@ -235,7 +215,6 @@ export function EpubReadingView({ book, bookId, initialEpubLocation }: EpubReadi
             ›
           </button>
         </main>
-      </div>
-    </Suspense>
+    </ReaderSuspenseShell>
   );
 }

frontend/src/components/reader/PanelCloseButton.tsx

@@ -0,0 +1,16 @@
+interface PanelCloseButtonProps {
+  className: string;
+  onClick: () => void;
+  ariaLabel: string;
+}
+
+export function PanelCloseButton({ className, onClick, ariaLabel }: PanelCloseButtonProps) {
+  return (
+    <button type="button" className={className} onClick={onClick} aria-label={ariaLabel}>
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <line x1="18" y1="6" x2="6" y2="18" />
+        <line x1="6" y1="6" x2="18" y2="18" />
+      </svg>
+    </button>
+  );
+}

frontend/src/components/reader/PdfReadingView.tsx

@@ -2,13 +2,17 @@
  * PdfReadingView — full-screen PDF reading powered by PDF.js.
  */
 
-import { lazy, Suspense, useCallback, useEffect, useMemo, useState } from "react";
+import { lazy, useCallback, useEffect, useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18n-lite";
 import { useAnnotations } from "@/context/AnnotationsContext";
 import { useBookmarkRailLayout } from "../../hooks/useBookmarkRailLayout";
 import { usePdfReader } from "../../hooks/usePdfReader";
 import { useReadingSettings } from "../../hooks/useReadingSettings";
+import { useReaderOrientationCss } from "../../hooks/useReaderOrientationCss";
+import { ReaderErrorScreen } from "./ReaderErrorScreen";
+import { ReaderLoadingScreen } from "./ReaderLoadingScreen";
+import { ReaderSuspenseShell } from "./ReaderSuspenseShell";
 import { useToast } from "../../hooks/useToast";
 import { booksApi } from "../../api/books";
 import type { EBookDetail } from "../../types/book";
@@ -96,17 +100,7 @@ export function PdfReadingView({ book, bookId, initialAnchor }: PdfReadingViewPr
       );
   }, [bookId, pageCount, t]);
 
-  useEffect(() => {
-    const root = document.documentElement;
-    if (settings.orientation_lock !== "auto") {
-      root.style.setProperty(
-        "--reader-orientation",
-        settings.orientation_lock === "portrait" ? "portrait" : "landscape",
-      );
-    } else {
-      root.style.removeProperty("--reader-orientation");
-    }
-  }, [settings.orientation_lock]);
+  useReaderOrientationCss(settings.orientation_lock);
 
   const handleTocNavigate = useCallback(
     (href: string) => {
@@ -165,36 +159,17 @@ export function PdfReadingView({ book, bookId, initialAnchor }: PdfReadingViewPr
   }, [bookMarkers, currentPage]);
 
   if (isLoading) {
-    return (
-      <div className="reader-loading">
-        <div className="spinner" />
-        <p>{t("reader.loading")}</p>
-      </div>
-    );
+    return <ReaderLoadingScreen />;
   }
 
   if (error || !pdfDocument) {
     const message =
       error === "PDF_PASSWORD" ? t("reader.pdfPassword") : (error ?? t("reader.unableToOpen"));
-    return (
-      <div className="reader-loading">
-        <p className="reader-error">{message}</p>
-        <button type="button" className="back-button" onClick={() => navigate("/")}>
-          {t("reader.backToLibrary")}
-        </button>
-      </div>
-    );
+    return <ReaderErrorScreen message={message} onBack={() => navigate("/")} />;
   }
 
   return (
-    <Suspense
-      fallback={
-        <div className="reader-loading">
-          <div className="spinner" />
-        </div>
-      }
-    >
-      <div className="reader-container" data-theme={settings.theme}>
+    <ReaderSuspenseShell theme={settings.theme}>
         <ReaderToolbar
           bookTitle={book.title}
           chapterTitle={chapterTitle || t("reader.reading")}
@@ -270,7 +245,6 @@ export function PdfReadingView({ book, bookId, initialAnchor }: PdfReadingViewPr
             ›
           </button>
         </main>
-      </div>
-    </Suspense>
+    </ReaderSuspenseShell>
   );
 }

frontend/src/components/reader/ReaderErrorScreen.tsx

@@ -0,0 +1,18 @@
+import { useTranslation } from "react-i18n-lite";
+
+interface ReaderErrorScreenProps {
+  message: string;
+  onBack: () => void;
+}
+
+export function ReaderErrorScreen({ message, onBack }: ReaderErrorScreenProps) {
+  const { t } = useTranslation();
+  return (
+    <div className="reader-loading">
+      <p className="reader-error">{message}</p>
+      <button type="button" className="back-button" onClick={onBack}>
+        {t("reader.backToLibrary")}
+      </button>
+    </div>
+  );
+}

frontend/src/components/reader/ReaderLoadingScreen.tsx

@@ -0,0 +1,15 @@
+import { useTranslation } from "react-i18n-lite";
+
+interface ReaderLoadingScreenProps {
+  showMessage?: boolean;
+}
+
+export function ReaderLoadingScreen({ showMessage = true }: ReaderLoadingScreenProps) {
+  const { t } = useTranslation();
+  return (
+    <div className="reader-loading">
+      <div className="spinner" />
+      {showMessage && <p>{t("reader.loading")}</p>}
+    </div>
+  );
+}

frontend/src/components/reader/ReaderSuspenseShell.tsx

@@ -0,0 +1,17 @@
+import { Suspense, type ReactNode } from "react";
+import { ReaderLoadingScreen } from "./ReaderLoadingScreen";
+
+interface ReaderSuspenseShellProps {
+  theme: string;
+  children: ReactNode;
+}
+
+export function ReaderSuspenseShell({ theme, children }: ReaderSuspenseShellProps) {
+  return (
+    <Suspense fallback={<ReaderLoadingScreen showMessage={false} />}>
+      <div className="reader-container" data-theme={theme}>
+        {children}
+      </div>
+    </Suspense>
+  );
+}

frontend/src/components/reader/ReaderTocButton.tsx

@@ -0,0 +1,23 @@
+import { useTranslation } from "react-i18n-lite";
+
+interface ReaderTocButtonProps {
+  onClick: () => void;
+}
+
+export function ReaderTocButton({ onClick }: ReaderTocButtonProps) {
+  const { t } = useTranslation();
+  return (
+    <button
+      type="button"
+      className="reader-bar-btn"
+      onClick={onClick}
+      aria-label={t("reader.tocAria")}
+    >
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <line x1="3" y1="6" x2="21" y2="6" />
+        <line x1="3" y1="12" x2="21" y2="12" />
+        <line x1="3" y1="18" x2="21" y2="18" />
+      </svg>
+    </button>
+  );
+}

frontend/src/components/reader/ReaderToolbar.tsx

@@ -4,6 +4,7 @@
 
 import { useTranslation } from "react-i18n-lite";
 import type { ReadingProgress } from "../../types/reader";
+import { ReaderTocButton } from "./ReaderTocButton";
 
 interface ReaderToolbarProps {
   bookTitle: string;
@@ -47,38 +48,14 @@ export default function ReaderToolbar({
             </svg>
           </button>
         ) : (
-          <button
-            type="button"
-            className="reader-bar-btn"
-            onClick={onToggleToc}
-            aria-label={t("reader.tocAria")}
-          >
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <line x1="3" y1="6" x2="21" y2="6" />
-              <line x1="3" y1="12" x2="21" y2="12" />
-              <line x1="3" y1="18" x2="21" y2="18" />
-            </svg>
-          </button>
+          <ReaderTocButton onClick={onToggleToc} />
         )}
         <div className="reader-bar-title">
           <span className="reader-bar-book">{bookTitle}</span>
           <span className="reader-bar-chapter">{chapterTitle}</span>
         </div>
         <div className="reader-bar-actions">
-          {onBack && (
-            <button
-              type="button"
-              className="reader-bar-btn"
-              onClick={onToggleToc}
-              aria-label={t("reader.tocAria")}
-            >
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <line x1="3" y1="6" x2="21" y2="6" />
-                <line x1="3" y1="12" x2="21" y2="12" />
-                <line x1="3" y1="18" x2="21" y2="18" />
-              </svg>
-            </button>
-          )}
+          {onBack && <ReaderTocButton onClick={onToggleToc} />}
           {onBookmarkPage && (
             <button
               type="button"

frontend/src/components/reader/ReadingSettingsPanel.tsx

@@ -12,6 +12,7 @@ import type {
   ThemePreset,
 } from "../../types/reader";
 import type { SettingsPersistMode } from "../../hooks/useReadingSettings";
+import { PanelCloseButton } from "./PanelCloseButton";
 
 interface ReadingSettingsPanelProps {
   format?: "epub" | "pdf";
@@ -89,17 +90,11 @@ export default function ReadingSettingsPanel({
       >
         <div className="settings-header">
           <h2 className="settings-title">{t("reader.settingsTitle")}</h2>
-          <button
-            type="button"
+          <PanelCloseButton
             className="settings-close-btn"
             onClick={handleClose}
-            aria-label={t("reader.closeSettingsAria")}
-          >
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <line x1="18" y1="6" x2="6" y2="18" />
-              <line x1="6" y1="6" x2="18" y2="18" />
-            </svg>
-          </button>
+            ariaLabel={t("reader.closeSettingsAria")}
+          />
         </div>
 
         <div className="settings-body">
@@ -124,7 +119,7 @@ export default function ReadingSettingsPanel({
           {format === "pdf" && onPdfScaleChange && (
             <section className="settings-section">
               <h3 className="settings-section-title">
-                {t("reader.pdfZoom", { value: Math.round(pdfScale * 100) })}
+                {t("reader.pdfZoom", { value: String(Math.round(pdfScale * 100)) })}
               </h3>
               <input
                 type="range"

frontend/src/components/reader/TableOfContents.tsx

@@ -4,6 +4,7 @@
 
 import type { KeyboardEvent } from "react";
 import { useTranslation } from "react-i18n-lite";
+import { PanelCloseButton } from "./PanelCloseButton";
 
 export interface EpubTocItem {
   label: string;
@@ -73,17 +74,11 @@ export default function TableOfContents({
       <aside className={`toc-drawer ${isOpen ? "toc-drawer--open" : ""}`}>
         <div className="toc-header">
           <h2 className="toc-title">{t("reader.tocTitle")}</h2>
-          <button
-            type="button"
+          <PanelCloseButton
             className="toc-close-btn"
             onClick={onClose}
-            aria-label={t("reader.closeTocAria")}
-          >
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <line x1="18" y1="6" x2="6" y2="18" />
-              <line x1="6" y1="6" x2="18" y2="18" />
-            </svg>
-          </button>
+            ariaLabel={t("reader.closeTocAria")}
+          />
         </div>
 
         <nav className="toc-list">

frontend/src/constants/bookmarkHighlightColors.ts

@@ -48,7 +48,7 @@ export function highlightBackgroundStyle(color: string): {
   };
 }
 
-export const BOOKMARK_COLOR_STORAGE_KEY = "cloud-reader:lastBookmarkHighlightColor";
+const BOOKMARK_COLOR_STORAGE_KEY = "cloud-reader:lastBookmarkHighlightColor";
 
 export function loadLastHighlightColor(): string {
   try {

frontend/src/context/AnnotationsContext.tsx

@@ -8,7 +8,7 @@ import {
 } from "react";
 import type { Bookmark, CreateMarkerPayload, MarkerEntry, MarkersByBook } from "@/types";
 import * as annotationsApi from "@/api/annotations";
-import { bookmarkToMarkerEntry, groupMarkersByBook, sortMarkers } from "@/utils/markers";
+import { bookmarkToMarkerEntry, groupMarkersByBook, sortBookmarks } from "@/utils/markers";
 
 interface AnnotationsState {
   bookmarks: Bookmark[];
@@ -37,10 +37,7 @@ function annotationsReducer(
     case "FETCH_BOOKMARKS_START":
       return { ...state, bookmarksLoading: true, error: null };
     case "FETCH_BOOKMARKS_SUCCESS": {
-      const sorted = [...action.payload].sort((a, b) => {
-        if (a.chapter_index !== b.chapter_index) return a.chapter_index - b.chapter_index;
-        return a.epub_cfi.localeCompare(b.epub_cfi);
-      });
+      const sorted = [...action.payload].sort(sortBookmarks);
       return { ...state, bookmarks: sorted, bookmarksLoading: false };
     }
     case "SET_ERROR":
@@ -51,10 +48,7 @@ function annotationsReducer(
         bookmarks: state.bookmarks.filter((b) => b.id !== action.payload),
       };
     case "ADD_BOOKMARK": {
-      const next = [...state.bookmarks, action.payload].sort((a, b) => {
-        if (a.chapter_index !== b.chapter_index) return a.chapter_index - b.chapter_index;
-        return a.epub_cfi.localeCompare(b.epub_cfi);
-      });
+      const next = [...state.bookmarks, action.payload].sort(sortBookmarks);
       return { ...state, bookmarks: next };
     }
     default:
@@ -105,7 +99,7 @@ export function AnnotationsProvider({
   }, []);
 
   const markers = useMemo(
-    () => state.bookmarks.map(bookmarkToMarkerEntry).sort(sortMarkers),
+    () => [...state.bookmarks].sort(sortBookmarks).map(bookmarkToMarkerEntry),
     [state.bookmarks],
   );
 

frontend/src/hooks/index.ts

@@ -1,4 +0,0 @@
-export { usePaginatedQuery } from "./usePaginatedQuery";
-export { useDebounce } from "./useDebounce";
-export { useVoiceSearch } from "./useVoiceSearch";
-export { useMediaQuery } from "./useMediaQuery";

frontend/src/hooks/useEpubReader.ts

@@ -3,8 +3,8 @@
  */
 
 import { useCallback, useEffect, useRef, useState } from "react";
-import { booksApi } from "../api/books";
-import { getReadingProgress, updateReadingProgress } from "../api/reader";
+import { loadEbookWithProgress } from "../api/loadEbookWithProgress";
+import { updateReadingProgress } from "../api/reader";
 import type { ReadingProgress, ReadingSettings } from "../types/reader";
 import {
   applyRenditionSettings,
@@ -197,10 +197,7 @@ export function useEpubReader(
       setIsLoading(true);
       setError(null);
       try {
-        const [progressData, blob] = await Promise.all([
-          getReadingProgress(bookId).catch(() => null),
-          booksApi.getEbookFile(bookId),
-        ]);
+        const { progressData, blob } = await loadEbookWithProgress(bookId);
         if (cancelled) return;
 
         blobUrl = URL.createObjectURL(blob);

frontend/src/hooks/usePaginatedQuery.ts

@@ -1,69 +0,0 @@
-import { useState, useCallback, useRef, useEffect } from "react";
-import type { PaginatedResponse } from "@/types";
-
-interface UsePaginatedQueryOptions<T> {
-  fetchFn: (cursor?: string) => Promise<PaginatedResponse<T>>;
-}
-
-interface UsePaginatedQueryResult<T> {
-  items: T[];
-  loading: boolean;
-  error: string | null;
-  hasMore: boolean;
-  loadMore: () => Promise<void>;
-  refresh: () => Promise<void>;
-}
-
-/**
- * Hook for paginated list fetching with infinite scroll support.
- */
-export function usePaginatedQuery<T>({
-  fetchFn,
-}: UsePaginatedQueryOptions<T>): UsePaginatedQueryResult<T> {
-  const [items, setItems] = useState<T[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [nextCursor, setNextCursor] = useState<string | null>(null);
-  const loadingRef = useRef(false);
-
-  const refresh = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const response = await fetchFn();
-      setItems(response.results);
-      setNextCursor(response.next);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to fetch data");
-    } finally {
-      setLoading(false);
-    }
-  }, [fetchFn]);
-
-  const loadMore = useCallback(async () => {
-    if (!nextCursor || loadingRef.current) return;
-    loadingRef.current = true;
-    try {
-      const response = await fetchFn(nextCursor);
-      setItems((prev) => [...prev, ...response.results]);
-      setNextCursor(response.next);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to load more");
-    } finally {
-      loadingRef.current = false;
-    }
-  }, [nextCursor, fetchFn]);
-
-  useEffect(() => {
-    refresh();
-  }, [refresh]);
-
-  return {
-    items,
-    loading,
-    error,
-    hasMore: nextCursor !== null,
-    loadMore,
-    refresh,
-  };
-}

frontend/src/hooks/usePdfReader.ts

@@ -3,8 +3,8 @@
  */
 
 import { useCallback, useEffect, useRef, useState } from "react";
-import { booksApi } from "../api/books";
-import { getReadingProgress, updateReadingProgress } from "../api/reader";
+import { loadEbookWithProgress } from "../api/loadEbookWithProgress";
+import { updateReadingProgress } from "../api/reader";
 import type { ReadingProgress } from "../types/reader";
 import { parsePdfAnchor } from "../utils/pdfAnchor";
 import { pdfjs, type PdfDocumentProxy } from "../utils/pdfjsSetup";
@@ -175,10 +175,7 @@ export function usePdfReader(
       setIsLoading(true);
       setError(null);
       try {
-        const [progressData, blob] = await Promise.all([
-          getReadingProgress(bookId).catch(() => null),
-          booksApi.getEbookFile(bookId),
-        ]);
+        const { progressData, blob } = await loadEbookWithProgress(bookId);
         if (cancelled) return;
 
         const loadingTask = pdfjs.getDocument({ data: await blob.arrayBuffer() });

frontend/src/hooks/useReaderOrientationCss.ts

@@ -0,0 +1,16 @@
+import { useEffect } from "react";
+import type { ReadingSettings } from "@/types/reader";
+
+export function useReaderOrientationCss(orientationLock: ReadingSettings["orientation_lock"]): void {
+  useEffect(() => {
+    const root = document.documentElement;
+    if (orientationLock !== "auto") {
+      root.style.setProperty(
+        "--reader-orientation",
+        orientationLock === "portrait" ? "portrait" : "landscape",
+      );
+    } else {
+      root.style.removeProperty("--reader-orientation");
+    }
+  }, [orientationLock]);
+}

frontend/src/hooks/useReadingSettings.ts

@@ -36,7 +36,7 @@ const DEFAULT_SETTINGS: ReadingSettings = {
 
 const SAVE_DEBOUNCE_MS = 600;
 
-export function applyReadingCssVariables(settings: ReadingSettings): void {
+function applyReadingCssVariables(settings: ReadingSettings): void {
   const root = document.documentElement;
   root.style.setProperty("--reader-bg", settings.background_color);
   root.style.setProperty("--reader-text", settings.text_color);

frontend/src/pages/AddBook.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18n-lite";
 import { booksApi } from "../api/books";
 import { getApiErrorMessage } from "../api/errors";
+import { SimpleFormPageLayout } from "../components/layout/SimpleFormPageLayout";
 
 export function AddBookPage() {
   const { t } = useTranslation();
@@ -33,11 +34,7 @@ export function AddBookPage() {
   };
 
   return (
-    <div style={{ maxWidth: 500, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}>
-      <header style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 24, padding: "16px 0", borderBottom: "1px solid #eee" }}>
-        <button onClick={() => navigate("/")} style={{ padding: "8px 16px", borderRadius: 6, border: "1px solid #ddd", background: "#fff", cursor: "pointer", fontSize: 14 }}>← {t("common.back")}</button>
-        <h1 style={{ fontSize: 24, fontWeight: 700, color: "#1a1a2e", margin: 0 }}>{t("addBook.title")}</h1>
-      </header>
+    <SimpleFormPageLayout title={t("addBook.title")} onBack={() => navigate("/")}>
       <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 20 }}>
         {error && <div style={{ background: "#fde8e8", padding: 12, borderRadius: 6, color: "#e74c3c", fontSize: 14 }}>{error}</div>}
         <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
@@ -55,6 +52,6 @@ export function AddBookPage() {
         </div>
         <button type="submit" disabled={uploading} style={{ padding: "12px 24px", borderRadius: 8, border: "none", background: "#1a1a2e", color: "#fff", fontSize: 16, fontWeight: 600, cursor: "pointer", opacity: uploading ? 0.6 : 1, marginTop: 8 }}>{uploading ? t("addBook.uploading") : t("addBook.upload")}</button>
       </form>
-    </div>
+    </SimpleFormPageLayout>
   );
 }

frontend/src/pages/AuthPage.tsx

@@ -56,5 +56,7 @@ function AuthForm({ isLogin, onToggle }: { isLogin: boolean; onToggle: () => voi
   );
 }
 
-export function LoginPage({ onToggle }: { onToggle: () => void }) { return <AuthForm isLogin={true} onToggle={onToggle} />; }
-export function RegisterPage({ onToggle }: { onToggle: () => void }) { return <AuthForm isLogin={false} onToggle={onToggle} />; }
+export default function AuthPage() {
+  const [isLogin, setIsLogin] = useState(true);
+  return <AuthForm isLogin={isLogin} onToggle={() => setIsLogin((v) => !v)} />;
+}

frontend/src/pages/Library.tsx

@@ -57,7 +57,6 @@ export function LibraryPage() {
   const [filters, setFilters] = useState<FilterState>({ genre: "", author: "", reading_status: "" });
   const [genres, setGenres] = useState<string[]>([]);
   const [authors, setAuthors] = useState<string[]>([]);
-  const [totalCount, setTotalCount] = useState(0);
   const [showFilters, setShowFilters] = useState(false);
   const [showSuggestions, setShowSuggestions] = useState(false);
   const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
@@ -95,11 +94,9 @@ export function LibraryPage() {
         items = items.filter((b) => b.reading_status === params.reading_status);
       }
       setBooks(items);
-      setTotalCount(items.length);
     } catch (err) {
       setError(err instanceof Error ? err.message : t("library.loadFailed"));
       setBooks([]);
-      setTotalCount(0);
     } finally {
       setLoading(false);
     }
@@ -169,7 +166,6 @@ export function LibraryPage() {
       refreshFilterOptions(next);
       return next;
     });
-    setTotalCount((count) => Math.max(0, count - 1));
   }, [refreshFilterOptions]);
 
   const handleBookContextMenu = useCallback((e: React.MouseEvent, book: LibraryBook) => {

frontend/src/pages/Settings.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18n-lite";
 import { booksApi } from "../api/books";
 import type { ReadingSettings } from "../types/book";
 import type { SupportedLanguage } from "../locales";
+import { SimpleFormPageLayout } from "../components/layout/SimpleFormPageLayout";
 
 const BG_COLORS = [
   { value: "#ffffff", labelKey: "settings.bgWhite" },
@@ -41,11 +42,7 @@ export function SettingsPage() {
   if (loading) return <div style={{ maxWidth: 500, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}><p>{t("settings.loading")}</p></div>;
 
   return (
-    <div style={{ maxWidth: 500, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}>
-      <header style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 24, padding: "16px 0", borderBottom: "1px solid #eee" }}>
-        <button onClick={() => navigate("/")} style={{ padding: "8px 16px", borderRadius: 6, border: "1px solid #ddd", background: "#fff", cursor: "pointer", fontSize: 14 }}>← {t("common.back")}</button>
-        <h1 style={{ fontSize: 24, fontWeight: 700, color: "#1a1a2e", margin: 0 }}>{t("settings.title")}</h1>
-      </header>
+    <SimpleFormPageLayout title={t("settings.title")} onBack={() => navigate("/")}>
       <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
         {error && <div style={{ background: "#fde8e8", padding: 12, borderRadius: 6, color: "#e74c3c", fontSize: 14 }}>{error}</div>}
         {success && <div style={{ background: "#d4edda", padding: 12, borderRadius: 6, color: "#155724", fontSize: 14 }}>{t("settings.saved")}</div>}
@@ -90,6 +87,6 @@ export function SettingsPage() {
 
         <button onClick={handleSave} disabled={saving} style={{ padding: "12px 24px", borderRadius: 8, border: "none", background: "#1a1a2e", color: "#fff", fontSize: 16, fontWeight: 600, cursor: "pointer", opacity: saving ? 0.6 : 1, marginTop: 8 }}>{saving ? t("common.saving") : t("settings.saveSettings")}</button>
       </div>
-    </div>
+    </SimpleFormPageLayout>
   );
 }

frontend/src/types/book.ts

@@ -101,12 +101,4 @@ export interface BookSearchParams {
   ordering?: string;
   page?: number;
   page_size?: number;
-}
-
-export const READING_STATUS_OPTIONS: { value: string; label: string }[] = [
-  { value: "", label: "All Statuses" },
-  { value: "want_to_read", label: "Want to Read" },
-  { value: "reading", label: "Reading" },
-  { value: "finished", label: "Finished" },
-  { value: "dnf", label: "Did Not Finish" },
-];
+}

frontend/src/types/index.ts

@@ -1,29 +1,5 @@
 /** Core domain types for Cloud Reader */
 
-export interface User {
-  id: number;
-  email: string;
-  username: string;
-}
-
-export interface Book {
-  id: string;
-  title: string;
-  author: string;
-  total_pages: number;
-  cover_image: string;
-  created_at: string;
-  updated_at: string;
-}
-
-export interface BookSummary {
-  id: string;
-  title: string;
-  author: string;
-  total_pages: number;
-  cover_image: string;
-}
-
 export interface Bookmark {
   id: string;
   ebook: number;
@@ -39,17 +15,6 @@ export interface Bookmark {
   updated_at: string;
 }
 
-export interface Note {
-  id: string;
-  book: string;
-  book_title: string;
-  page: number;
-  location_text: string;
-  content: string;
-  created_at: string;
-  updated_at: string;
-}
-
 export interface CreateMarkerPayload {
   ebook: number;
   epub_cfi: string;
@@ -60,18 +25,6 @@ export interface CreateMarkerPayload {
   highlight_color?: string;
 }
 
-/** @deprecated Legacy note create */
-export interface CreateNotePayload {
-  book: string;
-  page: number;
-  location_text?: string;
-  content: string;
-}
-
-export interface UpdateNotePayload {
-  content: string;
-}
-
 export interface PaginatedResponse<T> {
   count: number;
   next: string | null;
@@ -79,11 +32,6 @@ export interface PaginatedResponse<T> {
   results: T[];
 }
 
-export interface TokenResponse {
-  access: string;
-  refresh: string;
-}
-
 export interface MarkerEntry {
   id: string;
   ebook_id: number;

frontend/src/types/reader.ts

@@ -3,19 +3,6 @@
  * Reading view, settings, chapters, and progress types.
  */
 
-export interface ChapterSummary {
-  id: number;
-  book: number;
-  title: string;
-  number: number;
-}
-
-export interface ChapterDetail extends ChapterSummary {
-  content: string;
-  created_at: string;
-  updated_at: string;
-}
-
 export interface ReadingSettings {
   font_family: "sans-serif" | "serif" | "monospace";
   font_size: number;

frontend/src/utils/ebookLibrary.ts

@@ -55,7 +55,10 @@ export function ebookMatchesQuery(item: Pick<EbookLibraryItem, "title" | "author
   return item.subjects.some((s) => s.toLowerCase().includes(q));
 }
 
-export function collectGenresFromEbooks(ebooks: EBookListItem[], locale: SupportedLanguage): string[] {
+export function collectGenresFromEbooks(
+  ebooks: Pick<EBookListItem, "subjects">[],
+  locale: SupportedLanguage,
+): string[] {
   const set = new Set<string>();
   for (const e of ebooks) {
     for (const s of filterSubjectsByLocale(e.subjects ?? [], locale)) set.add(s);
@@ -63,7 +66,7 @@ export function collectGenresFromEbooks(ebooks: EBookListItem[], locale: Support
   return [...set].sort((a, b) => a.localeCompare(b, locale));
 }
 
-export function collectAuthorsFromEbooks(ebooks: EBookListItem[]): string[] {
+export function collectAuthorsFromEbooks(ebooks: Pick<EBookListItem, "author">[]): string[] {
   const set = new Set<string>();
   for (const e of ebooks) {
     if (e.author?.trim()) set.add(e.author.trim());

frontend/src/utils/epubHighlights.ts

@@ -28,7 +28,7 @@ function annotationId(bookmarkId: string): string {
   return `bookmark-hl-${bookmarkId}`;
 }
 
-export function applyBookmarkHighlight(
+function applyBookmarkHighlight(
   rendition: EpubRenditionWithHighlights,
   bookmark: BookmarkHighlight,
 ): void {
@@ -53,7 +53,7 @@ export function applyBookmarkHighlight(
   }
 }
 
-export function removeBookmarkHighlight(
+function removeBookmarkHighlight(
   rendition: EpubRenditionWithHighlights,
   bookmark: BookmarkHighlight,
 ): void {

frontend/src/utils/epubRendition.ts

@@ -67,11 +67,6 @@ export function percentageFromCfi(rendition: EpubRendition, cfi: string): number
   }
 }
 
-export function spineLength(rendition: EpubRendition): number {
-  const items = rendition.book?.spine?.spineItems;
-  return items?.length ?? 0;
-}
-
 /** Map nav/TOC href to a spine href epub.js can display. */
 export function resolveSpineHref(book: EpubBookForNav, href: string): string {
   const hashIndex = href.indexOf("#");

frontend/src/utils/libraryStatus.ts

@@ -1,9 +1,9 @@
-export const FINISHED_PROGRESS_THRESHOLD = 99;
+const FINISHED_PROGRESS_THRESHOLD = 99;
 
 export type LibraryReadingStatus = "want_to_read" | "reading" | "finished";
 
 /** API may return progress as a number or numeric string. */
-export function coerceProgressPercent(progress: unknown): number | null {
+function coerceProgressPercent(progress: unknown): number | null {
   if (progress == null || progress === "") return null;
   const n = typeof progress === "number" ? progress : Number(progress);
   if (!Number.isFinite(n)) return null;

frontend/src/utils/markers.ts

@@ -1,5 +1,4 @@
 import { DEFAULT_BOOKMARK_HIGHLIGHT_COLOR } from "@/constants/bookmarkHighlightColors";
-import { DEFAULT_BOOKMARK_HIGHLIGHT_COLOR } from "@/constants/bookmarkHighlightColors";
 import type { Bookmark, MarkerEntry, MarkersByBook } from "@/types";
 
 export function bookmarkToMarkerEntry(b: Bookmark): MarkerEntry {
@@ -19,7 +18,14 @@ export function bookmarkToMarkerEntry(b: Bookmark): MarkerEntry {
   };
 }
 
-export function sortMarkers(a: MarkerEntry, b: MarkerEntry): number {
+function sortMarkers(a: MarkerEntry, b: MarkerEntry): number {
+  if (a.chapter_index !== b.chapter_index) {
+    return a.chapter_index - b.chapter_index;
+  }
+  return a.epub_cfi.localeCompare(b.epub_cfi);
+}
+
+export function sortBookmarks(a: Bookmark, b: Bookmark): number {
   if (a.chapter_index !== b.chapter_index) {
     return a.chapter_index - b.chapter_index;
   }

frontend/src/utils/pdfAnchor.ts

@@ -7,10 +7,6 @@ export interface ParsedPdfAnchor {
 
 const PDF_ANCHOR_PREFIX = "pdf:v1:";
 
-export function isPdfAnchor(anchor: string): boolean {
-  return anchor.startsWith(PDF_ANCHOR_PREFIX) || anchor.startsWith("pdf:page:");
-}
-
 export function parsePageHref(href: string): number | null {
   const match = href.match(/^pdf:page:(\d+)$/);
   if (!match) return null;
@@ -38,7 +34,7 @@ export function parsePdfAnchor(anchor: string): ParsedPdfAnchor | null {
 
   const rectsMatch = anchor.match(/rects=([^;]+)/);
   let rects: PdfRect[] = [];
-  if (rectsMatch) {
+  if (rectsMatch?.[1]) {
     try {
       const parsed = JSON.parse(decodeURIComponent(rectsMatch[1])) as unknown;
       if (Array.isArray(parsed)) {
@@ -56,27 +52,3 @@ export function parsePdfAnchor(anchor: string): ParsedPdfAnchor | null {
 
   return { page, rects };
 }
-
-export function rectsFromSelection(
-  range: Range,
-  pageElement: HTMLElement,
-): PdfRect[] {
-  const pageRect = pageElement.getBoundingClientRect();
-  if (pageRect.width <= 0 || pageRect.height <= 0) return [];
-
-  const rects: PdfRect[] = [];
-  for (const clientRect of range.getClientRects()) {
-    if (clientRect.width <= 0 || clientRect.height <= 0) continue;
-    const x = (clientRect.left - pageRect.left) / pageRect.width;
-    const y = (clientRect.top - pageRect.top) / pageRect.height;
-    const w = clientRect.width / pageRect.width;
-    const h = clientRect.height / pageRect.height;
-    rects.push([
-      Math.max(0, Math.min(1, x)),
-      Math.max(0, Math.min(1, y)),
-      Math.max(0, Math.min(1, w)),
-      Math.max(0, Math.min(1, h)),
-    ]);
-  }
-  return rects;
-}

frontend/src/utils/pdfjsSetup.ts

@@ -7,4 +7,6 @@ pdfjs.GlobalWorkerOptions.workerSrc = new URL(
 
 export { pdfjs };
 
-export type PdfDocumentProxy = Awaited<ReturnType<typeof pdfjs.getDocument>>["promise"];
+export type PdfDocumentProxy = Awaited<
+  ReturnType<typeof pdfjs.getDocument>["promise"]
+>;

frontend/src/utils/reactReaderTheme.ts

@@ -1,65 +0,0 @@
-import { ReactReaderStyle, type IReactReaderStyle } from "react-reader";
-import type { ReadingSettings } from "../types/reader";
-
-const THEME_ARROWS: Record<ReadingSettings["theme"], string> = {
-  sepia: "#b8a898",
-  dark: "#666666",
-  light: "#cccccc",
-  paper: "#c4b8a8",
-};
-
-const THEME_ARROW_HOVER: Record<ReadingSettings["theme"], string> = {
-  sepia: "#8a7a6a",
-  dark: "#aaaaaa",
-  light: "#888888",
-  paper: "#7a6a5a",
-};
-
-/** Build complete react-reader styles — must spread ReactReaderStyle; partial objects break layout. */
-export function buildReaderStyles(settings: ReadingSettings): IReactReaderStyle {
-  return {
-    ...ReactReaderStyle,
-    container: {
-      ...ReactReaderStyle.container,
-      height: "100%",
-      width: "100%",
-    },
-    containerExpanded: ReactReaderStyle.containerExpanded,
-    readerArea: {
-      ...ReactReaderStyle.readerArea,
-      backgroundColor: settings.background_color,
-      transition: undefined,
-    },
-    titleArea: {
-      ...ReactReaderStyle.titleArea,
-      display: "none",
-    },
-    reader: {
-      ...ReactReaderStyle.reader,
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-    },
-    arrow: {
-      ...ReactReaderStyle.arrow,
-      color: THEME_ARROWS[settings.theme],
-      fontSize: 48,
-      marginTop: -24,
-    },
-    arrowHover: {
-      ...ReactReaderStyle.arrowHover,
-      color: THEME_ARROW_HOVER[settings.theme],
-    },
-    tocButton: {
-      ...ReactReaderStyle.tocButton,
-      display: "none",
-    },
-    tocArea: ReactReaderStyle.tocArea,
-    tocAreaButton: ReactReaderStyle.tocAreaButton,
-    loadingView: {
-      ...ReactReaderStyle.loadingView,
-      color: "#999",
-    },
-  };
-}

frontend/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/main.tsx","./src/api/annotations.ts","./src/api/books.ts","./src/api/client.ts","./src/api/errors.ts","./src/api/reader.ts","./src/components/bookcontextmenu.tsx","./src/components/toastcontainer.tsx","./src/components/annotations/bookmarksnotespage.tsx","./src/components/annotations/markerthreadsview.tsx","./src/components/annotations/index.ts","./src/components/layout/layout.tsx","./src/components/layout/index.ts","./src/components/reader/bookmarkerspanel.tsx","./src/components/reader/readertoolbar.tsx","./src/components/reader/readingsettingspanel.tsx","./src/components/reader/selectionpopover.tsx","./src/components/reader/tableofcontents.tsx","./src/components/search/searchsuggestions.tsx","./src/context/annotationscontext.tsx","./src/context/authcontext.tsx","./src/hooks/index.ts","./src/hooks/usedebounce.ts","./src/hooks/useepubreader.ts","./src/hooks/useepubselection.ts","./src/hooks/usemediaquery.ts","./src/hooks/usepaginatedquery.ts","./src/hooks/usereadingsettings.ts","./src/hooks/usetoast.tsx","./src/hooks/usevoicesearch.ts","./src/i18n/i18nprovider.tsx","./src/locales/en-us.ts","./src/locales/es-es.ts","./src/locales/index.ts","./src/pages/addbook.tsx","./src/pages/authpage.tsx","./src/pages/bookdetailpage.tsx","./src/pages/library.tsx","./src/pages/readingpage.tsx","./src/pages/settings.tsx","./src/types/book.ts","./src/types/index.ts","./src/types/reader.ts","./src/types/speech-recognition.d.ts","./src/types/__tests__/types.test.ts","./src/utils/epubrendition.ts","./src/utils/librarystatus.ts","./src/utils/markers.ts","./src/utils/reactreadertheme.ts","./vite-env.d.ts"],"version":"5.7.3"}
+{"root":["./src/app.tsx","./src/main.tsx","./src/api/annotations.ts","./src/api/books.ts","./src/api/client.ts","./src/api/errors.ts","./src/api/loadebookwithprogress.ts","./src/api/reader.ts","./src/components/bookcontextmenu.tsx","./src/components/toastcontainer.tsx","./src/components/annotations/bookmarksnotespage.tsx","./src/components/annotations/collapsiblemarkertext.tsx","./src/components/annotations/markerpassageactions.tsx","./src/components/annotations/markerthreadsview.tsx","./src/components/layout/simpleformpagelayout.tsx","./src/components/library/finishedbooksshelf.tsx","./src/components/library/librarybookcard.tsx","./src/components/reader/bookmarkerspanel.tsx","./src/components/reader/bookmarkcolorpicker.tsx","./src/components/reader/bookmarkicon.tsx","./src/components/reader/bookmarkreaderrail.tsx","./src/components/reader/epubreadingview.tsx","./src/components/reader/panelclosebutton.tsx","./src/components/reader/pdflimitationsnotice.tsx","./src/components/reader/pdfreadingview.tsx","./src/components/reader/pdfviewer.tsx","./src/components/reader/readererrorscreen.tsx","./src/components/reader/readerloadingscreen.tsx","./src/components/reader/readersuspenseshell.tsx","./src/components/reader/readertocbutton.tsx","./src/components/reader/readertoolbar.tsx","./src/components/reader/readingsettingspanel.tsx","./src/components/reader/resumereadingbutton.tsx","./src/components/reader/selectionpopover.tsx","./src/components/reader/tableofcontents.tsx","./src/components/search/searchsuggestions.tsx","./src/constants/bookmarkhighlightcolors.ts","./src/context/annotationscontext.tsx","./src/context/authcontext.tsx","./src/hooks/usebookmarkraillayout.ts","./src/hooks/usedebounce.ts","./src/hooks/useepubhighlights.ts","./src/hooks/useepubreader.ts","./src/hooks/useepubselection.ts","./src/hooks/usemediaquery.ts","./src/hooks/usepdfreader.ts","./src/hooks/usereaderorientationcss.ts","./src/hooks/usereadingsettings.ts","./src/hooks/usetoast.tsx","./src/hooks/usevoicesearch.ts","./src/i18n/i18nprovider.tsx","./src/locales/en-us.ts","./src/locales/es-es.ts","./src/locales/index.ts","./src/pages/addbook.tsx","./src/pages/authpage.tsx","./src/pages/bookdetailpage.tsx","./src/pages/library.tsx","./src/pages/readingpage.tsx","./src/pages/settings.tsx","./src/types/book.ts","./src/types/index.ts","./src/types/reader.ts","./src/types/speech-recognition.d.ts","./src/types/__tests__/types.test.ts","./src/utils/bookmarkraillayout.ts","./src/utils/ebooklibrary.ts","./src/utils/epubhighlights.ts","./src/utils/epubrendition.ts","./src/utils/librarystatus.ts","./src/utils/markers.ts","./src/utils/pdfanchor.ts","./src/utils/pdftoc.ts","./src/utils/pdfjssetup.ts","./src/utils/subjectlocale.ts","./vite-env.d.ts"],"version":"5.7.3"}