fix(mobile): booking routes on the phone map follow the day they run on

A booking switched on with "On map" stayed drawn on every day of the
phone's plan map, so a flight from the first day crossed the map of the
third, although a day chip frames one day and drops the other days' pins.
The plan map now draws such a booking only on the days it runs on, the
arrival day of an overnight one included, and the all-days view still
shows every booking that is switched on. The switch itself stays
trip-wide, and the desktop, collections and the road trip stage draw
exactly as before.

"On map" in a booking's sheet now reads as on only where the plan map
draws the route. From any other day a tap takes the map to the booking's
day, switching the route on when it is off, instead of hiding a route
that is not drawn there anyway.

The phone settings also gain the "Always show booking routes" switch the
desktop already had. As on the desktop it sets the default for trips not
yet touched on this device, so a trip where a route was switched on or
off by hand keeps that choice.

client/src/components/Map/MapView.test.tsx

@@ -599,6 +599,32 @@ describe('MapView', () => {
     expect(screen.getAllByTestId('polyline').length).toBeGreaterThan(0)
   })
 
+  it('FE-COMP-MAPVIEW-082: a booking switched on for another day keeps drawing unless the map is held to the day', () => {
+    // The desktop passes no scope, so a booking switched on stays drawn on every day.
+    // Only a caller that asks for it drops the booking from a day it does not run on.
+    const days = [{ id: 10, trip_id: 1, day_number: 1 }, { id: 11, trip_id: 1, day_number: 2 }]
+    const reservation = buildReservation({
+      id: 44,
+      type: 'flight',
+      day_id: 10,
+      end_day_id: 10,
+      endpoints: [
+        { role: 'from', sequence: 0, name: 'A', code: 'AAA', lat: 1, lng: 2, timezone: null, local_time: null, local_date: null },
+        { role: 'to', sequence: 1, name: 'B', code: 'BBB', lat: 3, lng: 4, timezone: null, local_time: null, local_date: null },
+      ],
+    })
+    const reservations = [reservation]
+    const ids = [44]
+    const { rerender } = render(<MapView reservations={reservations} visibleConnectionIds={ids} days={days} selectedDayId={11} />)
+    expect(screen.getAllByTestId('polyline').length).toBeGreaterThan(0)
+
+    rerender(<MapView reservations={reservations} visibleConnectionIds={ids} days={days} selectedDayId={11} scopeConnectionsToDay />)
+    expect(screen.queryByTestId('polyline')).not.toBeInTheDocument()
+
+    rerender(<MapView reservations={reservations} visibleConnectionIds={ids} days={days} selectedDayId={10} scopeConnectionsToDay />)
+    expect(screen.getAllByTestId('polyline').length).toBeGreaterThan(0)
+  })
+
   it('FE-COMP-MAPVIEW-073: a category icon that throws leaves the marker circle intact', () => {
     // Icon components come from a lookup table a plugin can extend; one that
     // throws must not take the whole map down, only its own glyph.

client/src/components/Map/MapView.tsx

@@ -699,6 +699,9 @@ export const MapView = memo(function MapView({
   showTransitRoutes = true,
   days = [] as Day[],
   selectedDayId = null,
+  // Whether a booking switched on by hand also has to run on the selected day to be
+  // drawn. Only the phone's plan map asks for it; see RouteVisibilityOptions.
+  scopeConnectionsToDay = false,
   onReservationClick,
   pois = [] as Poi[],
   onPoiClick,
@@ -762,8 +765,8 @@ export const MapView = memo(function MapView({
     </Marker>
   )), [pois, onPoiClick, onPoiDropOnRoute])
   const visibleReservations = useMemo(() => (
-    visibleRouteReservations(reservations, { visibleConnectionIds, showTransitRoutes, selectedDayId, days })
-  ), [reservations, visibleConnectionIds, showTransitRoutes, selectedDayId, days])
+    visibleRouteReservations(reservations, { visibleConnectionIds, showTransitRoutes, selectedDayId, days, scopeConnectionsToDay })
+  ), [reservations, visibleConnectionIds, showTransitRoutes, selectedDayId, days, scopeConnectionsToDay])
   // Real road geometry for car/bus/taxi/bicycle bookings (straight line until it loads/if it fails).
   const transportRoutes = useTransportRoutes(visibleReservations)
   // Dynamic padding: account for sidebars + bottom inspector + day detail panel

client/src/components/Map/MapViewGL.test.tsx

@@ -1379,6 +1379,33 @@ describe('MapViewGL', () => {
     expect(onReservationClick).toHaveBeenCalledWith(77)
   })
 
+  it('FE-COMP-MAPVIEWGL-087: a booking switched on for another day reaches the overlay unless the map is held to the day', async () => {
+    loadOnAttach()
+    const days = [{ id: 10, trip_id: 1, day_number: 1 }, { id: 11, trip_id: 1, day_number: 2 }]
+    const flight = {
+      id: 44, trip_id: 1, type: 'flight', title: 'A → B', status: 'confirmed', day_id: 10, end_day_id: 10,
+      endpoints: [
+        { role: 'from', sequence: 0, name: 'A', code: 'AAA', lat: 1, lng: 2, timezone: null, local_time: null, local_date: null },
+        { role: 'to', sequence: 1, name: 'B', code: 'BBB', lat: 3, lng: 4, timezone: null, local_time: null, local_date: null },
+      ],
+    }
+    const reservations = [flight]
+    const ids = [44]
+    const drawn = () => (reservationOverlay.update.mock.lastCall?.[0] as { id: number }[]).map(r => r.id)
+
+    const { rerender } = render(
+      <MapViewGL places={[]} fitKey={1} reservations={reservations} visibleConnectionIds={ids} days={days} selectedDayId={11} />,
+    )
+    await act(async () => {})
+    expect(drawn()).toEqual([44])
+
+    rerender(
+      <MapViewGL places={[]} fitKey={1} reservations={reservations} visibleConnectionIds={ids} days={days} selectedDayId={11} scopeConnectionsToDay />,
+    )
+    await act(async () => {})
+    expect(drawn()).toEqual([])
+  })
+
   it('FE-COMP-MAPVIEWGL-042: explore POIs get their own pin, hover popup and click callback', async () => {
     loadOnAttach()
     const basePoi: Poi = {

client/src/components/Map/MapViewGL.tsx

@@ -164,6 +164,11 @@ interface Props {
   showTransitRoutes?: boolean
   days?: Day[]
   selectedDayId?: number | null
+  /**
+   * Whether a booking switched on by hand also has to run on the selected day to be
+   * drawn. Only the phone's plan map asks for it; see RouteVisibilityOptions.
+   */
+  scopeConnectionsToDay?: boolean
   showReservationStats?: boolean
   onReservationClick?: (reservationId: number) => void
   pois?: Poi[]
@@ -695,6 +700,7 @@ export function MapViewGL({
   showTransitRoutes = true,
   days = NO_DAYS,
   selectedDayId = null,
+  scopeConnectionsToDay = false,
   showReservationStats = false,
   onReservationClick,
   pois = NO_POIS,
@@ -2186,8 +2192,8 @@ export function MapViewGL({
   // DayPlanSidebar — nothing is rendered until the user enables a
   // booking's route, matching the Leaflet MapView's behaviour.
   const visibleReservations = useMemo(() => (
-    visibleRouteReservations(reservations, { visibleConnectionIds, showTransitRoutes, selectedDayId, days })
-  ), [reservations, visibleConnectionIds, showTransitRoutes, selectedDayId, days])
+    visibleRouteReservations(reservations, { visibleConnectionIds, showTransitRoutes, selectedDayId, days, scopeConnectionsToDay })
+  ), [reservations, visibleConnectionIds, showTransitRoutes, selectedDayId, days, scopeConnectionsToDay])
   // Real road geometry for car/bus/taxi/bicycle bookings (straight line until it loads/if it fails).
   const transportRoutes = useTransportRoutes(visibleReservations)
 

client/src/mobile/screens/settings/MSettingsGeneral.tsx

@@ -53,6 +53,13 @@ export default function MSettingsGeneral() {
       on: settings.map_booking_labels === true,
       value: (on) => on,
     },
+    {
+      key: 'map_always_show_routes',
+      label: t('settings.alwaysShowRoutes'),
+      sub: t('settings.alwaysShowRoutesHint'),
+      on: settings.map_always_show_routes === true,
+      value: (on) => on,
+    },
     {
       key: 'map_poi_pill_enabled',
       label: t('settings.mapPoiPill'),

client/src/mobile/screens/trip/map/MMapArea.tsx

@@ -386,6 +386,10 @@ export default function MMapArea({ planner, shell }: MMapAreaProps) {
         // ride's leg carries no geometry, so without this the road ended at the
         // departure terminal and picked up again at the arrival with nothing between.
         visibleConnectionIds={onStage ? planner.roadtripConnections : planner.visibleConnections}
+        // The plan map shows one day, so a booking switched on for another day stays off
+        // it until that day is picked, or the whole trip is. The switch itself is still
+        // trip-wide. The stage keeps its seamed rides whatever day they were booked on.
+        scopeConnectionsToDay={!onStage}
         // Transport overlay tap → the mobile transport detail sheet (desktop
         // routes this through mapTransportDetail into the day sidebar instead).
         onReservationClick={(rid: number) => shell.openSheet('transport', { reservationId: rid })}

client/src/mobile/screens/trip/sheets/MTransportSheet.tsx

@@ -8,6 +8,7 @@ import { RES_ICONS } from '../../../../components/Planner/DayPlanSidebar.constan
 import { splitReservationDateTime } from '../../../../utils/formatters'
 import { getFlightLegs, getTrainLegs } from '../../../../utils/flightLegs'
 import { openFile } from '../../../../utils/fileDownload'
+import { runsOnDay } from '../../../../utils/reservationRoutes'
 import type { Reservation } from '../../../../types'
 import { Eyebrow, INNER_CLS, StatBox, TileHeader, displayTime } from './MTripSheetUi'
 
@@ -107,7 +108,11 @@ export default function MTransportSheet({ planner, shell }: MTripSheetsProps) {
 
   const confirmed = res.status === 'confirmed'
   const codeBlurred = blurCodes && !codeRevealed
-  const onMap = planner.visibleConnections.includes(res.id)
+  // The plan map only draws a switched-on booking on the days it runs on, so from any
+  // other day the button reads off, as the map does, and a tap takes the map to the
+  // booking instead of switching off a route that is not drawn here anyway.
+  const switchedOn = planner.visibleConnections.includes(res.id)
+  const onMap = switchedOn && runsOnDay(res, planner.selectedDayId, planner.days)
 
   // First tap draws the overlay and jumps to the map; while drawn, the same
   // button hides it again (per-booking overlay toggle, desktop parity).
@@ -116,10 +121,19 @@ export default function MTransportSheet({ planner, shell }: MTripSheetsProps) {
       planner.toggleConnection(res.id)
       return
     }
-    planner.toggleConnection(res.id)
+    if (!switchedOn) planner.toggleConnection(res.id)
     shell.closeSheet()
     if (shell.trTab !== 'plan') shell.setTrTab('plan')
     if (shell.view !== 'map') shell.toggleView()
+    // The map draws the day on the chips, and the Transports tab lists the whole trip, so
+    // the booking may run on a different day. Moved last, because entering the map picks
+    // the day the shell was already holding. A day inside the booking's span, the
+    // all-days view and a booking bound to no day are left as they are.
+    const bookingDayId = res.day_id ?? res.end_day_id
+    if (planner.selectedDayId != null && bookingDayId != null && !runsOnDay(res, planner.selectedDayId, planner.days)) {
+      planner.handleSelectDay(bookingDayId, false)
+      planner.setExpandedDayIds(new Set([bookingDayId]))
+    }
   }
 
   const editTransport = () => {

client/src/utils/reservationRoutes.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { hopIsVisible, isRoutableReservation, labelFloorPx, lineFloorPx, visibleRouteReservations } from './reservationRoutes'
+import { hopIsVisible, isRoutableReservation, labelFloorPx, lineFloorPx, runsOnDay, visibleRouteReservations } from './reservationRoutes'
 import type { Day, Reservation, ReservationEndpoint } from '../types'
 
 function endpoint(role: 'from' | 'to', lat: number, lng: number): ReservationEndpoint {
@@ -117,6 +117,92 @@ describe('visibleRouteReservations with a selected day', () => {
   })
 })
 
+// The phone's plan map shows one day, so it asks for the per-item toggle to follow the
+// selected day the way the transit toggle does. The span rule is the transit one.
+describe('visibleRouteReservations with the per-item toggle scoped to the day', () => {
+  const twoStop = [endpoint('from', 1, 2), endpoint('to', 3, 4)]
+  const days = [
+    { id: 10, trip_id: 1, day_number: 1 },
+    { id: 11, trip_id: 1, day_number: 2 },
+    { id: 20, trip_id: 1, day_number: 3 },
+  ] as Day[]
+
+  function booking(overrides: Partial<Reservation>): Reservation {
+    return reservation({ id: 5, type: 'flight', endpoints: twoStop, ...overrides })
+  }
+
+  const drawn = (r: Reservation, selectedDayId: number | null | undefined, onDays: Day[] = days) =>
+    visibleRouteReservations([r], {
+      visibleConnectionIds: [r.id], showTransitRoutes: false, selectedDayId, days: onDays, scopeConnectionsToDay: true,
+    })
+
+  it('leaves out a booking switched on for another day', () => {
+    expect(drawn(booking({ day_id: 20, end_day_id: 20 }), 10)).toEqual([])
+  })
+
+  it('draws a booking on the day it runs on', () => {
+    const r = booking({ day_id: 10, end_day_id: 10 })
+    expect(drawn(r, 10)).toEqual([r])
+  })
+
+  it('keeps an overnight booking on both of its days and off the rest', () => {
+    const r = booking({ day_id: 10, end_day_id: 11 })
+    expect(drawn(r, 10)).toEqual([r])
+    expect(drawn(r, 11)).toEqual([r])
+    expect(drawn(r, 20)).toEqual([])
+  })
+
+  it('keeps a multi-day booking on the days in between', () => {
+    const r = booking({ day_id: 10, end_day_id: 20 })
+    expect(drawn(r, 11)).toEqual([r])
+  })
+
+  it('goes by day order, not by day id', () => {
+    const reordered = [
+      { id: 20, trip_id: 1, day_number: 1 },
+      { id: 11, trip_id: 1, day_number: 2 },
+      { id: 10, trip_id: 1, day_number: 3 },
+    ] as Day[]
+    const r = booking({ day_id: 20, end_day_id: 11 })
+    expect(drawn(r, 11, reordered)).toEqual([r])
+    expect(drawn(r, 10, reordered)).toEqual([])
+  })
+
+  it('keeps a booking that is bound to no day', () => {
+    const r = booking({ day_id: null, end_day_id: null })
+    expect(drawn(r, 10)).toEqual([r])
+  })
+
+  it('keeps every switched-on booking while no day is selected', () => {
+    const r = booking({ day_id: 20, end_day_id: 20 })
+    expect(drawn(r, undefined)).toEqual([r])
+    expect(drawn(r, null)).toEqual([r])
+  })
+
+  it('still draws nothing that was not switched on', () => {
+    const r = booking({ day_id: 10, end_day_id: 10 })
+    expect(visibleRouteReservations([r], {
+      visibleConnectionIds: [], showTransitRoutes: false, selectedDayId: 10, days, scopeConnectionsToDay: true,
+    })).toEqual([])
+  })
+})
+
+describe('runsOnDay', () => {
+  const days = [
+    { id: 10, trip_id: 1, day_number: 1 },
+    { id: 11, trip_id: 1, day_number: 2 },
+  ] as Day[]
+
+  it('reads a booking with only an arrival day as running on that day', () => {
+    expect(runsOnDay({ day_id: null, end_day_id: 11 }, 11, days)).toBe(true)
+    expect(runsOnDay({ day_id: null, end_day_id: 11 }, 10, days)).toBe(false)
+  })
+
+  it('does not rule a booking out for a selected day it cannot find', () => {
+    expect(runsOnDay({ day_id: 10, end_day_id: 10 }, 99, days)).toBe(true)
+  })
+})
+
 describe('hopIsVisible (#2275)', () => {
   // A flat projection: one unit of lat or lng is one pixel.
   const px = (p: readonly [number, number]) => ({ x: p[1], y: p[0] })

client/src/utils/reservationRoutes.ts

@@ -22,10 +22,17 @@ export interface RouteVisibilityOptions {
   selectedDayId?: number | null
   /** The trip's days, needed to order them — day ids are not monotonic once days have been reordered. */
   days?: Day[]
+  /**
+   * Hold the per-item toggle to the selected day as well. Off unless asked for: the desktop
+   * keeps a booking it was told to draw on every day, since switching it on is a deliberate
+   * act (#2019). The phone's plan map shows one day at a time, and a flight from another
+   * day drawn across it reads as part of that day.
+   */
+  scopeConnectionsToDay?: boolean
 }
 
 /**
- * Does this transit journey actually run on the selected day? `showTransitRoutes` is one
+ * Does this journey actually run on the selected day? `showTransitRoutes` is one
  * day's toggle but the reservation list is trip-wide, so without this every automated
  * transport in the trip drew its geometry as soon as any day's route was switched on (#2019).
  *
@@ -34,7 +41,11 @@ export interface RouteVisibilityOptions {
  * A journey bound to no day keeps drawing; hiding something that legitimately belongs
  * to today is the worse failure.
  */
-function transitRunsOnDay(r: Reservation, selectedDayId: number | null | undefined, days: Day[]): boolean {
+export function runsOnDay(
+  r: Pick<Reservation, 'day_id' | 'end_day_id'>,
+  selectedDayId: number | null | undefined,
+  days: Day[],
+): boolean {
   if (selectedDayId == null) return true
   const startDayId = r.day_id ?? r.end_day_id
   if (startDayId == null) return true
@@ -45,11 +56,11 @@ function transitRunsOnDay(r: Reservation, selectedDayId: number | null | undefin
 
 /** Which reservations should draw a route on the map, combining the two independent toggles above. */
 export function visibleRouteReservations(reservations: Reservation[], options: RouteVisibilityOptions): Reservation[] {
-  const { visibleConnectionIds, showTransitRoutes, selectedDayId, days } = options
+  const { visibleConnectionIds, showTransitRoutes, selectedDayId, days, scopeConnectionsToDay } = options
   const set = new Set(visibleConnectionIds || [])
   return reservations.filter(r =>
-    (r.type === 'transit' && showTransitRoutes && transitRunsOnDay(r, selectedDayId, days || [])) ||
-    set.has(r.id)
+    (r.type === 'transit' && showTransitRoutes && runsOnDay(r, selectedDayId, days || [])) ||
+    (set.has(r.id) && (!scopeConnectionsToDay || runsOnDay(r, selectedDayId, days || [])))
   )
 }