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/forms/form-template-form.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useMutation } from '@tanstack/react-query';
 import { Plus, Trash2 } from 'lucide-react';
 import { toast } from 'sonner';
@@ -54,25 +54,23 @@ const FIELD_TYPES: Array<{ value: FormField['type']; label: string }> = [
   { value: 'checkbox', label: 'Checkbox' },
 ];
 
-export function FormTemplateForm({ open, onOpenChange, template, onSaved }: Props) {
-  const [name, setName] = useState('');
-  const [description, setDescription] = useState('');
-  const [isActive, setIsActive] = useState(true);
-  const [fields, setFields] = useState<FormField[]>([{ ...DEFAULT_FIELD }]);
+export function FormTemplateForm(props: Props) {
+  // Key-based remount seeds state on each open + template change.
+  return (
+    <FormTemplateFormBody
+      key={props.open ? `open:${props.template?.id ?? 'new'}` : 'closed'}
+      {...props}
+    />
+  );
+}
 
-  useEffect(() => {
-    if (template) {
-      setName(template.name);
-      setDescription(template.description ?? '');
-      setIsActive(template.isActive);
-      setFields(template.fields.length > 0 ? template.fields : [{ ...DEFAULT_FIELD }]);
-    } else {
-      setName('');
-      setDescription('');
-      setIsActive(true);
-      setFields([{ ...DEFAULT_FIELD }]);
-    }
-  }, [template, open]);
+function FormTemplateFormBody({ open, onOpenChange, template, onSaved }: Props) {
+  const [name, setName] = useState(template?.name ?? '');
+  const [description, setDescription] = useState(template?.description ?? '');
+  const [isActive, setIsActive] = useState(template?.isActive ?? true);
+  const [fields, setFields] = useState<FormField[]>(
+    template && template.fields.length > 0 ? template.fields : [{ ...DEFAULT_FIELD }],
+  );
 
   const saveMutation = useMutation({
     mutationFn: () => {