Add sharing

components/Landing.tsx

@@ -133,12 +133,15 @@ export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, on
     loading: libraryLoading, 
     loadingQuizId,
     deletingQuizId,
+    sharingQuizId,
     exporting,
     importing,
     error: libraryError, 
     fetchQuizzes, 
     loadQuiz, 
     deleteQuiz,
+    shareQuiz,
+    unshareQuiz,
     exportQuizzes,
     importQuizzes,
     parseImportFile,
@@ -621,10 +624,13 @@ export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, on
         loading={libraryLoading}
         loadingQuizId={loadingQuizId}
         deletingQuizId={deletingQuizId}
+        sharingQuizId={sharingQuizId}
         exporting={exporting}
         error={libraryError}
         onLoadQuiz={handleLoadQuiz}
         onDeleteQuiz={deleteQuiz}
+        onShareQuiz={shareQuiz}
+        onUnshareQuiz={unshareQuiz}
         onExportQuizzes={exportQuizzes}
         onImportClick={() => setImportOpen(true)}
         onRetry={retryLibrary}

components/QuizLibrary.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { X, Trash2, Play, BrainCircuit, PenTool, Loader2, Calendar, FileDown, FileUp, Check, ListChecks } from 'lucide-react';
+import { X, Trash2, Play, BrainCircuit, PenTool, Loader2, Calendar, FileDown, FileUp, Check, ListChecks, Share2, Link2Off, Copy } from 'lucide-react';
 import { QuizListItem } from '../types';
 import { useBodyScrollLock } from '../hooks/useBodyScrollLock';
+import toast from 'react-hot-toast';
 
 interface QuizLibraryProps {
   isOpen: boolean;
@@ -11,10 +12,13 @@ interface QuizLibraryProps {
   loading: boolean;
   loadingQuizId: string | null;
   deletingQuizId: string | null;
+  sharingQuizId: string | null;
   exporting: boolean;
   error: string | null;
   onLoadQuiz: (id: string) => void;
   onDeleteQuiz: (id: string) => void;
+  onShareQuiz: (id: string) => Promise<string>;
+  onUnshareQuiz: (id: string) => Promise<void>;
   onExportQuizzes: (ids: string[]) => Promise<void>;
   onImportClick: () => void;
   onRetry: () => void;
@@ -27,10 +31,13 @@ export const QuizLibrary: React.FC<QuizLibraryProps> = ({
   loading,
   loadingQuizId,
   deletingQuizId,
+  sharingQuizId,
   exporting,
   error,
   onLoadQuiz,
   onDeleteQuiz,
+  onShareQuiz,
+  onUnshareQuiz,
   onExportQuizzes,
   onImportClick,
   onRetry,
@@ -38,7 +45,7 @@ export const QuizLibrary: React.FC<QuizLibraryProps> = ({
   const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
   const [selectMode, setSelectMode] = useState(false);
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
-  const isAnyOperationInProgress = loading || !!loadingQuizId || !!deletingQuizId || exporting;
+  const isAnyOperationInProgress = loading || !!loadingQuizId || !!deletingQuizId || !!sharingQuizId || exporting;
 
   useBodyScrollLock(isOpen);
 
@@ -79,6 +86,24 @@ export const QuizLibrary: React.FC<QuizLibraryProps> = ({
     setConfirmDeleteId(id);
   };
 
+  const handleShareClick = async (e: React.MouseEvent, quiz: QuizListItem) => {
+    e.stopPropagation();
+    if (quiz.isShared && quiz.shareToken) {
+      const shareUrl = `${window.location.origin}/shared/${quiz.shareToken}`;
+      await navigator.clipboard.writeText(shareUrl);
+      toast.success('Link copied to clipboard!');
+    } else {
+      const token = await onShareQuiz(quiz.id);
+      const shareUrl = `${window.location.origin}/shared/${token}`;
+      await navigator.clipboard.writeText(shareUrl);
+    }
+  };
+
+  const handleUnshareClick = async (e: React.MouseEvent, id: string) => {
+    e.stopPropagation();
+    await onUnshareQuiz(id);
+  };
+
   const confirmDelete = async (e: React.MouseEvent) => {
     e.stopPropagation();
     if (confirmDeleteId) {
@@ -264,6 +289,11 @@ export const QuizLibrary: React.FC<QuizLibraryProps> = ({
                               <PenTool size={12} /> Manual
                             </span>
                           )}
+                          {quiz.isShared && (
+                            <span className="bg-green-100 text-green-600 px-2 py-1 rounded-lg text-xs font-black uppercase tracking-wider flex items-center gap-1">
+                              <Share2 size={12} /> Shared
+                            </span>
+                          )}
                           <span className="text-gray-400 text-xs font-bold flex items-center gap-1">
                             <Calendar size={12} /> {formatDate(quiz.createdAt)}
                           </span>
@@ -280,7 +310,7 @@ export const QuizLibrary: React.FC<QuizLibraryProps> = ({
                       </div>
 
                       {!selectMode && (
-                        <div className="flex items-center gap-3 pl-4">
+                        <div className="flex items-center gap-2 pl-4">
                           {loadingQuizId === quiz.id ? (
                             <div className="p-3">
                               <Loader2 size={24} className="animate-spin text-theme-primary" />
@@ -289,6 +319,10 @@ export const QuizLibrary: React.FC<QuizLibraryProps> = ({
                             <div className="p-3">
                               <Loader2 size={24} className="animate-spin text-red-500" />
                             </div>
+                          ) : sharingQuizId === quiz.id ? (
+                            <div className="p-3">
+                              <Loader2 size={24} className="animate-spin text-theme-primary" />
+                            </div>
                           ) : confirmDeleteId === quiz.id ? (
                             <div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
                               <button
@@ -308,13 +342,42 @@ export const QuizLibrary: React.FC<QuizLibraryProps> = ({
                             </div>
                           ) : (
                             <>
+                              {quiz.isShared ? (
+                                <div className="flex items-center gap-1">
+                                  <button
+                                    onClick={(e) => handleShareClick(e, quiz)}
+                                    disabled={isAnyOperationInProgress}
+                                    className="p-2.5 rounded-xl bg-green-50 text-green-600 hover:bg-green-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                                    title="Copy share link"
+                                  >
+                                    <Copy size={18} />
+                                  </button>
+                                  <button
+                                    onClick={(e) => handleUnshareClick(e, quiz.id)}
+                                    disabled={isAnyOperationInProgress}
+                                    className="p-2.5 rounded-xl text-gray-300 hover:bg-orange-50 hover:text-orange-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                                    title="Stop sharing"
+                                  >
+                                    <Link2Off size={18} />
+                                  </button>
+                                </div>
+                              ) : (
+                                <button
+                                  onClick={(e) => handleShareClick(e, quiz)}
+                                  disabled={isAnyOperationInProgress}
+                                  className="p-2.5 rounded-xl text-gray-300 hover:bg-theme-primary/10 hover:text-theme-primary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                                  title="Share quiz"
+                                >
+                                  <Share2 size={18} />
+                                </button>
+                              )}
                               <button
                                 onClick={(e) => handleDeleteClick(e, quiz.id)}
                                 disabled={isAnyOperationInProgress}
-                                className="p-3 rounded-xl text-gray-300 hover:bg-red-50 hover:text-red-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                                className="p-2.5 rounded-xl text-gray-300 hover:bg-red-50 hover:text-red-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                                 title="Delete quiz"
                               >
-                                <Trash2 size={20} />
+                                <Trash2 size={18} />
                               </button>
                               <div className="bg-theme-primary/10 p-3 rounded-xl text-theme-primary group-hover:bg-theme-primary group-hover:text-white transition-all">
                                 <Play size={24} fill="currentColor" />

components/SharedQuizView.tsx

@@ -0,0 +1,241 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { useAuth } from 'react-oidc-context';
+import { motion } from 'framer-motion';
+import { BrainCircuit, Play, Loader2, BookmarkPlus, ChevronDown, ChevronUp, AlertCircle, LogIn } from 'lucide-react';
+import toast from 'react-hot-toast';
+import type { Quiz, Question, GameConfig } from '../types';
+import { useAuthenticatedFetch } from '../hooks/useAuthenticatedFetch';
+
+const BACKEND_URL = import.meta.env.VITE_BACKEND_URL || 'http://localhost:3001';
+
+interface SharedQuizData {
+  title: string;
+  source: 'manual' | 'ai_generated';
+  aiTopic?: string;
+  gameConfig: GameConfig | null;
+  questions: Question[];
+  questionCount: number;
+}
+
+interface SharedQuizViewProps {
+  onHostQuiz: (quiz: Quiz) => void;
+}
+
+export const SharedQuizView: React.FC<SharedQuizViewProps> = ({ onHostQuiz }) => {
+  const { token } = useParams<{ token: string }>();
+  const navigate = useNavigate();
+  const auth = useAuth();
+  const { authFetch } = useAuthenticatedFetch();
+  
+  const [quizData, setQuizData] = useState<SharedQuizData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [showQuestions, setShowQuestions] = useState(false);
+
+  useEffect(() => {
+    const fetchSharedQuiz = async () => {
+      if (!token) {
+        setError('Invalid share link');
+        setLoading(false);
+        return;
+      }
+
+      try {
+        const response = await fetch(`${BACKEND_URL}/api/shared/${token}`);
+        
+        if (!response.ok) {
+          if (response.status === 404) {
+            setError('This quiz is no longer available');
+          } else {
+            setError('Failed to load quiz');
+          }
+          setLoading(false);
+          return;
+        }
+
+        const data = await response.json();
+        setQuizData(data);
+      } catch {
+        setError('Failed to load quiz');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchSharedQuiz();
+  }, [token]);
+
+  const handleHost = () => {
+    if (!quizData) return;
+    
+    const quiz: Quiz = {
+      title: quizData.title,
+      questions: quizData.questions,
+      config: quizData.gameConfig || undefined,
+    };
+    
+    onHostQuiz(quiz);
+  };
+
+  const handleSaveToLibrary = async () => {
+    if (!token || !auth.isAuthenticated) return;
+    
+    setSaving(true);
+    try {
+      const response = await authFetch(`/api/shared/${token}/copy`, {
+        method: 'POST',
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to save quiz');
+      }
+
+      const data = await response.json();
+      toast.success(`"${data.title}" saved to your library!`);
+    } catch {
+      toast.error('Failed to save quiz to library');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex flex-col items-center justify-center h-screen p-4">
+        <motion.div
+          initial={{ scale: 0.8, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+          className="bg-white text-gray-900 p-8 rounded-[2rem] shadow-[0_10px_0_rgba(0,0,0,0.1)] border-4 border-white/50"
+        >
+          <Loader2 size={48} className="animate-spin text-theme-primary mx-auto mb-4" />
+          <p className="font-bold text-gray-500">Loading shared quiz...</p>
+        </motion.div>
+      </div>
+    );
+  }
+
+  if (error || !quizData) {
+    return (
+      <div className="flex flex-col items-center justify-center h-screen p-4">
+        <motion.div
+          initial={{ scale: 0.8, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+          className="bg-white text-gray-900 p-8 rounded-[2rem] shadow-[0_10px_0_rgba(0,0,0,0.1)] border-4 border-white/50 text-center max-w-md"
+        >
+          <div className="bg-red-100 p-4 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-4">
+            <AlertCircle size={40} className="text-red-500" />
+          </div>
+          <h2 className="text-2xl font-black text-gray-800 mb-2">Quiz Not Found</h2>
+          <p className="text-gray-500 font-medium mb-6">{error || 'This quiz is no longer available'}</p>
+          <button
+            onClick={() => navigate('/')}
+            className="bg-theme-primary text-white px-6 py-3 rounded-2xl font-bold shadow-[0_4px_0_var(--theme-primary-dark)] active:shadow-none active:translate-y-[4px] transition-all"
+          >
+            Go Home
+          </button>
+        </motion.div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen p-4">
+      <motion.div
+        initial={{ scale: 0.8, opacity: 0, y: 20 }}
+        animate={{ scale: 1, opacity: 1, y: 0 }}
+        transition={{ type: "spring", bounce: 0.4 }}
+        className="bg-white text-gray-900 p-6 md:p-8 rounded-[2rem] shadow-[0_10px_0_rgba(0,0,0,0.1)] border-4 border-white/50 max-w-lg w-full"
+      >
+        <div className="flex justify-center mb-4">
+          <div className="bg-theme-primary p-3 rounded-2xl rotate-3 shadow-lg">
+            <BrainCircuit size={32} className="text-white" />
+          </div>
+        </div>
+
+        <div className="text-center mb-6">
+          <p className="text-gray-400 font-bold text-sm uppercase tracking-wider mb-1">Shared Quiz</p>
+          <h1 className="text-3xl md:text-4xl font-black text-gray-800 mb-2">{quizData.title}</h1>
+          <p className="text-gray-500 font-medium">
+            {quizData.questionCount} question{quizData.questionCount !== 1 ? 's' : ''}
+            {quizData.aiTopic && <span className="text-gray-400"> • {quizData.aiTopic}</span>}
+          </p>
+        </div>
+
+        <div className="space-y-3 mb-6">
+          <button
+            onClick={handleHost}
+            className="w-full bg-[#333] text-white py-4 rounded-2xl text-xl font-black shadow-[0_6px_0_#000] active:shadow-none active:translate-y-[6px] transition-all hover:bg-black flex items-center justify-center gap-3"
+          >
+            <Play size={24} fill="currentColor" /> Host Game
+          </button>
+
+          {auth.isAuthenticated ? (
+            <button
+              onClick={handleSaveToLibrary}
+              disabled={saving}
+              className="w-full bg-white border-2 border-theme-primary text-theme-primary py-3 rounded-2xl text-lg font-black hover:bg-theme-hover shadow-[0_4px_0_var(--theme-primary)] active:shadow-none active:translate-y-[4px] transition-all flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {saving ? (
+                <>
+                  <Loader2 size={20} className="animate-spin" /> Saving...
+                </>
+              ) : (
+                <>
+                  <BookmarkPlus size={20} /> Save to My Library
+                </>
+              )}
+            </button>
+          ) : (
+            <button
+              onClick={() => auth.signinRedirect()}
+              className="w-full bg-gray-100 text-gray-600 py-3 rounded-2xl text-lg font-black hover:bg-gray-200 shadow-[0_4px_0_#d1d5db] active:shadow-none active:translate-y-[4px] transition-all flex items-center justify-center gap-2"
+            >
+              <LogIn size={20} /> Sign in to Save
+            </button>
+          )}
+        </div>
+
+        <button
+          onClick={() => setShowQuestions(!showQuestions)}
+          className="w-full flex items-center justify-center gap-2 text-gray-400 font-bold hover:text-gray-600 transition-colors py-2"
+        >
+          {showQuestions ? (
+            <>
+              <ChevronUp size={20} /> Hide Questions
+            </>
+          ) : (
+            <>
+              <ChevronDown size={20} /> Preview Questions
+            </>
+          )}
+        </button>
+
+        {showQuestions && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            className="mt-4 space-y-3 max-h-64 overflow-y-auto"
+          >
+            {quizData.questions.map((q, i) => (
+              <div key={q.id} className="bg-gray-50 p-3 rounded-xl">
+                <p className="text-sm font-bold text-gray-400 mb-1">Question {i + 1}</p>
+                <p className="font-bold text-gray-700">{q.text}</p>
+              </div>
+            ))}
+          </motion.div>
+        )}
+
+        <div className="mt-6 pt-4 border-t border-gray-100 text-center">
+          <button
+            onClick={() => navigate('/')}
+            className="text-gray-400 font-bold hover:text-gray-600 transition-colors"
+          >
+            ← Back to Home
+          </button>
+        </div>
+      </motion.div>
+    </div>
+  );
+};