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/berths/berth-detail.tsx

@@ -44,16 +44,17 @@ export function BerthDetail({ berthId }: BerthDetailProps) {
 
   useEffect(() => {
     if (searchParams.get('edit') === 'true') {
+      // setState in effect is the right shape here — the URL is an
+      // external store and the trigger is a query-param change, not a
+      // prop in the React tree.
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setEditOpen(true);
       // Strip the param without adding a history entry
       const params = new URLSearchParams(searchParams.toString());
       params.delete('edit');
       const newUrl = params.toString() ? `?${params.toString()}` : window.location.pathname;
-      // typedRoutes can't statically validate this dynamic path; cast is safe
-      // because we're always replacing within the same route segment.
       router.replace(newUrl as never);
     }
-    // Only run once on mount / when searchParams changes
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchParams]);
 

src/components/berths/berth-tabs.tsx

@@ -222,11 +222,13 @@ function OverviewTab({ berth }: { berth: BerthData }) {
   const patch = useBerthPatch(berth.id);
   // User-selected display unit for dimensions. Persisted in localStorage
   // so reps' preferred unit sticks across navigations + sessions.
-  const [units, setUnits] = useState<'ft' | 'm'>('ft');
-  useEffect(() => {
-    const stored = localStorage.getItem('berth-overview-units');
-    if (stored === 'ft' || stored === 'm') setUnits(stored);
-  }, []);
+  // Lazy initializer reads localStorage on first render — avoids the
+  // mount-effect-setState shape the compiler flags.
+  const [units, setUnits] = useState<'ft' | 'm'>(() => {
+    if (typeof window === 'undefined') return 'ft';
+    const stored = window.localStorage.getItem('berth-overview-units');
+    return stored === 'ft' || stored === 'm' ? stored : 'ft';
+  });
   useEffect(() => {
     localStorage.setItem('berth-overview-units', units);
   }, [units]);