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/admin/email-templates-admin.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { RotateCcw, Save } from 'lucide-react';
 
@@ -27,23 +27,40 @@ export function EmailTemplatesAdmin() {
     queryKey: ['admin-email-templates'],
     queryFn: () => apiFetch<{ data: TemplateRow[] }>('/api/v1/admin/email-templates'),
   });
-
-  const [drafts, setDrafts] = useState<Record<string, string>>({});
-  const [savingKey, setSavingKey] = useState<string | null>(null);
-  const [message, setMessage] = useState<{ key: string; kind: 'ok' | 'err'; text: string } | null>(
-    null,
+  // Key-based remount: re-mount the body when the server-loaded row
+  // signature changes so its useState seeds from fresh server data.
+  // Replaces the prior useEffect(setDrafts, [rows]) sync.
+  const sig = data?.data
+    ? data.data.map((r) => `${r.key}:${r.subjectOverride ?? r.defaultSubject}`).join('|')
+    : 'loading';
+  return (
+    <EmailTemplatesAdminBody key={sig} data={data} isLoading={isLoading} error={error} qc={qc} />
   );
+}
 
+function EmailTemplatesAdminBody({
+  data,
+  isLoading,
+  error,
+  qc,
+}: {
+  data: { data: TemplateRow[] } | undefined;
+  isLoading: boolean;
+  error: unknown;
+  qc: ReturnType<typeof useQueryClient>;
+}) {
   const rows = useMemo(() => data?.data ?? [], [data]);
-
-  useEffect(() => {
-    // Hydrate drafts from server values whenever the source-of-truth list refreshes.
+  const [drafts, setDrafts] = useState<Record<string, string>>(() => {
     const next: Record<string, string> = {};
     for (const row of rows) {
       next[row.key] = row.subjectOverride ?? row.defaultSubject;
     }
-    setDrafts(next);
-  }, [rows]);
+    return next;
+  });
+  const [savingKey, setSavingKey] = useState<string | null>(null);
+  const [message, setMessage] = useState<{ key: string; kind: 'ok' | 'err'; text: string } | null>(
+    null,
+  );
 
   async function save(row: TemplateRow, mode: 'save' | 'reset') {
     setSavingKey(row.key);