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/clients/contacts-editor.tsx

@@ -26,6 +26,7 @@ import {
 import { InlineEditableField } from '@/components/shared/inline-editable-field';
 import { InlinePhoneField } from '@/components/shared/inline-phone-field';
 import { PhoneInput, type PhoneInputValue } from '@/components/shared/phone-input';
+import { useConfirmation } from '@/hooks/use-confirmation';
 import { apiFetch } from '@/lib/api/client';
 import { toastError } from '@/lib/api/toast-error';
 import { cn } from '@/lib/utils';
@@ -57,6 +58,7 @@ const CHANNEL_ICONS: Record<string, React.ComponentType<{ className?: string }>>
 export function ContactsEditor({ clientId, contacts }: { clientId: string; contacts: Contact[] }) {
   const qc = useQueryClient();
   const [adding, setAdding] = useState(false);
+  const { confirm, dialog: confirmDialog } = useConfirmation();
 
   function invalidate() {
     qc.invalidateQueries({ queryKey: ['clients', clientId] });
@@ -112,7 +114,12 @@ export function ContactsEditor({ clientId, contacts }: { clientId: string; conta
           contact={c}
           onUpdate={(patch) => updateMutation.mutateAsync({ contactId: c.id, patch })}
           onRemove={async () => {
-            if (!confirm('Remove this contact?')) return;
+            const ok = await confirm({
+              title: 'Remove contact',
+              description: 'Remove this contact?',
+              confirmLabel: 'Remove',
+            });
+            if (!ok) return;
             await removeMutation.mutateAsync(c.id);
           }}
         />
@@ -138,6 +145,7 @@ export function ContactsEditor({ clientId, contacts }: { clientId: string; conta
           Add contact
         </Button>
       )}
+      {confirmDialog}
     </div>
   );
 }