feat(reader): Add dynamic panel detection loading in frontend

- Add enablePanelDetection, libraryType, formatGroup state
- Add panelDetector instance for dynamic loading
- Update initReader to accept and process configuration
- Conditionally load panel detection only when enabled
- Use dynamic import for foliate-js/panel-detection.js
- Add error handling for panel detection loading

web/src/reader/reader.ts

@@ -3,20 +3,55 @@ import { Alpine } from "../alpine";
 
 document.addEventListener("alpine:init", () => {
   Alpine.data("readerShell", () => ({
-    async initReader() {
+    enablePanelDetection: false,
-      console.log("Reader initialized");
+    libraryType: "",
+    formatGroup: "",
+    mangaType: "",
+    readingDirection: "",
+    panelDetector: null,
+
+    initReader(config: any) {
+      this.enablePanelDetection = config.enablePanelDetection;
+      this.libraryType = config.libraryType;
+      this.formatGroup = config.formatGroup;
+      this.mangaType = config.mangaType;
+      this.readingDirection = config.readingDirection;
+
+      console.log("Reader initialized with:", {
+        panelDetection: this.enablePanelDetection,
+        library: this.libraryType,
+        format: this.formatGroup,
+      });
+
+      // Only load panel detection if enabled
+      if (this.enablePanelDetection) {
+        this.loadPanelDetection();
+      }
     },
+
+    async loadPanelDetection() {
+      try {
+        // Dynamic import to only load when needed
+        const { PanelDetector } = await import("foliate-js/panel-detection.js");
+        this.panelDetector = new PanelDetector();
+        console.log("Panel detection loaded successfully");
+      } catch (error) {
+        console.error("Failed to load panel detection:", error);
+      }
+    },
+
     nextPage() {
       const view = document.querySelector("#reader-view");
       // @ts-ignore - foliate custom element
       view?.next?.();
     },
+
     previousPage() {
       const view = document.querySelector("#reader-view");
       // @ts-ignore - foliate custom element
       view?.prev?.();
     },
   }));
-});
 
-Alpine.start();
+  Alpine.start();
+});