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/expenses/expense-filters.tsx

@@ -1,5 +1,5 @@
 import type { FilterDefinition } from '@/components/shared/filter-bar';
-import { EXPENSE_CATEGORIES } from '@/lib/constants';
+import { EXPENSE_CATEGORIES, formatEnum } from '@/lib/constants';
 
 export const expenseFilterDefinitions: FilterDefinition[] = [
   {
@@ -13,7 +13,7 @@ export const expenseFilterDefinitions: FilterDefinition[] = [
     label: 'Category',
     type: 'multi-select',
     options: EXPENSE_CATEGORIES.map((c) => ({
-      label: c.replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase()),
+      label: formatEnum(c),
       value: c,
     })),
   },

src/components/expenses/expense-form-dialog.tsx

@@ -25,7 +25,7 @@ import { TripLabelCombobox } from '@/components/expenses/trip-label-combobox';
 import { apiFetch } from '@/lib/api/client';
 import type { z } from 'zod';
 import { createExpenseSchema, type CreateExpenseInput } from '@/lib/validators/expenses';
-import { EXPENSE_CATEGORIES, PAYMENT_METHODS } from '@/lib/constants';
+import { EXPENSE_CATEGORIES, PAYMENT_METHODS, formatEnum } from '@/lib/constants';
 import type { ExpenseRow } from './expense-columns';
 
 interface UploadedReceipt {
@@ -255,7 +255,7 @@ export function ExpenseFormDialog({ open, onOpenChange, expense }: ExpenseFormDi
               <SelectContent>
                 {EXPENSE_CATEGORIES.map((cat) => (
                   <SelectItem key={cat} value={cat}>
-                    {cat.replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase())}
+                    {formatEnum(cat)}
                   </SelectItem>
                 ))}
               </SelectContent>
@@ -276,7 +276,7 @@ export function ExpenseFormDialog({ open, onOpenChange, expense }: ExpenseFormDi
               <SelectContent>
                 {PAYMENT_METHODS.map((m) => (
                   <SelectItem key={m} value={m}>
-                    {m.replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase())}
+                    {formatEnum(m)}
                   </SelectItem>
                 ))}
               </SelectContent>