Feat/room link sharing

apps/client/src/components/QRCodeModal.tsx

@@ -0,0 +1,76 @@
+import React, { useState } 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}`;
+  const [feedbackMessage, setFeedbackMessage] = useState('');
+
+  const clearFeedback = () => {
+    setTimeout(() => {
+      setFeedbackMessage('');
+    }, 3000);
+  };
+
+  const handleShareOrCopy = async () => {
+    const shareData = {
+      title: 'Join my session',
+      text: `Join my session using this link: ${joinUrl}`,
+      url: joinUrl,
+    };
+
+    if (navigator.share) {
+      try {
+        setFeedbackMessage('Sharing...');
+        await navigator.share(shareData);
+        setFeedbackMessage('Link shared!');
+        clearFeedback();
+      } catch (error) {
+        if (error instanceof Error && error.name === 'AbortError') {
+          setFeedbackMessage('Share canceled');
+        } else {
+          // Fallback to copy if navigator.share fails for other reasons
+          try {
+            await navigator.clipboard.writeText(joinUrl);
+            setFeedbackMessage('Link copied!');
+          } catch (copyError) {
+            setFeedbackMessage('Failed to copy link');
+          }
+        }
+        clearFeedback();
+      }
+    } else {
+      // Fallback to copy if navigator.share is not available
+      try {
+        await navigator.clipboard.writeText(joinUrl);
+        setFeedbackMessage('Link copied!');
+      } catch (copyError) {
+        setFeedbackMessage('Failed to copy link');
+      }
+      clearFeedback();
+    }
+  };
+
+  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">
+          <div onClick={handleShareOrCopy} className="cursor-pointer">
+            <QRCode value={joinUrl} size={200} />
+          </div>
+          <p onClick={handleShareOrCopy} className="mt-2 text-sm text-neutral-400 cursor-pointer">
+            Click here to share link
+          </p>
+          {feedbackMessage && <p className="mt-2 text-sm text-green-500">{feedbackMessage}</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"
   }
 }