From 358f3f12c179905b525c78c2dca0eacd89791cc6 Mon Sep 17 00:00:00 2001
From: Davide Scaini <davide.scaini@alumni.cern>
Date: Wed, 3 Jun 2026 10:24:58 +0200
Subject: [PATCH] feat: themed user location dot on map

Replace default MapLibre puck with a custom CircleLayer child:
accent-coloured fill, 2.5px white stroke, map-pitch-aligned.
Dot colour updates live when the palette changes in Settings.
---
 src/screens/RecordingScreen.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/screens/RecordingScreen.tsx b/src/screens/RecordingScreen.tsx
index 164aa47..19d04f2 100644
--- a/src/screens/RecordingScreen.tsx
+++ b/src/screens/RecordingScreen.tsx
@@ -4,7 +4,7 @@ import { useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { activateKeepAwakeAsync, deactivateKeepAwake } from 'expo-keep-awake';
 import { Map, Camera, GeoJSONSource, Layer, UserLocation } from '@maplibre/maplibre-react-native';
-import type { LineLayerStyle } from '@maplibre/maplibre-react-native';
+import type { LineLayerStyle, CircleLayerStyle } from '@maplibre/maplibre-react-native';
 import { useRecordingStore } from '../store/recording';
 import { startGpsRecording, stopGpsRecording, requestLocationPermissions, requestForegroundLocation } from '../services/gps';
 import { RootStackParamList } from '../types';
@@ -43,6 +43,14 @@ export function RecordingScreen() {
     lineCap: 'round',
   }), [accent]);
 
+  const userDotStyle = useMemo<CircleLayerStyle>(() => ({
+    circleRadius: 8,
+    circleColor: accent,
+    circleStrokeWidth: 2.5,
+    circleStrokeColor: '#ffffff',
+    circlePitchAlignment: 'map',
+  }), [accent]);
+
   const trackGeoJSON = useMemo<GeoJSON.Feature<GeoJSON.LineString>>(() => ({
     type: 'Feature',
     geometry: { type: 'LineString', coordinates: trackPoints.map((p) => [p.lon, p.lat]) },
@@ -101,7 +109,9 @@ export function RecordingScreen() {
             trackUserLocation={status === 'recording' ? 'course' : 'default'}
             initialViewState={{ zoom: 14 }}
           />
-          <UserLocation />
+          <UserLocation>
+            <Layer id="user-dot" type="circle" style={userDotStyle} />
+          </UserLocation>
           {trackPoints.length >= 2 && (
             <GeoJSONSource id="track" data={trackGeoJSON}>
               <Layer id="track-line" type="line" style={trackLineStyle} />