fix(ui): resolve yacht owner names server-side, real user in topbar

Yachts list page rendered each row's Current Owner via OwnerLink, which
fired its own /api/v1/clients/{id} or /companies/{id} fetch — N+1 round-
trips per page load (12+ for the harbor-royale fixture). Worse, until
those fetches resolved each cell showed "Client c68da7..." style raw IDs.

Fix: listYachts now resolves the polymorphic currentOwnerName in two
batched in-array queries after the page query (mirrors the listClients
yachtCount/companyCount pattern), and OwnerLink accepts an optional
preloadedName prop that suppresses the per-row fetch when supplied.

Topbar: show real user name + avatar initial from session/profile, and
expand the My-Account dropdown header to include the user's email.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/layout/topbar.tsx

@@ -23,9 +23,10 @@ import type { Port } from '@/lib/db/schema/ports';
 
 interface TopbarProps {
   ports: Port[];
+  user?: { name: string; email: string };
 }
 
-export function Topbar({ ports }: TopbarProps) {
+export function Topbar({ ports, user }: TopbarProps) {
   const router = useRouter();
   const currentPortSlug = useUIStore((s) => s.currentPortSlug);
   const darkMode = useUIStore((s) => s.darkMode);
@@ -95,13 +96,18 @@ export function Topbar({ ports }: TopbarProps) {
               <Avatar className="w-7 h-7">
                 <AvatarImage src={undefined} />
                 <AvatarFallback className="bg-brand text-white text-xs font-semibold">
-                  U
+                  {(user?.name ?? 'U').slice(0, 1).toUpperCase()}
                 </AvatarFallback>
               </Avatar>
             </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-52">
-            <DropdownMenuLabel>My Account</DropdownMenuLabel>
+          <DropdownMenuContent align="end" className="w-56">
+            <DropdownMenuLabel>
+              <div className="font-medium">{user?.name ?? 'My Account'}</div>
+              {user?.email && (
+                <div className="text-xs text-muted-foreground font-normal">{user.email}</div>
+              )}
+            </DropdownMenuLabel>
             <DropdownMenuSeparator />
             {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
             <DropdownMenuItem onClick={() => router.push(`${base}/settings/profile` as any)}>

src/components/yachts/yacht-columns.tsx

@@ -20,6 +20,7 @@ export interface YachtRow {
   registration: string | null;
   currentOwnerType: 'client' | 'company';
   currentOwnerId: string;
+  currentOwnerName?: string | null;
   lengthFt: string | null;
   widthFt: string | null;
   draftFt: string | null;
@@ -92,6 +93,7 @@ export function getYachtColumns({
           portSlug={portSlug}
           type={row.original.currentOwnerType}
           id={row.original.currentOwnerId}
+          preloadedName={row.original.currentOwnerName ?? null}
         />
       ),
     },

src/components/yachts/yacht-detail-header.tsx

@@ -58,20 +58,27 @@ export function OwnerLink({
   portSlug,
   type,
   id,
+  preloadedName,
 }: {
   portSlug: string;
   type: 'client' | 'company';
   id: string;
+  /** Optional name supplied by the parent list/detail endpoint to skip the
+   *  per-row fetch (avoids an N+1 round-trip on lists). */
+  preloadedName?: string | null;
 }) {
+  // Only fetch when the parent didn't already supply a name — list endpoints
+  // batch-resolve owners server-side via a join.
   const { data } = useQuery<{ fullName?: string; name?: string }>({
     queryKey: [type === 'client' ? 'clients' : 'companies', id, 'name-only'],
     queryFn: () =>
       apiFetch<{ data: { fullName?: string; name?: string } }>(
         type === 'client' ? `/api/v1/clients/${id}` : `/api/v1/companies/${id}`,
       ).then((r) => r.data),
+    enabled: preloadedName === undefined || preloadedName === null,
   });
 
-  const label = type === 'client' ? data?.fullName : data?.name;
+  const label = preloadedName ?? (type === 'client' ? data?.fullName : data?.name);
   const href = type === 'client' ? `/${portSlug}/clients/${id}` : `/${portSlug}/companies/${id}`;
 
   return (