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/file-preview-dialog.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import dynamic from 'next/dynamic';
 import { ExternalLink, ZoomIn } from 'lucide-react';
+import { useQuery } from '@tanstack/react-query';
 
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { apiFetch } from '@/lib/api/client';
@@ -37,32 +38,18 @@ export function FilePreviewDialog({
   fileName,
   mimeType,
 }: FilePreviewDialogProps) {
-  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
   const [lightboxOpen, setLightboxOpen] = useState(false);
 
-  useEffect(() => {
-    if (!open || !fileId) {
-      setPreviewUrl(null);
-      setError(null);
-      return;
-    }
-
-    setLoading(true);
-    setError(null);
-
-    apiFetch<{ data: { url: string } }>(`/api/v1/files/${fileId}/preview`)
-      .then((res) => {
-        setPreviewUrl(res.data.url);
-      })
-      .catch(() => {
-        setError('Failed to load preview');
-      })
-      .finally(() => {
-        setLoading(false);
-      });
-  }, [open, fileId]);
+  // useQuery replaces the prior useEffect(fetch+setState) pattern. The
+  // request is gated on the dialog being open and a fileId being set.
+  const previewQuery = useQuery<{ data: { url: string } }>({
+    queryKey: ['file-preview', fileId],
+    queryFn: () => apiFetch(`/api/v1/files/${fileId}/preview`),
+    enabled: open && !!fileId,
+  });
+  const previewUrl = previewQuery.data?.data.url ?? null;
+  const loading = previewQuery.isLoading;
+  const error = previewQuery.error ? 'Failed to load preview' : null;
 
   const isImage = mimeType?.startsWith('image/');
   const isPdf = mimeType === 'application/pdf';

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.