feat(web): zoom du lecteur — contrôles +/−/reset (50–300 %) sur PDF et CBZ

apps/web/src/reader/ReaderShell.tsx

@@ -2,6 +2,7 @@ import { ArrowLeft, ArrowRight } from "lucide-react";
 import { useEffect, type ReactNode } from "react";
 import { ErrorRibbon } from "../components/ui";
 import { navigate } from "../router";
+import { readerZoomLabel, READER_ZOOM_DEFAULT, READER_ZOOM_MAX, READER_ZOOM_MIN } from "./readerLayout";
 
 export type ReaderControls = {
   canPrevious: boolean;
@@ -11,12 +12,20 @@ export type ReaderControls = {
   onNext: () => void;
 };
 
+export type ReaderZoomControls = {
+  zoom: number;
+  onZoomOut: () => void;
+  onZoomIn: () => void;
+  onZoomReset: () => void;
+};
+
 type ReaderShellProps = {
   title: string;
   backHref: string;
   error?: string;
   onRetry?: () => void;
   controls: ReaderControls;
+  zoomControls?: ReaderZoomControls;
   children: ReactNode;
 };
 
@@ -26,7 +35,7 @@ function isFormField(target: EventTarget | null) {
   return Boolean(element?.isContentEditable || tagName === "input" || tagName === "textarea" || tagName === "select");
 }
 
-export function ReaderShell({ title, backHref, error, onRetry, controls, children }: ReaderShellProps) {
+export function ReaderShell({ title, backHref, error, onRetry, controls, zoomControls, children }: ReaderShellProps) {
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (isFormField(event.target)) return;
@@ -60,6 +69,20 @@ export function ReaderShell({ title, backHref, error, onRetry, controls, childre
           Suivant
           <ArrowRight size={16} />
         </button>
+        {zoomControls && (
+          <div className="reader-zoom-controls" aria-label="Zoom du lecteur">
+            <button className="ghost-button reader-zoom-button" onClick={zoomControls.onZoomOut} disabled={zoomControls.zoom <= READER_ZOOM_MIN} aria-label="Reduire le zoom">
+              -
+            </button>
+            <span className="reader-zoom-label">{readerZoomLabel(zoomControls.zoom)}</span>
+            <button className="ghost-button reader-zoom-button" onClick={zoomControls.onZoomIn} disabled={zoomControls.zoom >= READER_ZOOM_MAX} aria-label="Augmenter le zoom">
+              +
+            </button>
+            <button className="ghost-button reader-zoom-reset" onClick={zoomControls.onZoomReset} disabled={zoomControls.zoom === READER_ZOOM_DEFAULT}>
+              Réinitialiser
+            </button>
+          </div>
+        )}
       </header>
       {error && (
         <div className="reader-status">