From 7c39bc7124f89aa28aaeaffb60b71af9e6335295 Mon Sep 17 00:00:00 2001
From: Martin Kagamino Lehoux <martin@lehoux.net>
Date: Mon, 17 Aug 2026 10:34:06 +0200
Subject: refactor(web): split ride detail rendering concerns

---
 web/frontend/ride-detail.ts | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

(limited to 'web/frontend/ride-detail.ts')

diff --git a/web/frontend/ride-detail.ts b/web/frontend/ride-detail.ts
index d59cbe9..7394d5a 100644
--- a/web/frontend/ride-detail.ts
+++ b/web/frontend/ride-detail.ts
@@ -3,7 +3,7 @@ import { RideBoundaryController } from "./ride-detail-boundaries.js";
 import { RideProfileCanvas } from "./ride-detail-canvas.js";
 import { RideDetailMap } from "./ride-detail-map.js";
 import { formatDistance, formatElevation } from "./ride-detail-logic.js";
-import type { ClimbBounds, RideDetailColors, RideProfile, RideProfilePoint, RideRoute } from "./types.js";
+import type { ClimbBounds, RideMapColors, RideProfile, RideProfileColors, RideProfilePoint, RideRoute } from "./types.js";
 
 export const mountRideDetail = (): void => {
   const mapElement = document.getElementById("ride-map");
@@ -25,23 +25,26 @@ export const mountRideDetail = (): void => {
     colorProbe.style.color = `var(${name})`;
     return getComputedStyle(colorProbe).color;
   };
-  const colors: RideDetailColors = {
-    accent: resolveColor("--color-accent"),
-    forest: resolveColor("--color-forest"),
+  const profileColors: RideProfileColors = {
     subtle: resolveColor("--color-subtle"),
     plotSurface: resolveColor("--color-plot-surface"),
     plotSurfaceOverlay: resolveColor("--color-plot-surface-overlay"),
     grid: resolveColor("--color-plot-grid"),
-    accentFill: resolveColor("--color-accent-fill"),
     profileFill: resolveColor("--color-profile-fill"),
     profileLine: resolveColor("--color-profile-line"),
+    accentFill: resolveColor("--color-accent-fill"),
     climbLabel: resolveColor("--color-climb-label"),
     crossing: resolveColor("--color-crossing"),
     crossingLabel: resolveColor("--color-crossing-label"),
     hoverLine: resolveColor("--color-hover-line"),
-    climbRoute: resolveColor("--color-climb-route"),
+    forest: resolveColor("--color-forest"),
     climbFocusFill: resolveColor("--color-climb-focus-fill"),
   };
+  const mapColors: RideMapColors = {
+    accent: resolveColor("--color-accent"),
+    forest: resolveColor("--color-forest"),
+    climbRoute: resolveColor("--color-climb-route"),
+  };
   colorProbe.remove();
 
   const route = JSON.parse(routeScript.textContent ?? "") as RideRoute;
@@ -66,7 +69,7 @@ export const mountRideDetail = (): void => {
     route,
     points,
     climbs: climbBounds,
-    colors,
+    colors: mapColors,
   });
   const officialProfileController = new OfficialClimbProfileController(points);
   let boundaryController: RideBoundaryController | undefined;
@@ -74,7 +77,7 @@ export const mountRideDetail = (): void => {
     canvas: profileCanvasElement,
     points,
     profile,
-    colors,
+    colors: profileColors,
     getClimbBounds: () => climbBounds,
     canSelectPoint: (source) => boundaryController?.isSelecting(source) ?? false,
     onPointSelected: (index) => boundaryController?.choosePoint(index),
-- 
cgit v1.2.3