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/notifications/notification-preferences-form.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
 
@@ -45,10 +45,27 @@ export function NotificationPreferencesForm() {
     queryFn: () =>
       apiFetch<{ data: Pref[] }>('/api/v1/notifications/preferences').then((r) => r.data),
   });
+  // Key-based remount: body keyed on the server payload signature so its
+  // useState initializer re-runs when prefs land or change. Replaces the
+  // useEffect(setPrefs, [data]) sync the Compiler flagged.
+  const signature = data
+    ? data.map((p) => `${p.notificationType}:${p.inApp ? 1 : 0}:${p.email ? 1 : 0}`).join('|')
+    : 'loading';
+  return (
+    <NotificationPreferencesFormBody key={signature} data={data} isLoading={isLoading} qc={qc} />
+  );
+}
 
-  const [prefs, setPrefs] = useState<Map<string, Pref>>(new Map());
-
-  useEffect(() => {
+function NotificationPreferencesFormBody({
+  data,
+  isLoading,
+  qc,
+}: {
+  data: Pref[] | undefined;
+  isLoading: boolean;
+  qc: ReturnType<typeof useQueryClient>;
+}) {
+  const [prefs, setPrefs] = useState<Map<string, Pref>>(() => {
     const map = new Map<string, Pref>();
     for (const t of KNOWN_TYPES) {
       map.set(t.key, { notificationType: t.key, inApp: true, email: true });
@@ -58,8 +75,8 @@ export function NotificationPreferencesForm() {
         map.set(p.notificationType, p);
       }
     }
-    setPrefs(map);
-  }, [data]);
+    return map;
+  });
 
   const mutation = useMutation({
     mutationFn: async () => {