feat(navi): GPS origin + place detail panel + basic actions

Adds synthetic "Your location" stop A when GPS granted; place
detail panel slides in on search result click with Directions /
Add stop / Save (stub) / Share actions; elevation via Valhalla
/height; react-hot-toast for feedback; pendingDestination state
for GPS-denied Directions flow.

Phase 3 Step 5 C1 of Navi.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/ManeuverList.jsx

@@ -1,6 +1,10 @@
+import {
+  MoveRight, MoveUpRight, MoveDownRight, CornerUpRight, CornerUpLeft,
+  MoveLeft, MoveUpLeft, MoveDownLeft, CircleDot, RotateCw,
+  GitMerge, CornerRightDown, CornerRightUp, Navigation
+} from 'lucide-react'
 import { useStore } from '../store'
 
-/** Format seconds into human-friendly string */
 function formatTime(seconds) {
   if (seconds < 60) return `${Math.round(seconds)}s`
   if (seconds < 3600) return `${Math.round(seconds / 60)} min`
@@ -9,34 +13,30 @@ function formatTime(seconds) {
   return m > 0 ? `${h}h ${m}m` : `${h}h`
 }
 
-/** Format distance in miles */
 function formatDist(miles) {
   if (miles < 0.1) return `${Math.round(miles * 5280)} ft`
   return `${miles.toFixed(1)} mi`
 }
 
-/** Get a maneuver type icon */
-function maneuverIcon(type) {
+function ManeuverIcon({ type }) {
+  const size = 16
+  const props = { size, strokeWidth: 1.5 }
   switch (type) {
-    case 0: return '→' // straight
-    case 1: return '↗' // slight right
-    case 2: return '→' // right
-    case 3: return '↘' // sharp right
-    case 4: return '↩' // u-turn right
-    case 5: return '↩' // u-turn left
-    case 6: return '↙' // sharp left
-    case 7: return '←' // left
-    case 8: return '↖' // slight left
-    case 9: return '●' // depart
-    case 10: return '●' // arrive (straight)
-    case 11: return '●' // arrive (right)
-    case 12: return '●' // arrive (left)
-    case 15: return '◎' // roundabout enter
-    case 16: return '◎' // roundabout exit
-    case 24: return '▲' // merge
-    case 25: return '⤴' // on ramp
-    case 26: return '⤵' // off ramp
-    default: return '→'
+    case 0: return <MoveRight {...props} />
+    case 1: return <MoveUpRight {...props} />
+    case 2: return <CornerUpRight {...props} />
+    case 3: return <MoveDownRight {...props} />
+    case 4: case 5: return <CornerUpLeft {...props} />
+    case 6: return <MoveDownLeft {...props} />
+    case 7: return <CornerUpLeft {...props} />
+    case 8: return <MoveUpLeft {...props} />
+    case 9: return <Navigation {...props} />
+    case 10: case 11: case 12: return <CircleDot {...props} />
+    case 15: case 16: return <RotateCw {...props} />
+    case 24: return <GitMerge {...props} />
+    case 25: return <CornerRightUp {...props} />
+    case 26: return <CornerRightDown {...props} />
+    default: return <MoveRight {...props} />
   }
 }
 
@@ -48,15 +48,27 @@ export default function ManeuverList({ onManeuverClick }) {
   if (routeLoading) {
     return (
       <div className="flex items-center justify-center py-4">
-        <div className="w-5 h-5 border-2 border-cyan-400 border-t-transparent rounded-full animate-spin" />
-        <span className="ml-2 text-sm text-gray-400">Calculating route...</span>
+        <div
+          className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin"
+          style={{ borderColor: 'var(--accent)', borderTopColor: 'transparent' }}
+        />
+        <span className="ml-2 text-sm" style={{ color: 'var(--text-secondary)' }}>
+          Calculating route...
+        </span>
       </div>
     )
   }
 
   if (routeError) {
     return (
-      <div className="px-3 py-2 bg-red-900/30 border border-red-700 rounded text-sm text-red-300">
+      <div
+        className="px-3 py-2 rounded text-sm"
+        style={{
+          background: 'color-mix(in srgb, var(--status-danger) 15%, transparent)',
+          border: '1px solid var(--status-danger)',
+          color: 'var(--status-danger)',
+        }}
+      >
         {routeError}
       </div>
     )
@@ -64,22 +76,16 @@ export default function ManeuverList({ onManeuverClick }) {
 
   if (!route || !route.legs) return null
 
-  // Compute total summary
   const totalTime = route.summary?.time || 0
   const totalDist = route.summary?.length || 0
 
-  // Flatten all maneuvers with cumulative time remaining
   const allManeuvers = []
   let timeRemaining = totalTime
 
   for (let legIdx = 0; legIdx < route.legs.length; legIdx++) {
     const leg = route.legs[legIdx]
     for (const man of leg.maneuvers || []) {
-      allManeuvers.push({
-        ...man,
-        _legIndex: legIdx,
-        timeRemaining,
-      })
+      allManeuvers.push({ ...man, _legIndex: legIdx, timeRemaining })
       timeRemaining -= man.time || 0
     }
   }
@@ -87,38 +93,42 @@ export default function ManeuverList({ onManeuverClick }) {
   return (
     <div className="flex flex-col">
       {/* Route summary */}
-      <div className="flex items-center justify-between px-3 py-2 bg-gray-800/60 rounded mb-2">
-        <span className="text-sm font-medium text-white">
+      <div
+        className="flex items-center justify-between px-3 py-2 rounded mb-2"
+        style={{ background: 'var(--bg-overlay)', border: '1px solid var(--border-subtle)' }}
+      >
+        <span className="font-mono text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
           {formatDist(totalDist)}
         </span>
-        <span className="text-sm text-gray-300">
+        <span className="font-mono text-sm" style={{ color: 'var(--text-secondary)' }}>
           {formatTime(totalTime)}
         </span>
       </div>
 
       {/* Maneuver steps */}
-      <div className="flex flex-col divide-y divide-gray-700 max-h-[50vh] overflow-y-auto">
+      <div className="flex flex-col max-h-[50vh] overflow-y-auto">
         {allManeuvers.map((man, i) => (
           <button
             key={i}
             onClick={() => {
-              if (man.begin_shape_index != null && onManeuverClick) {
-                onManeuverClick(man)
-              }
+              if (man.begin_shape_index != null && onManeuverClick) onManeuverClick(man)
             }}
-            className="flex items-start gap-2 px-2 py-2 text-left hover:bg-gray-800/60 transition-colors"
+            className="flex items-start gap-2 px-2 py-2 text-left rounded transition-colors duration-75"
+            style={{ '--hover-bg': 'var(--bg-overlay)' }}
+            onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bg-overlay)'}
+            onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
           >
-            <span className="text-base w-6 text-center shrink-0 text-cyan-400">
-              {maneuverIcon(man.type)}
+            <span className="w-5 shrink-0 mt-0.5" style={{ color: 'var(--accent)' }}>
+              <ManeuverIcon type={man.type} />
             </span>
             <div className="flex-1 min-w-0">
-              <p className="text-sm text-gray-200 leading-tight">
+              <p className="text-sm leading-tight" style={{ color: 'var(--text-primary)' }}>
                 {man.instruction || man.verbal_pre_transition_instruction || 'Continue'}
               </p>
-              <p className="text-[11px] text-gray-500 mt-0.5">
+              <p className="font-mono text-[11px] mt-0.5" style={{ color: 'var(--text-tertiary)' }}>
                 {formatDist(man.length || 0)}
                 {man.timeRemaining > 0 && (
-                  <span className="ml-2">{formatTime(man.timeRemaining)} remaining</span>
+                  <span className="ml-2">{formatTime(man.timeRemaining)} left</span>
                 )}
               </p>
             </div>