feat(ui): add invert route toggle to quickly find reverse path

Author: alchemydc

src/components/RoutePlanner.tsx

@@ -3,8 +3,8 @@ import maplibregl from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { AvalancheReportCard } from './AvalancheReportCard';
 import { logger } from '../utils/logger';
-import { Navigation } from 'lucide-react';
-import { Region } from '../config/regions';
+import type { Region } from '../config/regions';
+import { ArrowLeft, Navigation2, AlertCircle, AlertTriangle, Loader2, ArrowRightLeft, Navigation } from 'lucide-react';
 
 interface RouteStats {
     travelTime: string;
@@ -481,8 +481,8 @@ export const RoutePlanner: React.FC<RoutePlannerProps> = ({
                 </div>
             </div>
 
-            <div style={{ display: 'flex', gap: '1rem', marginBottom: '1rem' }}>
-                <div style={{ flex: 1 }}>
+            <div className="route-inputs-grid">
+                <div style={{ flex: 1, width: '100%' }}>
                     <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 500 }}>From</label>
                     <select
                         value={from}
@@ -498,7 +498,22 @@ export const RoutePlanner: React.FC<RoutePlannerProps> = ({
                         ))}
                     </select>
                 </div>
-                <div style={{ flex: 1 }}>
+
+                <div
+                    className="route-swap-btn"
+                    onClick={() => {
+                        const temp = from;
+                        onFromChange(destination);
+                        onDestinationChange(temp);
+                    }}
+                    title="Swap Origin and Destination"
+                    role="button"
+                    tabIndex={0}
+                >
+                    <ArrowRightLeft size={20} />
+                </div>
+
+                <div style={{ flex: 1, width: '100%' }}>
                     <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 500 }}>To</label>
                     <select
                         value={destination}

src/index.css

@@ -194,4 +194,64 @@ body {
 
 [data-theme='dark'] .resort-item.clickable:active {
   background-color: #4b5563;
+}
+
+/* Route Inputs */
+.route-inputs-grid {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: end;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.route-swap-btn {
+  background: var(--color-background);
+  border: 1px solid #e5e7eb;
+  border-radius: 50%;
+  width: 32px;
+  /* Smaller on mobile */
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--color-text);
+  transition: all 0.2s;
+  z-index: 5;
+  margin-bottom: 3px;
+  /* Align with inputs */
+}
+
+/* Hide labels visually on very small screens if needed, 
+   but for now just rely on compact layout */
+@media (max-width: 380px) {
+  .route-inputs-grid {
+    gap: 0.25rem;
+  }
+}
+
+.route-swap-btn:hover {
+  background-color: #e5e7eb;
+  border-color: #d1d5db;
+}
+
+[data-theme='dark'] .route-swap-btn {
+  border-color: #374151;
+}
+
+[data-theme='dark'] .route-swap-btn:hover {
+  background-color: #374151;
+}
+
+@media (min-width: 768px) {
+  .route-inputs-grid {
+    gap: 1rem;
+  }
+
+  .route-swap-btn {
+    width: 40px;
+    height: 40px;
+    margin-bottom: 2px;
+  }
 }