Implement custom Comic Reader modal to replace legacy Fancybox

[Rutjake]

✨ Enhancement Description

What is it?: The goal of this issue is to create a new, robust, and reusable modal component for displaying comic book pages, effectively replacing the current broken Fancybox implementation.

Current Status: Already made parts of the component can be used if they are suitable for the new architecture.

---

🌟 Benefits of the Enhancement

• User Experience:
  • 1:1 Parity: The UI and functionality will be identical to the previous Fancybox version, ensuring a seamless transition for users.
  • Optimized for Reading: Better handling of page spreads (2 pages on desktop, 1 on mobile) and smoother slider navigation.
• Project Impact:
  • Robustness: Eliminates bugs related to direct DOM manipulation by Fancybox in a React environment.
  • Customization: Allows for deep integration of the site's theme (e.g., custom orange buttons, brick background)

---

🛠️ Proposed Implementation

• Technical Details:

  • Base: Use the HTML5 <dialog> element for the modal container to handle accessibility and top-layer positioning.
  • State Management: React useState to track currentPage, calculating the spread as [page, page+1].
  • Legacy UI: Port the exact styling of the floating orange zoom button, chevron arrows, and the bottom control bar.
  • Navigation: Use an HTML <input type="range"> for the page slider, synced with the current page state.

• Implementation Plan:

  1. Build a new ReaderModal.
  2. Build the navigation logic to handle both single and dual-page viewing modes.
  3. Replicate the bottom control bar with the slider, page numbers, and navigation chevrons.
  4. Implement touch-swipe gestures for mobile.

---

📎 Additional Information

• Resources: MDN - The Dialog element

📷 Preview: