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/ports/port-form.tsx

@@ -1,7 +1,7 @@
 'use client';
 import { formatErrorBanner } from '@/lib/api/toast-error';
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -50,39 +50,24 @@ interface PortFormProps {
   onSuccess: () => void;
 }
 
-export function PortForm({ open, onOpenChange, port, onSuccess }: PortFormProps) {
-  const [name, setName] = useState('');
-  const [slug, setSlug] = useState('');
-  const [primaryColor, setPrimaryColor] = useState('#0F4C81');
-  const [defaultCurrency, setDefaultCurrency] = useState('USD');
-  const [timezone, setTimezone] = useState('America/Anguilla');
-  const [isActive, setIsActive] = useState(true);
+export function PortForm(props: PortFormProps) {
+  return (
+    <PortFormBody key={props.open ? `open:${props.port?.id ?? 'new'}` : 'closed'} {...props} />
+  );
+}
+
+function PortFormBody({ open, onOpenChange, port, onSuccess }: PortFormProps) {
+  const [name, setName] = useState(port?.name ?? '');
+  const [slug, setSlug] = useState(port?.slug ?? '');
+  const [primaryColor, setPrimaryColor] = useState(port?.primaryColor ?? '#0F4C81');
+  const [defaultCurrency, setDefaultCurrency] = useState(port?.defaultCurrency ?? 'USD');
+  const [timezone, setTimezone] = useState(port?.timezone ?? 'America/Anguilla');
+  const [isActive, setIsActive] = useState(port?.isActive ?? true);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   const isEdit = !!port;
 
-  useEffect(() => {
-    if (open) {
-      if (port) {
-        setName(port.name);
-        setSlug(port.slug);
-        setPrimaryColor(port.primaryColor ?? '#0F4C81');
-        setDefaultCurrency(port.defaultCurrency);
-        setTimezone(port.timezone);
-        setIsActive(port.isActive);
-      } else {
-        setName('');
-        setSlug('');
-        setPrimaryColor('#0F4C81');
-        setDefaultCurrency('USD');
-        setTimezone('America/Anguilla');
-        setIsActive(true);
-      }
-      setError(null);
-    }
-  }, [open, port]);
-
   function handleNameChange(value: string) {
     setName(value);
     if (!isEdit) {