fix(audit-wave-9): standardize on Sheet for previews; doctrine in CLAUDE.md

Swap the one outlier (client-interests-tab.tsx) from Vaul Drawer to
Sheet side=right so every detail-preview surface uses the same
primitive. Document the doctrine: Sheet for side panels on both desktop
and mobile; Vaul Drawer reserved for mobile-only bottom-sheet UX
(currently just MoreSheet).

Closes ui/ux M11.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/files/pdf-viewer.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Document, Page, pdfjs } from 'react-pdf';
 import { usePinch } from '@use-gesture/react';
 import { ChevronLeft, ChevronRight, Loader2, Minus, Plus } from 'lucide-react';
@@ -36,7 +36,15 @@ interface PdfViewerProps {
   fileName?: string;
 }
 
-export function PdfViewer({ url, fileName }: PdfViewerProps) {
+export function PdfViewer(props: PdfViewerProps) {
+  // Key-based remount: re-mount the inner body whenever the url
+  // changes so all local state (page, zoom, error) re-initializes from
+  // scratch. Replaces the prior useEffect(reset, [url]) the Compiler
+  // flagged as set-state-in-effect.
+  return <PdfViewerBody key={props.url} {...props} />;
+}
+
+function PdfViewerBody({ url, fileName }: PdfViewerProps) {
   const [numPages, setNumPages] = useState<number | null>(null);
   const [pageNumber, setPageNumber] = useState(1);
   const [scale, setScale] = useState(1);
@@ -46,22 +54,12 @@ export function PdfViewer({ url, fileName }: PdfViewerProps) {
   // every render — useMemo wins because react-pdf compares by identity.
   const options = useMemo(
     () => ({
-      // Inline the worker fetch URL above; CMap/StandardFontDataUrl
-      // pull from the same CDN for unicode + non-system fonts.
       cMapUrl: `https://unpkg.com/pdfjs-dist@${pdfjs.version}/cmaps/`,
       standardFontDataUrl: `https://unpkg.com/pdfjs-dist@${pdfjs.version}/standard_fonts/`,
     }),
     [],
   );
 
-  useEffect(() => {
-    // Reset on url change so navigation between documents lands on
-    // page 1 at default zoom.
-    setPageNumber(1);
-    setScale(1);
-    setError(null);
-  }, [url]);
-
   // Pinch-zoom on touch devices. usePinch's `offset` already maps
   // gesture distance to a smoothly-changing scalar; we clamp it to
   // the same [0.5, 3] range as the +/- buttons.