feat(interests): EOI/contract/reservation tabs + contact log + berth interest milestone + interest list overhaul

Major interest workflow expansion driven by the rapid-fire UX session.

EOI / Contract / Reservation tabs replace the generic Documents tab when
the deal is at the relevant stage — workspace pattern with active-doc
hero, signing progress, paper-signed upload, and history strip. Stage-
conditional visibility wired through interest-tabs.tsx so the tab set
shrinks/expands as the deal moves through the pipeline.

Contact log: per-interaction structured log (channel/direction/summary/
optional follow-up reminder). New `interest_contact_log` table + service
+ tab UI (timeline with channel-coded icons + compose dialog).
auto-creates a reminder when followUpAt is set.

Berth Interest milestone: first milestone in the OverviewTab's pipeline
strip, completes the moment any berth is linked via the junction. Drives
the "have we captured what they want?" sanity check for general_interest
leads before they move to EOI.

Stage-conditional milestones: past phases collapse into a one-liner
strip, current phase expands, future phases hide behind a "Show
upcoming" toggle. Inline stage picker now defers reason capture to an
override-confirm view (only required for illegal transitions, not the
default flow).

Notes blob → threaded: dropped `interests.notes` column entirely; the
threaded `interest_notes` table is the single source of truth. Latest-
note teaser on Overview links into the dedicated Notes tab. Polymorphic
notes service gains aggregated client view (unions client + interest +
yacht notes with source chips and group-by-source toggle).

Berth interest list overhaul:
  - Configurable columns via ColumnPicker (18 toggleable, 5 default-on)
  - Natural-sort SQL ORDER BY on mooring number (A1, A2, A10 not A10, A2)
  - Per-letter row tinting via colored left-border accent + dot in cell
  - Documents tab merged Files (single attachments section)

Topbar improvements:
  - Always-visible back arrow on detail pages (path depth > 2)
  - Breadcrumb-hint store + useBreadcrumbHint hook so detail pages can
    push their entity hierarchy (Clients › Mary Smith › Interest › B17)
  - Tighter spacing, softer separators, 160px crumb truncation

DataTable upgrades:
  - Page-size selector with All option (validator cap raised to 1000)
  - getRowClassName slot for per-row styling (used by berth tinting)
  - Fixed Radix SelectItem crash on empty-string values via __any__
    sentinel (was crashing every list page that opened a select filter)

Interest list:
  - Configurable columns picker
  - Stage cell clickable into detail
  - TagPicker + SavedViewsDropdown sized h-8 to match adjacent buttons
  - Save view moved into ColumnPicker menu; Views button hidden when
    no views are saved
  - Pipeline kanban board endpoint at /api/v1/interests/board with
    minimal projection, 5000-row cap + truncated banner, filter
    pass-through

Mobile chrome + sidebar collapse removed (always-expanded design choice).

User management lists super-admins (was inner-joined on user_port_roles
which excluded global super-admins).

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

src/components/layout/topbar.tsx

@@ -1,9 +1,11 @@
 'use client';
 
-import { Plus } from 'lucide-react';
-import { useRouter } from 'next/navigation';
+import { ChevronLeft, Plus } from 'lucide-react';
+import { useRouter, usePathname } from 'next/navigation';
 
 import { useUIStore } from '@/stores/ui-store';
+import { useMobileChrome } from '@/components/layout/mobile/mobile-layout-provider';
+import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Separator } from '@/components/ui/separator';
@@ -28,16 +30,46 @@ interface TopbarProps {
 
 export function Topbar({ ports, user }: TopbarProps) {
   const router = useRouter();
+  const pathname = usePathname();
   const currentPortSlug = useUIStore((s) => s.currentPortSlug);
   const base = currentPortSlug ? `/${currentPortSlug}` : '';
+  // Reuse the existing per-page chrome state (originally built for the
+  // mobile topbar) so any detail page that already declares
+  // `showBackButton: true` automatically gets the back affordance on
+  // desktop too. Saves duplicating the wiring across N detail headers.
+  const { showBackButton: mobileShowBack } = useMobileChrome();
+  // Auto-show on entity-detail pages: `/[portSlug]/[section]/[id]` and
+  // deeper. Top-level lists like `/[portSlug]/clients` stay clean.
+  // The mobile-chrome flag still wins when a page explicitly opts in.
+  // Pages that already render their own "back to X" link inline
+  // (residential interest detail, expense scan flow, etc.) opt OUT
+  // by setting the chrome flag to false on mount — the flag override
+  // path here lets them suppress this auto-show.
+  const segments = pathname.split('/').filter(Boolean);
+  const isDeepPage = segments.length > 2;
+  const showBackButton = mobileShowBack || isDeepPage;
 
   return (
     // Three-column grid: breadcrumbs left, search center, actions right.
     // The brand logo lives in the sidebar header (per design feedback) so the
     // topbar center is dedicated to the global search bar.
     <header className="grid h-14 grid-cols-[minmax(0,1fr)_minmax(360px,640px)_minmax(0,1fr)] items-center border-b border-border bg-background gap-3 px-4 shrink-0">
-      {/* LEFT: breadcrumbs / page title */}
-      <div className="min-w-0">
+      {/* LEFT: optional back button + breadcrumbs / page title */}
+      <div className="min-w-0 flex items-center gap-1.5">
+        {showBackButton && (
+          <button
+            type="button"
+            onClick={() => router.back()}
+            aria-label="Go back"
+            title="Go back"
+            className={cn(
+              'inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md',
+              'text-muted-foreground hover:text-foreground hover:bg-accent transition-colors',
+            )}
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </button>
+        )}
         <Breadcrumbs />
       </div>
 
@@ -100,8 +132,12 @@ export function Topbar({ ports, user }: TopbarProps) {
           user={user}
           ports={ports}
           trigger={
-            <Button variant="ghost" size="icon" className="rounded-full">
-              <Avatar className="w-7 h-7 shadow-sm ring-2 ring-background">
+            // Button shrunk to match the Avatar's visible footprint so
+            // the hover halo lands as a tight circle behind the avatar
+            // (was h-11 w-11 default — the rounded-full halo extended
+            // well past the visible avatar and read as a square glow).
+            <Button variant="ghost" className="rounded-full h-9 w-9 p-0">
+              <Avatar className="w-7 h-7">
                 <AvatarImage src={undefined} />
                 <AvatarFallback className="bg-brand text-white text-xs font-semibold">
                   {(user?.name ?? 'U').slice(0, 1).toUpperCase()}