diff --git a/src/app/[slug]/page.tsx b/src/app/[slug]/page.tsx index 77e56b1..eca4a69 100644 --- a/src/app/[slug]/page.tsx +++ b/src/app/[slug]/page.tsx @@ -17,6 +17,7 @@ import ImportModal from '@/components/room/ImportModal'; import type { ImportedPlace } from '@/components/room/ImportModal'; import InstallBanner from '@/components/room/InstallBanner'; import JoinForm from '@/components/room/JoinForm'; +import { QRCodeSVG } from 'qrcode.react'; import type { Participant, ParticipantLocation, LocationSource, Waypoint } from '@/types'; // Dynamic import for map to avoid SSR issues with MapLibre @@ -39,6 +40,7 @@ export default function RoomPage() { const [showParticipants, setShowParticipants] = useState(true); const [showMeetingPoint, setShowMeetingPoint] = useState(false); const [showImport, setShowImport] = useState(false); + const [showQR, setShowQR] = useState(false); const [currentUser, setCurrentUser] = useState<{ name: string; emoji: string } | null>(null); const [selectedParticipant, setSelectedParticipant] = useState(null); const [selectedWaypoint, setSelectedWaypoint] = useState(null); @@ -428,6 +430,41 @@ export default function RoomPage() { )} + {/* Floating QR button */} + + + {/* QR code overlay */} + {showQR && ( +
setShowQR(false)} + > + +

Scan to join

+
+ )} + {/* Connection status indicator */} {!isConnected && (