diff --git a/client/src/components/Planner/ReservationsPanel.tsx b/client/src/components/Planner/ReservationsPanel.tsx
index 7d9ddde3e..72c30af61 100644
--- a/client/src/components/Planner/ReservationsPanel.tsx
+++ b/client/src/components/Planner/ReservationsPanel.tsx
@@ -1,705 +1,29 @@
-import { useState, useMemo, useEffect, type CSSProperties } from 'react'
-import { createPortal } from 'react-dom'
+import { useCallback, useMemo, useState, type CSSProperties } from 'react'
+import { Download, Plane, Plus, SearchX } from 'lucide-react'
import { useTripStore } from '../../store/tripStore'
import { useCanDo } from '../../store/permissionsStore'
import { useSettingsStore } from '../../store/settingsStore'
+import { usePluginStore } from '../../store/pluginStore'
import { useToast } from '../shared/Toast'
import { useTranslation } from '../../i18n'
-import {
- Plane, Hotel, Utensils, Train, Car, Ship, Bus, Sailboat, Bike, CarTaxiFront, Route, Ticket, FileText, MapPin,
- Calendar, Hash, CheckCircle2, Circle, Pencil, Trash2, Plus, ChevronDown, ChevronRight, Users,
- ExternalLink, Lightbulb, Link2, Clock, ArrowRight, AlertCircle, Download,
- TramFront, Footprints, StickyNote, ParkingSquare,
-} from 'lucide-react'
-import { openFile } from '../../utils/fileDownload'
-import { safeExternalHref } from '../../utils/safeUrl'
-import { TransitTitle, TransitLegChips, TransitMetaBadges, fmtTransitDuration } from './transitDisplay'
-import Markdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
-import remarkBreaks from 'remark-breaks'
-import { markdownLinkComponents } from '../shared/markdownLink'
-import type { Reservation, Day, TripFile, AssignmentsMap } from '../../types'
-import type { ViewContribution } from '../../api/client'
-import { usePluginViewContributions, PluginCardFooter } from '../Plugins/PluginContributions'
-import { usePluginStore, type ActivePlugin } from '../../store/pluginStore'
-import PluginFrame from '../Plugins/PluginFrame'
-import { splitReservationDateTime, formatTime, formatPriceText } from '../../utils/formatters'
-import { getFlightLegs, getTrainLegs } from '../../utils/flightLegs'
+import type { Reservation, Day, TripFile, AssignmentsMap, BudgetItem } from '../../types'
+import { usePluginViewContributions } from '../Plugins/PluginContributions'
import EmptyState from '../shared/EmptyState'
-import { TravelerAvatarRow, TravelerFilterAvatars } from './TravelerPicker'
+import ConfirmDialog from '../shared/ConfirmDialog'
import type { TripMember } from '../Budget/BudgetPanelMemberChips'
-
-interface AssignmentLookupEntry {
- dayNumber: number
- dayTitle: string | null
- dayDate: string
- placeName: string
- startTime: string | null
- endTime: string | null
-}
-
-const TYPE_OPTIONS = [
- { value: 'flight', labelKey: 'reservations.type.flight', Icon: Plane, color: '#3b82f6' },
- { value: 'hotel', labelKey: 'reservations.type.hotel', Icon: Hotel, color: '#8b5cf6' },
- { value: 'restaurant', labelKey: 'reservations.type.restaurant', Icon: Utensils, color: '#ef4444' },
- { value: 'train', labelKey: 'reservations.type.train', Icon: Train, color: '#06b6d4' },
- { value: 'bus', labelKey: 'reservations.type.bus', Icon: Bus, color: '#059669' },
- { value: 'car', labelKey: 'reservations.type.car', Icon: Car, color: '#6b7280' },
- { value: 'taxi', labelKey: 'reservations.type.taxi', Icon: CarTaxiFront, color: '#ca8a04' },
- { value: 'bicycle', labelKey: 'reservations.type.bicycle', Icon: Bike, color: '#84cc16' },
- { value: 'cruise', labelKey: 'reservations.type.cruise', Icon: Ship, color: '#0ea5e9' },
- { value: 'ferry', labelKey: 'reservations.type.ferry', Icon: Sailboat, color: '#0d9488' },
- { value: 'transit', labelKey: 'reservations.type.transit', Icon: TramFront, color: '#7c3aed' },
- { value: 'transport_other', labelKey: 'reservations.type.transport_other', Icon: Route, color: '#6b7280' },
- { value: 'event', labelKey: 'reservations.type.event', Icon: Ticket, color: '#f59e0b' },
- { value: 'tour', labelKey: 'reservations.type.tour', Icon: Users, color: '#10b981' },
- { value: 'parking', labelKey: 'reservations.type.parking', Icon: ParkingSquare, color: '#2563eb' },
- { value: 'other', labelKey: 'reservations.type.other', Icon: FileText, color: '#6b7280' },
-]
-
-function getType(type) {
- return TYPE_OPTIONS.find(t => t.value === type) || TYPE_OPTIONS[TYPE_OPTIONS.length - 1]
-}
-
-function buildAssignmentLookup(days, assignments) {
- const map = {}
- for (const day of (days || [])) {
- const da = (assignments?.[String(day.id)] || []).slice().sort((a, b) => a.order_index - b.order_index)
- for (const a of da) {
- if (!a.place) continue
- map[a.id] = { dayNumber: day.day_number, dayTitle: day.title, dayDate: day.date, placeName: a.place.name, startTime: a.place.place_time, endTime: a.place.end_time }
- }
- }
- return map
-}
-
-/* ── Shared field label/value styles ── */
-const fieldLabelClass = 'text-[10px] font-semibold uppercase tracking-[0.08em] text-content-faint mb-[5px]'
-const fieldValueClass = 'text-[13px] font-medium text-content px-[10px] py-[8px] bg-surface-tertiary rounded-[10px]'
-
-// A booking code is only a control while the blur setting is on: then it lifts on
-// hover and toggles on click or Enter. With blurring off it is plain text, so it
-// stays a plain element instead of a button that can never do anything.
-function ConfirmationCode({ code, blurred, revealed, onReveal }: {
- code: React.ReactNode
- blurred: boolean
- revealed: boolean
- onReveal: (next: boolean | ((v: boolean) => boolean)) => void
-}) {
- const codeStyle: CSSProperties = {
- fontFamily: '"SF Mono", "JetBrains Mono", Menlo, monospace', fontSize: 'calc(12.5px * var(--fs-scale-body, 1))',
- filter: blurred && !revealed ? 'blur(5px)' : 'none',
- transition: 'filter 0.2s',
- }
- if (!blurred) return
{code}
- return (
-
- )
-}
-
-interface ReservationCardProps {
- r: Reservation
- tripId: number
- onEdit: (reservation: Reservation) => void
- onDelete: (id: number) => void
- files?: TripFile[]
- onNavigateToFiles: () => void
- assignmentLookup: Record
- canEdit: boolean
- days?: Day[]
- contributions?: ViewContribution[]
- /** Plugins that declared a reservation-detail slot — mounted at the card's foot, scoped to this reservation. */
- detailPlugins?: ActivePlugin[]
-}
-
-function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateToFiles, assignmentLookup, canEdit, days = [], contributions = [], detailPlugins = [] }: ReservationCardProps) {
- const toast = useToast()
- const { t, locale } = useTranslation()
- const timeFormat = useSettingsStore(s => s.settings.time_format) || '24h'
- const blurCodes = useSettingsStore(s => s.settings.blur_booking_codes)
- const tripCurrency = useTripStore(s => s.trip?.currency)
- const [codeRevealed, setCodeRevealed] = useState(false)
- const typeInfo = getType(r.type)
- const TypeIcon = typeInfo.Icon
- const confirmed = r.status === 'confirmed'
- // A multi-leg AirTrail import is detached from sync *by design* — AirTrail has
- // no single flight to round-trip a layover chain to, so it's created with
- // sync_enabled=0 (#1535). Distinguish it from a flight that was removed
- // upstream so the badge doesn't falsely claim it "was removed in AirTrail" (#1646).
- // Mirror the server's hasLocalMultiLegShape (airtrailSync.ts): a metadata legs
- // array of length > 1, OR — for a flight grown into multiple legs locally, which
- // carries no legs array — more than two endpoints. Both are detached, not removed.
- const airtrailMultiLeg = r.external_source === 'airtrail' && !r.sync_enabled && (() => {
- try {
- const m = typeof r.metadata === 'string' ? JSON.parse(r.metadata || '{}') : (r.metadata || {})
- if (Array.isArray(m?.legs) && m.legs.length > 1) return true
- } catch { /* malformed metadata — fall through to the endpoint count */ }
- return (r.endpoints || []).length > 2
- })()
- const attachedFiles = files.filter(f => f.reservation_id === r.id || (f.linked_reservation_ids || []).includes(r.id))
- const linked = r.assignment_id ? assignmentLookup[r.assignment_id] : null
- // A booking link is deliberately free-form - people paste bare hosts and long
- // provider deep links - so this refuses the schemes that execute in this
- // origin and leaves everything else linkable.
- const bookingUrl = safeExternalHref(r.url)
- const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
-
- const handleDelete = async () => {
- setShowDeleteConfirm(false)
- try { await onDelete(r.id) } catch { toast.error(t('reservations.toast.deleteError')) }
- }
-
- const isMobile = typeof window !== 'undefined' && window.innerWidth < 768
- const startDt = splitReservationDateTime(r.reservation_time)
- const endDt = splitReservationDateTime(r.reservation_end_time)
- const fmtDate = (date: string) =>
- new Date(date + 'T00:00:00Z').toLocaleDateString(locale, { ...(isMobile ? {} : { weekday: 'short' }), day: 'numeric', month: 'short', timeZone: 'UTC' })
-
- const hasDate = !!startDt.date
- const hasTime = !!(startDt.time || endDt.time)
- const hasCode = !!r.confirmation_number
- const dateCols = [hasDate, hasTime, hasCode].filter(Boolean).length
-
- const TRANSPORT_TYPES_SET = new Set(['flight', 'train', 'bus', 'car', 'taxi', 'bicycle', 'cruise', 'ferry', 'transit', 'transport_other'])
- const isTransportType = TRANSPORT_TYPES_SET.has(r.type)
- const isHotel = r.type === 'hotel'
- // For a hotel linked to an accommodation, the accommodation's own start/end days are
- // the source of truth for the stay range: a stale day_id left behind by a range edit
- // would otherwise mislabel the card, so prefer the accommodation ids here (#1383).
- const startDay = (isHotel && r.accommodation_start_day_id) ? days.find(d => d.id === r.accommodation_start_day_id)
- : r.day_id ? days.find(d => d.id === r.day_id)
- : undefined
- const endDay = (isHotel && r.accommodation_end_day_id) ? days.find(d => d.id === r.accommodation_end_day_id)
- : r.end_day_id ? days.find(d => d.id === r.end_day_id)
- : undefined
- const DayLabel = ({ day }: { day: typeof startDay }) => {
- if (!day) return null
- const name = day.title || t('dayplan.dayN', { n: day.day_number })
- const badge = day.date
- ? new Date(day.date + 'T00:00:00Z').toLocaleDateString(locale, { day: 'numeric', month: 'short', timeZone: 'UTC' })
- : null
- return (
-
- {name}
- {badge && (
- {badge}
- )}
-
- )
- }
-
- return (
-
e.currentTarget.style.boxShadow = '0 2px 12px rgba(0,0,0,0.06)'}
- onMouseLeave={e => e.currentTarget.style.boxShadow = 'none'}
- >
- {/* Header — wraps to a second row on narrow screens so the status/category chips
- never collide with the title. */}
-
- )}
- {/* Date / Time row — hidden for a hotel linked to an accommodation: its stay
- already shows as the day-range label above, and a reservation_time stamped
- on the auto-created reservation would otherwise duplicate it (#1383). */}
- {(hasDate || hasTime) && !(isHotel && (r.accommodation_start_day_id || r.accommodation_end_day_id)) && (
-
- )
- })()}
-
- {/* Per-segment booking codes (#1943). A stopover booking can carry its own
- reference per leg, and the cell above only ever shows the booking's own.
- The reveal is shared with that cell on purpose: uncovering the codes is
- one gesture per card, not one per segment. */}
- {(() => {
- if (r.type !== 'flight' && r.type !== 'train') return null
- const legs = r.type === 'flight' ? getFlightLegs(r) : getTrainLegs(r)
- if (legs.length < 2) return null
- const coded = legs.filter(l => l.confirmation_number)
- if (coded.length === 0) return null
- return (
-
- )}
-
- {/* Reservation-detail plugin slots: sandboxed, scoped to this journey. The
- card itself is clickable, so keep frame interactions from opening it. */}
- {detailPlugins.length > 0 && (
-
+ )
+}
+
+/** A transit journey's legs in their line colours, its duration and the first line of its notes. */
+function TransitBody({ r }: { r: Reservation }) {
+ const { t } = useTranslation()
+ const meta = parseMeta(r)
+ const transit = meta.transit && Array.isArray(meta.transit.legs) ? meta.transit : null
+ return (
+ <>
+ {transit && (
+
+ )
+}
+
+/** A booking the axis cannot place, as a small card of its own below the timeline. */
+function TrayCard({ r, selected, onSelect }: { r: Reservation; selected: boolean; onSelect: () => void }) {
+ const { t } = useTranslation()
+ const info = typeInfo(r.type)
+ const tone = toneOf(r)
+ const status = tone === 'transit' ? null : tone === 'confirmed' ? t('reservations.confirmed') : t('reservations.pending')
+ return (
+
+ )
+}
diff --git a/client/src/components/Planner/bookings/bookingFacts.ts b/client/src/components/Planner/bookings/bookingFacts.ts
new file mode 100644
index 000000000..daa66b7e3
--- /dev/null
+++ b/client/src/components/Planner/bookings/bookingFacts.ts
@@ -0,0 +1,112 @@
+import type { Day, Reservation, ReservationEndpoint } from '../../../types'
+import { formatPriceText, formatTime, splitReservationDateTime } from '../../../utils/formatters'
+import { getFlightLegs, getTrainLegs } from '../../../utils/flightLegs'
+import { safeExternalHref } from '../../../utils/safeUrl'
+import { daySpan, parseMeta, type AssignmentLookupEntry } from './bookingsModel'
+
+export interface FactsContext {
+ t: (key: string, params?: Record) => string
+ locale: string
+ timeFormat: string
+ days: Day[]
+ assignmentLookup: Record
+ tripCurrency?: string | null
+ /** Whether an expense is linked; then the mirrored meta price is not shown a second time. */
+ hasLinkedCost: boolean
+}
+
+export interface BookingFacts {
+ /** The day or day range, e.g. "Day 2 → Day 7", with the calendar date beside it. */
+ day: { label: string; date: string | null } | null
+ /** Start and end time, or null without either. */
+ time: string | null
+ startTime: string | null
+ endTime: string | null
+ startDate: string | null
+ endDate: string | null
+ cells: { label: string; value: string }[]
+ endpoints: ReservationEndpoint[]
+ legCodes: { route: string; code: string }[]
+ place: string | null
+ accommodation: string | null
+ linked: string | null
+ url: { href: string | null; text: string } | null
+ isHotel: boolean
+}
+
+const fmtDate = (date: string, locale: string, weekday = true) =>
+ new Date(`${date}T00:00:00Z`).toLocaleDateString(locale, { ...(weekday ? { weekday: 'short' } : {}), day: 'numeric', month: 'short', timeZone: 'UTC' })
+
+export function formatDay(date: string, locale: string, weekday = true): string {
+ return fmtDate(date, locale, weekday)
+}
+
+/** Everything a card, a row and the detail pane print about one booking, formatted once. */
+export function bookingFacts(r: Reservation, c: FactsContext): BookingFacts {
+ const { t, locale, timeFormat } = c
+ const meta = parseMeta(r)
+ const isHotel = r.type === 'hotel'
+ const span = daySpan(r, c.days)
+ const startDt = splitReservationDateTime(r.reservation_time)
+ const endDt = splitReservationDateTime(r.reservation_end_time)
+ const dayName = (d: Day) => d.title || t('dayplan.dayN', { n: d.day_number })
+
+ let day: BookingFacts['day'] = null
+ if (span.start) {
+ const label = span.end && span.end.id !== span.start.id ? `${dayName(span.start)} → ${dayName(span.end)}` : dayName(span.start)
+ const dates = [span.start.date, span.end && span.end.id !== span.start.id ? span.end.date : null].filter(Boolean) as string[]
+ day = { label, date: dates.length ? dates.map(d => fmtDate(d, locale, dates.length === 1)).join(' → ') : null }
+ } else if (startDt.date) {
+ const label = endDt.date && endDt.date !== startDt.date ? `${fmtDate(startDt.date, locale)} → ${fmtDate(endDt.date, locale)}` : fmtDate(startDt.date, locale)
+ day = { label, date: null }
+ }
+
+ const eps = (r.endpoints || []).slice().sort((a, b) => (a.sequence ?? 0) - (b.sequence ?? 0))
+ const from = eps.find(e => e.role === 'from')
+ const to = eps.find(e => e.role === 'to')
+ const startTime = startDt.time || from?.local_time || null
+ const endTime = endDt.time || to?.local_time || null
+ const time = startTime || endTime
+ ? `${startTime ? formatTime(startTime, locale, timeFormat) : ''}${endTime ? ` → ${formatTime(endTime, locale, timeFormat)}` : ''}`.trim()
+ : null
+
+ const hasEndpoints = !!from && !!to
+ const cells: BookingFacts['cells'] = []
+ if (meta.airline) cells.push({ label: t('reservations.meta.airline'), value: meta.airline })
+ if (meta.flight_number) cells.push({ label: t('reservations.meta.flightNumber'), value: meta.flight_number })
+ if (!hasEndpoints && meta.departure_airport) cells.push({ label: t('reservations.meta.from'), value: meta.departure_airport })
+ if (!hasEndpoints && meta.arrival_airport) cells.push({ label: t('reservations.meta.to'), value: meta.arrival_airport })
+ if (meta.train_number) cells.push({ label: t('reservations.meta.trainNumber'), value: meta.train_number })
+ if (meta.platform) cells.push({ label: t('reservations.meta.platform'), value: meta.platform })
+ if (meta.seat) cells.push({ label: t('reservations.meta.seat'), value: meta.class ? `${meta.seat}, ${meta.class}` : meta.seat })
+ if (!c.hasLinkedCost && meta.price != null && meta.price !== '') {
+ cells.push({ label: t('reservations.price'), value: formatPriceText(meta.price, meta.priceCurrency, c.tripCurrency, locale) })
+ }
+ if (meta.check_in_time) {
+ cells.push({ label: t('reservations.meta.checkIn'), value: formatTime(meta.check_in_time, locale, timeFormat) + (meta.check_in_end_time ? ` → ${formatTime(meta.check_in_end_time, locale, timeFormat)}` : '') })
+ }
+ if (meta.check_out_time) cells.push({ label: t('reservations.meta.checkOut'), value: formatTime(meta.check_out_time, locale, timeFormat) })
+
+ // Per-segment codes (#1943), only on a real stopover booking.
+ const legs = r.type === 'flight' ? getFlightLegs(r) : r.type === 'train' ? getTrainLegs(r) : []
+ const legCodes = legs.length > 1
+ ? legs.filter(l => l.confirmation_number).map(l => ({ route: [l.from, l.to].filter(Boolean).join(' → '), code: l.confirmation_number as string }))
+ : []
+
+ const linkedEntry = r.assignment_id ? c.assignmentLookup[r.assignment_id] : null
+ const linked = linkedEntry
+ ? [linkedEntry.dayTitle || t('dayplan.dayN', { n: linkedEntry.dayNumber }), linkedEntry.placeName, linkedEntry.startTime ? `${linkedEntry.startTime}${linkedEntry.endTime ? ` → ${linkedEntry.endTime}` : ''}` : null].filter(Boolean).join(', ')
+ : null
+
+ return {
+ day, time, startTime, endTime,
+ startDate: startDt.date || from?.local_date || span.start?.date || null,
+ endDate: endDt.date || to?.local_date || span.end?.date || null,
+ cells, endpoints: eps.length >= 2 ? eps : [], legCodes,
+ place: r.location || r.place_name || null,
+ accommodation: r.accommodation_name || null,
+ linked,
+ url: r.url ? { href: safeExternalHref(r.url), text: r.url } : null,
+ isHotel,
+ }
+}
diff --git a/client/src/components/Planner/bookings/bookingParts.tsx b/client/src/components/Planner/bookings/bookingParts.tsx
new file mode 100644
index 000000000..4f9de9c27
--- /dev/null
+++ b/client/src/components/Planner/bookings/bookingParts.tsx
@@ -0,0 +1,231 @@
+import type { CSSProperties, ReactNode } from 'react'
+import { AlertCircle, ChevronDown, ChevronUp, FileText, Plane } from 'lucide-react'
+import type { Reservation, TripFile } from '../../../types'
+import type { ReservationTraveler } from '@trek/shared'
+import { useTranslation } from '../../../i18n'
+import { avatarSrc } from '../../../utils/avatarSrc'
+import { openFile } from '../../../utils/fileDownload'
+import GuestBadge from '../../shared/GuestBadge'
+import { useToast } from '../../shared/Toast'
+import { parseMeta, typeInfo } from './bookingsModel'
+
+// The phone's card language on the desktop: small Geist eyebrows, framed value
+// boxes, count pills. Sizes scale with the user's text size setting.
+export const fs = (px: number, tier: 'caption' | 'body' | 'subtitle' = 'caption'): CSSProperties => ({ fontSize: `calc(${px}px * var(--fs-scale-${tier}, 1))` })
+export const EYEBROW = 'font-geist font-bold uppercase tracking-[.08em] text-content-faint'
+export const BOX = 'rounded-[10px] border border-edge-faint bg-surface-card'
+
+export type StatusTone = 'confirmed' | 'pending' | 'transit'
+
+export function toneOf(r: Reservation): StatusTone {
+ if (r.type === 'transit') return 'transit'
+ return r.status === 'confirmed' ? 'confirmed' : 'pending'
+}
+
+const TONE_VAR: Record = { confirmed: 'var(--success)', pending: 'var(--warning)', transit: 'var(--info)' }
+
+/** The status colour, and the head band's tint derived from it. */
+export const toneColor = (tone: StatusTone) => TONE_VAR[tone]
+export const toneTint = (tone: StatusTone) => `color-mix(in srgb, ${TONE_VAR[tone]} 11%, transparent)`
+
+export function Eyebrow({ children, className = '' }: { children: ReactNode; className?: string }) {
+ return
{children}
+}
+
+/** An uppercase label over a framed value, the field every phone card is made of. */
+export function Field({ label, children, className = '', tabular = false }: { label: string; children: ReactNode; className?: string; tabular?: boolean }) {
+ return (
+
+ {label}
+
+ {children}
+
+
+ )
+}
+
+export function CountPill({ children }: { children: ReactNode }) {
+ return (
+
+ {children}
+
+ )
+}
+
+/** A collapsible section head: the label, what the day is, the count, and the chevron on the right. */
+export function SectionHead({ label, sub, count, open, onToggle }: { label: string; sub?: string; count: number; open: boolean; onToggle: () => void }) {
+ return (
+
+ )
+}
+
+/**
+ * The status dot. With the right to edit bookings it is a switch between
+ * confirmed and pending, as on the phone; a transit journey has no status and
+ * shows its dot in the info colour.
+ */
+export function StatusDot({ r, canToggle, onToggle, size = 8 }: { r: Reservation; canToggle: boolean; onToggle: () => void; size?: number }) {
+ const { t } = useTranslation()
+ const tone = toneOf(r)
+ const dot =
+ if (!canToggle || tone === 'transit') return {dot}
+ const next = tone === 'confirmed' ? t('reservations.pending') : t('reservations.confirmed')
+ return (
+
+ )
+}
+
+export function TypeChip({ type }: { type: string }) {
+ const { t } = useTranslation()
+ const info = typeInfo(type)
+ return (
+
+
+ {t(info.labelKey)}
+
+ )
+}
+
+/** The square tile with the type's icon, used by rows and the detail pane. */
+export function TypeTile({ type, size = 32, raised = false }: { type: string; size?: number; raised?: boolean }) {
+ const info = typeInfo(type)
+ return (
+
+
+
+ )
+}
+
+export function ReviewPill() {
+ const { t } = useTranslation()
+ return (
+
+
+ {t('reservations.needsReview')}
+
+ )
+}
+
+/**
+ * The AirTrail link of a booking. A multi-leg import is detached from sync by
+ * design (#1535), which is not the same as a flight removed upstream (#1646).
+ */
+export function AirTrailPill({ r }: { r: Reservation }) {
+ const { t } = useTranslation()
+ if (r.external_source !== 'airtrail') return null
+ const meta = parseMeta(r)
+ const multiLeg = !r.sync_enabled && ((Array.isArray(meta.legs) && meta.legs.length > 1) || (r.endpoints || []).length > 2)
+ const live = !!r.sync_enabled || multiLeg
+ return (
+
+
+ {live ? t('reservations.airtrail.synced') : t('reservations.airtrail.notSynced')}
+
+ )
+}
+
+/** A round 26 px action on a card head, quiet until the card is hovered or focused. */
+export function RoundAction({ label, onClick, children, danger = false }: { label: string; onClick: () => void; children: ReactNode; danger?: boolean }) {
+ return (
+
+ )
+}
+
+/** Who a booking is for, as the phone shows them: avatar and name in a soft chip. */
+export function TravelerChips({ travelers }: { travelers: ReservationTraveler[] }) {
+ if (travelers.length === 0) return null
+ return (
+