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 () => {

src/components/notifications/reminder-digest-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 { Loader2 } from 'lucide-react';
 import { toast } from 'sonner';
@@ -49,23 +49,31 @@ export function ReminderDigestForm() {
     queryFn: () =>
       apiFetch<{ data: UserPrefsResponse }>('/api/v1/users/me/preferences').then((r) => r.data),
   });
+  // Key-based remount: the body is keyed on the loaded payload signature
+  // so the useState initializers re-run when the server data first lands
+  // or genuinely changes. Replaces the prior useEffect(setState) sync.
+  if (isLoading || !data) {
+    return <ReminderDigestFormBody key="loading" data={data} isLoading={isLoading} qc={qc} />;
+  }
+  const r = data.reminders ?? null;
+  const signature = `${r?.delivery ?? ''}|${r?.digestTime ?? ''}|${r?.digestDayOfWeek ?? ''}|${r?.timezone ?? data.timezone ?? ''}`;
+  return <ReminderDigestFormBody key={signature} data={data} isLoading={false} qc={qc} />;
+}
 
-  const [delivery, setDelivery] = useState<ReminderPrefs['delivery']>('immediate');
-  const [digestTime, setDigestTime] = useState('09:00');
-  const [digestDay, setDigestDay] = useState('1');
-  const [timezone, setTimezone] = useState('Europe/Warsaw');
-
-  useEffect(() => {
-    const r = data?.reminders;
-    if (r) {
-      setDelivery(r.delivery ?? 'immediate');
-      setDigestTime(r.digestTime ?? '09:00');
-      setDigestDay(String(r.digestDayOfWeek ?? 1));
-      setTimezone(r.timezone ?? data?.timezone ?? 'Europe/Warsaw');
-    } else if (data?.timezone) {
-      setTimezone(data.timezone);
-    }
-  }, [data]);
+function ReminderDigestFormBody({
+  data,
+  isLoading,
+  qc,
+}: {
+  data: UserPrefsResponse | undefined;
+  isLoading: boolean;
+  qc: ReturnType<typeof useQueryClient>;
+}) {
+  const r = data?.reminders;
+  const [delivery, setDelivery] = useState<ReminderPrefs['delivery']>(r?.delivery ?? 'immediate');
+  const [digestTime, setDigestTime] = useState(r?.digestTime ?? '09:00');
+  const [digestDay, setDigestDay] = useState(String(r?.digestDayOfWeek ?? 1));
+  const [timezone, setTimezone] = useState(r?.timezone ?? data?.timezone ?? 'Europe/Warsaw');
 
   const mutation = useMutation({
     mutationFn: () =>