Add route detail day segment highlighting and per-day GPX export

- Hovering a day row dims other segments (opacity 0.3) and thickens
  the hovered day's segment (weight 5) for clear visual focus
- Each day row has a GPX download button that exports just that day's
  track segment via /api/routes/:id/gpx?day=N
- GPX endpoint uses computeDays to extract the correct track slice

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/journal/app/components/RouteMapThumbnail.client.tsx

@@ -26,9 +26,11 @@ interface RouteMapProps {
   interactive?: boolean;
   className?: string;
   dayBreaks?: number[];
+  /** 1-based day number to highlight, or null for no highlight */
+  highlightedDay?: number | null;
 }
 
-export function RouteMapThumbnail({ geojson, interactive, className, dayBreaks }: RouteMapProps) {
+export function RouteMapThumbnail({ geojson, interactive, className, dayBreaks, highlightedDay }: RouteMapProps) {
   const data: GeoJsonObject = JSON.parse(geojson);
 
   return (
@@ -48,7 +50,7 @@ export function RouteMapThumbnail({ geojson, interactive, className, dayBreaks }
         attribution={interactive ? '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>' : undefined}
       />
       {dayBreaks && dayBreaks.length > 0 ? (
-        <DayColoredRoute data={data} dayBreaks={dayBreaks} />
+        <DayColoredRoute data={data} dayBreaks={dayBreaks} highlightedDay={highlightedDay} />
       ) : (
         <GeoJSON data={data} style={{ color: "#2563eb", weight: 3, opacity: 0.8 }} />
       )}
@@ -57,7 +59,7 @@ export function RouteMapThumbnail({ geojson, interactive, className, dayBreaks }
   );
 }
 
-function DayColoredRoute({ data, dayBreaks }: { data: GeoJsonObject; dayBreaks: number[] }) {
+function DayColoredRoute({ data, dayBreaks, highlightedDay }: { data: GeoJsonObject; dayBreaks: number[]; highlightedDay?: number | null }) {
   // Extract coordinates from the GeoJSON LineString
   const geometry = (data as { type: string; coordinates?: number[][] }).coordinates
     ?? ((data as { features?: Array<{ geometry: { coordinates: number[][] } }> }).features?.[0]?.geometry?.coordinates);
@@ -84,9 +86,13 @@ function DayColoredRoute({ data, dayBreaks }: { data: GeoJsonObject; dayBreaks:
     });
   }
 
+  const isHighlighting = highlightedDay != null;
+
   return (
     <>
       {segments.map((seg, i) => {
+        const dayNum = i + 1;
+        const isActive = highlightedDay === dayNum;
         const segData: GeoJsonObject = {
           type: "Feature",
           geometry: { type: "LineString", coordinates: seg.coords },
@@ -94,9 +100,13 @@ function DayColoredRoute({ data, dayBreaks }: { data: GeoJsonObject; dayBreaks:
         } as unknown as GeoJsonObject;
         return (
           <GeoJSON
-            key={i}
+            key={`${i}-${highlightedDay}`}
             data={segData}
-            style={{ color: seg.color, weight: 3, opacity: 0.8 }}
+            style={{
+              color: seg.color,
+              weight: isHighlighting ? (isActive ? 5 : 2) : 3,
+              opacity: isHighlighting ? (isActive ? 1 : 0.3) : 0.8,
+            }}
           />
         );
       })}

apps/journal/app/routes/api.routes.$id.gpx.ts

@@ -1,16 +1,77 @@
 import type { Route } from "./+types/api.routes.$id.gpx";
 import { getRouteWithVersions } from "~/lib/routes.server";
+import { parseGpxAsync, computeDays, generateGpx } from "@trails-cool/gpx";
 
-export async function loader({ params }: Route.LoaderArgs) {
+export async function loader({ params, request }: Route.LoaderArgs) {
   const route = await getRouteWithVersions(params.id);
   if (!route?.gpx) {
     return new Response("No GPX data", { status: 404 });
   }
 
-  return new Response(route.gpx, {
+  const url = new URL(request.url);
-    headers: {
+  const dayParam = url.searchParams.get("day");
-      "Content-Type": "application/gpx+xml",
+
-      "Content-Disposition": `attachment; filename="${route.name.replace(/[^a-z0-9]/gi, "_")}.gpx"`,
+  if (!dayParam) {
-    },
+    return new Response(route.gpx, {
-  });
+      headers: {
+        "Content-Type": "application/gpx+xml",
+        "Content-Disposition": `attachment; filename="${route.name.replace(/[^a-z0-9]/gi, "_")}.gpx"`,
+      },
+    });
+  }
+
+  // Export a single day's segment
+  const dayNumber = parseInt(dayParam, 10);
+  if (isNaN(dayNumber) || dayNumber < 1) {
+    return new Response("Invalid day number", { status: 400 });
+  }
+
+  try {
+    const gpxData = await parseGpxAsync(route.gpx);
+    const days = computeDays(gpxData.waypoints, gpxData.tracks);
+    const day = days.find((d) => d.dayNumber === dayNumber);
+    if (!day) {
+      return new Response("Day not found", { status: 404 });
+    }
+
+    // Extract track points for this day by matching waypoint positions to track
+    const allPoints = gpxData.tracks.flat();
+    const startWp = gpxData.waypoints[day.startWaypointIndex]!;
+    const endWp = gpxData.waypoints[day.endWaypointIndex]!;
+
+    const findClosest = (wp: { lat: number; lon: number }) => {
+      let bestIdx = 0;
+      let bestDist = Infinity;
+      for (let i = 0; i < allPoints.length; i++) {
+        const dx = allPoints[i]!.lat - wp.lat;
+        const dy = allPoints[i]!.lon - wp.lon;
+        const d = dx * dx + dy * dy;
+        if (d < bestDist) { bestDist = d; bestIdx = i; }
+      }
+      return bestIdx;
+    };
+
+    const startIdx = findClosest(startWp);
+    const endIdx = findClosest(endWp);
+    const dayPoints = allPoints.slice(startIdx, endIdx + 1);
+
+    const dayName = day.startName && day.endName
+      ? `Day ${dayNumber}: ${day.startName} - ${day.endName}`
+      : `Day ${dayNumber}`;
+
+    const dayGpx = generateGpx({
+      name: dayName,
+      tracks: [dayPoints],
+    });
+
+    const filename = `${route.name.replace(/[^a-z0-9]/gi, "_")}_day${dayNumber}.gpx`;
+    return new Response(dayGpx, {
+      headers: {
+        "Content-Type": "application/gpx+xml",
+        "Content-Disposition": `attachment; filename="${filename}"`,
+      },
+    });
+  } catch {
+    return new Response("Failed to extract day segment", { status: 500 });
+  }
 }

apps/journal/app/routes/routes.$id.tsx

@@ -97,6 +97,7 @@ export default function RouteDetailPage({ loaderData }: Route.ComponentProps) {
   const { route, dayStats, versions, isOwner } = loaderData;
   const { t } = useTranslation("journal");
   const [editLoading, setEditLoading] = useState(false);
+  const [highlightedDay, setHighlightedDay] = useState<number | null>(null);
 
   const handleEditInPlanner = useCallback(async () => {
     setEditLoading(true);
@@ -176,7 +177,12 @@ export default function RouteDetailPage({ loaderData }: Route.ComponentProps) {
           <h2 className="text-lg font-semibold text-gray-900">{t("routes.dayBreakdown")}</h2>
           <div className="mt-3 divide-y divide-gray-200 rounded-md border border-gray-200">
             {dayStats.map((day) => (
-              <div key={day.dayNumber} className="flex items-center gap-4 px-4 py-3">
+              <div
+                key={day.dayNumber}
+                className="flex items-center gap-4 px-4 py-3 hover:bg-gray-50 transition-colors"
+                onMouseEnter={() => setHighlightedDay(day.dayNumber)}
+                onMouseLeave={() => setHighlightedDay(null)}
+              >
                 <span className="text-sm font-medium text-gray-700">
                   {t("routes.dayLabel", { n: day.dayNumber })}
                 </span>
@@ -194,6 +200,16 @@ export default function RouteDetailPage({ loaderData }: Route.ComponentProps) {
                 <span className="text-xs text-gray-500">
                   ↓{day.descent} m
                 </span>
+                {route.hasGpx && (
+                  <a
+                    href={`/api/routes/${route.id}/gpx?day=${day.dayNumber}`}
+                    download
+                    className="shrink-0 rounded border border-gray-200 px-2 py-0.5 text-xs text-gray-500 hover:bg-gray-100 hover:text-gray-700"
+                    title={t("routes.exportGpx")}
+                  >
+                    GPX
+                  </a>
+                )}
               </div>
             ))}
           </div>
@@ -202,7 +218,7 @@ export default function RouteDetailPage({ loaderData }: Route.ComponentProps) {
 
       {route.geojson && (
         <div className="mt-6 overflow-hidden rounded-lg border border-gray-200" style={{ height: 400 }}>
-          <ClientMap geojson={route.geojson} interactive className="h-full w-full" dayBreaks={route.dayBreaks.length > 0 ? route.dayBreaks : undefined} />
+          <ClientMap geojson={route.geojson} interactive className="h-full w-full" dayBreaks={route.dayBreaks.length > 0 ? route.dayBreaks : undefined} highlightedDay={highlightedDay} />
         </div>
       )}