From 45c4ebc6023202f8367817055fc591d88ea0c7ef Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Mon, 15 Dec 2025 14:44:40 -0500
Subject: [PATCH] Add auto-center on user location when first acquired

---
 src/app/room/[slug]/page.tsx   | 12 ++++++++++++
 src/components/map/MapView.tsx | 19 ++++++++++++++++++-
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/app/room/[slug]/page.tsx b/src/app/room/[slug]/page.tsx
index 565f757..c014782 100644
--- a/src/app/room/[slug]/page.tsx
+++ b/src/app/room/[slug]/page.tsx
@@ -96,10 +96,22 @@ export default function RoomPage() {
   // Auto-start location sharing when connected
   useEffect(() => {
     if (isConnected && currentUser && !isSharing) {
+      console.log('Auto-starting location sharing');
       startSharing();
     }
   }, [isConnected, currentUser, isSharing, startSharing]);
 
+  // Track if we've centered on user's location yet
+  const hasCenteredRef = useRef(false);
+
+  // Log when we get location updates
+  useEffect(() => {
+    if (currentLocation && !hasCenteredRef.current) {
+      console.log('First location acquired:', currentLocation.latitude, currentLocation.longitude);
+      hasCenteredRef.current = true;
+    }
+  }, [currentLocation]);
+
   // Update status when app goes to background
   useEffect(() => {
     const handleVisibility = () => {
diff --git a/src/components/map/MapView.tsx b/src/components/map/MapView.tsx
index a91976b..94226a6 100644
--- a/src/components/map/MapView.tsx
+++ b/src/components/map/MapView.tsx
@@ -12,6 +12,8 @@ interface MapViewProps {
   initialViewport?: MapViewport;
   onParticipantClick?: (participant: Participant) => void;
   onMapClick?: (lngLat: { lng: number; lat: number }) => void;
+  /** Auto-center on current user's location when first available */
+  autoCenterOnUser?: boolean;
 }
 
 // Default to Hamburg CCH area for CCC events
@@ -26,11 +28,13 @@ export default function MapView({
   initialViewport = DEFAULT_VIEWPORT,
   onParticipantClick,
   onMapClick,
+  autoCenterOnUser = true,
 }: MapViewProps) {
   const mapContainer = useRef<HTMLDivElement>(null);
   const map = useRef<maplibregl.Map | null>(null);
   const markersRef = useRef<Map<string, maplibregl.Marker>>(new Map());
   const [mapLoaded, setMapLoaded] = useState(false);
+  const hasCenteredOnUserRef = useRef(false);
 
   // Initialize map
   useEffect(() => {
@@ -153,7 +157,20 @@ export default function MapView({
       // Add accuracy circle if available
       // TODO: Implement accuracy circles as a layer
     });
-  }, [participants, mapLoaded, currentUserId, onParticipantClick]);
+
+    // Auto-center on current user's first location
+    if (autoCenterOnUser && !hasCenteredOnUserRef.current && currentUserId) {
+      const currentUser = participants.find(p => p.id === currentUserId);
+      if (currentUser?.location && map.current) {
+        console.log('Auto-centering on user location:', currentUser.location.latitude, currentUser.location.longitude);
+        map.current.flyTo({
+          center: [currentUser.location.longitude, currentUser.location.latitude],
+          zoom: 16,
+        });
+        hasCenteredOnUserRef.current = true;
+      }
+    }
+  }, [participants, mapLoaded, currentUserId, onParticipantClick, autoCenterOnUser]);
 
   // Fit bounds to show all participants
   const fitToParticipants = () => {