feat: add QR code for room join

apps/client/src/components/QRCodeModal.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import QRCode from 'react-qr-code';
+import { Popover, PopoverContent, PopoverTrigger } from './ui/popover';
+
+interface QRCodeModalProps {
+  roomId: string;
+}
+
+export const QRCodeModal: React.FC<QRCodeModalProps> = ({ roomId }: QRCodeModalProps) => {
+  const joinUrl = `${window.location.origin}/room/${roomId}`;
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <span className="text-neutral-400 hover:text-white transition-colors cursor-pointer">QR Code</span>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-4">
+        <div className="flex flex-col items-center">
+          <QRCode value={joinUrl} size={200} />
+          <p className="mt-2 text-sm text-neutral-400">Scan this on another device to join the session</p>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}; 

apps/client/src/components/room/TopBar.tsx

@@ -1,9 +1,13 @@
+/// <reference types="lucide-react" />
+/// <reference types="motion/react" />
+/// <reference types="next/link" />
 "use client";
 import { useGlobalStore } from "@/store/global";
-import { Github, Hash, Users } from "lucide-react";
-import { AnimatePresence, motion } from "motion/react";
-import Link from "next/link";
+import { Github, Hash, Users } from 'lucide-react';
+import { AnimatePresence, motion } from 'motion/react';
+import Link from 'next/link';
 import { SyncProgress } from "../ui/SyncProgress";
+import { QRCodeModal } from '../QRCodeModal';
 
 interface TopBarProps {
   roomId: string;
@@ -76,6 +80,11 @@ export const TopBar = ({ roomId }: TopBarProps) => {
           >
             Full Sync
           </button>
+          {/* Add QR Code Modal button */}
+          <div className="hidden md:block">|</div>
+          <div className="hidden md:block">
+            <QRCodeModal roomId={roomId} />
+          </div>
         </div>
 
         {/* GitHub icon in the top right */}

apps/client/src/store/global.tsx

@@ -80,7 +80,7 @@ interface GlobalStateValues {
   isShuffled: boolean;
 }
 
-interface GlobalState extends GlobalStateValues {
+export interface GlobalState extends GlobalStateValues {
   // Methods
   setIsInitingSystem: (isIniting: boolean) => void;
   addToUploadHistory: (name: string, id: string) => void;
@@ -127,6 +127,7 @@ interface GlobalState extends GlobalStateValues {
   getCurrentGainValue: () => number;
   resetStore: () => void;
 }
+
 // Audio sources
 const STATIC_AUDIO_SOURCES: StaticAudioSource[] = [
   {

package.json

@@ -19,6 +19,7 @@
     "typescript": "^5.0.0"
   },
   "dependencies": {
+    "react-qr-code": "^2.0.15",
     "turbo": "^2.4.4"
   }
 }