From 7aca62e9fa3fbf635ba621970eb46f53a7ba7813 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeff@jeffemmett.com>
Date: Wed, 18 Feb 2026 09:56:47 +0000
Subject: [PATCH] feat: add QR code to share modal for easy room sharing

Replace the "QR Coming Soon" placeholder with a real QR code
(qrcode.react) encoding the room URL. Scan to join.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 package.json                       |  1 +
 src/components/room/ShareModal.tsx | 13 ++++++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 32a33a3..4be9460 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "maplibre-gl": "^5.0.0",
     "nanoid": "^5.0.9",
     "next": "^14.2.28",
+    "qrcode.react": "^4.2.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "zustand": "^5.0.2"
diff --git a/src/components/room/ShareModal.tsx b/src/components/room/ShareModal.tsx
index 6eb5f33..af7e1cf 100644
--- a/src/components/room/ShareModal.tsx
+++ b/src/components/room/ShareModal.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import { QRCodeSVG } from 'qrcode.react';
 
 interface ShareModalProps {
   roomSlug: string;
@@ -99,11 +100,17 @@ export default function ShareModal({ roomSlug, onClose }: ShareModalProps) {
           </button>
         </div>
 
-        {/* QR Code placeholder */}
+        {/* QR Code */}
         <div className="mt-6 pt-6 border-t border-white/10 text-center">
           <div className="text-xs text-white/40 mb-2">Or scan QR code</div>
-          <div className="w-32 h-32 mx-auto bg-white rounded-lg flex items-center justify-center">
-            <span className="text-rmaps-dark text-xs">QR Coming Soon</span>
+          <div className="w-36 h-36 mx-auto bg-white rounded-lg p-2">
+            <QRCodeSVG
+              value={shareUrl}
+              size={128}
+              bgColor="#ffffff"
+              fgColor="#0f172a"
+              level="M"
+            />
           </div>
         </div>
       </div>