diff --git a/client/src/components/Planner/TransitSearchModal.test.tsx b/client/src/components/Planner/TransitSearchModal.test.tsx
new file mode 100644
index 000000000..b2bbd9b78
--- /dev/null
+++ b/client/src/components/Planner/TransitSearchModal.test.tsx
@@ -0,0 +1,151 @@
+// FE-PLANNER-TRANSIT-001 to FE-PLANNER-TRANSIT-006
+import { render, screen, waitFor } from '../../../tests/helpers/render'
+import userEvent from '@testing-library/user-event'
+import { resetAllStores, seedStore } from '../../../tests/helpers/store'
+import { useAuthStore } from '../../store/authStore'
+import { useSettingsStore } from '../../store/settingsStore'
+import { buildUser, buildDay, buildPlace } from '../../../tests/helpers/factories'
+import TransitSearchModal from './TransitSearchModal'
+
+const { transitApiMock } = vi.hoisted(() => ({
+ transitApiMock: { geocode: vi.fn(), plan: vi.fn() },
+}))
+
+vi.mock('../../api/client', async (importOriginal) => {
+ const actual = await importOriginal() as object
+ return { ...actual, transitApi: transitApiMock }
+})
+
+vi.mock('../shared/Toast', () => ({ useToast: () => ({ error: vi.fn(), success: vi.fn() }) }))
+
+// Berlin, summer time (UTC+2): 06:30Z departs 08:30 local, 07:00Z arrives 09:00.
+const ITINERARY = {
+ startTime: '2025-06-01T06:30:00Z',
+ endTime: '2025-06-01T07:00:00Z',
+ duration: 1800,
+ transfers: 1,
+ walkSeconds: 240,
+ legs: [
+ { mode: 'WALK', from: { name: 'Start', lat: 52.52, lng: 13.4, time: '2025-06-01T06:30:00Z', scheduledTime: null, track: null }, to: { name: 'Alexanderplatz', lat: 52.521, lng: 13.41, time: '2025-06-01T06:34:00Z', scheduledTime: null, track: null }, duration: 240, distance: 300, headsign: null, line: null, lineColor: null, lineTextColor: null, agency: null, intermediateStops: 0 },
+ { mode: 'SUBWAY', from: { name: 'Alexanderplatz', lat: 52.521, lng: 13.41, time: '2025-06-01T06:36:00Z', scheduledTime: null, track: '2' }, to: { name: 'Zoologischer Garten', lat: 52.507, lng: 13.332, time: '2025-06-01T07:00:00Z', scheduledTime: null, track: null }, duration: 1440, distance: null, headsign: 'Ruhleben', line: 'U2', lineColor: '#FF3300', lineTextColor: '#FFFFFF', agency: 'BVG', intermediateStops: 6 },
+ ],
+}
+
+const day = buildDay({ id: 10, trip_id: 1, date: '2025-06-01', title: 'Berlin Day' })
+
+function makeProps(overrides = {}) {
+ return {
+ isOpen: true,
+ onClose: vi.fn(),
+ day,
+ days: [day],
+ places: [buildPlace({ id: 1, name: 'Fernsehturm', lat: 52.5208, lng: 13.4094 })],
+ accommodations: [],
+ onAdd: vi.fn().mockResolvedValue({}),
+ ...overrides,
+ }
+}
+
+async function pickFromAndTo(user: ReturnType
) {
+ // Quick picks (the day's places) appear on focus with an empty query.
+ const [fromInput, toInput] = screen.getAllByPlaceholderText('Search stop or station…')
+ await user.click(fromInput)
+ await user.click(await screen.findByText('Fernsehturm'))
+
+ transitApiMock.geocode.mockResolvedValueOnce({ results: [{ name: 'Zoologischer Garten', lat: 52.507, lng: 13.332, type: 'STOP', area: 'Berlin' }] })
+ await user.click(toInput)
+ await user.type(toInput, 'Zoo')
+ await user.click(await screen.findByText(/Zoologischer Garten/))
+}
+
+beforeEach(() => {
+ resetAllStores()
+ vi.clearAllMocks()
+ seedStore(useAuthStore, { user: buildUser(), isAuthenticated: true })
+ seedStore(useSettingsStore, { settings: { time_format: '24h' } } as any)
+})
+
+describe('TransitSearchModal', () => {
+ it('FE-PLANNER-TRANSIT-001: renders from/to pickers, modes and preferences', () => {
+ render()
+ expect(screen.getByText('Public transit')).toBeInTheDocument()
+ expect(screen.getAllByPlaceholderText('Search stop or station…')).toHaveLength(2)
+ expect(screen.getByText('Subway')).toBeInTheDocument()
+ expect(screen.getByText('Fewer transfers')).toBeInTheDocument()
+ })
+
+ it('FE-PLANNER-TRANSIT-002: searching lists itineraries with times, transfers and line badges', async () => {
+ const user = userEvent.setup()
+ transitApiMock.plan.mockResolvedValueOnce({ itineraries: [ITINERARY] })
+ render()
+ await pickFromAndTo(user)
+ await user.click(screen.getByRole('button', { name: /^Search$/ }))
+ // Local Berlin times, U2 badge, 1 transfer.
+ expect(await screen.findByText(/08:30 – 09:00/)).toBeInTheDocument()
+ expect(screen.getByText('U2')).toBeInTheDocument()
+ expect(screen.getByText('1 transfers')).toBeInTheDocument()
+ })
+
+ it('FE-PLANNER-TRANSIT-003: adding a route builds a transport payload with local times + endpoints', async () => {
+ const user = userEvent.setup()
+ const onAdd = vi.fn().mockResolvedValue({})
+ transitApiMock.plan.mockResolvedValueOnce({ itineraries: [ITINERARY] })
+ render()
+ await pickFromAndTo(user)
+ await user.click(screen.getByRole('button', { name: /^Search$/ }))
+ await user.click(await screen.findByText(/08:30 – 09:00/))
+ await user.click(await screen.findByRole('button', { name: 'Add to day' }))
+
+ await waitFor(() => expect(onAdd).toHaveBeenCalled())
+ const payload = onAdd.mock.calls[0][0]
+ expect(payload.type).toBe('train') // dominant leg = SUBWAY → train
+ expect(payload.title).toBe('Fernsehturm → Zoologischer Garten')
+ expect(payload.day_id).toBe(10)
+ expect(payload.reservation_time).toBe('2025-06-01T08:30')
+ expect(payload.reservation_end_time).toBe('2025-06-01T09:00')
+ expect(payload.status).toBe('confirmed')
+ // from + to endpoints (single transit leg → no transfer stops)
+ expect(payload.endpoints).toHaveLength(2)
+ expect(payload.endpoints[0]).toMatchObject({ role: 'from', name: 'Fernsehturm', timezone: 'Europe/Berlin' })
+ expect(payload.endpoints[1]).toMatchObject({ role: 'to', name: 'Zoologischer Garten' })
+ // compact itinerary stored for the detail modal
+ expect(payload.metadata.transit.provider).toBe('transitous')
+ expect(payload.metadata.transit.legs).toHaveLength(2)
+ expect(payload.metadata.transit.legs[1]).toMatchObject({ mode: 'SUBWAY', line: 'U2', line_color: '#FF3300', headsign: 'Ruhleben' })
+ })
+
+ it('FE-PLANNER-TRANSIT-004: search failure shows the empty state, not a crash', async () => {
+ const user = userEvent.setup()
+ transitApiMock.plan.mockRejectedValueOnce(new Error('boom'))
+ render()
+ await pickFromAndTo(user)
+ await user.click(screen.getByRole('button', { name: /^Search$/ }))
+ expect(await screen.findByText(/No connections found/)).toBeInTheDocument()
+ })
+
+ it('FE-PLANNER-TRANSIT-005: preference "fewer transfers" re-ranks the list', async () => {
+ const user = userEvent.setup()
+ const direct = { ...ITINERARY, startTime: '2025-06-01T06:40:00Z', endTime: '2025-06-01T07:20:00Z', duration: 2400, transfers: 0 }
+ transitApiMock.plan.mockResolvedValueOnce({ itineraries: [ITINERARY, direct] })
+ render()
+ await pickFromAndTo(user)
+ await user.click(screen.getByRole('button', { name: /^Search$/ }))
+ await screen.findByText(/08:30 – 09:00/)
+ await user.click(screen.getByText('Fewer transfers'))
+ const cards = screen.getAllByText(/–/).filter(el => el.textContent?.match(/\d{2}:\d{2} – \d{2}:\d{2}/))
+ // The direct (0-transfer) itinerary now ranks first.
+ expect(cards[0].textContent).toContain('08:40')
+ })
+
+ it('FE-PLANNER-TRANSIT-006: swap exchanges from and to', async () => {
+ const user = userEvent.setup()
+ render()
+ const [fromInput] = screen.getAllByPlaceholderText('Search stop or station…')
+ await user.click(fromInput)
+ await user.click(await screen.findByText('Fernsehturm'))
+ await user.click(screen.getByLabelText('Swap'))
+ const inputs = screen.getAllByPlaceholderText('Search stop or station…')
+ expect((inputs[0] as HTMLInputElement).value).toBe('')
+ expect((inputs[1] as HTMLInputElement).value).toBe('Fernsehturm')
+ })
+})
diff --git a/client/src/components/Planner/TransitSearchModal.tsx b/client/src/components/Planner/TransitSearchModal.tsx
new file mode 100644
index 000000000..163933f94
--- /dev/null
+++ b/client/src/components/Planner/TransitSearchModal.tsx
@@ -0,0 +1,584 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import tzlookup from 'tz-lookup'
+import { ArrowLeftRight, ArrowRight, Bus, CableCar, ChevronDown, ChevronUp, Clock, Footprints, MapPin, Sailboat, Search, Train, TramFront, TrainFront } from 'lucide-react'
+import Modal from '../shared/Modal'
+import CustomTimePicker from '../shared/CustomTimePicker'
+import { transitApi } from '../../api/client'
+import { useSettingsStore } from '../../store/settingsStore'
+import { useToast } from '../shared/Toast'
+import { useTranslation } from '../../i18n'
+import type { Day, Place, Accommodation } from '../../types'
+
+/**
+ * Public transit route search (#1065), backed by Transitous (MOTIS) through the
+ * server proxy — no paid providers. Google-Maps-like flow in TREK's clean style:
+ * pick from/to (stop search + the day's own places as quick picks), filter by
+ * mode and preference, compare the returned itineraries, then add the chosen
+ * one to the day. The result is saved as a regular transport reservation
+ * (endpoints + metadata.transit), so timeline slotting, editing, deleting and
+ * drag/drop all reuse the existing machinery.
+ */
+
+// ── transit data shapes (mirrors the server's compact mapping) ──────────────
+
+interface TransitLegStop { name: string; lat: number; lng: number; time: string | null; scheduledTime: string | null; track: string | null }
+interface TransitLeg {
+ mode: string; from: TransitLegStop; to: TransitLegStop; duration: number; distance: number | null
+ headsign: string | null; line: string | null; lineColor: string | null; lineTextColor: string | null
+ agency: string | null; intermediateStops: number
+}
+export interface TransitItinerary {
+ startTime: string; endTime: string; duration: number; transfers: number; walkSeconds: number; legs: TransitLeg[]
+}
+
+interface TransitPlaceResult { name: string; lat: number; lng: number; type: string; area: string | null }
+
+interface PickedPlace { name: string; lat: number; lng: number }
+
+// ── helpers ──────────────────────────────────────────────────────────────────
+
+const MODE_GROUPS: { key: string; labelKey: string; Icon: React.ComponentType<{ size?: number; strokeWidth?: number }>; modes: string }[] = [
+ { key: 'rail', labelKey: 'transit.mode.rail', Icon: Train, modes: 'HIGHSPEED_RAIL,LONG_DISTANCE,NIGHT_RAIL,REGIONAL_RAIL,SUBURBAN' },
+ { key: 'subway', labelKey: 'transit.mode.subway', Icon: TrainFront, modes: 'SUBWAY' },
+ { key: 'tram', labelKey: 'transit.mode.tram', Icon: TramFront, modes: 'TRAM' },
+ { key: 'bus', labelKey: 'transit.mode.bus', Icon: Bus, modes: 'BUS,COACH' },
+ { key: 'ferry', labelKey: 'transit.mode.ferry', Icon: Sailboat, modes: 'FERRY' },
+ { key: 'cable', labelKey: 'transit.mode.cable', Icon: CableCar, modes: 'FUNICULAR,AERIAL_LIFT' },
+]
+
+function legIcon(mode: string) {
+ if (mode === 'WALK') return Footprints
+ if (mode === 'BUS' || mode === 'COACH') return Bus
+ if (mode === 'TRAM') return TramFront
+ if (mode === 'SUBWAY') return TrainFront
+ if (mode === 'FERRY') return Sailboat
+ if (mode === 'FUNICULAR' || mode === 'AERIAL_LIFT') return CableCar
+ return Train
+}
+
+/** TREK reservation type for the itinerary's dominant (longest) transit leg. */
+function dominantType(legs: TransitLeg[]): 'train' | 'bus' | 'ferry' | 'transport_other' {
+ let best: TransitLeg | null = null
+ for (const l of legs) {
+ if (l.mode === 'WALK') continue
+ if (!best || l.duration > best.duration) best = l
+ }
+ if (!best) return 'transport_other'
+ if (best.mode === 'BUS' || best.mode === 'COACH') return 'bus'
+ if (best.mode === 'FERRY') return 'ferry'
+ if (best.mode === 'FUNICULAR' || best.mode === 'AERIAL_LIFT') return 'transport_other'
+ return 'train'
+}
+
+function tzAt(lat: number, lng: number): string {
+ try { return tzlookup(lat, lng) } catch { return 'UTC' }
+}
+
+/** 'YYYY-MM-DD' + 'HH:mm' in an IANA zone → UTC ISO string. */
+function localToUtcIso(dateStr: string, timeStr: string, tz: string): string {
+ const naive = Date.parse(`${dateStr}T${timeStr}:00Z`)
+ const inTz = new Date(new Date(naive).toLocaleString('en-US', { timeZone: tz })).getTime()
+ const inUtc = new Date(new Date(naive).toLocaleString('en-US', { timeZone: 'UTC' })).getTime()
+ return new Date(naive - (inTz - inUtc)).toISOString()
+}
+
+function fmtTimeInTz(iso: string | null, tz: string, is12h: boolean): string {
+ if (!iso) return ''
+ try { return new Intl.DateTimeFormat(is12h ? 'en-US' : 'en-GB', { timeZone: tz, hour: '2-digit', minute: '2-digit', hour12: is12h }).format(new Date(iso)) } catch { return '' }
+}
+
+function timeHHmmInTz(iso: string, tz: string): string {
+ return new Intl.DateTimeFormat('en-GB', { timeZone: tz, hour: '2-digit', minute: '2-digit', hour12: false }).format(new Date(iso))
+}
+
+function dateYMDInTz(iso: string, tz: string): string {
+ return new Intl.DateTimeFormat('en-CA', { timeZone: tz, year: 'numeric', month: '2-digit', day: '2-digit' }).format(new Date(iso))
+}
+
+function fmtDuration(seconds: number, t: (k: string, p?: Record) => string): string {
+ const mins = Math.round(seconds / 60)
+ if (mins < 60) return t('transit.min', { count: mins })
+ const h = Math.floor(mins / 60)
+ const m = mins % 60
+ return m > 0 ? `${h} h ${m} min` : `${h} h`
+}
+
+// ── from/to stop picker ──────────────────────────────────────────────────────
+
+function StopPicker({ label, value, onPick, quickPicks, near, placeholder }: {
+ label: string
+ value: PickedPlace | null
+ onPick: (p: PickedPlace | null) => void
+ quickPicks: PickedPlace[]
+ near: string | null
+ placeholder: string
+}) {
+ const { language } = useTranslation()
+ const [text, setText] = useState('')
+ const [results, setResults] = useState([])
+ const [open, setOpen] = useState(false)
+ const debounceRef = useRef | null>(null)
+ const rootRef = useRef(null)
+
+ useEffect(() => {
+ const close = (e: MouseEvent) => { if (!rootRef.current?.contains(e.target as Node)) setOpen(false) }
+ document.addEventListener('mousedown', close)
+ return () => document.removeEventListener('mousedown', close)
+ }, [])
+
+ useEffect(() => () => { if (debounceRef.current) clearTimeout(debounceRef.current) }, [])
+
+ const search = (q: string) => {
+ setText(q)
+ onPick(null)
+ if (debounceRef.current) clearTimeout(debounceRef.current)
+ if (q.trim().length < 2) { setResults([]); return }
+ debounceRef.current = setTimeout(() => {
+ transitApi.geocode(q, { lang: language, near: near || undefined })
+ .then((d: { results: TransitPlaceResult[] }) => setResults(d.results || []))
+ .catch(() => setResults([]))
+ }, 300)
+ }
+
+ const display = value ? value.name : text
+
+ return (
+
+
+
+
+ search(e.target.value)}
+ onFocus={() => setOpen(true)}
+ placeholder={placeholder}
+ className="text-content"
+ style={{ border: 0, background: 'none', outline: 'none', fontSize: 'calc(13px * var(--fs-scale-body, 1))', width: '100%', fontFamily: 'inherit' }}
+ />
+
+ {open && (results.length > 0 || (!value && text.trim().length < 2 && quickPicks.length > 0)) && (
+
+ {results.length > 0
+ ? results.map((r, i) => (
+
+ ))
+ : quickPicks.map((p, i) => (
+
+ ))}
+
+ )}
+
+
+
+ {expanded && (
+
+
+ {it.legs.map((leg, i) => {
+ const color = leg.mode === 'WALK' ? 'var(--border-primary)' : (leg.lineColor || 'var(--text-muted)')
+ return (
+
+
+ {leg.mode === 'WALK' ? '' : fmtTimeInTz(leg.from.time, tzAt(leg.from.lat, leg.from.lng), is12h)}
+
+
+
+
+
+
+
+ {leg.mode === 'WALK' ? t('transit.walkTo', { name: leg.to.name }) : leg.from.name}
+ {leg.from.track && leg.mode !== 'WALK' && · {t('transit.platform', { track: leg.from.track })}}
+
+
+ {leg.mode === 'WALK' ? (
+
{fmtDuration(leg.duration, t)}{leg.distance ? ` · ${leg.distance >= 1000 ? `${(leg.distance / 1000).toFixed(1)} km` : `${leg.distance} m`}` : ''}
+ ) : (
+ <>
+
+ {leg.headsign &&
{leg.headsign}}
+
{fmtDuration(leg.duration, t)}{leg.intermediateStops > 0 ? ` · ${t('transit.stops', { count: leg.intermediateStops })}` : ''}
+
+ )}
+
+
+
+ )
+ })}
+ {/* arrival row */}
+
+
+ {fmtTimeInTz(it.endTime, tzTo, is12h)}
+
+
+
+
+
+ {it.legs[it.legs.length - 1]?.to.name}
+
+
+
+ {transitLegs[0]?.agency && (
+
+ {[...new Set(transitLegs.map(l => l.agency).filter(Boolean))].join(' · ')}
+
+ )}
+
+
+ )}
+
+ {/* from / to */}
+
+
+
+
+
+
+ {/* time + depart/arrive */}
+
+
+
+
+
+
+
+
+ {day.date && (
+
+
+ {new Date(day.date + 'T00:00:00Z').toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short', timeZone: 'UTC' })}
+
+ )}
+
+
+ {/* mode chips */}
+
+ {MODE_GROUPS.map(m => {
+ const active = activeModes.has(m.key)
+ return (
+
+ )
+ })}
+
+
+ {/* preference + search */}
+
+
+
+
+
+
+
+
+
+ {/* results */}
+ {loading && (
+
+ )}
+ {!loading && ranked && ranked.length === 0 && (
+
+ {t('transit.noResults')}
+
+ )}
+ {!loading && ranked && ranked.length > 0 && (
+
+ {ranked.map((it, idx) => (
+
setExpandedIdx(expandedIdx === idx ? null : idx)}
+ onAdd={() => addItinerary(it, idx)}
+ adding={addingIdx === idx}
+ t={t}
+ />
+ ))}
+
+
+ )}
+