Get started

UI guide

A tour of every main screen, what each element means, and the "sticker" design system that ties them together. Screenshots come from the simulator build with demo data (make sim).

Navigation

Five tabs sit in a floating sticker tab bar at the bottom. The selected tab grows into a labelled orange pill; the others are icons only. Settings is not a tab: it's the gear in the top-left of Today.

Today

1. HeaderThe gear opens Settings. The date title shows which day you're looking at; arrows step one day, the calendar jumps to any date.
2. Mascot bubbleA one-line summary of the day ("5 trips and 4.1 mi…"). Pure flavour, generated from the day's numbers.
3. Review bannerThe dark banner counts trips from the last 7 days that need a quick check. Tap it to go through them one by one.
4. Day mapVisits as pins, trips as routes coloured by mode. Dotted segments are walking.
5. Stat tilesTrips, distance, time travelling and places for the day. Units follow Settings › Display.
6. "Your day, step by step"The diary, below the tiles. See next section.

The diary and review cards

1. VisitsSolid white cards with a pin on the left rail: place name, arrival–departure and how long you stayed. A here now badge marks a stay that's still going.
2. TripsRows between visits with a mode chip, time span, duration and distance. A trip made of several modes shows one chip per segment.
3. Review cardUncertain trips get a dashed card, a check badge and "Did I get that right?". Tap the right mode, or the green ✓ to confirm it as is.
4. Tap anythingAny visit or trip opens its detail sheet for full editing.

Trip detail

1. Route mapStart and end pins with the route coloured by segment.
2. SummaryOrigin and destination places, date, times, duration and distance.
3. Mode gridYour most-used modes as big buttons; the current one is highlighted. All modes… lists the full set.
4. Segments, purpose, notesFurther down: change each segment's mode, set the trip purpose, split the trip ("I stopped somewhere"), delete it ("This trip didn't happen") or reset to automatic.

Visits have a matching sheet: change the place, set times, split it ("I left and came back") or remove it ("This wasn't a stop"). See Correcting the diary for what each action does to the data.

Timeline

1. Week cardTrips per day as bars, with arrows to move between weeks and the busiest day underneath. Dashed bars are days with no data.
2. Find trips…Search and filter trips by mode, place, date range or weekends only.
3. Flights & Life phasesYour flight log, and named periods (semesters, jobs, trips) used for comparisons in Stats.
4. Month listOne card per day with its modes and trip count. A yellow "1 to check" badge means that day still has trips to review.

Map

1. RangeThe calendar button (top-left) picks the period.
2. LayersThe stack button (top-right) toggles places, routes, flights and the activity-space hull.
3. Activity spaceThe shaded polygon is the convex hull of every place you visited in the period.
4. Summary cardRadius of gyration, hull area, number of places and trips. Definitions are on Data model & export.

Stats

1. Period pills7 days, 30 days, year, all time. Compare… puts two periods (or two life phases) side by side.
2. Headline tilesTrips per day, distance per day, travel time per day and mean trip length, all per person-day.
3. How you got aroundMode share bars, switchable between by trips, by distance and by time.
4. Further downDeparture times, places, tours, weekday vs weekend, and "How these are calculated".

Places

1. Search and sortSort by most time, visits, recent, A–Z, or show named places only.
2. Waiting for a nameUnnamed places appear as dashed cards with a Name it button. Naming a place once makes every future visit to it recognised.
3. Place cardsVisit count, total time and last visit. Tap a place to edit its name, category, radius and favourite flag, see its visit history, or merge it into another place.

Home Screen widgets

Long-press the Home Screen, tap Edit › Add Widget and search for TripLibre. The widgets only show what the app has already worked out: they update when iOS lets TripLibre run, which is why each one says when it was last updated. Tapping a widget opens the matching screen.

Tracking states

After midnight the Today widgets start a fresh day and fill in as TripLibre records. Place names you've given are hidden on a locked phone; places you haven't named never show an address. In dark mode the cream background turns deep purple, and the coloured stickers stay the same.

Design system

The look is defined in one file, App/Support/Theme.swift, as the Toon namespace. The rules:

• Ink outlines: every surface has a 2.5 pt outline in ink #22193A.
• Solid offset shadows: a hard 4 pt ink shadow down-right instead of blur. Buttons "press in" by sliding onto their shadow.
• Flat bright fills on a warm, dotted cream background.
• Rounded, heavy type: SF Rounded for titles and numbers.
• Dashed = needs you: dashed outlines mark things waiting for input (trips to review, unnamed places).

Components

Palette

Colour meanings

Colours are consistent everywhere: a mode or place category has the same colour on the map, in the diary and in Stats.

Mode colours are defined in App/Support/Formatting.swift (TravelMode.color); group colours (ModeGroup.color) and place colours (PlaceCategory.toonColor) live in Theme.swift, which the widget extension shares, so the widgets use the same colours.