7e48884eb9
- Map: min zoom = smallest integer zoom whose 256*2^z world covers the viewport (no grey bands, no duplicated continents). Horizontal wrap is restored (worldCopyJump, no longitude maxBounds) so Hawaii/Pacific are reachable by dragging; vertical panning stays clamped. - Flags: real SVGs for Catalonia, Basque Country, Galicia and England (no Unicode region flags exist; English is not the UK). Portuguese now has Brasil (pt) and Portugal (pt-PT). - pt-PT shares the pt dictionary with a European drift for the visible chrome (Guardar, Palavra-passe, Autocarro, Utilizador, ...). - check-i18n covers pt-PT: 24 codes at 100%; tsc/tests/build green.
1469 lines
62 KiB
TypeScript
1469 lines
62 KiB
TypeScript
import { dateLocaleCode } from '@/lib/dateFnsI18n';
|
||
import { useEffect, useRef, useState, useCallback, useMemo } from 'react';
|
||
import L from 'leaflet';
|
||
import { Loader2, MapPin, Navigation, AlertTriangle, LocateFixed, Play, Square, Crosshair, Volume2, VolumeX, Check, Search } from 'lucide-react';
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
DialogDescription,
|
||
} from '@/components/ui/dialog';
|
||
import { Button } from '@/components/ui/button';
|
||
import { DestinationSearch } from '@/components/DestinationSearch';
|
||
import { cn } from '@/lib/utils';
|
||
import {
|
||
getCurrentPosition,
|
||
watchPosition,
|
||
GeolocationError,
|
||
type GeoCoords,
|
||
type GeoWatch,
|
||
} from '@/lib/geolocation';
|
||
import { getLastLocation } from '@/lib/lastLocation';
|
||
import { saveRoute, loadRoute, formatAge } from '@/lib/routeCache';
|
||
import { createCachedTileLayer } from '@/lib/cachedTileLayer';
|
||
import { calculateDistance } from '@/lib/sortOptions';
|
||
import {
|
||
fetchRoute,
|
||
fetchTransitRoute,
|
||
formatClock,
|
||
formatDistance,
|
||
formatDuration,
|
||
TRAVEL_MODES,
|
||
TRANSIT_ATTRIBUTION,
|
||
ROUTE_ERR_BUSY,
|
||
ROUTE_ERR_NO_ROUTE,
|
||
skateTime,
|
||
type TravelMode,
|
||
type RouteResult,
|
||
type RouteStep,
|
||
type TransitPlanOptions,
|
||
} from '@/lib/routing';
|
||
import {
|
||
TRANSIT_MODE_GROUPS,
|
||
legDurationS,
|
||
transitLegColor,
|
||
transitModeEmoji,
|
||
transitPrimaryEmoji,
|
||
} from '@/lib/transitUi';
|
||
import { StopDepartures } from '@/components/StopDepartures';
|
||
import { useTranslation } from '@/contexts/language';
|
||
|
||
/** Travel-mode labels live in `lib/routing`; map them to translation keys at render. */
|
||
const MODE_LABEL_KEYS: Record<TravelMode, string> = {
|
||
foot: 'routeUi.mode.foot',
|
||
bike: 'routeUi.mode.bike',
|
||
moto: 'routeUi.mode.moto',
|
||
car: 'routeUi.mode.car',
|
||
transit: 'routeUi.mode.transit',
|
||
};
|
||
|
||
/** Transit mode-group labels live in `lib/transitUi`; translate at render. */
|
||
const TRANSIT_GROUP_LABEL_KEYS: Record<string, string> = {
|
||
bus: 'routeUi.group.bus',
|
||
tram: 'routeUi.group.tram',
|
||
metro: 'routeUi.group.metro',
|
||
train: 'routeUi.group.train',
|
||
ferry: 'routeUi.group.ferry',
|
||
};
|
||
|
||
/** Minimal translation-function shape. */
|
||
type Translate = (key: string, params?: Record<string, string | number>) => string;
|
||
|
||
/** Maneuver tokens live in `lib/routing`; map them to literal translation keys. */
|
||
const MANEUVER_LABEL_KEYS: Record<string, string> = {
|
||
headOut: 'routeUi.maneuver.headOut',
|
||
arrive: 'routeUi.maneuver.arrive',
|
||
continueStraight: 'routeUi.maneuver.continueStraight',
|
||
bearLeft: 'routeUi.maneuver.bearLeft',
|
||
bearRight: 'routeUi.maneuver.bearRight',
|
||
turnLeft: 'routeUi.maneuver.turnLeft',
|
||
turnRight: 'routeUi.maneuver.turnRight',
|
||
sharpLeft: 'routeUi.maneuver.sharpLeft',
|
||
sharpRight: 'routeUi.maneuver.sharpRight',
|
||
turn: 'routeUi.maneuver.turn',
|
||
keepLeft: 'routeUi.maneuver.keepLeft',
|
||
keepRight: 'routeUi.maneuver.keepRight',
|
||
takeFork: 'routeUi.maneuver.takeFork',
|
||
merge: 'routeUi.maneuver.merge',
|
||
roundabout: 'routeUi.maneuver.roundabout',
|
||
takeRamp: 'routeUi.maneuver.takeRamp',
|
||
takeExit: 'routeUi.maneuver.takeExit',
|
||
};
|
||
|
||
/**
|
||
* Translate a route step. New steps carry a maneuver token + optional road
|
||
* name (feed data, appended but never translated); legacy cached steps only
|
||
* have the English `instruction`.
|
||
*/
|
||
function stepInstruction(step: RouteStep, t: Translate): string {
|
||
if (!step.label) return step.instruction;
|
||
const key = MANEUVER_LABEL_KEYS[step.label];
|
||
if (!key) return step.instruction;
|
||
const base = t(key);
|
||
return step.road ? t('routeUi.maneuverOnto', { instruction: base, road: step.road }) : base;
|
||
}
|
||
|
||
/** A stop name that opens the departure board, when the feed gave a stop id. */
|
||
function StopButton({
|
||
id,
|
||
name,
|
||
onOpen,
|
||
}: {
|
||
id?: string;
|
||
name?: string;
|
||
onOpen: (id: string, name: string) => void;
|
||
}) {
|
||
if (!id || !name) return <>{name ?? ''}</>;
|
||
return (
|
||
<button
|
||
type="button"
|
||
onClick={() => onOpen(id, name)}
|
||
className="underline decoration-dotted underline-offset-2 transition-colors hover:text-foreground"
|
||
>
|
||
{name}
|
||
</button>
|
||
);
|
||
}
|
||
|
||
interface RouteDialogProps {
|
||
open: boolean;
|
||
onOpenChange: (open: boolean) => void;
|
||
/** Destination coordinates. */
|
||
destination: { lat: number; lng: number } | null;
|
||
/** Destination label shown in the header. */
|
||
destinationLabel?: string;
|
||
/** Called when the in-dialog search changes the destination, so the parent
|
||
* can keep its own target in sync (avoids a stale re-seed on reopen). */
|
||
onDestinationChange?: (pick: { lat: number; lng: number; label: string }) => void;
|
||
}
|
||
|
||
/**
|
||
* In-app routing dialog.
|
||
*
|
||
* Shows a self-contained Leaflet map with a route drawn from the user's current
|
||
* location to a destination, with a foot/bike/moto/car mode toggle. No external
|
||
* maps app is opened — the route comes from the keyless public OSRM server and
|
||
* is drawn here. See src/lib/routing.ts for the honest scope notes.
|
||
*/
|
||
/** The average speed the routing engine assumed for this mode, e.g. "21". */
|
||
function speedValue(distanceM: number, durationS: number): string | undefined {
|
||
if (!(distanceM > 0) || !(durationS > 0)) return undefined;
|
||
const kmh = distanceM / 1000 / (durationS / 3600);
|
||
if (!Number.isFinite(kmh) || kmh <= 0) return undefined;
|
||
return kmh < 10 ? kmh.toFixed(1) : String(Math.round(kmh));
|
||
}
|
||
|
||
/** Local clock time you'd arrive if you set off now. */
|
||
function etaClock(durationS: number): string {
|
||
return new Date(Date.now() + durationS * 1000).toLocaleTimeString(dateLocaleCode(), {
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
});
|
||
}
|
||
|
||
export function RouteDialog({
|
||
open,
|
||
onOpenChange,
|
||
destination,
|
||
destinationLabel,
|
||
onDestinationChange,
|
||
}: RouteDialogProps) {
|
||
const { t } = useTranslation();
|
||
// The destination is owned HERE so the in-dialog search can change it without
|
||
// the parent re-opening the dialog. Seeded from the prop whenever the dialog
|
||
// OPENS (or the parent's target actually changes) — not on every parent
|
||
// render, which would revert a search the user just made.
|
||
const [dest, setDest] = useState(destination);
|
||
const [destLabel, setDestLabel] = useState(destinationLabel ?? '');
|
||
const [searchOpen, setSearchOpen] = useState(false);
|
||
const lastPropKeyRef = useRef<string>('');
|
||
// The map's initial centre; read by the init effect without making it a dep
|
||
// (deps on the destination would tear down + rebuild the whole Leaflet map).
|
||
const destRef = useRef(destination);
|
||
destRef.current = destination;
|
||
|
||
useEffect(() => {
|
||
if (!open) {
|
||
lastPropKeyRef.current = '';
|
||
return;
|
||
}
|
||
const key = destination ? `${destination.lat},${destination.lng}` : '';
|
||
if (key === lastPropKeyRef.current) return;
|
||
lastPropKeyRef.current = key;
|
||
setDest(destination);
|
||
setDestLabel(destinationLabel ?? '');
|
||
}, [open, destination, destinationLabel]);
|
||
// The map container is inside Radix Dialog content, which mounts AFTER this
|
||
// component's first effect pass. A plain useRef is therefore still null when
|
||
// the init effect runs, and — because the effect's deps never changed again —
|
||
// the map was NEVER created (empty dialog, no route line). Holding the node in
|
||
// state makes the effect re-run the moment it actually mounts.
|
||
const [mapDiv, setMapDiv] = useState<HTMLDivElement | null>(null);
|
||
const mapRef = useRef<L.Map | null>(null);
|
||
const routeLayersRef = useRef<L.LayerGroup | null>(null);
|
||
const originMarkerRef = useRef<L.Marker | null>(null);
|
||
const destMarkerRef = useRef<L.Marker | null>(null);
|
||
|
||
const [origin, setOrigin] = useState<{ lat: number; lng: number } | null>(null);
|
||
// Remember the last mode used — a cyclist or driver shouldn't be reset to
|
||
// "Skate / Walk" every time they open Directions.
|
||
const [mode, setMode] = useState<TravelMode>(() => {
|
||
try {
|
||
const saved = localStorage.getItem('skatespots:route-mode') as TravelMode | null;
|
||
return saved && TRAVEL_MODES.some((m) => m.mode === saved) ? saved : 'foot';
|
||
} catch {
|
||
return 'foot';
|
||
}
|
||
});
|
||
const chooseMode = useCallback((next: TravelMode) => {
|
||
setMode(next);
|
||
try {
|
||
localStorage.setItem('skatespots:route-mode', next);
|
||
} catch {
|
||
// ignore (private mode / quota)
|
||
}
|
||
}, []);
|
||
/** Which step the user tapped (highlights + pans the map). */
|
||
const [activeStep, setActiveStep] = useState<number | null>(null);
|
||
|
||
// ── Start point: my location, or a point the user picks on the map ─────────
|
||
const [startMode, setStartMode] = useState<'me' | 'picked'>('me');
|
||
const [picked, setPicked] = useState<GeoCoords | null>(null);
|
||
const [pickingStart, setPickingStart] = useState(false);
|
||
|
||
// ── Follow mode (explicit; owns a GPS watcher) ─────────────────────────────
|
||
const [following, setFollowing] = useState(false);
|
||
const [live, setLive] = useState<GeoCoords | null>(null);
|
||
const [followError, setFollowError] = useState<string | null>(null);
|
||
const watchRef = useRef<GeoWatch | null>(null);
|
||
|
||
// ── Voice guidance, wake lock, arrival (phone navigation) ──────────────────
|
||
const [voiceOn, setVoiceOn] = useState(() => {
|
||
try {
|
||
return localStorage.getItem('skatespots:route-voice') !== 'off';
|
||
} catch {
|
||
return true;
|
||
}
|
||
});
|
||
const [arrived, setArrived] = useState(false);
|
||
/** stepIndex → set of announced distance bands (150 m / 40 m). */
|
||
const announcedRef = useRef<Map<number, Set<number>>>(new Map());
|
||
const arrivedRef = useRef(false);
|
||
const wakeLockRef = useRef<{ release: () => Promise<void> } | null>(null);
|
||
|
||
/** Route shown while offline came from the cache (with its age). */
|
||
const [cachedAge, setCachedAge] = useState<number | null>(null);
|
||
|
||
/** Where the route starts: a picked point wins, else the device location. */
|
||
const effectiveOrigin = useMemo<GeoCoords | null>(
|
||
() => (startMode === 'picked' && picked ? picked : origin),
|
||
[startMode, picked, origin],
|
||
);
|
||
|
||
/** Where to draw the "you are here" dot — live position while following. */
|
||
const markerPos = useMemo<GeoCoords | null>(
|
||
() => (following && live ? live : effectiveOrigin),
|
||
[following, live, effectiveOrigin],
|
||
);
|
||
|
||
// Keep the map-click handler current without rebuilding the map.
|
||
const pickingStartRef = useRef(false);
|
||
pickingStartRef.current = pickingStart;
|
||
const [route, setRoute] = useState<RouteResult | null>(null);
|
||
const [locating, setLocating] = useState(false);
|
||
const [routing, setRouting] = useState(false);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [locError, setLocError] = useState<string | null>(null);
|
||
|
||
// Which transit alternative is selected (index into route.transitOptions).
|
||
// Reset to 0 whenever a new transit route is fetched.
|
||
const [transitIndex, setTransitIndex] = useState(0);
|
||
const selectedTransit = useMemo(() => {
|
||
if (mode !== 'transit') return null;
|
||
const opts = route?.transitOptions;
|
||
if (opts && opts.length > 0) return opts[Math.min(transitIndex, opts.length - 1)] ?? null;
|
||
return route?.transit ?? null;
|
||
}, [mode, route, transitIndex]);
|
||
|
||
// All alternatives (falling back to a single option for older results).
|
||
const options = route?.transitOptions ?? (route?.transit ? [route.transit] : []);
|
||
|
||
// Transit plan controls: leave-now vs depart-at/arrive-by, and a mode filter.
|
||
const [transitTimeMode, setTransitTimeMode] = useState<'now' | 'depart' | 'arrive'>('now');
|
||
const [transitTimeValue, setTransitTimeValue] = useState('');
|
||
const [transitModeFilter, setTransitModeFilter] = useState<string[]>([]);
|
||
const [stopBoard, setStopBoard] = useState<{ id: string; name: string } | null>(null);
|
||
|
||
const selectedTransitModes = useMemo(
|
||
() =>
|
||
TRANSIT_MODE_GROUPS.filter((g) => transitModeFilter.includes(g.key)).flatMap((g) => [...g.modes]),
|
||
[transitModeFilter],
|
||
);
|
||
|
||
const toggleModeGroup = (key: string) =>
|
||
setTransitModeFilter((prev) => (prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]));
|
||
|
||
/** Re-fit the map to the whole route (after tapping a step pans it away). */
|
||
const fitRoute = useCallback(() => {
|
||
const map = mapRef.current;
|
||
if (!map) return;
|
||
const coords = selectedTransit
|
||
? selectedTransit.legs.flatMap((l) => l.coordinates)
|
||
: route?.coordinates;
|
||
if (!coords || coords.length < 2) return;
|
||
map.fitBounds(L.latLngBounds(coords), { padding: [48, 48], maxZoom: 16 });
|
||
}, [route, selectedTransit]);
|
||
|
||
// A new route (mode/origin change) invalidates the tapped-step focus and the
|
||
// once-only voice/haptic announcements.
|
||
useEffect(() => {
|
||
setActiveStep(null);
|
||
announcedRef.current.clear();
|
||
arrivedRef.current = false;
|
||
setArrived(false);
|
||
}, [route]);
|
||
|
||
// ── Voice guidance (device TTS — free, offline, no server, no permission) ───
|
||
const speak = useCallback(
|
||
(text: string) => {
|
||
if (!voiceOn) return;
|
||
if (typeof window === 'undefined' || !('speechSynthesis' in window)) return;
|
||
try {
|
||
const synth = window.speechSynthesis;
|
||
const utter = new SpeechSynthesisUtterance(text);
|
||
utter.rate = 1;
|
||
const lang = (navigator.language || 'en').slice(0, 2).toLowerCase();
|
||
const voices = synth.getVoices();
|
||
// Prefer an on-device voice in the user's language (offline, no network).
|
||
const voice =
|
||
voices.find((v) => v.localService && v.lang.toLowerCase().startsWith(lang)) ??
|
||
voices.find((v) => v.lang.toLowerCase().startsWith(lang));
|
||
if (voice) {
|
||
utter.voice = voice;
|
||
utter.lang = voice.lang;
|
||
} else {
|
||
utter.lang = lang;
|
||
}
|
||
synth.cancel(); // never let prompts queue up and lag behind you
|
||
synth.speak(utter);
|
||
} catch {
|
||
// No TTS — haptics still guide.
|
||
}
|
||
},
|
||
[voiceOn],
|
||
);
|
||
|
||
const toggleVoice = useCallback(() => {
|
||
setVoiceOn((on) => {
|
||
const next = !on;
|
||
try {
|
||
localStorage.setItem('skatespots:route-voice', next ? 'on' : 'off');
|
||
} catch {
|
||
// ignore
|
||
}
|
||
if (!next && typeof window !== 'undefined' && 'speechSynthesis' in window) {
|
||
window.speechSynthesis.cancel();
|
||
}
|
||
return next;
|
||
});
|
||
}, []);
|
||
|
||
/** Short haptic pulse (Android). Silent no-op where unsupported. */
|
||
const buzz = useCallback((pattern: number | number[]) => {
|
||
try {
|
||
if (typeof navigator.vibrate === 'function') navigator.vibrate(pattern);
|
||
} catch {
|
||
// ignore
|
||
}
|
||
}, []);
|
||
|
||
// ── Wake lock: keep the screen on while navigating ──────────────────────────
|
||
const acquireWakeLock = useCallback(async () => {
|
||
const navWithWakeLock = navigator as Navigator & {
|
||
wakeLock?: { request: (type: 'screen') => Promise<{ release: () => Promise<void> }> };
|
||
};
|
||
try {
|
||
const sentinel = await navWithWakeLock.wakeLock?.request('screen');
|
||
if (sentinel) wakeLockRef.current = sentinel;
|
||
} catch {
|
||
// Unsupported / denied — navigation still works, the screen may sleep.
|
||
}
|
||
}, []);
|
||
|
||
const releaseWakeLock = useCallback(() => {
|
||
try {
|
||
void wakeLockRef.current?.release();
|
||
} catch {
|
||
// ignore
|
||
}
|
||
wakeLockRef.current = null;
|
||
}, []);
|
||
|
||
// ── Follow mode ────────────────────────────────────────────────────────────
|
||
// Explicit only: the user taps Start, we watch their position, we keep the
|
||
// screen awake, and we stop the watcher the moment they stop or the dialog
|
||
// closes. Voice + haptics guide; voice is the point — you can't watch a
|
||
// screen while skating.
|
||
const stopFollowing = useCallback(() => {
|
||
watchRef.current?.stop();
|
||
watchRef.current = null;
|
||
setFollowing(false);
|
||
releaseWakeLock();
|
||
}, [releaseWakeLock]);
|
||
|
||
const startFollowing = useCallback(() => {
|
||
if (watchRef.current) return;
|
||
setFollowError(null);
|
||
setArrived(false);
|
||
arrivedRef.current = false;
|
||
announcedRef.current.clear();
|
||
setFollowing(true);
|
||
void acquireWakeLock();
|
||
// Spoken from the Start tap (a user gesture) — this also unlocks TTS.
|
||
speak(t('routeUi.voiceStart'));
|
||
watchRef.current = watchPosition(
|
||
(coords) => {
|
||
setLive(coords);
|
||
setFollowError(null);
|
||
},
|
||
(err) => {
|
||
// Only a real permission denial stops following. A timeout / temporary
|
||
// loss is normal (tunnels, indoors) and the watcher recovers by itself,
|
||
// so we keep running and just say we're waiting.
|
||
if (err.kind === 'denied') {
|
||
setFollowError(t('routeUi.errPermissionDenied'));
|
||
stopFollowing();
|
||
} else {
|
||
setFollowError(t('routeUi.errWaitingGps'));
|
||
}
|
||
},
|
||
);
|
||
}, [stopFollowing, acquireWakeLock, speak, t]);
|
||
|
||
// Never leave the GPS running: stop on close and on unmount.
|
||
useEffect(() => {
|
||
if (!open && watchRef.current) stopFollowing();
|
||
}, [open, stopFollowing]);
|
||
useEffect(
|
||
() => () => {
|
||
watchRef.current?.stop();
|
||
watchRef.current = null;
|
||
releaseWakeLock();
|
||
},
|
||
[releaseWakeLock],
|
||
);
|
||
|
||
// Browsers drop the wake lock whenever the page is hidden. Re-acquire it when
|
||
// the user comes back to a navigation that is still running.
|
||
useEffect(() => {
|
||
if (!following) return;
|
||
const onVisibility = () => {
|
||
if (document.visibilityState === 'visible') void acquireWakeLock();
|
||
};
|
||
document.addEventListener('visibilitychange', onVisibility);
|
||
return () => document.removeEventListener('visibilitychange', onVisibility);
|
||
}, [following, acquireWakeLock]);
|
||
|
||
// While following, keep the live dot centred — but only once you've actually
|
||
// moved, and with a gentle animation, so GPS jitter doesn't twitch the map.
|
||
const lastPanRef = useRef<{ lat: number; lng: number } | null>(null);
|
||
useEffect(() => {
|
||
if (!following || !live) return;
|
||
const map = mapRef.current;
|
||
if (!map) return;
|
||
const last = lastPanRef.current;
|
||
if (last && calculateDistance(last.lat, last.lng, live.lat, live.lng) * 1000 < 6) return;
|
||
lastPanRef.current = { lat: live.lat, lng: live.lng };
|
||
map.panTo([live.lat, live.lng], { animate: true, duration: 0.6, easeLinearity: 0.5 });
|
||
}, [following, live]);
|
||
|
||
/** Live guidance: distance left, and which step you're on. */
|
||
const nav = useMemo(() => {
|
||
if (!live || !dest) return null;
|
||
const toDestKm = calculateDistance(live.lat, live.lng, dest.lat, dest.lng);
|
||
let bestI = -1;
|
||
let bestKm = Infinity;
|
||
(route?.steps ?? []).forEach((s, i) => {
|
||
if (!s.lat && !s.lng) return;
|
||
const km = calculateDistance(live.lat, live.lng, s.lat, s.lng);
|
||
if (km < bestKm) {
|
||
bestKm = km;
|
||
bestI = i;
|
||
}
|
||
});
|
||
return { toDestKm, stepIndex: bestI, stepKm: bestKm };
|
||
}, [live, dest, route]);
|
||
|
||
const currentStepIndex = following && nav && nav.stepIndex >= 0 ? nav.stepIndex : activeStep;
|
||
|
||
// ── Voice + haptics + arrival while following ───────────────────────────────
|
||
useEffect(() => {
|
||
if (!following || !nav || !route) return;
|
||
|
||
// Arrival: within ~30 m of the destination.
|
||
if (nav.toDestKm < 0.03) {
|
||
if (!arrivedRef.current) {
|
||
arrivedRef.current = true;
|
||
speak(t('routeUi.voiceArrived'));
|
||
buzz([120, 80, 120]);
|
||
setArrived(true);
|
||
stopFollowing();
|
||
}
|
||
return;
|
||
}
|
||
|
||
const idx = nav.stepIndex;
|
||
const km = nav.stepKm;
|
||
if (idx < 0 || !Number.isFinite(km)) return;
|
||
|
||
const steps = route.steps ?? [];
|
||
const bands = announcedRef.current.get(idx) ?? new Set<number>();
|
||
|
||
if (km <= 0.15 && km > 0.04 && !bands.has(150)) {
|
||
// ~150 m out — a heads-up so you know what's coming.
|
||
bands.add(150);
|
||
announcedRef.current.set(idx, bands);
|
||
const metres = Math.max(50, Math.round((km * 1000) / 10) * 10);
|
||
speak(t('routeUi.voiceIn', {
|
||
metres,
|
||
instruction: steps[idx] ? stepInstruction(steps[idx], t) : t('routeUi.voiceContinue'),
|
||
}));
|
||
buzz(60);
|
||
} else if (km <= 0.04 && !bands.has(40)) {
|
||
// ~40 m out — the turn itself.
|
||
bands.add(40);
|
||
announcedRef.current.set(idx, bands);
|
||
speak(steps[idx] ? stepInstruction(steps[idx], t) : t('routeUi.voiceContinueCaps'));
|
||
buzz(140);
|
||
}
|
||
}, [following, nav, route, speak, buzz, stopFollowing, t]);
|
||
|
||
// ─── Get the user's location when the dialog opens ─────────────────────────
|
||
const locate = useCallback(async () => {
|
||
setLocating(true);
|
||
setLocError(null);
|
||
try {
|
||
const pos = await getCurrentPosition();
|
||
setOrigin(pos);
|
||
} catch (err) {
|
||
const msg =
|
||
err instanceof GeolocationError
|
||
? err.kind === 'denied'
|
||
? t('routeUi.errPermissionDeniedLong')
|
||
: t('routeUi.errNoLocation')
|
||
: t('routeUi.errNoLocationShort');
|
||
setLocError(msg);
|
||
} finally {
|
||
setLocating(false);
|
||
}
|
||
}, [t]);
|
||
|
||
useEffect(() => {
|
||
if (!open) return;
|
||
// Seed from the last known fix so a route can be drawn immediately, then
|
||
// refine with a live reading. This is what makes opening Directions feel
|
||
// instant instead of hanging on "Finding your location…".
|
||
const cached = getLastLocation();
|
||
const fresh = !!cached && Date.now() - cached.at < 2 * 60 * 1000;
|
||
if (!origin && cached) setOrigin({ lat: cached.lat, lng: cached.lng });
|
||
// Only ask for a live GPS fix when the cached one is missing or stale. A
|
||
// recent fix means the route can draw instantly with no "Finding your
|
||
// location…" wait (and no needless location request on every open).
|
||
if (!fresh) locate();
|
||
// Re-run only when the dialog opens (locate is stable).
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [open]);
|
||
|
||
// Reset transient state when closed
|
||
useEffect(() => {
|
||
if (!open) {
|
||
setRoute(null);
|
||
setError(null);
|
||
setPickingStart(false);
|
||
setCachedAge(null);
|
||
}
|
||
}, [open]);
|
||
|
||
// ─── Initialize the Leaflet map once the dialog content is mounted ─────────
|
||
useEffect(() => {
|
||
const initial = destRef.current;
|
||
if (!open || !mapDiv || mapRef.current || !initial) return;
|
||
|
||
const map = L.map(mapDiv, {
|
||
center: [initial.lat, initial.lng],
|
||
zoom: 14,
|
||
scrollWheelZoom: true,
|
||
attributionControl: false,
|
||
minZoom: 2,
|
||
});
|
||
|
||
createCachedTileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||
attribution: '',
|
||
subdomains: 'abc',
|
||
maxZoom: 19,
|
||
noWrap: true,
|
||
className: 'skatespots-dark-tiles',
|
||
}).addTo(map);
|
||
|
||
// Metric scale bar — genuinely useful on a route map (how long is that line?).
|
||
L.control.scale({ imperial: false, position: 'topleft' }).addTo(map);
|
||
|
||
// Destination marker
|
||
const destIcon = L.divIcon({
|
||
className: 'route-dest-icon',
|
||
html: `<div style="width:32px;height:32px;background:linear-gradient(135deg,#ff0040,#ff6600);border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 4px 12px rgba(255,0,64,0.5);border:3px solid rgba(255,255,255,0.9);"></div>`,
|
||
iconSize: [32, 32],
|
||
iconAnchor: [16, 30],
|
||
});
|
||
destMarkerRef.current = L.marker([initial.lat, initial.lng], {
|
||
icon: destIcon,
|
||
}).addTo(map);
|
||
|
||
mapRef.current = map;
|
||
|
||
// "Choose on map" — the next tap sets the start point.
|
||
const onMapClick = (e: L.LeafletMouseEvent) => {
|
||
if (!pickingStartRef.current) return;
|
||
setPicked({ lat: e.latlng.lat, lng: e.latlng.lng });
|
||
setStartMode('picked');
|
||
setPickingStart(false);
|
||
};
|
||
map.on('click', onMapClick);
|
||
|
||
// The dialog animates in (a brief scale), so the container is still
|
||
// settling at first paint. Nudge Leaflet's size once now and again after the
|
||
// animation ends — otherwise the map renders at the wrong size for a frame
|
||
// and visibly jumps (the "flash" people see when they tap Directions).
|
||
const t1 = setTimeout(() => map.invalidateSize(), 120);
|
||
const t2 = setTimeout(() => map.invalidateSize(), 340);
|
||
|
||
return () => {
|
||
clearTimeout(t1);
|
||
clearTimeout(t2);
|
||
map.off('click', onMapClick);
|
||
map.remove();
|
||
mapRef.current = null;
|
||
routeLayersRef.current = null;
|
||
originMarkerRef.current = null;
|
||
destMarkerRef.current = null;
|
||
};
|
||
}, [open, mapDiv]);
|
||
|
||
// Move the destination marker when the in-dialog search changes the target.
|
||
// The map itself is NOT rebuilt — the route effect below re-fits the view.
|
||
useEffect(() => {
|
||
if (dest && destMarkerRef.current) {
|
||
destMarkerRef.current.setLatLng([dest.lat, dest.lng]);
|
||
}
|
||
}, [dest]);
|
||
|
||
// ─── Draw / update the "from" marker (device location, picked point, live) ──
|
||
useEffect(() => {
|
||
const map = mapRef.current;
|
||
if (!map || !markerPos) return;
|
||
|
||
if (originMarkerRef.current) {
|
||
originMarkerRef.current.setLatLng([markerPos.lat, markerPos.lng]);
|
||
} else {
|
||
const userIcon = L.divIcon({
|
||
className: 'route-origin-icon',
|
||
html: `<div style="width:18px;height:18px;background:#00b3ff;border-radius:50%;box-shadow:0 0 0 6px rgba(0,179,255,0.25),0 2px 8px rgba(0,0,0,0.4);border:3px solid #fff;"></div>`,
|
||
iconSize: [18, 18],
|
||
iconAnchor: [9, 9],
|
||
});
|
||
originMarkerRef.current = L.marker([markerPos.lat, markerPos.lng], {
|
||
icon: userIcon,
|
||
}).addTo(map);
|
||
}
|
||
}, [markerPos]);
|
||
|
||
// ─── Fetch + draw the route whenever origin / mode changes ─────────────────
|
||
useEffect(() => {
|
||
if (!open || !effectiveOrigin || !dest) return;
|
||
|
||
const controller = new AbortController();
|
||
let cancelled = false;
|
||
|
||
(async () => {
|
||
setRouting(true);
|
||
setError(null);
|
||
try {
|
||
const planOpts: TransitPlanOptions = {};
|
||
if (mode === 'transit') {
|
||
if (transitTimeMode !== 'now' && transitTimeValue) {
|
||
const when = new Date(transitTimeValue);
|
||
if (!Number.isNaN(when.getTime())) {
|
||
planOpts.time = when.toISOString();
|
||
planOpts.arriveBy = transitTimeMode === 'arrive';
|
||
}
|
||
}
|
||
if (selectedTransitModes.length > 0) planOpts.transitModes = selectedTransitModes;
|
||
}
|
||
const result = mode === 'transit'
|
||
? await fetchTransitRoute(effectiveOrigin, dest, controller.signal, planOpts)
|
||
: await fetchRoute(effectiveOrigin, dest, mode, controller.signal);
|
||
if (cancelled) return;
|
||
setCachedAge(null);
|
||
setRoute(result);
|
||
setTransitIndex(0);
|
||
if (mode !== 'transit') saveRoute(effectiveOrigin, dest, mode, result);
|
||
|
||
const map = mapRef.current;
|
||
if (map) {
|
||
if (routeLayersRef.current) {
|
||
routeLayersRef.current.remove();
|
||
routeLayersRef.current = null;
|
||
}
|
||
// Transit legs are drawn by the effect just below, so switching
|
||
// between alternatives doesn't re-query the transit service.
|
||
if (!result.transit) {
|
||
const group = L.layerGroup().addTo(map);
|
||
L.polyline(result.coordinates, {
|
||
color: '#ccff00',
|
||
weight: 5,
|
||
opacity: 0.9,
|
||
lineJoin: 'round',
|
||
lineCap: 'round',
|
||
}).addTo(group);
|
||
routeLayersRef.current = group;
|
||
if (result.coordinates.length > 0) {
|
||
map.fitBounds(L.latLngBounds(result.coordinates), { padding: [48, 48], maxZoom: 16, animate: false });
|
||
}
|
||
}
|
||
}
|
||
} catch (err) {
|
||
if (cancelled) return;
|
||
if (err instanceof DOMException && err.name === 'AbortError') return;
|
||
const msg = err instanceof Error ? err.message : '';
|
||
if (mode === 'transit') {
|
||
setError(
|
||
msg === 'No transit route found'
|
||
? selectedTransitModes.length > 0 || transitTimeMode !== 'now'
|
||
? t('routeUi.errTransitNoRouteFiltered')
|
||
: t('routeUi.errTransitNoRoute')
|
||
: t('routeUi.errTransitUnreachable'),
|
||
);
|
||
} else if (msg === ROUTE_ERR_BUSY) {
|
||
setError(t('routeUi.errRoutingBusy'));
|
||
} else if (msg === ROUTE_ERR_NO_ROUTE) {
|
||
setError(t('routeUi.errNoRouteMode'));
|
||
} else {
|
||
setError(t('routeUi.errRoutingUnreachable'));
|
||
}
|
||
|
||
// Offline / server down: fall back to the last route we saved for this
|
||
// destination + mode, clearly labelled, instead of a dead dialog.
|
||
if (mode !== 'transit') {
|
||
const hit = loadRoute(effectiveOrigin, dest, mode);
|
||
if (hit) {
|
||
setRoute(hit.route);
|
||
setCachedAge(hit.ageMs);
|
||
setError(null);
|
||
const map = mapRef.current;
|
||
if (map && hit.route.coordinates.length > 1) {
|
||
if (routeLayersRef.current) routeLayersRef.current.remove();
|
||
const group = L.layerGroup().addTo(map);
|
||
L.polyline(hit.route.coordinates, {
|
||
color: '#ccff00',
|
||
weight: 5,
|
||
opacity: 0.7,
|
||
dashArray: '8 8',
|
||
lineJoin: 'round',
|
||
lineCap: 'round',
|
||
}).addTo(group);
|
||
routeLayersRef.current = group;
|
||
map.fitBounds(L.latLngBounds(hit.route.coordinates), { padding: [48, 48], maxZoom: 16, animate: false });
|
||
}
|
||
}
|
||
}
|
||
} finally {
|
||
if (!cancelled) setRouting(false);
|
||
}
|
||
})();
|
||
|
||
return () => {
|
||
cancelled = true;
|
||
controller.abort();
|
||
};
|
||
}, [open, effectiveOrigin, dest, mode, transitTimeMode, transitTimeValue, selectedTransitModes, t]);
|
||
|
||
// ─── Draw the selected transit itinerary (redraws when an alternative is
|
||
// chosen — no re-query). Walking legs dashed grey, vehicles solid. ──────
|
||
useEffect(() => {
|
||
const map = mapRef.current;
|
||
if (!map || !selectedTransit) return;
|
||
if (routeLayersRef.current) {
|
||
routeLayersRef.current.remove();
|
||
routeLayersRef.current = null;
|
||
}
|
||
const group = L.layerGroup().addTo(map);
|
||
for (const leg of selectedTransit.legs) {
|
||
if (leg.coordinates.length < 2) continue;
|
||
const isWalk = leg.mode === 'WALK';
|
||
L.polyline(leg.coordinates, {
|
||
color: isWalk ? '#9ca3af' : transitLegColor(leg.mode),
|
||
weight: isWalk ? 3 : 5,
|
||
opacity: isWalk ? 0.7 : 0.9,
|
||
dashArray: isWalk ? '4 6' : undefined,
|
||
lineJoin: 'round',
|
||
lineCap: 'round',
|
||
}).addTo(group);
|
||
}
|
||
routeLayersRef.current = group;
|
||
const coords = selectedTransit.legs.flatMap((l) => l.coordinates);
|
||
if (coords.length > 0) {
|
||
map.fitBounds(L.latLngBounds(coords), { padding: [48, 48], maxZoom: 16, animate: false });
|
||
}
|
||
}, [selectedTransit]);
|
||
|
||
const destLabelText = destLabel || t('routeUi.destination');
|
||
const speed = route ? speedValue(route.distanceM, route.durationS) : undefined;
|
||
|
||
return (
|
||
<>
|
||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||
{/* App-like shell. VISUAL ORDER is set with flex `order` utilities, not DOM
|
||
order: the map sits directly under the header (bigger — it's the point
|
||
of the screen), the mode/vehicle row moves BELOW it, and the details
|
||
scroll with the Start/Stop bar pinned at the bottom. */}
|
||
<DialogContent className="flex max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-lg flex-col gap-0 overflow-hidden p-0 sm:max-w-xl">
|
||
<DialogHeader className="order-1 shrink-0 pl-4 pr-12 pt-4 pb-3">
|
||
<DialogTitle className="sr-only">{t('routeUi.routeTo', { label: destLabelText })}</DialogTitle>
|
||
<button
|
||
type="button"
|
||
onClick={() => setSearchOpen(true)}
|
||
className="flex w-full items-center gap-3 rounded-xl border border-white/10 bg-white/[0.04] px-3 py-2 text-left transition-colors hover:border-[#ccff00]/40"
|
||
>
|
||
<Navigation className="h-5 w-5 shrink-0 text-[#ccff00]" />
|
||
<span className="min-w-0 flex-1">
|
||
<span className="block text-[10px] font-bold uppercase tracking-widest text-gray-500">
|
||
{t('routeUi.routeToLabel')}
|
||
</span>
|
||
<span className="block truncate text-base font-bold text-white">{destLabelText}</span>
|
||
</span>
|
||
<span className="flex shrink-0 items-center gap-1.5 rounded-full border border-white/10 px-2.5 py-1 text-[10px] font-bold uppercase tracking-wider text-gray-300">
|
||
<Search className="h-3 w-3" /> {t('routeUi.search')}
|
||
</span>
|
||
</button>
|
||
{/* Copy kept out of the visible chrome so the route screen stays
|
||
clean; the same promise now lives on /privacy → "What leaves your
|
||
device" → Directions. sr-only keeps the dialog accessible. */}
|
||
<DialogDescription className="sr-only">
|
||
{t('routeUi.description')}
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
|
||
{/* Map. The height lives on the WRAPPER: the global
|
||
`.leaflet-container { height: 100% }` override beats a `h-64` on the
|
||
map element itself, and against a height-less parent that resolved to
|
||
0 — a fully invisible map with no route line. */}
|
||
<div className={cn('order-2 relative shrink-0 bg-[#0b0b0c]', following ? 'h-[54vh] min-h-[320px] sm:h-[60vh]' : 'h-[34vh] min-h-[220px] sm:h-[400px]')}>
|
||
<div
|
||
ref={setMapDiv}
|
||
className="h-full w-full bg-[#0b0b0c]"
|
||
aria-label={t('routeUi.routeMapAria')}
|
||
/>
|
||
|
||
{/* Destination search — overlays the map while open. Mounted only
|
||
then, so opening Directions never pays for these queries. */}
|
||
{searchOpen && (
|
||
<div className="absolute inset-0 z-[1500] bg-background/95 backdrop-blur-md">
|
||
<DestinationSearch
|
||
near={dest ?? effectiveOrigin}
|
||
onSelect={(pick) => {
|
||
setDest({ lat: pick.lat, lng: pick.lng });
|
||
setDestLabel(pick.label);
|
||
onDestinationChange?.(pick);
|
||
setSearchOpen(false);
|
||
}}
|
||
onClose={() => setSearchOpen(false)}
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{/* Overlays */}
|
||
{/* Blocking overlay only when we have nothing to show yet. With a
|
||
cached origin we keep the map visible and refine quietly. */}
|
||
{((locating && !origin) || (routing && !route)) && (
|
||
<div className="absolute inset-0 flex items-center justify-center bg-background/60 backdrop-blur-sm">
|
||
<div className="flex items-center gap-2 text-sm font-medium">
|
||
<Loader2 className="h-4 w-4 animate-spin text-[#ccff00]" />
|
||
{locating && !origin ? t('routeUi.findingLocation') : t('routeUi.plottingRoute')}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Bottom-left stack: offline badge + "refining location" chip. Kept
|
||
out of the top-left so it never covers Leaflet's zoom control. */}
|
||
{(cachedAge !== null || (locating && origin)) && (
|
||
<div className="pointer-events-none absolute bottom-2 left-2 flex flex-col items-start gap-1">
|
||
{cachedAge !== null && (
|
||
<div className="rounded-full border border-amber-500/40 bg-amber-500/15 px-2 py-1 text-[10px] font-bold uppercase tracking-wide text-amber-300 backdrop-blur-sm">
|
||
{t('routeUi.offlineSavedRoute', { age: formatAge(cachedAge, t) })}
|
||
</div>
|
||
)}
|
||
{locating && origin && (
|
||
<div className="flex items-center gap-1.5 rounded-full bg-background/80 px-2 py-1 text-[10px] font-medium text-muted-foreground backdrop-blur-sm">
|
||
<Loader2 className="h-3 w-3 animate-spin" />
|
||
{t('routeUi.refiningLocation')}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* "Choose on map" hint */}
|
||
{pickingStart && (
|
||
<div className="pointer-events-none absolute inset-x-2 top-2 rounded-xl bg-black/80 px-3 py-2 text-center text-[11px] font-bold text-[#ccff00] backdrop-blur-sm">
|
||
{t('routeUi.tapMapStart')}
|
||
</div>
|
||
)}
|
||
|
||
{/* Follow mode: next turn + distance left */}
|
||
{following && nav && (
|
||
<div className="pointer-events-none absolute inset-x-2 top-2 rounded-xl bg-black/85 px-3 py-2 backdrop-blur-sm">
|
||
<p className="text-[11px] font-black uppercase tracking-widest text-[#ccff00]">
|
||
{nav.stepIndex >= 0 ? t('routeUi.nextStep', { n: nav.stepIndex + 1 }) : t('routeUi.next')}
|
||
</p>
|
||
<p className="truncate text-base font-black text-white">
|
||
{nav.stepIndex >= 0
|
||
? route?.steps?.[nav.stepIndex] ? stepInstruction(route.steps[nav.stepIndex], t) : t('routeUi.followTheLine')
|
||
: route?.steps?.[0] ? stepInstruction(route.steps[0], t) : t('routeUi.followTheLine')}
|
||
</p>
|
||
<p className="text-xs text-gray-400">
|
||
{nav.stepIndex >= 0 && Number.isFinite(nav.stepKm)
|
||
? `${formatDistance(nav.stepKm)} ${t('routeUi.toTheTurn')} · `
|
||
: ''}
|
||
{formatDistance(nav.toDestKm)} {t('routeUi.toGo')}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{followError && (
|
||
<div className="pointer-events-none absolute inset-x-2 top-2 rounded-xl bg-black/85 px-3 py-2 text-center text-[11px] font-bold text-amber-300 backdrop-blur-sm">
|
||
{followError}
|
||
</div>
|
||
)}
|
||
|
||
{locError && !origin && (
|
||
<div className="absolute inset-0 flex items-center justify-center bg-background/80 p-6">
|
||
<div className="text-center space-y-3 max-w-xs">
|
||
<MapPin className="h-8 w-8 mx-auto text-muted-foreground" />
|
||
<p className="text-sm text-muted-foreground">{locError}</p>
|
||
<Button size="sm" variant="outline" onClick={locate} className="gap-2">
|
||
<LocateFixed className="h-4 w-4" />
|
||
{t('routeUi.tryAgain')}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Re-fit the whole route — handy after tapping a step pans the map. */}
|
||
{route && route.coordinates.length > 1 && (
|
||
<button
|
||
type="button"
|
||
onClick={fitRoute}
|
||
className="absolute bottom-2 right-2 flex items-center gap-1 rounded-lg border border-white/10 bg-background/85 px-2 py-1.5 text-[10px] font-bold uppercase tracking-wide text-muted-foreground shadow backdrop-blur-sm transition-colors hover:text-foreground"
|
||
aria-label={t('routeUi.fitRouteAria')}
|
||
>
|
||
<LocateFixed className="h-3.5 w-3.5" />
|
||
{t('routeUi.wholeRoute')}
|
||
</button>
|
||
)}
|
||
</div>
|
||
|
||
{/* Mode toggle (vehicles) — sits BELOW the map (order-3). */}
|
||
<div className="order-3 flex shrink-0 gap-1.5 px-4 pb-3">
|
||
{TRAVEL_MODES.map((m) => (
|
||
<button
|
||
key={m.mode}
|
||
type="button"
|
||
onClick={() => chooseMode(m.mode)}
|
||
className={cn(
|
||
'flex-1 flex flex-col items-center gap-0.5 rounded-xl py-2 text-xs font-bold uppercase tracking-wide transition-all border-2',
|
||
mode === m.mode
|
||
? 'bg-[#ccff00]/15 border-[#ccff00] text-[#ccff00]'
|
||
: 'border-transparent bg-muted/50 text-muted-foreground hover:bg-muted',
|
||
)}
|
||
aria-pressed={mode === m.mode}
|
||
>
|
||
<span className="text-lg leading-none">{m.emoji}</span>
|
||
<span className="text-[10px] leading-tight text-center">{t(MODE_LABEL_KEYS[m.mode])}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{/* Start point — default is where you are; you can pick another on the map */}
|
||
<div className="order-4 flex shrink-0 flex-wrap items-center gap-1.5 px-4 pb-3">
|
||
<span className="text-[10px] font-black uppercase tracking-widest text-muted-foreground">
|
||
{t('routeUi.from')}
|
||
</span>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
setStartMode('me');
|
||
setPickingStart(false);
|
||
}}
|
||
className={cn(
|
||
'rounded-full border px-2.5 py-1 text-[10px] font-bold uppercase tracking-wide transition-colors',
|
||
startMode === 'me'
|
||
? 'border-[#ccff00]/60 bg-[#ccff00]/15 text-[#ccff00]'
|
||
: 'border-white/10 text-muted-foreground hover:text-foreground',
|
||
)}
|
||
>
|
||
{t('routeUi.myLocation')}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => setPickingStart((v) => !v)}
|
||
className={cn(
|
||
'flex items-center gap-1 rounded-full border px-2.5 py-1 text-[10px] font-bold uppercase tracking-wide transition-colors',
|
||
pickingStart || startMode === 'picked'
|
||
? 'border-[#ccff00]/60 bg-[#ccff00]/15 text-[#ccff00]'
|
||
: 'border-white/10 text-muted-foreground hover:text-foreground',
|
||
)}
|
||
>
|
||
<Crosshair className="h-3 w-3" />
|
||
{pickingStart ? t('routeUi.tapTheMap') : t('routeUi.chooseOnMap')}
|
||
</button>
|
||
</div>
|
||
|
||
{/* Scrollable details */}
|
||
<div className="order-5 min-h-0 flex-1 overflow-y-auto">
|
||
|
||
{/* Summary bar */}
|
||
<div className="flex items-center border-t bg-muted/30 px-4 py-2.5">
|
||
{error ? (
|
||
<div className="flex items-center gap-2 text-sm text-amber-500">
|
||
<AlertTriangle className="h-4 w-4 shrink-0" />
|
||
<span>{error}</span>
|
||
</div>
|
||
) : mode === 'transit' && selectedTransit ? (
|
||
<div className="w-full space-y-2">
|
||
<div className="flex items-center gap-3">
|
||
<div className="text-2xl leading-none">{transitPrimaryEmoji(selectedTransit)}</div>
|
||
<div className="min-w-0">
|
||
<div className="text-lg font-black tabular-nums">
|
||
{formatClock(selectedTransit.departISO)} → {formatClock(selectedTransit.arriveISO)}
|
||
</div>
|
||
<div className="text-xs text-muted-foreground">
|
||
{formatDuration(selectedTransit.durationS)} ·{' '}
|
||
{selectedTransit.transfers === 0
|
||
? t('routeUi.direct')
|
||
: selectedTransit.transfers === 1
|
||
? t('routeUi.transferOne')
|
||
: t('routeUi.transfers', { count: selectedTransit.transfers })}
|
||
{options.length > 1 && ` · ${t('routeUi.options', { count: options.length })}`}
|
||
{routing && <Loader2 className="ml-1 inline h-3 w-3 animate-spin" />}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{selectedTransit.legs.some((l) => l.mode !== 'WALK') && (
|
||
<div className="flex flex-wrap gap-1">
|
||
{selectedTransit.legs
|
||
.filter((l) => l.mode !== 'WALK')
|
||
.map((l, i) => (
|
||
<span
|
||
key={`${l.mode}-${l.line}-${i}`}
|
||
className="inline-flex items-center gap-1 rounded-full border border-white/10 bg-white/5 px-2 py-0.5 text-[10px] font-bold text-gray-300"
|
||
>
|
||
<span aria-hidden>{transitModeEmoji(l.mode)}</span>
|
||
{l.line ?? l.mode}
|
||
</span>
|
||
))}
|
||
</div>
|
||
)}
|
||
<p className="text-[10px] text-muted-foreground/70">{TRANSIT_ATTRIBUTION}</p>
|
||
</div>
|
||
) : route ? (
|
||
<div className="w-full space-y-1.5">
|
||
{/* Compact summary — a single line instead of three ~90px tiles,
|
||
so the map above keeps the vertical space. */}
|
||
<div className="flex flex-wrap items-center gap-x-3 gap-y-1 leading-none">
|
||
<span className="text-base font-black tabular-nums text-white">
|
||
{formatDistance(route.distanceM / 1000)}
|
||
</span>
|
||
<span aria-hidden className="h-3.5 w-px bg-white/15" />
|
||
<span className="flex items-baseline gap-1.5">
|
||
<span className="text-base font-black tabular-nums text-white">
|
||
{formatDuration(route.durationS)}
|
||
</span>
|
||
<span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||
{t('routeUi.ride')}
|
||
</span>
|
||
</span>
|
||
<span aria-hidden className="h-3.5 w-px bg-white/15" />
|
||
<span className="flex items-baseline gap-1.5">
|
||
<span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||
{t('routeUi.arrive')}
|
||
</span>
|
||
<span className="text-base font-black tabular-nums text-white">
|
||
{etaClock(route.durationS)}
|
||
</span>
|
||
</span>
|
||
</div>
|
||
<p className="flex flex-wrap items-center gap-x-1.5 text-[10px] text-muted-foreground">
|
||
<span className="text-sm leading-none">
|
||
{TRAVEL_MODES.find((m) => m.mode === mode)?.emoji}
|
||
</span>
|
||
<span>
|
||
{route.steps && route.steps.length > 1
|
||
? t('routeUi.stepsCount', { count: route.steps.length })
|
||
: t('routeUi.direct')}
|
||
</span>
|
||
{mode === 'foot'
|
||
? <span>· {skateTime(route.distanceM / 1000, t)}</span>
|
||
: speed && (
|
||
<span>· {t('routeUi.speedAvg', { speed })}</span>
|
||
)}
|
||
{TRAVEL_MODES.find((m) => m.mode === mode)?.approximate && (
|
||
<span>· {t('routeUi.usesDrivingRoads')}</span>
|
||
)}
|
||
{route.approximate && <span>· {t('routeUi.drivingEstimate')}</span>}
|
||
{routing && <span>· {t('routeUi.updating')}</span>}
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<div className="text-sm text-muted-foreground">
|
||
{origin ? t('routeUi.pickMode') : t('routeUi.waitingLocation')}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Turn-by-turn orientation — the planning list. While following, the map
|
||
and the live NEXT banner take over (so the list steps out of the way). */}
|
||
{!following && mode !== 'transit' && route?.steps && route.steps.length > 1 && (
|
||
<div className="border-t bg-muted/20">
|
||
<div className="flex flex-wrap items-baseline justify-between gap-x-2 px-4 pt-3">
|
||
<p className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-muted-foreground">
|
||
{t('routeUi.routeSteps')}
|
||
<span className="rounded-full bg-white/10 px-1.5 py-0.5 text-[9px] tabular-nums">
|
||
{route.steps.length}
|
||
</span>
|
||
</p>
|
||
{mode === 'foot' && (
|
||
<p className="text-[10px] text-muted-foreground/70">{t('routeUi.walkingRoute')}</p>
|
||
)}
|
||
</div>
|
||
<ol className="max-h-72 space-y-1.5 overflow-y-auto px-4 pb-2 pt-1.5">
|
||
{route.steps.map((s, i) => (
|
||
<li key={`${i}-${s.instruction}`}>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
setActiveStep(i);
|
||
const map = mapRef.current;
|
||
if (map && s.lat && s.lng) map.panTo([s.lat, s.lng]);
|
||
}}
|
||
className={cn(
|
||
// `min-h-0` overrides the app-wide 44px mobile touch-target
|
||
// rule for `button`, which otherwise made every step row a
|
||
// giant 44px slab.
|
||
'flex min-h-0 w-full items-start gap-2 rounded-lg px-2 py-1.5 text-left text-xs transition-colors',
|
||
currentStepIndex === i ? 'bg-[#ccff00]/10 text-white' : 'hover:bg-white/5',
|
||
)}
|
||
>
|
||
<span className="mt-px w-4 shrink-0 text-right font-mono text-[10px] text-muted-foreground/60">
|
||
{i + 1}
|
||
</span>
|
||
<span className="min-w-0 flex-1 leading-snug text-gray-300">{stepInstruction(s, t)}</span>
|
||
{s.distanceM >= 10 && (
|
||
<span className="shrink-0 tabular-nums text-muted-foreground/70">
|
||
{formatDistance(s.distanceM / 1000)}
|
||
</span>
|
||
)}
|
||
</button>
|
||
</li>
|
||
))}
|
||
</ol>
|
||
<p className="px-4 pb-3 text-[10px] text-muted-foreground/60">
|
||
{t('routeUi.planningView')}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* Transit itinerary: alternatives + a real leg-by-leg breakdown — all
|
||
from the same MOTIS response (nothing extra is fetched). */}
|
||
{!following && mode === 'transit' && selectedTransit && (
|
||
<div className="border-t bg-muted/20">
|
||
{/* When: leave now · depart at · arrive by */}
|
||
<div className="flex flex-wrap items-center gap-1.5 px-4 pt-3">
|
||
{(['now', 'depart', 'arrive'] as const).map((m) => (
|
||
<button
|
||
key={m}
|
||
type="button"
|
||
onClick={() => setTransitTimeMode(m)}
|
||
aria-pressed={transitTimeMode === m}
|
||
className={cn(
|
||
'min-h-0 rounded-full border px-2.5 py-1 text-[10px] font-bold uppercase tracking-wide transition-colors',
|
||
transitTimeMode === m
|
||
? 'border-[#ccff00]/60 bg-[#ccff00]/10 text-white'
|
||
: 'border-white/10 text-gray-400 hover:border-white/25',
|
||
)}
|
||
>
|
||
{m === 'now' ? t('routeUi.leaveNow') : m === 'depart' ? t('routeUi.departAt') : t('routeUi.arriveBy')}
|
||
</button>
|
||
))}
|
||
{transitTimeMode !== 'now' && (
|
||
<input
|
||
type="datetime-local"
|
||
value={transitTimeValue}
|
||
onChange={(e) => setTransitTimeValue(e.target.value)}
|
||
aria-label={transitTimeMode === 'depart' ? t('routeUi.departureTime') : t('routeUi.arrivalTime')}
|
||
className="min-h-0 rounded-lg border border-white/15 bg-white/[0.04] px-2 py-1 text-[11px] text-white"
|
||
/>
|
||
)}
|
||
</div>
|
||
|
||
{/* Only: filter the modes (nothing selected = all) */}
|
||
<div className="flex flex-wrap items-center gap-1.5 px-4 pt-2">
|
||
<span className="text-[10px] font-black uppercase tracking-widest text-muted-foreground">{t('routeUi.only')}</span>
|
||
{TRANSIT_MODE_GROUPS.map((g) => {
|
||
const on = transitModeFilter.includes(g.key);
|
||
return (
|
||
<button
|
||
key={g.key}
|
||
type="button"
|
||
onClick={() => toggleModeGroup(g.key)}
|
||
aria-pressed={on}
|
||
className={cn(
|
||
'flex min-h-0 items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-bold transition-colors',
|
||
on
|
||
? 'border-[#ccff00]/60 bg-[#ccff00]/10 text-white'
|
||
: 'border-white/10 text-gray-400 hover:border-white/25',
|
||
)}
|
||
>
|
||
<span aria-hidden>{g.emoji}</span>
|
||
{t(TRANSIT_GROUP_LABEL_KEYS[g.key] ?? g.label)}
|
||
</button>
|
||
);
|
||
})}
|
||
{transitModeFilter.length > 0 && (
|
||
<button
|
||
type="button"
|
||
onClick={() => setTransitModeFilter([])}
|
||
className="min-h-0 rounded-full px-2 py-0.5 text-[10px] font-bold text-muted-foreground underline decoration-dotted hover:text-foreground"
|
||
>
|
||
{t('routeUi.clear')}
|
||
</button>
|
||
)}
|
||
</div>
|
||
|
||
{options.length > 1 && (
|
||
<div className="flex gap-1.5 overflow-x-auto px-4 pt-3">
|
||
{options.map((opt, i) => {
|
||
const active = i === transitIndex;
|
||
const modes = [...new Set(
|
||
opt.legs
|
||
.filter((l) => l.mode !== 'WALK' && l.mode !== 'BIKE')
|
||
.map((l) => transitModeEmoji(l.mode)),
|
||
)];
|
||
return (
|
||
<button
|
||
key={`${opt.departISO}-${i}`}
|
||
type="button"
|
||
onClick={() => setTransitIndex(i)}
|
||
className={cn(
|
||
// `min-h-0` beats the app-wide 44px mobile touch-target rule.
|
||
'flex min-h-0 shrink-0 flex-col items-start gap-0.5 rounded-xl border px-2.5 py-1.5 text-left transition-colors',
|
||
active
|
||
? 'border-[#ccff00]/60 bg-[#ccff00]/10'
|
||
: 'border-white/10 bg-white/[0.03] hover:border-white/25',
|
||
)}
|
||
>
|
||
<span className="text-xs font-black tabular-nums text-white">
|
||
{formatClock(opt.departISO)}–{formatClock(opt.arriveISO)}
|
||
</span>
|
||
<span className="flex items-center gap-1 text-[10px] text-muted-foreground">
|
||
<span aria-hidden>{modes.join('')}</span>
|
||
{formatDuration(opt.durationS)} ·{' '}
|
||
{opt.transfers === 0
|
||
? t('routeUi.direct')
|
||
: opt.transfers === 1
|
||
? t('routeUi.transferOne')
|
||
: t('routeUi.transfers', { count: opt.transfers })}
|
||
</span>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
|
||
<p className="flex items-center gap-2 px-4 pt-3 text-[10px] font-black uppercase tracking-widest text-muted-foreground">
|
||
{t('routeUi.itinerary')}
|
||
<span className="rounded-full bg-white/10 px-1.5 py-0.5 text-[9px] tabular-nums">
|
||
{selectedTransit.legs.length}
|
||
</span>
|
||
</p>
|
||
<ol className="max-h-72 space-y-1 overflow-y-auto px-4 pb-2 pt-1.5">
|
||
{selectedTransit.legs.map((leg, i) => {
|
||
const isFoot = leg.mode === 'WALK' || leg.mode === 'BIKE';
|
||
const dur = legDurationS(leg);
|
||
const startClock = leg.startISO ? formatClock(leg.startISO) : '—';
|
||
const endClock = leg.endISO ? formatClock(leg.endISO) : '—';
|
||
return (
|
||
<li
|
||
key={`${leg.mode}-${leg.line}-${i}`}
|
||
className="flex min-h-0 items-start gap-2 rounded-lg px-2 py-1.5"
|
||
>
|
||
<span className="mt-px w-5 shrink-0 text-center text-base leading-none" aria-hidden>
|
||
{transitModeEmoji(leg.mode)}
|
||
</span>
|
||
<div className="min-w-0 flex-1">
|
||
<div className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
|
||
{!isFoot && (
|
||
<span
|
||
className="inline-flex items-center rounded-md px-1.5 py-0.5 text-[11px] font-black text-black"
|
||
style={{ background: transitLegColor(leg.mode) }}
|
||
>
|
||
{leg.line ?? leg.mode}
|
||
</span>
|
||
)}
|
||
<span className="text-xs font-bold text-white">
|
||
{isFoot
|
||
? leg.mode === 'BIKE' ? t('routeUi.rideVerb') : t('routeUi.walk')
|
||
: leg.headsign
|
||
? `→ ${leg.headsign}`
|
||
: (leg.line ?? leg.mode)}
|
||
</span>
|
||
{dur > 0 && (
|
||
<span className="text-[10px] text-muted-foreground">{formatDuration(dur)}</span>
|
||
)}
|
||
{leg.realTime && (
|
||
<span className="rounded bg-[#00ff88]/15 px-1 text-[9px] font-black uppercase text-[#00ff88]">
|
||
{t('routeUi.live')}
|
||
</span>
|
||
)}
|
||
</div>
|
||
<div className="text-[10px] text-muted-foreground">
|
||
{isFoot ? (
|
||
<>
|
||
{leg.toName ? (
|
||
<>
|
||
{t('routeUi.toStop')}{' '}
|
||
<StopButton
|
||
id={leg.toStopId}
|
||
name={leg.toName}
|
||
onOpen={(id, name) => setStopBoard({ id, name })}
|
||
/>
|
||
</>
|
||
) : leg.mode === 'BIKE' ? t('routeUi.rideLower') : t('routeUi.walkLower')}
|
||
{leg.distanceM ? ` · ${formatDistance(leg.distanceM / 1000)}` : ''}
|
||
</>
|
||
) : (
|
||
<>
|
||
<StopButton
|
||
id={leg.fromStopId}
|
||
name={leg.fromName}
|
||
onOpen={(id, name) => setStopBoard({ id, name })}
|
||
/>
|
||
{leg.fromTrack ? ` · ${t('routeUi.track', { track: leg.fromTrack })}` : ''} {startClock}
|
||
{' → '}
|
||
<StopButton
|
||
id={leg.toStopId}
|
||
name={leg.toName}
|
||
onOpen={(id, name) => setStopBoard({ id, name })}
|
||
/>
|
||
{leg.toTrack ? ` · ${t('routeUi.track', { track: leg.toTrack })}` : ''} {endClock}
|
||
{typeof leg.stops === 'number' && leg.stops > 0
|
||
? ` · ${leg.stops === 1 ? t('routeUi.stopOne') : t('routeUi.stopsCount', { count: leg.stops })}`
|
||
: ''}
|
||
{leg.agencyName ? ` · ${leg.agencyName}` : ''}
|
||
{leg.agencyFareUrl ? (
|
||
<>
|
||
{' · '}
|
||
<a
|
||
href={leg.agencyFareUrl}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="underline decoration-dotted underline-offset-2 hover:text-foreground"
|
||
>
|
||
{t('routeUi.tickets')}
|
||
</a>
|
||
</>
|
||
) : ''}
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</li>
|
||
);
|
||
})}
|
||
</ol>
|
||
</div>
|
||
)}
|
||
|
||
</div>{/* /scrollable details */}
|
||
|
||
{/* Follow mode: live turns + voice, with the screen kept awake. */}
|
||
{route && !route.transit && (
|
||
<div className="order-6 flex items-center gap-3 border-t bg-muted/30 px-4 py-3">
|
||
{arrived ? (
|
||
<Button
|
||
size="sm"
|
||
onClick={() => onOpenChange(false)}
|
||
className="gap-2 bg-[#ccff00] font-bold text-black hover:bg-[#ccff00]/90"
|
||
>
|
||
<Check className="h-3.5 w-3.5" />
|
||
{t('routeUi.done')}
|
||
</Button>
|
||
) : following ? (
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={stopFollowing}
|
||
className="gap-2 border-[#ff0040]/50 text-[#ff0040] hover:bg-[#ff0040]/10"
|
||
>
|
||
<Square className="h-3.5 w-3.5" />
|
||
{t('routeUi.stop')}
|
||
</Button>
|
||
) : (
|
||
<Button
|
||
size="sm"
|
||
onClick={startFollowing}
|
||
className="gap-2 bg-[#ccff00] font-bold text-black hover:bg-[#ccff00]/90"
|
||
>
|
||
<Play className="h-3.5 w-3.5" />
|
||
{t('routeUi.start')}
|
||
</Button>
|
||
)}
|
||
<p className="min-w-0 flex-1 text-[11px] leading-snug text-muted-foreground">
|
||
{arrived
|
||
? t('routeUi.arrived')
|
||
: following
|
||
? voiceOn
|
||
? t('routeUi.voiceOnNote')
|
||
: t('routeUi.voiceOffNote')
|
||
: t('routeUi.followNote')}
|
||
</p>
|
||
<button
|
||
type="button"
|
||
onClick={toggleVoice}
|
||
aria-pressed={voiceOn}
|
||
aria-label={voiceOn ? t('routeUi.voiceOffAria') : t('routeUi.voiceOnAria')}
|
||
className={cn(
|
||
'flex h-9 w-9 shrink-0 items-center justify-center rounded-full border transition-colors',
|
||
voiceOn
|
||
? 'border-[#ccff00]/50 bg-[#ccff00]/15 text-[#ccff00]'
|
||
: 'border-white/10 text-muted-foreground hover:text-foreground',
|
||
)}
|
||
>
|
||
{voiceOn ? <Volume2 className="h-4 w-4" /> : <VolumeX className="h-4 w-4" />}
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
{/* Departure board — its own dialog, kept OUTSIDE the route dialog so the
|
||
two focus traps don't fight. */}
|
||
<StopDepartures
|
||
open={!!stopBoard}
|
||
onOpenChange={(o) => { if (!o) setStopBoard(null); }}
|
||
stopId={stopBoard?.id ?? null}
|
||
stopName={stopBoard?.name ?? ''}
|
||
/>
|
||
</>
|
||
);
|
||
}
|