How (travel)
The How page is where the group plans travel there and back. These are its
real pieces, from src/web/components/how/, with sample travel for the trip.
Way and mode
Section titled “Way and mode”- Way there / Way back switches the whole page between the journey out and the journey home. Same sliding coral pill as the Dashboard switch.
- Plane, Train, Taxi picks what kind of travel you’re adding.
Flight
Section titled “Flight”While adding
Section titled “While adding”While you add a flight, this dark green box fills in from the flight number: the two airports with their cities, the date and local time at each end, and the flight time. The times are shown in each airport’s own time zone.
A saved flight is a card with:
- a leg header: the flight’s title pill, and a pencil to edit it
- a map card: the same route details over a drawn world map, with a dashed arc between the airports. It’s drawn by the app from real coastline data, so it needs no maps service
- a details box: the price per person as a chip first, then the booking reference, airline and flight number, terminal and bags
Train and taxi
Section titled “Train and taxi”Trains and taxis get the same kind of map card. Trains show real London geography with a straight dashed line; taxis show the coastline at country scale.
- When there are several route options, each is labelled Option 1, 2, 3 in the option colours, and the fastest gets a green Quickest chip.
- When a train or taxi is matched to the flight, a blue chip says how early it arrives: “Arrive 2h 35m before flight”.
- Train search uses TfL, so it only covers London for now. The add form says so.
The full cards
Section titled “The full cards”How the How page lists each leg, top to bottom:
- Flight: the map card and the details box, with a pencil to edit.
- Train: the meeting point, the map card, then the line it runs on as a coloured chip. A train that needs tickets carries a ticket mark on its pill, and appears on Docs & Tix.
- Taxi: the map card, the price per person and the roads it takes.
Train search results
Section titled “Train search results”Train searches show each line as a coloured chip, chained with a chevron: Bakerloo (brown), the Elizabeth line (purple), Piccadilly (navy), and Walk (grey-teal) for a change on foot. The colours are TfL’s own, close but not checked pixel for pixel. Train search only covers London for now.
Adding travel
Section titled “Adding travel”The How card at the bottom of each direction: tap + to add a flight, train or taxi. While it’s open it lists the legs already added, with remove.
Leg header and meeting point
Section titled “Leg header and meeting point”Every leg (flight, train, taxi) opens with the same row: a title pill on the left and a round edit button on the right, the same pairing as every other card. A meeting point, when set, sits underneath: where, and at what time.
How’s own fields
Section titled “How’s own fields”- Date and time: one field with two halves. The date opens the calendar, the time opens the time wheel, not the phone’s own picker.
- Meeting point: a toggle, then Where and When. It sits just above the Search or Save button when adding or editing a train or taxi.
Source
Section titled “Source”src/web/components/how/FlightParts.tsx: way and mode switches, flight cards, leg headersrc/web/components/how/GroundParts.tsx: train and taxi cardssrc/web/components/how/Fields.tsx: date and time, meeting point, station searchsrc/web/components/how/Cards.tsx,Editors.tsx: the full cards and the add and edit flowssrc/web/components/how/shared.tsx: types and helpers