Fix location sharing: opt-in by default, stop button clears location from map

src/app/room/[slug]/page.tsx

@@ -51,6 +51,7 @@ export default function RoomPage() {
     currentParticipantId,
     roomName,
     updateLocation,
+    clearLocation,
     setStatus,
     addWaypoint,
     removeWaypoint,
@@ -93,16 +94,18 @@ export default function RoomPage() {
     highAccuracy: true,
   });
 
-  // Auto-start location sharing when connected (only once)
-  const hasAutoStartedRef = useRef(false);
-
-  useEffect(() => {
-    if (isConnected && currentUser && !hasAutoStartedRef.current) {
-      console.log('Auto-starting location sharing (first time)');
-      hasAutoStartedRef.current = true;
+  // Location sharing is opt-in - user must click to start
+  // Handler for toggling location sharing
+  const handleToggleSharing = useCallback(() => {
+    if (isSharing) {
+      console.log('Stopping location sharing and clearing location');
+      stopSharing();
+      clearLocation();
+    } else {
+      console.log('Starting location sharing');
       startSharing();
     }
-  }, [isConnected, currentUser, startSharing]);
+  }, [isSharing, startSharing, stopSharing, clearLocation]);
 
   // Track if we've centered on user's location yet
   const hasCenteredRef = useRef(false);
@@ -188,7 +191,7 @@ export default function RoomPage() {
         roomSlug={slug}
         participantCount={participants.length}
         isSharing={isSharing}
-        onToggleSharing={() => (isSharing ? stopSharing() : startSharing())}
+        onToggleSharing={handleToggleSharing}
         onShare={() => setShowShare(true)}
         onToggleParticipants={() => setShowParticipants(!showParticipants)}
       />

src/hooks/useRoom.ts

@@ -42,6 +42,7 @@ interface UseRoomReturn {
   currentParticipantId: string | null;
   roomName: string;
   updateLocation: (location: ParticipantLocation) => void;
+  clearLocation: () => void;
   setStatus: (status: Participant['status']) => void;
   addWaypoint: (waypoint: Omit<Waypoint, 'id' | 'createdAt' | 'createdBy'>) => void;
   removeWaypoint: (waypointId: string) => void;
@@ -136,6 +137,12 @@ export function useRoom({ slug, userName, userEmoji }: UseRoomOptions): UseRoomR
     syncRef.current.updateLocation(locationState);
   }, []);
 
+  // Clear location (when user stops sharing)
+  const clearLocation = useCallback(() => {
+    if (!syncRef.current) return;
+    syncRef.current.clearLocation();
+  }, []);
+
   // Set status
   const setStatus = useCallback((status: Participant['status']) => {
     if (!syncRef.current) return;
@@ -187,6 +194,7 @@ export function useRoom({ slug, userName, userEmoji }: UseRoomOptions): UseRoomR
     currentParticipantId: participantIdRef.current,
     roomName,
     updateLocation,
+    clearLocation,
     setStatus,
     addWaypoint,
     removeWaypoint,

src/lib/sync.ts

@@ -281,6 +281,18 @@ export class RoomSync {
     }
   }
 
+  clearLocation(): void {
+    console.log('RoomSync.clearLocation called');
+    if (this.state.participants[this.participantId]) {
+      delete this.state.participants[this.participantId].location;
+      this.state.participants[this.participantId].lastSeen = new Date().toISOString();
+      // Broadcast a null location to clear it for other participants
+      this.send({ type: 'location', participantId: this.participantId, location: null as any });
+      console.log('Location cleared for participant:', this.participantId);
+      this.notifyStateChange();
+    }
+  }
+
   updateStatus(status: string): void {
     if (this.state.participants[this.participantId]) {
       this.state.participants[this.participantId].status = status;