// screens-references-v2.jsx — Mobiliteit Android
// Refined / polished duplicates of section 05 (Public transport route detail).
// Same Wasserbillig → Bd. F. Roosevelt journey (buses 303 / 305 / 18), rebuilt
// against the app's first-party patterns: the .tl timeline, arrival-forward
// header, status pills, live rail and JourneyFooter — so these read like the
// rest of the product instead of a Google-Maps transplant.
// Reuses window globals: Icon, Device, MapView, JourneyFooter, DirectionsCard,
// MapFabsTop, MapFabCompass, StreetViewThumb, React.
// ── Crowd bars (quiet · some · busy) ─────────────────────────
function CrowdV2({ level = 1, label }) {
const tone = level >= 2 ? "var(--st-warning-fg)" : level === 1 ? "var(--mode-bus)" : "var(--st-success-fg)";
return (
{[6, 9, 12].map((h, i) =>
)}
{label && {label}}
);
}
// ── Sheet header — arrival-forward, mirrors DetailScreen2 ─────
function JourneyHeaderV2({ live }) {
return (
1 hr 11
14:14 → 15:25
Today · 2 changes · buses 303 / 305 / 18
On time
Step free
6 min walk
Not too crowded
{live &&
{live.label}
{live.text}
{live.eta}
}
);
}
// ── A transit leg card inside a timeline row ─────────────────
function LegCard({ code, dir, stops, mins, crowd }) {
return (
{code}
{dir}
{stops} stops
{mins} min
);
}
// ── Full journey timeline (.tl) ──────────────────────────────
function JourneyTimelineV2({ upTo = 9 }) {
return (
{/* 0 — Origin */}
14:14
2 Rue des Marais
Wasserbillig · starting point
Walk 4 min · 280 m
{/* 1 — Bus 303 board */}
{/* 2 — Transfer at Luxexpo */}
14:47
Kirchberg, Gare LuxexpoQuai 1A
Transfer · walk 1 min, wait 8 min
{/* 3 — Bus 305 board */}
14:56
Kirchberg, Hugo Gernsback
{/* 4 — Transfer */}
15:01
Antoine de St Exupéry
Transfer · wait 9 min
{/* 5 — Bus 18 board */}
{/* 6 — Alight + final walk */}
15:25
F. D. Roosevelt, Quai 2
Walk 1 min · 60 m
{/* 7 — Destination */}
15:25
6 Boulevard Franklin Roosevelt
1143 Ville-Haute Luxembourg · destination
{legs.map((m, i) =>
{i > 0 && }
{m.code}
)}
);
}
// ── Radar dot — pulsing live-departure signal ────────────────
function RadarDot({ tone = "var(--st-success-fg)", style }) {
return (
);
}
// ── Flat route row — separated by hairlines (no card) ────────
function FlatRouteRow({ hr, min, range, legs, place, depart, platform, crowd = { level: 1, label: "Not too crowded" }, stepFree = true, tone = "ok" }) {
return (
{range}
{/* Accessibility + crowd info */}
{stepFree &&
Step free
}
{/* Schedule + platform */}
Scheduled at {depart} from {place}
{platform && Plat. {platform}}
);
}
function RouteCardV2({ recommended, range, dur, legs, foot, also, tone = "ok" }) {
return (
{tone === "busy" ?
Busy :
On time}
{range}
{dur}
{foot}
{also &&
Also scheduled at {also}
}
);
}
// Soft chip row above the results
function ResultsChips() {
const chip = (children, sel) =>
;
return (
{chip(<>Best route, true)}
{chip(<>Leave 14:05)}
{chip(<>Modes)}
{chip(<>Step free)}
);
}
// ═════════════════════════════════════════════════════════════
// Screen 01 — Route options (refined results list)
// Inner content is shared as the dimmed backdrop behind the
// bottom-sheet modals (screens 02–04).
// ═════════════════════════════════════════════════════════════
function RouteOptionsContentV2() {
return (
);
}
// Dimmed screen-01 behind a modal sheet (screens 02–04)
function ModalBackdropV2() {
return (
<>
);
}
// ═════════════════════════════════════════════════════════════
// Screen 05 — Journey map · start (zoomed in, walking leg)
// ═════════════════════════════════════════════════════════════
function RefJourneyMapStartV2() {
return (
);
}
// ═════════════════════════════════════════════════════════════
// Screen 06 — Journey map · overview (zoomed out, whole route)
// ═════════════════════════════════════════════════════════════
function RefJourneyMapOverviewV2() {
return (
);
}
// ═════════════════════════════════════════════════════════════
// Screen 07 — Journey steps · boarding (303)
// ═════════════════════════════════════════════════════════════
function RefStepsBoardingV2() {
return ;
}
// ═════════════════════════════════════════════════════════════
// Screen 08 — Journey steps · transfer (305)
// ═════════════════════════════════════════════════════════════
function RefStepsTransferV2() {
return ;
}
// ═════════════════════════════════════════════════════════════
// Screen 09 — Journey steps · arrival (18 → destination)
// ═════════════════════════════════════════════════════════════
function RefStepsArrivalV2() {
return (
Report a problem with this public transport info
Departures updated 42 s ago
);
}
Object.assign(window, {
CrowdV2, JourneyHeaderV2, LegCard, JourneyTimelineV2, MapTopBar,
JourneyDetailSheet, JourneyPeekV2, LegChipsV2, RouteCardV2, FlatRouteRow, ResultsChips,
RouteOptionsContentV2, ModalBackdropV2,
RefJourneyMapStartV2, RefJourneyMapOverviewV2,
RefStepsBoardingV2, RefStepsTransferV2, RefStepsArrivalV2, RadarDot
});