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/shared/owner-picker.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { Check, ChevronsUpDown } from 'lucide-react';
 import { useQuery } from '@tanstack/react-query';
 
@@ -42,15 +42,16 @@ export function OwnerPicker({
   disabled,
 }: OwnerPickerProps) {
   const [open, setOpen] = useState(false);
-  const [type, setType] = useState<'client' | 'company'>(value?.type ?? 'client');
+  // `type` is derived: when an owner is selected the prop wins; with no
+  // selection the user's local tab pick is the source of truth. Render-
+  // phase derivation replaces the prior useEffect(setType, [value?.type])
+  // that the Compiler flagged as set-state-in-effect.
+  const [localType, setLocalType] = useState<'client' | 'company'>(value?.type ?? 'client');
+  const type: 'client' | 'company' = value?.type ?? localType;
+  const setType = setLocalType;
   const [search, setSearch] = useState('');
   const debounced = useDebounce(search, 300);
 
-  // Keep local `type` in sync if value.type changes externally.
-  useEffect(() => {
-    if (value?.type) setType(value.type);
-  }, [value?.type]);
-
   const endpoint =
     type === 'client'
       ? `/api/v1/clients/options?search=${encodeURIComponent(debounced)}`