fix(web): PDF previews keep their page across thread switches

apps/web/src/components/files/AttachmentFilePreview.tsx

@@ -55,6 +55,15 @@ const SourcePreview = lazy(() => import("./ReadOnlySourcePreview"));
 
 const STALE_URL_MS = 5 * 60_000;
 
+const blobKeys = new WeakMap<Blob, string>();
+let nextBlobKey = 0;
+
+function blobKey(blob: Blob) {
+  const key = blobKeys.get(blob) ?? `blob:${nextBlobKey++}`;
+  blobKeys.set(blob, key);
+  return key;
+}
+
 export function ReadOnlySourcePreview(props: { name: string; text: string; wordWrap?: boolean }) {
   return (
     <Suspense fallback={<FileSurfaceLoading className="p-4" />}>
@@ -325,6 +334,17 @@ export function AttachmentFilePreview(props: {
       pdf={kind === "pdf"}
       htmlRender={props.htmlRender === true}
       threadRef={props.threadRef}
+      // Each mount signs or creates a new URL, so the URL cannot identify the file across visits.
+      // A draft keeps its Blob key after upload, so finishing the upload does not reload the PDF.
+      documentKey={
+        kind !== "pdf"
+          ? undefined
+          : props.file
+            ? blobKey(props.file)
+            : props.asset && "attachmentId" in props.asset
+              ? `${props.asset.environmentId}:${props.asset.attachmentId}`
+              : undefined
+      }
     />
   ) : kind === "audio" ? (
     <AudioPreview src={url} name={props.name} onError={() => setError("Unable to load audio.")} />

apps/web/src/components/files/BrowserDocumentFrame.tsx

@@ -73,7 +73,7 @@ export const isPdfPreviewFile = (path: string): boolean =>
 
 const PdfViewer = lazy(() => import("./PdfViewer"));
 
-function PdfDocument(props: { src: string; title: string }) {
+function PdfDocument(props: { src: string; title: string; positionKey: string }) {
   const [src] = useState(props.src);
   // The Electron shell does not enable PDF plugins. WebKit embeds on iOS
   // expose only the first page, even when pdfViewerEnabled reports support.
@@ -91,7 +91,7 @@ function PdfDocument(props: { src: string; title: string }) {
     />
   ) : (
     <Suspense fallback={<FileSurfaceLoading />}>
-      <PdfViewer src={src} title={props.title} />
+      <PdfViewer src={src} title={props.title} positionKey={props.positionKey} />
     </Suspense>
   );
 }
@@ -111,7 +111,7 @@ export function BrowserDocumentFrame(props: {
 }) {
   const key = props.documentKey ?? props.src;
   return props.pdf ? (
-    <PdfDocument key={key} src={props.src} title={props.title} />
+    <PdfDocument key={key} src={props.src} title={props.title} positionKey={key} />
   ) : props.htmlRender ? (
     <HtmlRenderDocument
       key={key}

apps/web/src/components/files/PdfViewer.browser.test.tsx

@@ -109,3 +109,54 @@ it("fits the width, then finds split and rotated text and jumps to its page", as
     URL.revokeObjectURL(url);
   }
 });
+
+it("restores page, within-page offset and zoom after a remount", async () => {
+  const url = URL.createObjectURL(twoPagePdf());
+  const viewer = (mount: number, positionKey: string) => (
+    <div className="flex h-[300px] w-[320px]">
+      <PdfViewer key={mount} src={url} title="Restored PDF" positionKey={positionKey} />
+    </div>
+  );
+  try {
+    await using screen = await render(viewer(1, "restore:a"));
+    await expect.element(screen.getByText("1 / 2 pages")).toBeVisible();
+    await screen.getByRole("button", { name: "Zoom in", exact: true }).click();
+    await screen.getByRole("button", { name: "Next page", exact: true }).click();
+    await expect.element(screen.getByText("2 / 2 pages")).toBeVisible();
+    const region = () => screen.getByRole("region", { name: "Restored PDF" }).element();
+    const top = region().scrollTop + 40;
+    const scrolled = new Promise((resolve) =>
+      region().addEventListener("scroll", resolve, { once: true }),
+    );
+    region().scrollTop = top;
+    await scrolled;
+    await vi.waitFor(() => expect(region().scrollTop).toBeCloseTo(top, 0));
+    const zoom = screen.container.textContent!.match(/\d+%/)![0];
+
+    await screen.rerender(viewer(2, "restore:a"));
+    await expect.element(screen.getByText("2 / 2 pages")).toBeVisible();
+    await vi.waitFor(() => expect(region().scrollTop).toBeCloseTo(top, 0));
+    await vi.waitFor(() => expect(screen.container.textContent).toContain(zoom));
+
+    await screen.getByRole("button", { name: "Fit width", exact: true }).click();
+    await vi.waitFor(() => {
+      const canvas = region().querySelector("canvas")!;
+      expect(canvas.getBoundingClientRect().width).toBe(region().clientWidth - 32);
+    });
+    const fitTop = region().scrollTop;
+    await screen.rerender(viewer(3, "restore:a"));
+    await expect.element(screen.getByText("2 / 2 pages")).toBeVisible();
+    await vi.waitFor(() => {
+      expect(region().querySelector("canvas")!.getBoundingClientRect().width).toBe(
+        region().clientWidth - 32,
+      );
+      expect(region().scrollTop).toBeCloseTo(fitTop, 0);
+    });
+
+    await screen.rerender(viewer(4, "restore:b"));
+    await expect.element(screen.getByText("1 / 2 pages")).toBeVisible();
+    await expect.element(screen.getByText("Fit width")).toBeVisible();
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+});

apps/web/src/components/files/PdfViewer.tsx

@@ -30,6 +30,28 @@ import "./pdfViewer.css";
 
 const MAX_PAGES = 2000;
 const MAX_FIND_TEXT = 4 * 1024 * 1024;
+const MAX_POSITIONS = 50;
+
+type PdfPosition = {
+  readonly page: number;
+  /** Pixels scrolled past the page's top, measured at `width`. */
+  readonly offset: number;
+  readonly width: number;
+  readonly zoom: number | null;
+  /** Measured page shapes, so offsets above the saved page match the last visit. */
+  readonly ratios: readonly number[];
+};
+
+// Leaving a thread unmounts its preview, so reading positions outlive the viewer.
+// The least recently viewed entries go first, so the map stays bounded in long sessions.
+const positions = new Map<string, PdfPosition>();
+
+function rememberPosition(key: string, position: PdfPosition) {
+  positions.delete(key);
+  positions.set(key, position);
+  const oldest = positions.keys().next();
+  if (positions.size > MAX_POSITIONS && !oldest.done) positions.delete(oldest.value);
+}
 
 function PdfPage(props: {
   document: PDFDocumentProxy;
@@ -116,12 +138,15 @@ function PdfPage(props: {
   );
 }
 
-export default function PdfViewer(props: { src: string; title: string }) {
+/** `positionKey` names the document and revision whose reading position is restored on remount. */
+export default function PdfViewer(props: { src: string; title: string; positionKey?: string }) {
   const [pdf, setPdf] = useState<PDFDocumentProxy | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [revision, setRevision] = useState(0);
-  const [ratios, setRatios] = useState<number[]>([]);
-  const [zoom, setZoom] = useState<number | null>(null);
+  const [ratios, setRatios] = useState<readonly number[]>([]);
+  const [zoom, setZoom] = useState<number | null>(() =>
+    props.positionKey === undefined ? null : (positions.get(props.positionKey)?.zoom ?? null),
+  );
   const [pageWidth, setPageWidth] = useState(612);
   const [viewport, setViewport] = useState({ width: 600, height: 800 });
   const [scrollTop, setScrollTop] = useState(0);
@@ -133,6 +158,9 @@ export default function PdfViewer(props: { src: string; title: string }) {
   const scroll = useRef<HTMLDivElement>(null);
   const find = useRef<HTMLInputElement>(null);
   const zoomAnchor = useRef<{ page: number; offset: number; width: number } | null>(null);
+  const savedPosition = useEffectEvent(() =>
+    props.positionKey === undefined ? undefined : positions.get(props.positionKey),
+  );
   // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- Own the PDF fetch, load timeout, and pdf.js document task across source changes, retries, and unmounts.
   useEffect(() => {
     const controller = new AbortController();
@@ -158,7 +186,12 @@ export default function PdfViewer(props: { src: string; title: string }) {
         const first = (await document.getPage(1)).getViewport({ scale: 1 });
         if (controller.signal.aborted) return;
         setPageWidth(first.width);
-        setRatios(Array.from({ length: document.numPages }, () => first.height / first.width));
+        const saved = savedPosition();
+        setRatios(
+          saved?.ratios.length === document.numPages
+            ? saved.ratios
+            : Array.from({ length: document.numPages }, () => first.height / first.width),
+        );
         setPdf(document);
       })
       .catch((cause: unknown) => {
@@ -206,14 +239,39 @@ export default function PdfViewer(props: { src: string; title: string }) {
     };
     setZoom(value);
   };
+  const restorePosition = useEffectEvent(() => {
+    const saved = savedPosition();
+    const node = scroll.current;
+    if (!saved || !node) return;
+    const page = Math.min(saved.page, ratios.length - 1);
+    node.scrollTo({ top: offsets[page]! - 16 + (saved.offset * width) / saved.width });
+    // Sync now so the first painted page count matches the restored scroll.
+    setScrollTop(node.scrollTop);
+  });
+  // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- Restore the saved reading position once the loaded document has laid out its pages.
+  useLayoutEffect(() => {
+    if (pdf) restorePosition();
+  }, [pdf]);
+  const savePosition = (node: HTMLDivElement) => {
+    if (!pdf || props.positionKey === undefined) return;
+    const page = currentPdfPage(offsets, ratios.length, node.scrollTop);
+    rememberPosition(props.positionKey, {
+      page,
+      offset: node.scrollTop - pdfPageScrollTop(offsets, page),
+      width,
+      zoom,
+      ratios,
+    });
+  };
   // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- Restore the DOM scroll anchor after the new zoom width has committed to page layout.
   useLayoutEffect(() => {
     const anchor = zoomAnchor.current;
     zoomAnchor.current = null;
-    if (!anchor || anchor.width === width) return;
-    scroll.current?.scrollTo({
-      top: offsets[anchor.page]! - 16 + (anchor.offset * width) / anchor.width,
-    });
+    const node = scroll.current;
+    if (!node || !pdf) return;
+    if (anchor && anchor.width !== width)
+      node.scrollTo({ top: offsets[anchor.page]! - 16 + (anchor.offset * width) / anchor.width });
+    savePosition(node);
   });
   // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- Scroll to the first asynchronous search result after its measured page offsets have committed.
   useLayoutEffect(() => {
@@ -354,8 +412,11 @@ export default function PdfViewer(props: { src: string; title: string }) {
         role="region"
         aria-label={props.title}
         tabIndex={0}
-        className="relative min-h-0 min-w-0 w-full flex-1 overflow-auto bg-muted/40"
-        onScroll={(event) => setScrollTop(event.currentTarget.scrollTop)}
+        className="relative min-h-0 min-w-0 w-full flex-1 overflow-auto scrollbar-gutter-stable bg-muted/40"
+        onScroll={(event) => {
+          setScrollTop(event.currentTarget.scrollTop);
+          savePosition(event.currentTarget);
+        }}
         onKeyDown={(event) => {
           if ((event.ctrlKey || event.metaKey) && event.key === "f") {
             event.preventDefault();