cleanup

frontend/src/desktop/DesktopWorkspace.tsx

@@ -39,6 +39,7 @@ export interface DeskDocument {
   id?: Identifier | null;
   title?: string;
   tags?: TagLike[] | null;
+  previewEntry?: OverlaySource | null;
   [key: string]: unknown;
 }
 
@@ -172,6 +173,7 @@ interface DesktopWorkspaceViewProps {
   closeOverlay: () => void;
   overlayOriginRect: DOMRect | null;
   overlayOriginTransform: OverlayOriginTransform | null;
+  overlayDocument: DeskDocument | null;
   onEntryPointer?: DesktopWorkspaceProps['onEntryPointer'];
   onDocumentStackSelect?: DesktopWorkspaceProps['onDocumentStackSelect'];
   onPromoteSelection?: DesktopWorkspaceProps['onPromoteSelection'];
@@ -677,6 +679,17 @@ const DesktopWorkspace: React.FC<DesktopWorkspaceProps> = ({
     };
   }, [overlaySource]);
 
+  const overlayDocument = useMemo<DeskDocument | null>(() => {
+    if (!overlayDocId) {
+      return null;
+    }
+    const baseDoc = documentLookup.get(String(overlayDocId)) || null;
+    if (baseDoc && overlayDisplay?.url) {
+      return { ...baseDoc, previewEntry: overlayDisplay };
+    }
+    return baseDoc;
+  }, [documentLookup, overlayDisplay, overlayDocId]);
+
   const openOverlayForDoc = useCallback(
     (docId: Identifier | null, originInfo: OverlayOriginHint | null = null) => {
       if (!docId) {
@@ -782,6 +795,7 @@ const DesktopWorkspace: React.FC<DesktopWorkspaceProps> = ({
       closeOverlay,
       overlayOriginRect,
       overlayOriginTransform,
+      overlayDocument,
       onEntryPointer,
       onDocumentStackSelect,
       onPromoteSelection,
@@ -838,6 +852,7 @@ const DesktopWorkspace: React.FC<DesktopWorkspaceProps> = ({
       overlayDisplay,
       overlayOriginRect,
       overlayOriginTransform,
+      overlayDocument,
       documentLookup,
       pendingRemovalTag,
       pendingTagDocId,
@@ -887,6 +902,7 @@ function DesktopWorkspaceView({
   closeOverlay,
   overlayOriginRect,
   overlayOriginTransform,
+  overlayDocument,
   onEntryPointer,
   onDocumentStackSelect,
   onPromoteSelection,
@@ -1108,6 +1124,7 @@ function DesktopWorkspaceView({
         open={Boolean(overlayDisplay?.url)}
         display={overlayDisplay}
         onClose={closeOverlay}
+        document={overlayDocument}
         originRect={overlayOriginRect}
         originTransform={overlayOriginTransform}
       />

frontend/src/detail/PreviewZoomOverlay.tsx

@@ -1,31 +1,38 @@
 import React, { CSSProperties, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { ArrowLeftIcon, ArrowRightIcon } from '../ui/icons';
 import { clamp } from '../utils/math';
 import PdfViewer from '../preview/PdfViewer';
 
-type PreviewNavigator = {
+type DocumentLike = {
-  url: string;
+  id?: string | number;
-  alt?: string;
+  title?: string;
-  contentType?: string | null;
+  content_type?: string | null;
-  pageNumber?: number | null;
+  [key: string]: unknown;
-  canGoPrev?: boolean;
-  canGoNext?: boolean;
-  goPrev?: () => void;
-  goNext?: () => void;
 };
 
 interface PreviewZoomOverlayProps {
   open?: boolean;
-  display?: PreviewNavigator | null;
   onClose?: () => void;
+  document?: DocumentLike | null;
 }
 
 type NaturalSize = { width: number | null; height: number | null };
 type FocusPoint = { xRatio: number; yRatio: number } | null;
 type DisplayKind = 'image' | 'pdf';
 
-const determineDisplayKind = (entry?: PreviewNavigator | null): DisplayKind => {
+type PreviewEntry = {
+  url: string;
+  alt?: string;
+  contentType?: string | null;
+  canGoPrev?: boolean;
+  canGoNext?: boolean;
+  goPrev?: () => void;
+  goNext?: () => void;
+};
+
+type DocumentLikeWithPreview = DocumentLike & { previewEntry?: PreviewEntry };
+
+const determineDisplayKind = (entry?: PreviewEntry | null): DisplayKind => {
   const type = entry?.contentType?.toLowerCase?.() || '';
   if (type.includes('pdf')) {
     return 'pdf';
@@ -44,15 +51,15 @@ const noop = () => {};
 
 const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
   open = false,
-  display = null,
   onClose = noop,
+  document: overlayDocument = null,
 }) => {
   const portalTarget = document.body;
   const [isNativeScale, setIsNativeScale] = useState(false);
   const [naturalSize, setNaturalSize] = useState<NaturalSize>({ width: null, height: null });
   const [renderBackdrop, setRenderBackdrop] = useState(false);
   const [isBackdropVisible, setBackdropVisible] = useState(false);
-  const [displaySnapshot, setDisplaySnapshot] = useState<PreviewNavigator | null>(null);
+  const [documentSnapshot, setDocumentSnapshot] = useState<DocumentLikeWithPreview | null>(null);
   const scrollRef = useRef<HTMLDivElement | null>(null);
   const mediaRef = useRef<HTMLImageElement | null>(null);
   const focusRef = useRef<FocusPoint>(null);
@@ -60,15 +67,20 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
   const visibilityTimerRef = useRef<number | null>(null);
   const displayTimerRef = useRef<number | null>(null);
 
-  useEffect(() => {
+  const currentDocument = overlayDocument as DocumentLikeWithPreview | null;
-    if (display?.url) {
-      setDisplaySnapshot(display);
-    }
-  }, [display]);
 
-  const activeDisplay = open && display?.url ? display : displaySnapshot;
+  useEffect(() => {
-  const displayKind = useMemo(() => determineDisplayKind(activeDisplay), [activeDisplay]);
+    if (currentDocument?.previewEntry?.url) {
+      setDocumentSnapshot(currentDocument);
+    }
+  }, [currentDocument]);
+
+  const activeDocument = open && currentDocument?.previewEntry?.url ? currentDocument : documentSnapshot;
+  const previewEntry = activeDocument?.previewEntry || null;
+  const displayKind = useMemo(() => determineDisplayKind(previewEntry), [previewEntry]);
   const isPdfDisplay = displayKind === 'pdf';
+  const documentTitle = activeDocument?.title || undefined;
+  const effectiveAlt = previewEntry?.alt || documentTitle || 'Document preview';
 
   useEffect(() => {
     if (visibilityTimerRef.current) {
@@ -80,7 +92,7 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
       displayTimerRef.current = null;
     }
 
-    if (open && display?.url) {
+    if (open && previewEntry?.url) {
       setRenderBackdrop(true);
       displayTimerRef.current = requestAnimationFrame(() => {
         displayTimerRef.current = requestAnimationFrame(() => {
@@ -106,7 +118,7 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
         visibilityTimerRef.current = null;
       }
     };
-  }, [open, display?.url]);
+  }, [open, previewEntry?.url]);
 
   useEffect(() => () => {
     if (visibilityTimerRef.current) {
@@ -118,7 +130,7 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
   }, []);
 
   useEffect(() => {
-  }, [isPdfDisplay, open, activeDisplay?.url]);
+  }, [isPdfDisplay, open, previewEntry?.url]);
 
   useEffect(() => {
     setIsNativeScale(false);
@@ -129,7 +141,7 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
       scrollEl.scrollLeft = 0;
       scrollEl.scrollTop = 0;
     }
-  }, [open, activeDisplay?.url, displayKind]);
+  }, [open, previewEntry?.url, displayKind]);
 
 
   useEffect(() => {
@@ -172,7 +184,7 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
   }, [open]);
 
   useEffect(() => {
-    if (!activeDisplay?.url) {
+    if (!previewEntry?.url) {
       return;
     }
 
@@ -182,10 +194,10 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
       scrollEl.scrollTop = 0;
     }
     focusRef.current = null;
-  }, [activeDisplay?.url]);
+  }, [previewEntry?.url]);
 
   useEffect(() => {
-    if (!renderBackdrop || !activeDisplay?.url) {
+    if (!renderBackdrop || !previewEntry?.url) {
       return undefined;
     }
 
@@ -194,7 +206,7 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
     });
 
     return () => cancelAnimationFrame(frame);
-  }, [renderBackdrop, activeDisplay?.url]);
+  }, [renderBackdrop, previewEntry?.url]);
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
     event.stopPropagation();
@@ -229,20 +241,6 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
       return;
     }
 
-    if (key === 'ArrowLeft') {
-      if (activeDisplay?.canGoPrev && activeDisplay?.goPrev) {
-        event.preventDefault();
-        activeDisplay.goPrev();
-      }
-      return;
-    }
-
-    if (key === 'ArrowRight') {
-      if (activeDisplay?.canGoNext && activeDisplay?.goNext) {
-        event.preventDefault();
-        activeDisplay.goNext();
-      }
-    }
   };
 
   const toggleZoomAtPoint = (clientX: number, clientY: number) => {
@@ -273,7 +271,7 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
     toggleZoomAtPoint(event.clientX ?? 0, event.clientY ?? 0);
   };
 
-  const shouldRender = renderBackdrop && Boolean(activeDisplay?.url);
+  const shouldRender = renderBackdrop && Boolean(previewEntry?.url);
 
   const stageClassName = isPdfDisplay
     ? 'preview-zoom__stage preview-zoom__stage--pdf'
@@ -314,8 +312,7 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
     return null;
   }
 
-  const effectiveDisplay = activeDisplay;
+  const effectiveDisplay = previewEntry;
-  const navVisible = Boolean(effectiveDisplay?.canGoPrev || effectiveDisplay?.canGoNext);
 
   return createPortal(
     (
@@ -344,7 +341,7 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
               <div className="preview-zoom__pdf">
                 <PdfViewer
                   src={effectiveDisplay.url}
-                  title={effectiveDisplay.alt || 'Document preview'}
+                  title={effectiveAlt}
                   className="preview-zoom__pdf-viewer"
                   viewportRef={scrollRef}
                 />
@@ -352,7 +349,7 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
             ) : (
               <img
                 src={effectiveDisplay.url}
-                alt={effectiveDisplay.alt || 'Document preview'}
+                alt={effectiveAlt}
                 className="preview-zoom__image"
                 ref={(node) => {
                   mediaRef.current = node;
@@ -369,38 +366,6 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
               />
             )}
           </div>
-          {navVisible ? (
-            <div className="preview-zoom__nav">
-              <button
-                type="button"
-                className="preview-zoom__nav-button"
-                onClick={(event) => {
-                  event.stopPropagation();
-                  if (effectiveDisplay?.canGoPrev && effectiveDisplay?.goPrev) {
-                    effectiveDisplay.goPrev();
-                  }
-                }}
-                aria-label="Previous preview"
-                disabled={!effectiveDisplay?.canGoPrev}
-              >
-                <ArrowLeftIcon />
-              </button>
-              <button
-                type="button"
-                className="preview-zoom__nav-button"
-                onClick={(event) => {
-                  event.stopPropagation();
-                  if (effectiveDisplay?.canGoNext && effectiveDisplay?.goNext) {
-                    effectiveDisplay.goNext();
-                  }
-                }}
-                aria-label="Next preview"
-                disabled={!effectiveDisplay?.canGoNext}
-              >
-                <ArrowRightIcon />
-              </button>
-            </div>
-          ) : null}
         </div>
       </div>
     ),

frontend/src/documents/panel/DocumentsPanel.tsx

@@ -162,6 +162,11 @@ const DocumentsPanel: React.FC<DocumentsPanelProps> = ({
 
   const [previewZoomSource, setPreviewZoomSource] = useState<ZoomSource | null>(null);
   const zoomDisplay = previewZoomSource;
+  const overlayDocument = useMemo(() => (
+    previewDoc && zoomDisplay?.url
+      ? { ...previewDoc, previewEntry: zoomDisplay }
+      : previewDoc
+  ), [previewDoc, zoomDisplay]);
 
   useEffect(() => {
     let cancelled = false;
@@ -762,8 +767,8 @@ const DocumentsPanel: React.FC<DocumentsPanelProps> = ({
     </section>
       <PreviewZoomOverlay
         open={Boolean(zoomDisplay?.url)}
-        display={zoomDisplay}
         onClose={closePreviewOverlay}
+        document={overlayDocument}
       />
     </>
   );

frontend/src/preview/DocumentViewerPanel.tsx

@@ -39,6 +39,11 @@ interface DocumentLike {
     version_number?: number;
     version?: { content_type?: string | null } | null;
   } | null;
+  previewEntry?: {
+    url: string;
+    alt?: string;
+    contentType?: string | null;
+  } | null;
   [key: string]: unknown;
 }
 
@@ -53,10 +58,8 @@ interface DocumentViewerPanelProps extends DocumentSummarySectionProps {
   document: DocumentLike | null;
   previewEntry?: {
     url?: string;
-    canGoPrev?: boolean;
+    contentType?: string | null;
-    canGoNext?: boolean;
+    filename?: string | null;
-    goPrev?: () => void;
-    goNext?: () => void;
   } | null;
   hydrateDocument?: (doc: DocumentLike | null) => DocumentLike | null;
   ensureAssetUrl?: (docId: string | number, asset: AssetLike, options?: { start?: number; limit?: number }) => Promise<unknown>;
@@ -490,10 +493,16 @@ const DocumentViewerPanel: React.FC<DocumentViewerPanelProps> = ({
     document?.title || 'Document preview'
   );
 
+  const overlayDocument = useMemo(() => (
+    document && zoomDisplay?.url
+      ? { ...document, previewEntry: zoomDisplay }
+      : document
+  ), [document, zoomDisplay]);
+
   const overlay = (
     <PreviewZoomOverlay
       open={Boolean(zoomOverlayOpen && zoomDisplay)}
-      display={zoomDisplay}
+      document={overlayDocument}
       onClose={handleZoomClose}
     />
   );

frontend/src/preview/PdfViewer.tsx

@@ -90,7 +90,6 @@ const PdfViewer = ({ src, title, className, viewportRef }: PdfViewerProps): JSX.
     pointerOffsetX: number;
     pointerOffsetY: number;
   } | null>(null);
-  const focusRatioRef = useRef<{ x: number; y: number } | null>(null);
   const ensureWasmUrl = useCallback(() => {
     if (!wasmUrlRef.current) {
       wasmUrlRef.current = resolvePdfWasmBaseUrl();
@@ -221,7 +220,6 @@ const PdfViewer = ({ src, title, className, viewportRef }: PdfViewerProps): JSX.
       try {
         loadingTask = getDocument({
           url: src,
-          withCredentials: true,
           wasmUrl,
         });
         const pdf = await loadingTask.promise;

frontend/src/styles/preview/preview-zoom.css

@@ -74,60 +74,6 @@
   align-items: flex-start;
 }
 
-.preview-zoom__nav {
-  position: absolute;
-  bottom: 1em;
-  left: 50%;
-  transform: translateX(-50%);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.9rem;
-  opacity: 0;
-  transition: opacity 0.18s ease;
-  pointer-events: none;
-}
-
-.preview-zoom__stage:hover .preview-zoom__nav,
-.preview-zoom__stage:focus-within .preview-zoom__nav {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.preview-zoom__nav-button {
-  width: 2.8rem;
-  height: 2.8rem;
-  border: none;
-  border-radius: 999px;
-  background: var(--preview-nav-bg);
-  color: var(--preview-nav-fg);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  z-index: 1;
-  transition: background 0.15s ease, transform 0.15s ease;
-  box-shadow: 0 12px 28px var(--shadow-strong);
-}
-
-.preview-zoom__nav-button:hover {
-  background: var(--preview-nav-bg-hover);
-}
-
-.preview-zoom__nav-button:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 3px;
-}
-
-.preview-zoom__nav-button svg {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-.preview-zoom__nav-button[disabled] {
-  opacity: 0.35;
-  cursor: default;
-}
 
 .preview-zoom__pdf {
   width: 100%;