fix: cleanup

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>
   );
 }