feat: section 1 — keep-awake toggle, sensor button, GPS pause, track view

- Keep-awake now conditional: activates only when recording + toggle on
- Sensor button overlaid on map area navigates to SensorPairing modal
- Pause/resume now start/stop the GPS background task, not just store state
- TrackView renders lat/lon polyline via react-native-svg (no tile server)
- react-native-svg added as dependency

src/screens/RecordingScreen.tsx

@@ -1,27 +1,35 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, Alert } from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity, Alert, LayoutChangeEvent } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { useKeepAwake } from 'expo-keep-awake';
+import { activateKeepAwakeAsync, deactivateKeepAwake } from 'expo-keep-awake';
+import Svg, { Polyline } from 'react-native-svg';
 import { useRecordingStore } from '../store/recording';
 import { startGpsRecording, stopGpsRecording, requestLocationPermissions } from '../services/gps';
-import { RootStackParamList } from '../types';
+import { RootStackParamList, TrackPoint } from '../types';
 
 type Nav = NativeStackNavigationProp<RootStackParamList>;
 
 export function RecordingScreen() {
   const nav = useNavigation<Nav>();
-  const { status, ble, keepAwake, start, pause, resume, stop, getStats } = useRecordingStore();
+  const { status, ble, keepAwake, trackPoints, start, pause, resume, stop, setKeepAwake, getStats } = useRecordingStore();
   const [stats, setStats] = useState(getStats());
+  const [mapSize, setMapSize] = useState({ width: 0, height: 0 });
   const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
-  useKeepAwake(); // TODO: make conditional on keepAwake toggle
-
   useEffect(() => {
     intervalRef.current = setInterval(() => setStats(getStats()), 1000);
     return () => { if (intervalRef.current) clearInterval(intervalRef.current); };
   }, []);
 
+  useEffect(() => {
+    if (keepAwake && status === 'recording') {
+      activateKeepAwakeAsync();
+    } else {
+      deactivateKeepAwake();
+    }
+  }, [keepAwake, status]);
+
   async function handleStart() {
     const granted = await requestLocationPermissions();
     if (!granted) {
@@ -32,6 +40,16 @@ export function RecordingScreen() {
     await startGpsRecording();
   }
 
+  async function handlePause() {
+    await stopGpsRecording();
+    pause();
+  }
+
+  async function handleResume() {
+    resume();
+    await startGpsRecording();
+  }
+
   async function handleStop() {
     await stopGpsRecording();
     stop();
@@ -58,12 +76,29 @@ export function RecordingScreen() {
         <StatBox label="Cadence" value={ble.cadence ? `${ble.cadence} rpm` : '—'} />
       </View>
 
-      {/* Map placeholder — MapLibre component goes here */}
-      <View style={styles.mapPlaceholder}>
-        <Text style={styles.mapPlaceholderText}>Map</Text>
+      <View
+        style={styles.mapArea}
+        onLayout={(e: LayoutChangeEvent) => {
+          const { width, height } = e.nativeEvent.layout;
+          setMapSize({ width, height });
+        }}
+      >
+        {mapSize.width > 0 && (
+          <TrackView trackPoints={trackPoints} width={mapSize.width} height={mapSize.height} />
+        )}
+        <TouchableOpacity style={styles.sensorBtn} onPress={() => nav.navigate('SensorPairing')}>
+          <Text style={styles.sensorBtnText}>⚡ Sensors</Text>
+        </TouchableOpacity>
       </View>
 
       <View style={styles.controls}>
+        <TouchableOpacity
+          style={[styles.awakeBtn, keepAwake && styles.awakeBtnOn]}
+          onPress={() => setKeepAwake(!keepAwake)}
+        >
+          <Text style={styles.awakeBtnText}>{keepAwake ? '☀️ Awake' : '💤 Sleep'}</Text>
+        </TouchableOpacity>
+
         {status === 'idle' && (
           <TouchableOpacity style={[styles.btn, styles.btnStart]} onPress={handleStart}>
             <Text style={styles.btnText}>Start</Text>
@@ -71,7 +106,7 @@ export function RecordingScreen() {
         )}
         {status === 'recording' && (
           <>
-            <TouchableOpacity style={[styles.btn, styles.btnPause]} onPress={pause}>
+            <TouchableOpacity style={[styles.btn, styles.btnPause]} onPress={handlePause}>
               <Text style={styles.btnText}>Pause</Text>
             </TouchableOpacity>
             <TouchableOpacity style={[styles.btn, styles.btnStop]} onPress={handleStop}>
@@ -81,7 +116,7 @@ export function RecordingScreen() {
         )}
         {status === 'paused' && (
           <>
-            <TouchableOpacity style={[styles.btn, styles.btnStart]} onPress={resume}>
+            <TouchableOpacity style={[styles.btn, styles.btnStart]} onPress={handleResume}>
               <Text style={styles.btnText}>Resume</Text>
             </TouchableOpacity>
             <TouchableOpacity style={[styles.btn, styles.btnStop]} onPress={handleStop}>
@@ -94,6 +129,45 @@ export function RecordingScreen() {
   );
 }
 
+const PADDING = 16;
+
+function TrackView({ trackPoints, width, height }: { trackPoints: TrackPoint[]; width: number; height: number }) {
+  if (trackPoints.length < 2) {
+    return (
+      <View style={StyleSheet.absoluteFill}>
+        <Text style={styles.mapHint}>
+          {trackPoints.length === 0 ? 'Start recording to see your track' : '…'}
+        </Text>
+      </View>
+    );
+  }
+
+  const lats = trackPoints.map((p) => p.lat);
+  const lons = trackPoints.map((p) => p.lon);
+  const minLat = Math.min(...lats), maxLat = Math.max(...lats);
+  const minLon = Math.min(...lons), maxLon = Math.max(...lons);
+  const latRange = maxLat - minLat || 0.0001;
+  const lonRange = maxLon - minLon || 0.0001;
+
+  const w = width - PADDING * 2;
+  const h = height - PADDING * 2;
+
+  // preserve aspect ratio
+  const scale = Math.min(w / lonRange, h / latRange);
+  const offX = (w - lonRange * scale) / 2 + PADDING;
+  const offY = (h - latRange * scale) / 2 + PADDING;
+
+  const points = trackPoints
+    .map((p) => `${offX + (p.lon - minLon) * scale},${offY + (maxLat - p.lat) * scale}`)
+    .join(' ');
+
+  return (
+    <Svg width={width} height={height} style={StyleSheet.absoluteFill}>
+      <Polyline points={points} fill="none" stroke="#3b82f6" strokeWidth={2} strokeLinejoin="round" strokeLinecap="round" />
+    </Svg>
+  );
+}
+
 function StatBox({ label, value }: { label: string; value: string }) {
   return (
     <View style={styles.statBox}>
@@ -109,9 +183,14 @@ const styles = StyleSheet.create({
   statBox: { width: '25%', padding: 8, alignItems: 'center' },
   statLabel: { color: '#888', fontSize: 11, textTransform: 'uppercase' },
   statValue: { color: '#fff', fontSize: 18, fontWeight: '600', marginTop: 2 },
-  mapPlaceholder: { flex: 1, backgroundColor: '#1a1a2e', alignItems: 'center', justifyContent: 'center' },
-  mapPlaceholderText: { color: '#444', fontSize: 16 },
-  controls: { flexDirection: 'row', justifyContent: 'center', gap: 16, padding: 24 },
+  mapArea: { flex: 1, backgroundColor: '#0d0d1a', overflow: 'hidden' },
+  mapHint: { color: '#333', fontSize: 13, textAlign: 'center', marginTop: 40 },
+  sensorBtn: { position: 'absolute', top: 10, right: 10, backgroundColor: '#1e1e2e', borderRadius: 8, paddingVertical: 6, paddingHorizontal: 12 },
+  sensorBtnText: { color: '#3b82f6', fontSize: 13, fontWeight: '600' },
+  controls: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 12, padding: 20 },
+  awakeBtn: { backgroundColor: '#1e1e1e', borderRadius: 20, paddingVertical: 8, paddingHorizontal: 14 },
+  awakeBtnOn: { backgroundColor: '#2a2a1a' },
+  awakeBtnText: { color: '#aaa', fontSize: 13 },
   btn: { paddingVertical: 16, paddingHorizontal: 32, borderRadius: 50 },
   btnStart: { backgroundColor: '#22c55e' },
   btnPause: { backgroundColor: '#f59e0b' },