Implement local browser caching for shared groups and UI improvements

src/app/(protected)/[classSlug]/quizzes/page.tsx

@@ -4,20 +4,121 @@ import { useState, useEffect, useCallback } from "react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
 import { ImportModal } from "@/components/import/ImportModal";
+import { ShareMenu } from "@/components/ui/ShareMenu";
+import {
+  DndContext,
+  pointerWithin,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+  DragOverEvent,
+  DragStartEvent,
+  DragOverlay,
+  useDroppable,
+  useDndContext,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+  useSortable,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 
 interface QuizItem {
   id: string;
   name: string;
   description: string | null;
+  groupId: string | null;
+  sortOrder: number;
   _count: { questions: number; attempts: number };
 }
 
-const cache: Record<string, QuizItem[]> = {};
+interface MaterialGroup {
+  id: string;
+  name: string;
+  sortOrder: number;
+}
+
+const cache: Record<string, { quizzes: QuizItem[]; groups: MaterialGroup[] }> = {};
+
+function SortableQuizCard({ quiz, onEdit, onDelete, classSlug }: any) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: quiz.id });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.4 : 1,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style} className="group bg-bg-surface rounded-xl border border-border-light shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-card-hover)] hover:border-primary/20 transition-all duration-300">
+      <div className="p-4 flex flex-col flex-1 h-full">
+        <div className="flex items-start gap-2">
+          <div {...attributes} {...listeners} className="mt-1 cursor-grab active:cursor-grabbing text-text-muted hover:text-text-heading">
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8h16M4 16h16" />
+            </svg>
+          </div>
+          <div className="flex-1">
+            <h3 className="text-lg font-semibold text-text-heading mb-1">{quiz.name}</h3>
+            {quiz.description && <p className="text-sm text-text-secondary mb-3 line-clamp-2">{quiz.description}</p>}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3 mt-auto pl-7">
+          <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-badge-bg text-badge-text text-xs font-medium">
+            {quiz._count.questions} {quiz._count.questions === 1 ? "question" : "questions"}
+          </span>
+          {quiz._count.attempts > 0 && (
+            <span className="text-xs text-text-muted">
+              {quiz._count.attempts} {quiz._count.attempts === 1 ? "attempt" : "attempts"}
+            </span>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2 mt-4 pt-4 border-t border-border-light pl-7">
+          <Link href={`/${classSlug}/quizzes/${quiz.id}`} className="flex-1 text-center py-2 px-4 rounded-lg bg-primary text-white text-sm font-medium hover:bg-primary-hover transition-all duration-200">
+            Start Quiz
+          </Link>
+          <button onClick={() => onEdit(quiz)} className="p-2 rounded-lg text-text-muted hover:text-text-heading hover:bg-bg-surface-alt transition-all duration-200 cursor-pointer" title="Edit">
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+            </svg>
+          </button>
+          <button onClick={() => onDelete(quiz)} className="p-2 rounded-lg text-text-muted hover:text-error hover:bg-error-bg transition-all duration-200 cursor-pointer" title="Delete">
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function DroppableContainer({ id, children }: { id: string; children: React.ReactNode }) {
+  const { setNodeRef } = useDroppable({ id });
+  const { over } = useDndContext();
+  
+  const isOverContainer = over?.id === id;
+  const isOverChild = over?.data?.current?.sortable?.containerId === id;
+  const isOver = isOverContainer || isOverChild;
+
+  return (
+    <div ref={setNodeRef} className={`grid grid-cols-1 md:grid-cols-2 gap-4 min-h-[60px] p-2 -mx-2 rounded-lg border-2 transition-colors duration-200 ${isOver ? "border-primary/40 bg-primary/5 shadow-inner" : "border-transparent"}`}>
+      {children}
+    </div>
+  );
+}
 
 export default function QuizzesPage() {
   const params = useParams();
   const classSlug = params.classSlug as string;
-  const [quizzes, setQuizzes] = useState<QuizItem[]>(cache[classSlug] || []);
+  const [quizzes, setQuizzes] = useState<QuizItem[]>(cache[classSlug]?.quizzes || []);
+  const [groups, setGroups] = useState<MaterialGroup[]>(cache[classSlug]?.groups || []);
   const [loading, setLoading] = useState(!cache[classSlug]);
   const [animate] = useState(!cache[classSlug]);
   const [showImport, setShowImport] = useState(false);
@@ -25,22 +126,29 @@ export default function QuizzesPage() {
   const [editingId, setEditingId] = useState<string | null>(null);
   const [editName, setEditName] = useState("");
   const [editDescription, setEditDescription] = useState("");
+  const [isCreatingGroup, setIsCreatingGroup] = useState(false);
+  const [newGroupName, setNewGroupName] = useState("");
+  const [editingGroupId, setEditingGroupId] = useState<string | null>(null);
+  const [editGroupName, setEditGroupName] = useState("");
 
-  const fetchQuizzes = useCallback(async (cId: string) => {
+  const fetchAll = useCallback(async (cId: string) => {
     try {
-      const res = await fetch(`/api/quizzes/list?classId=${cId}`);
-      if (res.ok) {
-        const data = await res.json();
-        const arr = Array.isArray(data) ? data : [];
-        setQuizzes(arr);
-        cache[classSlug] = arr;
-      }
+      const [quizRes, groupRes] = await Promise.all([
+        fetch(`/api/quizzes/list?classId=${cId}`),
+        fetch(`/api/material-groups?classId=${cId}&type=QUIZ`),
+      ]);
+      const qs = quizRes.ok ? await quizRes.json() : [];
+      const gs = groupRes.ok ? await groupRes.json() : [];
+      setQuizzes(qs);
+      setGroups(gs);
+      cache[classSlug] = { quizzes: qs, groups: gs };
     } catch {
       setQuizzes([]);
+      setGroups([]);
     } finally {
       setLoading(false);
     }
-  }, []);
+  }, [classSlug]);
 
   useEffect(() => {
     async function init() {
@@ -53,21 +161,56 @@ export default function QuizzesPage() {
           return;
         }
         setClassId(cls.id);
-        fetchQuizzes(cls.id);
+        fetchAll(cls.id);
       } catch {
         setLoading(false);
       }
     }
     init();
-  }, [classSlug, fetchQuizzes]);
+  }, [classSlug, fetchAll]);
 
-  async function handleDelete(id: string, name: string) {
-    if (!confirm(`Delete "${name}" and all its questions and attempts?`)) return;
-    await fetch(`/api/quizzes/${id}`, { method: "DELETE" });
-    setQuizzes((prev) => prev.filter((q) => q.id !== id));
+  // Group Management
+  async function handleCreateGroup() {
+    if (!newGroupName.trim()) return;
+    const res = await fetch("/api/material-groups", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ classId, name: newGroupName.trim(), type: "QUIZ" }),
+    });
+    if (res.ok) {
+      const g = await res.json();
+      setGroups((prev) => [...prev, g]);
+      setIsCreatingGroup(false);
+      setNewGroupName("");
+    }
   }
 
-  async function handleRename(id: string) {
+  async function handleRenameGroup(id: string) {
+    if (!editGroupName.trim()) return;
+    await fetch(`/api/material-groups/${id}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ name: editGroupName.trim() }),
+    });
+    setGroups((prev) => prev.map((g) => (g.id === id ? { ...g, name: editGroupName.trim() } : g)));
+    setEditingGroupId(null);
+  }
+
+  async function handleDeleteGroup(id: string, name: string) {
+    if (!confirm(`Delete group "${name}"? Quizzes inside will be moved to Uncategorized.`)) return;
+    await fetch(`/api/material-groups/${id}`, { method: "DELETE" });
+    setGroups((prev) => prev.filter((g) => g.id !== id));
+    setQuizzes((prev) => prev.map((q) => (q.groupId === id ? { ...q, groupId: null } : q)));
+  }
+
+  // Quiz Management
+  async function handleDeleteQuiz(quiz: QuizItem) {
+    if (!confirm(`Delete "${quiz.name}" and all its questions and attempts?`)) return;
+    await fetch(`/api/quizzes/${quiz.id}`, { method: "DELETE" });
+    setQuizzes((prev) => prev.filter((q) => q.id !== quiz.id));
+  }
+
+  async function handleRenameQuiz(id: string) {
     if (!editName.trim()) return;
     await fetch(`/api/quizzes/${id}`, {
       method: "PATCH",
@@ -80,155 +223,247 @@ export default function QuizzesPage() {
     setEditingId(null);
   }
 
+  // Drag and drop setup
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+
+  const [activeId, setActiveId] = useState<string | null>(null);
+
+  function handleDragStart(event: DragStartEvent) {
+    setActiveId(event.active.id as string);
+  }
+
+  function handleDragOver(event: DragOverEvent) {
+    const { active, over } = event;
+    if (!over) return;
+    
+    const activeId = active.id as string;
+    const overId = over.id as string;
+
+    if (activeId === overId) return;
+
+    // Is it dropping over a container directly?
+    const isOverContainer = over.data.current?.sortable?.containerId || overId;
+    // ... we handle layout updates in dragEnd to keep it simple, or here for smooth lists.
+    // For simplicity, we just handle the final move in dragEnd.
+  }
+
+  async function handleDragEnd(event: DragEndEvent) {
+    setActiveId(null);
+    const { active, over } = event;
+    if (!over) return;
+
+    const activeId = active.id as string;
+    const overId = over.id as string;
+
+    const activeQuiz = quizzes.find((q) => q.id === activeId);
+    if (!activeQuiz) return;
+
+    let targetGroupId: string | null = null;
+    let targetIndex = 0;
+
+    // Check if over a group container directly
+    const overContainerId = over.data.current?.sortable?.containerId;
+    if (overContainerId) {
+       targetGroupId = overContainerId === "uncategorized" ? null : overContainerId;
+    } else if (groups.find(g => g.id === overId) || overId === "uncategorized") {
+       targetGroupId = overId === "uncategorized" ? null : overId;
+    } else {
+       const overQuiz = quizzes.find((q) => q.id === overId);
+       if (overQuiz) {
+         targetGroupId = overQuiz.groupId;
+       }
+    }
+
+    if (targetGroupId !== undefined) {
+      setQuizzes((items) => {
+        const oldIndex = items.findIndex((q) => q.id === activeId);
+        const overIndex = items.findIndex((q) => q.id === overId);
+        let newItems = [...items];
+        
+        newItems[oldIndex].groupId = targetGroupId;
+
+        if (overIndex >= 0 && overIndex !== oldIndex) {
+          newItems = arrayMove(newItems, oldIndex, overIndex);
+        } else {
+          // just moved to end of a group
+          const oldItem = newItems.splice(oldIndex, 1)[0];
+          newItems.push(oldItem);
+        }
+
+        // Re-calculate sortOrder for the affected groups to persist
+        const affectedGroups = new Set([activeQuiz.groupId, targetGroupId]);
+        const updates: any[] = [];
+        
+        affectedGroups.forEach(gId => {
+           const gItems = newItems.filter(q => q.groupId === gId);
+           gItems.forEach((item, index) => {
+             item.sortOrder = index;
+             updates.push({ id: item.id, sortOrder: index, groupId: item.groupId });
+           });
+        });
+
+        // Fire API
+        fetch("/api/quizzes/reorder", {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ items: updates }),
+        });
+
+        return newItems;
+      });
+    }
+  }
+
+  // Derive grouped quizzes
+  const groupedQuizzes = groups.map(g => ({
+    ...g,
+    quizzes: quizzes.filter(q => q.groupId === g.id).sort((a,b) => a.sortOrder - b.sortOrder)
+  }));
+  const uncategorizedQuizzes = quizzes.filter(q => q.groupId === null).sort((a,b) => a.sortOrder - b.sortOrder);
+
+  const activeQuiz = quizzes.find(q => q.id === activeId);
+
   return (
-    <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 pb-20">
       {/* Header */}
       <div className="flex items-center justify-between mb-6">
         <h2 className="text-xl font-semibold text-text-heading">Quizzes</h2>
-        <button
-          onClick={() => setShowImport(true)}
-          className="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg bg-primary text-white font-medium hover:bg-primary-hover transition-all duration-200 shadow-sm cursor-pointer"
-        >
-          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-          </svg>
-          Import Quiz
-        </button>
+        <div className="flex items-center gap-3">
+          <button onClick={() => setIsCreatingGroup(true)} className="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg bg-bg-surface-alt text-text-heading font-medium border border-border-light hover:bg-border transition-all duration-200 shadow-sm cursor-pointer">
+             Add Group
+          </button>
+          <button onClick={() => setShowImport(true)} className="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg bg-primary text-white font-medium hover:bg-primary-hover transition-all duration-200 shadow-sm cursor-pointer">
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+            </svg>
+            Import Quiz
+          </button>
+        </div>
       </div>
 
-
-
-      {/* Empty state */}
-      {!loading && quizzes.length === 0 && (
-        <div className={`text-center py-16 ${animate ? "animate-slide-up" : ""}`}>
-          <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-bg-callout mb-4">
-            <svg className="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-            </svg>
-          </div>
-          <h3 className="text-lg font-semibold text-text-heading mb-1">No quizzes yet</h3>
-          <p className="text-text-secondary mb-4">Import your first quiz to start practicing</p>
-          <button
-            onClick={() => setShowImport(true)}
-            className="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg bg-primary text-white font-medium hover:bg-primary-hover transition-all duration-200 cursor-pointer"
-          >
-            Import Quiz
+      {isCreatingGroup && (
+        <div className="mb-6 p-4 bg-bg-surface rounded-xl border border-primary/20 shadow-sm flex items-center gap-3">
+          <input
+            autoFocus
+            type="text"
+            value={newGroupName}
+            onChange={(e) => setNewGroupName(e.target.value)}
+            placeholder="e.g. Exam 1 Quizzes"
+            className="flex-1 px-3 py-2 rounded-lg border border-border bg-bg-surface-alt/50 text-text-heading focus:outline-none focus:ring-2 focus:ring-primary/30"
+          />
+          <button onClick={handleCreateGroup} className="px-4 py-2 bg-primary text-white font-medium rounded-md hover:bg-primary-hover cursor-pointer">
+            Save
+          </button>
+          <button onClick={() => { setIsCreatingGroup(false); setNewGroupName(""); }} className="px-4 py-2 bg-bg-surface-alt text-text-heading font-medium rounded-md hover:bg-border cursor-pointer">
+            Cancel
           </button>
         </div>
       )}
 
-      {/* Quiz grid */}
-      {!loading && quizzes.length > 0 && (
-        <div className={`grid grid-cols-1 md:grid-cols-2 gap-4 ${animate ? "animate-slide-up" : ""}`}>
-          {quizzes.map((quiz) => (
-            <div
-              key={quiz.id}
-              className="group bg-bg-surface rounded-xl border border-border-light shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-card-hover)] hover:border-primary/20 transition-all duration-300"
-            >
-              <div className="p-6 flex flex-col flex-1 h-full">
-                {/* Name and Description (editable) */}
-                {editingId === quiz.id ? (
-                  <div className="flex flex-col gap-3 mb-3">
-                    <input
-                      type="text"
-                      value={editName}
-                      onChange={(e) => setEditName(e.target.value)}
-                      placeholder="Quiz Name"
-                      autoFocus
-                      className="w-full px-3 py-1.5 rounded-lg border border-border bg-bg-surface-alt/50 text-text-heading text-sm font-semibold focus:outline-none focus:ring-2 focus:ring-primary/30"
-                    />
-                    <textarea
-                      value={editDescription}
-                      onChange={(e) => setEditDescription(e.target.value)}
-                      placeholder="Description (optional)"
-                      rows={2}
-                      className="w-full px-3 py-1.5 rounded-lg border border-border bg-bg-surface-alt/50 text-text-heading text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 resize-none"
-                    />
-                    <div className="flex gap-2 mt-1">
-                      <button
-                        onClick={() => handleRename(quiz.id)}
-                        className="px-3 py-1.5 bg-primary text-white text-xs font-medium rounded-md hover:bg-primary-hover cursor-pointer"
-                      >
-                        Save Changes
-                      </button>
-                      <button
-                        onClick={() => setEditingId(null)}
-                        className="px-3 py-1.5 bg-bg-surface-alt text-text-heading text-xs font-medium rounded-md hover:bg-border cursor-pointer transition-colors"
-                      >
-                        Cancel
-                      </button>
-                    </div>
-                  </div>
-                ) : (
-                  <>
-                    <h3 className="text-lg font-semibold text-text-heading mb-1">
-                      {quiz.name}
-                    </h3>
-                    {quiz.description && (
-                      <p className="text-sm text-text-secondary mb-3 line-clamp-2">
-                        {quiz.description}
-                      </p>
-                    )}
-                  </>
-                )}
-                <div className="flex items-center gap-3 mt-auto">
-                  <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-badge-bg text-badge-text text-xs font-medium">
-                    {quiz._count.questions} {quiz._count.questions === 1 ? "question" : "questions"}
-                  </span>
-                  {quiz._count.attempts > 0 && (
-                    <span className="text-xs text-text-muted">
-                      {quiz._count.attempts} {quiz._count.attempts === 1 ? "attempt" : "attempts"}
-                    </span>
-                  )}
-                </div>
-
-                <div className="flex items-center gap-2 mt-4 pt-4 border-t border-border-light">
-                  <Link
-                    href={`/${classSlug}/quizzes/${quiz.id}`}
-                    className="flex-1 text-center py-2 px-4 rounded-lg bg-primary text-white text-sm font-medium hover:bg-primary-hover transition-all duration-200"
-                  >
-                    Start Quiz
-                  </Link>
-                  <button
-                    onClick={() => {
-                      setEditingId(quiz.id);
-                      setEditName(quiz.name);
-                      setEditDescription(quiz.description || "");
-                    }}
-                    className="p-2 rounded-lg text-text-muted hover:text-text-heading hover:bg-bg-surface-alt transition-all duration-200 cursor-pointer"
-                    title="Edit"
-                  >
-                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-                    </svg>
-                  </button>
-                  <button
-                    onClick={() => handleDelete(quiz.id, quiz.name)}
-                    className="p-2 rounded-lg text-text-muted hover:text-error hover:bg-error-bg transition-all duration-200 cursor-pointer"
-                    title="Delete"
-                  >
-                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                    </svg>
-                  </button>
-                </div>
-              </div>
+      {/* Editing quiz modal/inline - simplified as a modal-like overlay for simplicity when editing */}
+      {editingId && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm">
+          <div className="bg-bg-surface rounded-xl p-6 w-full max-w-md shadow-lg border border-border">
+            <h3 className="text-lg font-semibold text-text-heading mb-4">Edit Quiz</h3>
+            <input
+              type="text"
+              value={editName}
+              onChange={(e) => setEditName(e.target.value)}
+              placeholder="Quiz Name"
+              autoFocus
+              className="w-full px-3 py-2 mb-3 rounded-lg border border-border bg-bg-surface-alt/50 text-text-heading focus:outline-none focus:ring-2 focus:ring-primary/30"
+            />
+            <textarea
+              value={editDescription}
+              onChange={(e) => setEditDescription(e.target.value)}
+              placeholder="Description (optional)"
+              rows={3}
+              className="w-full px-3 py-2 mb-4 rounded-lg border border-border bg-bg-surface-alt/50 text-text-heading focus:outline-none focus:ring-2 focus:ring-primary/30 resize-none"
+            />
+            <div className="flex gap-2 justify-end">
+              <button onClick={() => setEditingId(null)} className="px-4 py-2 bg-bg-surface-alt text-text-heading font-medium rounded-md hover:bg-border cursor-pointer">Cancel</button>
+              <button onClick={() => handleRenameQuiz(editingId)} className="px-4 py-2 bg-primary text-white font-medium rounded-md hover:bg-primary-hover cursor-pointer">Save Changes</button>
             </div>
-          ))}
+          </div>
         </div>
       )}
 
-      {/* Import Modal */}
+      {!loading && quizzes.length === 0 && groups.length === 0 && (
+         <div className="text-center py-16">
+            <h3 className="text-lg font-semibold text-text-heading mb-1">No quizzes yet</h3>
+            <p className="text-text-secondary mb-4">Import your first quiz or create a group</p>
+         </div>
+      )}
+
+      {!loading && (
+        <DndContext sensors={sensors} collisionDetection={pointerWithin} onDragStart={handleDragStart} onDragOver={handleDragOver} onDragEnd={handleDragEnd}>
+          <div className="space-y-8">
+            {groupedQuizzes.map(group => (
+              <div key={group.id} className="bg-bg-surface-alt/30 p-4 rounded-xl border border-border-light">
+                <div className="flex items-center justify-between mb-4">
+                  {editingGroupId === group.id ? (
+                     <div className="flex items-center gap-2">
+                       <input autoFocus value={editGroupName} onChange={e => setEditGroupName(e.target.value)} className="px-2 py-1 rounded border border-border bg-bg-surface text-text-heading focus:ring-1 focus:ring-primary" />
+                       <button onClick={() => handleRenameGroup(group.id)} className="text-xs px-2 py-1 bg-primary text-white rounded">Save</button>
+                       <button onClick={() => setEditingGroupId(null)} className="text-xs px-2 py-1 bg-bg-surface text-text-heading rounded border border-border-light">Cancel</button>
+                     </div>
+                  ) : (
+                    <h3 className="text-lg font-semibold text-text-heading">{group.name}</h3>
+                  )}
+                  
+                  <div className="flex items-center gap-2">
+                    <ShareMenu targetType="GROUP" contentId={group.id} classSlug={params.classSlug as string} />
+                    <button onClick={() => { setEditingGroupId(group.id); setEditGroupName(group.name); }} className="p-1.5 rounded-lg text-text-muted hover:text-text-heading hover:bg-bg-surface transition-colors cursor-pointer"><svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg></button>
+                    <button onClick={() => handleDeleteGroup(group.id, group.name)} className="p-1.5 rounded-lg text-text-muted hover:text-error hover:bg-bg-surface transition-colors cursor-pointer"><svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg></button>
+                  </div>
+                </div>
+                
+                <SortableContext id={group.id} items={group.quizzes.map(q => q.id)} strategy={verticalListSortingStrategy}>
+                  <DroppableContainer id={group.id}>
+                     {group.quizzes.length === 0 ? (
+                       <div className="col-span-1 md:col-span-2 text-center py-4 text-text-muted text-sm border-2 border-dashed border-border-light rounded-lg">Drop quizzes here</div>
+                     ) : (
+                       group.quizzes.map(quiz => (
+                         <SortableQuizCard key={quiz.id} quiz={quiz} onEdit={(q: QuizItem) => { setEditingId(q.id); setEditName(q.name); setEditDescription(q.description || ""); }} onDelete={handleDeleteQuiz} classSlug={classSlug} />
+                       ))
+                     )}
+                  </DroppableContainer>
+                </SortableContext>
+              </div>
+            ))}
+
+            {/* Uncategorized */}
+            <div className="bg-bg-surface-alt/30 p-4 rounded-xl border border-border-light">
+               <h3 className="text-lg font-semibold text-text-heading mb-4">Uncategorized</h3>
+               <SortableContext id="uncategorized" items={uncategorizedQuizzes.map(q => q.id)} strategy={verticalListSortingStrategy}>
+                  <DroppableContainer id="uncategorized">
+                     {uncategorizedQuizzes.length === 0 ? (
+                       <div className="col-span-1 md:col-span-2 text-center py-4 text-text-muted text-sm border-2 border-dashed border-border-light rounded-lg">No uncategorized quizzes</div>
+                     ) : (
+                       uncategorizedQuizzes.map(quiz => (
+                         <SortableQuizCard key={quiz.id} quiz={quiz} onEdit={(q: QuizItem) => { setEditingId(q.id); setEditName(q.name); setEditDescription(q.description || ""); }} onDelete={handleDeleteQuiz} classSlug={classSlug} />
+                       ))
+                     )}
+                  </DroppableContainer>
+                </SortableContext>
+            </div>
+          </div>
+
+          <DragOverlay>
+            {activeQuiz ? (
+              <div className="opacity-80 scale-105 shadow-xl rotate-2">
+                 <SortableQuizCard quiz={activeQuiz} onEdit={()=>{}} onDelete={()=>{}} classSlug={classSlug} />
+              </div>
+            ) : null}
+          </DragOverlay>
+        </DndContext>
+      )}
+
       {showImport && (
-        <ImportModal
-          classId={classId}
-          importType="quizzes"
-          onClose={() => setShowImport(false)}
-          onImported={() => {
-            setShowImport(false);
-            window.location.reload();
-          }}
-        />
+        <ImportModal classId={classId} importType="quizzes" onClose={() => setShowImport(false)} onImported={() => { setShowImport(false); window.location.reload(); }} />
       )}
     </div>
   );