feat: implement runtime base url configuration

src/components/map/constants.ts

@@ -1,5 +1,3 @@
-import { VALHALLA_OSM_URL } from '@/utils/valhalla';
-
 const centerCoords = import.meta.env.VITE_CENTER_COORDS?.split(',') || [];
 
 export const DEFAULT_CENTER: [number, number] = [
@@ -13,11 +11,8 @@ export const maxBounds: [[number, number], [number, number]] | undefined =
   undefined;
 
 export const routeObjects = {
-  [VALHALLA_OSM_URL!]: {
-    color: '#0066ff',
-    alternativeColor: '#66a3ff',
-    name: 'OSM',
-  },
+  color: '#0066ff',
+  alternativeColor: '#66a3ff',
 };
 
 export const MAP_STYLE_STORAGE_KEY = 'selectedMapStyle';

src/components/map/index.tsx

@@ -16,7 +16,7 @@ import 'maplibre-gl/dist/maplibre-gl.css';
 import axios from 'axios';
 import { throttle } from 'throttle-debounce';
 import {
-  VALHALLA_OSM_URL,
+  getValhallaUrl,
   buildHeightRequest,
   buildLocateRequest,
 } from '@/utils/valhalla';
@@ -262,7 +262,7 @@ export const MapComponent = () => {
   const getHeight = useCallback((lng: number, lat: number) => {
     setIsHeightLoading(true);
     axios
-      .post(VALHALLA_OSM_URL + '/height', buildHeightRequest([[lat, lng]]), {
+      .post(getValhallaUrl() + '/height', buildHeightRequest([[lat, lng]]), {
         headers: {
           'Content-Type': 'application/json',
         },
@@ -285,7 +285,7 @@ export const MapComponent = () => {
       setIsLocateLoading(true);
       axios
         .post(
-          VALHALLA_OSM_URL + '/locate',
+          getValhallaUrl() + '/locate',
           buildLocateRequest({ lng, lat }, profile || 'bicycle'),
           {
             headers: {
@@ -336,7 +336,7 @@ export const MapComponent = () => {
       setIsHeightLoading(true);
       setHeightPayload(heightPayloadNew);
       axios
-        .post(VALHALLA_OSM_URL + '/height', heightPayloadNew, {
+        .post(getValhallaUrl() + '/height', heightPayloadNew, {
           headers: {
             'Content-Type': 'application/json',
           },

src/components/map/parts/route-lines.spec.tsx

@@ -23,19 +23,6 @@ vi.mock('@/stores/directions-store', () => ({
     mockUseDirectionsStore(selector),
 }));
 
-vi.mock('@/utils/valhalla', () => ({
-  VALHALLA_OSM_URL: 'https://valhalla.example.com',
-}));
-
-vi.mock('../constants', () => ({
-  routeObjects: {
-    'https://valhalla.example.com': {
-      color: '#0066ff',
-      alternativeColor: '#999999',
-    },
-  },
-}));
-
 const createMockState = (overrides = {}) => ({
   results: {
     data: {

src/components/map/parts/route-lines.tsx

@@ -1,7 +1,6 @@
 import { useMemo } from 'react';
 import { Source, Layer } from 'react-map-gl/maplibre';
 import { useDirectionsStore } from '@/stores/directions-store';
-import { VALHALLA_OSM_URL } from '@/utils/valhalla';
 import { routeObjects } from '../constants';
 import type { Feature, FeatureCollection, LineString } from 'geojson';
 import type { ParsedDirectionsGeometry } from '@/components/types';
@@ -34,7 +33,7 @@ export function RouteLines() {
             coordinates: coords.map((c) => [c[1] ?? 0, c[0] ?? 0]),
           },
           properties: {
-            color: routeObjects[VALHALLA_OSM_URL!]!.alternativeColor,
+            color: routeObjects.alternativeColor,
             type: 'alternate',
             summary,
           },
@@ -53,7 +52,7 @@ export function RouteLines() {
           coordinates: coords.map((c) => [c[1] ?? 0, c[0] ?? 0]),
         },
         properties: {
-          color: routeObjects[VALHALLA_OSM_URL!]!.color,
+          color: routeObjects.color,
           type: 'main',
           summary,
         },

src/components/route-planner.tsx

@@ -3,7 +3,7 @@ import { format } from 'date-fns';
 import { DirectionsControl } from './directions/directions';
 import { IsochronesControl } from './isochrones/isochrones';
 import { useCommonStore } from '@/stores/common-store';
-import { VALHALLA_OSM_URL } from '@/utils/valhalla';
+import { getValhallaUrl } from '@/utils/valhalla';
 import {
   Sheet,
   SheetContent,
@@ -40,7 +40,7 @@ export const RoutePlanner = () => {
   } = useQuery({
     queryKey: ['lastUpdate'],
     queryFn: async () => {
-      const response = await fetch(`${VALHALLA_OSM_URL}/status`);
+      const response = await fetch(`${getValhallaUrl()}/status`);
       const data = await response.json();
       return new Date(data.tileset_last_modified * 1000);
     },

src/components/settings-panel/server-settings.tsx

@@ -0,0 +1,145 @@
+import { useState } from 'react';
+import { useMutation } from '@tanstack/react-query';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  getBaseUrl,
+  setBaseUrl,
+  getDefaultBaseUrl,
+  validateBaseUrl,
+  normalizeBaseUrl,
+  testConnection,
+} from '@/utils/base-url';
+import { CollapsibleSection } from '@/components/ui/collapsible-section';
+import { Server, RotateCcw, Loader2 } from 'lucide-react';
+import {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+} from '@/components/ui/field';
+
+export const ServerSettings = () => {
+  const [baseUrl, setBaseUrlState] = useState<string>(() => getBaseUrl());
+  const [isOpen, setIsOpen] = useState(false);
+
+  const connectionMutation = useMutation({
+    mutationFn: testConnection,
+    onSuccess: (result, url) => {
+      if (result.reachable) {
+        const normalizedUrl = normalizeBaseUrl(url);
+        setBaseUrl(normalizedUrl);
+        setBaseUrlState(normalizedUrl);
+      }
+    },
+  });
+
+  const getErrorMessage = (): string | null => {
+    if (connectionMutation.error) {
+      return connectionMutation.error.message || 'Connection failed';
+    }
+    if (connectionMutation.data && !connectionMutation.data.reachable) {
+      return connectionMutation.data.error || 'Server unreachable';
+    }
+    return null;
+  };
+
+  const errorMessage = getErrorMessage();
+
+  const handleBaseUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setBaseUrlState(e.target.value);
+    connectionMutation.reset();
+  };
+
+  const handleBaseUrlBlur = () => {
+    const currentStoredUrl = getBaseUrl();
+    const trimmedUrl = baseUrl.trim();
+
+    if (trimmedUrl === currentStoredUrl) {
+      return;
+    }
+
+    const lastTestedUrl = connectionMutation.variables;
+    if (lastTestedUrl === trimmedUrl && errorMessage) {
+      return;
+    }
+
+    if (trimmedUrl === '' || trimmedUrl === getDefaultBaseUrl()) {
+      setBaseUrl(trimmedUrl);
+      setBaseUrlState(trimmedUrl || getDefaultBaseUrl());
+      connectionMutation.reset();
+      return;
+    }
+
+    const validation = validateBaseUrl(trimmedUrl);
+    if (!validation.valid) {
+      connectionMutation.mutate(trimmedUrl);
+      return;
+    }
+
+    connectionMutation.mutate(trimmedUrl);
+  };
+
+  const handleResetBaseUrl = () => {
+    const defaultUrl = getDefaultBaseUrl();
+    setBaseUrlState(defaultUrl);
+    setBaseUrl(defaultUrl);
+    connectionMutation.reset();
+  };
+
+  return (
+    <CollapsibleSection
+      title="Server Settings"
+      icon={Server}
+      open={isOpen}
+      onOpenChange={setIsOpen}
+    >
+      <div className="space-y-2">
+        <Field data-invalid={!!errorMessage}>
+          <FieldLabel htmlFor="base-url-input">Base URL</FieldLabel>
+          <FieldDescription>
+            The Valhalla server URL for routing and isochrone requests
+          </FieldDescription>
+          <div className="flex gap-2">
+            <div className="flex-1 relative">
+              <Input
+                id="base-url-input"
+                type="url"
+                placeholder="https://valhalla.example.com"
+                value={baseUrl}
+                onChange={handleBaseUrlChange}
+                onBlur={handleBaseUrlBlur}
+                disabled={connectionMutation.isPending}
+                aria-invalid={!!errorMessage}
+                className={
+                  errorMessage
+                    ? 'border-destructive focus-visible:ring-destructive/50'
+                    : ''
+                }
+              />
+              {connectionMutation.isPending && (
+                <div className="absolute right-3 top-1/2 -translate-y-1/2">
+                  <Loader2 className="size-4 animate-spin text-muted-foreground" />
+                </div>
+              )}
+            </div>
+          </div>
+          <FieldError>{errorMessage}</FieldError>
+        </Field>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleResetBaseUrl}
+          disabled={
+            connectionMutation.isPending ||
+            normalizeBaseUrl(baseUrl) === getDefaultBaseUrl()
+          }
+          className="w-full"
+        >
+          <RotateCcw className="size-3.5" />
+          Reset Base URL
+        </Button>
+      </div>
+    </CollapsibleSection>
+  );
+};