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/shared/inline-editable-field.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect, useRef, useState } from 'react';
-import { Loader2, Pencil } from 'lucide-react';
+import { ChevronDown, Loader2, Pencil } from 'lucide-react';
 
 import { toastError } from '@/lib/api/toast-error';
 import { Input } from '@/components/ui/input';
@@ -98,33 +98,25 @@ export function InlineEditableField(props: InlineEditableFieldProps) {
   }
 
   if (props.variant === 'select') {
+    // Picker fields don't need a read/edit mode toggle — a Select is
+    // already a click-to-open control. Rendering one consistent
+    // SelectTrigger eliminates the width jump that happened when we
+    // swapped from a content-sized ReadButton to a w-full SelectTrigger
+    // on click (and back again on selection). The trigger now stays at
+    // a single width whether the popover is open or closed, so the
+    // dropdown menu visually aligns to the same control across states.
     const labelFor = (v: string | null | undefined) =>
       v ? (props.options.find((o) => o.value === v)?.label ?? v) : null;
 
-    if (!editing) {
-      return (
-        <ReadButton
-          value={labelFor(value)}
-          emptyText={emptyText}
-          disabled={disabled}
-          onClick={() => setEditing(true)}
-          className={className}
-        />
-      );
-    }
-
     return (
       <div className={cn('flex items-center gap-1', className)}>
         <Select
-          value={draft}
+          value={value ?? ''}
           onValueChange={(v) => void commit(v)}
-          open
-          onOpenChange={(open) => {
-            if (!open && !saving) setEditing(false);
-          }}
+          disabled={disabled || saving}
         >
-          <SelectTrigger className="h-7 text-sm w-full">
-            <SelectValue placeholder={placeholder} />
+          <SelectTrigger className="h-8 text-sm w-full">
+            <SelectValue placeholder={emptyText}>{labelFor(value) ?? emptyText}</SelectValue>
           </SelectTrigger>
           <SelectContent>
             {props.options.map((o) => (
@@ -228,6 +220,7 @@ function ReadButton({
   disabled,
   onClick,
   multiline,
+  kind = 'text',
   className,
 }: {
   value: string | null;
@@ -235,8 +228,13 @@ function ReadButton({
   disabled?: boolean;
   onClick: () => void;
   multiline?: boolean;
+  /** Icon affordance: 'text' shows a pencil (free-text edit), 'select'
+   *  shows a chevron-down (fixed-list picker). The chevron clarifies
+   *  that clicking opens a dropdown, not a text input. */
+  kind?: 'text' | 'select';
   className?: string;
 }) {
+  const Icon = kind === 'select' ? ChevronDown : Pencil;
   return (
     <button
       type="button"
@@ -246,6 +244,9 @@ function ReadButton({
         'group rounded px-1 -mx-1 py-0.5 text-left text-sm',
         multiline ? 'flex w-full items-start gap-1.5' : 'inline-flex items-center gap-1.5',
         'hover:bg-muted/60 focus-visible:bg-muted/60 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+        // Select-kind buttons get a faint border so they read as a
+        // distinct interactive element rather than text-with-an-icon.
+        kind === 'select' && 'border border-border bg-background hover:bg-accent',
         disabled && 'cursor-not-allowed opacity-60 hover:bg-transparent',
         className,
       )}
@@ -260,11 +261,14 @@ function ReadButton({
         {value ?? emptyText}
       </span>
       {!disabled && (
-        <Pencil
+        <Icon
           className={cn(
-            // Show the pencil faintly at rest so users discover the field is
-            // editable without having to hover-and-test every label.
-            'h-3 w-3 opacity-20 transition-opacity group-hover:opacity-60',
+            // Pencil sits faintly so users discover free-text editability
+            // on hover; chevron is more present so the dropdown affordance
+            // is obvious before any interaction.
+            kind === 'select'
+              ? 'h-3.5 w-3.5 opacity-60 transition-opacity group-hover:opacity-100'
+              : 'h-3 w-3 opacity-20 transition-opacity group-hover:opacity-60',
             multiline && 'mt-1 shrink-0',
           )}
         />