feat: Add waypoint modal and preserve offline user locations

- Add WaypointModal component with delete and navigate actions
- Navigate button opens Google Maps directions to waypoint
- Delete button removes waypoint with confirmation
- Sync server now preserves offline users' last locations
- Users marked as offline instead of removed when disconnecting
- Stale participant cleanup still runs after 1 hour threshold

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/app/[slug]/page.tsx

@@ -9,7 +9,8 @@ import ParticipantList from '@/components/room/ParticipantList';
 import RoomHeader from '@/components/room/RoomHeader';
 import ShareModal from '@/components/room/ShareModal';
 import MeetingPointModal from '@/components/room/MeetingPointModal';
-import type { Participant, ParticipantLocation } from '@/types';
+import WaypointModal from '@/components/room/WaypointModal';
+import type { Participant, ParticipantLocation, Waypoint } from '@/types';
 
 // Dynamic import for map to avoid SSR issues with MapLibre
 const DualMapView = dynamic(() => import('@/components/map/DualMapView'), {
@@ -31,6 +32,7 @@ export default function RoomPage() {
   const [showMeetingPoint, setShowMeetingPoint] = useState(false);
   const [currentUser, setCurrentUser] = useState<{ name: string; emoji: string } | null>(null);
   const [selectedParticipant, setSelectedParticipant] = useState<Participant | null>(null);
+  const [selectedWaypoint, setSelectedWaypoint] = useState<Waypoint | null>(null);
   const [shouldAutoStartSharing, setShouldAutoStartSharing] = useState(false);
 
   // Load user and sharing preference from localStorage
@@ -274,7 +276,7 @@ export default function RoomPage() {
             setShowParticipants(true);
           }}
           onWaypointClick={(w) => {
-            console.log('Waypoint clicked:', w.name);
+            setSelectedWaypoint(w);
           }}
           onIndoorPositionSet={updateIndoorPosition}
         />
@@ -316,6 +318,27 @@ export default function RoomPage() {
           }}
         />
       )}
+
+      {/* Waypoint Detail Modal */}
+      {selectedWaypoint && (
+        <WaypointModal
+          waypoint={selectedWaypoint}
+          canDelete={true}
+          onClose={() => setSelectedWaypoint(null)}
+          onDelete={() => {
+            removeWaypoint(selectedWaypoint.id);
+            setSelectedWaypoint(null);
+          }}
+          onNavigate={() => {
+            const { latitude, longitude } = selectedWaypoint.location;
+            window.open(
+              `https://www.google.com/maps/dir/?api=1&destination=${latitude},${longitude}`,
+              '_blank'
+            );
+            setSelectedWaypoint(null);
+          }}
+        />
+      )}
     </div>
   );
 }

src/components/room/WaypointModal.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import type { Waypoint } from '@/types';
+
+interface WaypointModalProps {
+  waypoint: Waypoint;
+  canDelete: boolean;
+  onClose: () => void;
+  onDelete: () => void;
+  onNavigate: () => void;
+}
+
+export default function WaypointModal({
+  waypoint,
+  canDelete,
+  onClose,
+  onDelete,
+  onNavigate,
+}: WaypointModalProps) {
+  const handleDelete = () => {
+    if (confirm(`Delete "${waypoint.name}"?`)) {
+      onDelete();
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-end md:items-center justify-center">
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-black/60" onClick={onClose} />
+
+      {/* Modal */}
+      <div className="relative w-full md:max-w-sm bg-rmaps-card rounded-t-2xl md:rounded-2xl p-4 animate-slide-up">
+        {/* Header */}
+        <div className="flex items-center gap-3 mb-4">
+          <div className="w-12 h-12 rounded-full bg-emerald-500/20 flex items-center justify-center text-2xl">
+            {waypoint.emoji || '📍'}
+          </div>
+          <div className="flex-1 min-w-0">
+            <h3 className="font-semibold text-white truncate">{waypoint.name}</h3>
+            <p className="text-white/50 text-sm">
+              {waypoint.type === 'meeting_point' ? 'Meeting Point' : 'Waypoint'}
+            </p>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-2 hover:bg-white/10 rounded-full transition-colors"
+          >
+            <svg className="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Location info */}
+        <div className="text-white/60 text-sm mb-4">
+          {waypoint.location.indoor ? (
+            <span>Level {waypoint.location.indoor.level}</span>
+          ) : (
+            <span>
+              {waypoint.location.latitude.toFixed(5)}, {waypoint.location.longitude.toFixed(5)}
+            </span>
+          )}
+        </div>
+
+        {/* Actions */}
+        <div className="flex gap-2">
+          <button
+            onClick={onNavigate}
+            className="flex-1 btn-primary flex items-center justify-center gap-2"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+            </svg>
+            Navigate
+          </button>
+
+          {canDelete && (
+            <button
+              onClick={handleDelete}
+              className="px-4 py-2 bg-red-500/20 hover:bg-red-500/30 text-red-400 rounded-lg transition-colors flex items-center gap-2"
+            >
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+              </svg>
+              Delete
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

sync-server/server.js

@@ -157,13 +157,16 @@ function handleClose(ws) {
   const clientInfo = clients.get(ws);
   if (clientInfo) {
     const room = rooms.get(clientInfo.roomSlug);
-    if (room && clientInfo.participantId) {
-      delete room.participants[clientInfo.participantId];
+    if (room && clientInfo.participantId && room.participants[clientInfo.participantId]) {
+      // Don't delete - mark as offline and preserve last location
+      room.participants[clientInfo.participantId].status = 'offline';
+      room.participants[clientInfo.participantId].lastSeen = Date.now();
       broadcast(clientInfo.roomSlug, {
-        type: 'leave',
-        participantId: clientInfo.participantId
+        type: 'status',
+        participantId: clientInfo.participantId,
+        status: 'offline'
       });
-      console.log(`[${clientInfo.roomSlug}] Connection closed: ${clientInfo.participantId}`);
+      console.log(`[${clientInfo.roomSlug}] User went offline: ${clientInfo.participantId} (location preserved)`);
     }
     clients.delete(ws);
   }