Numeroud bug fixes, UI improvements, small animations

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

@@ -56,6 +56,24 @@ export default function QuizStudyPage() {
   const [loading, setLoading] = useState(true);
   const [view, setView] = useState<"history" | "take">("take");
   const [retakeIds, setRetakeIds] = useState<string[] | null>(null);
+  const [restartKey, setRestartKey] = useState(0);
+  
+  async function handleRestart() {
+    if (!quiz) return;
+    
+    // Clear progress in database
+    await fetch("/api/progress", {
+      method: "DELETE",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ contentType: "QUIZ", contentId: quiz.id, mode: "SEQUENTIAL" })
+    }).catch(() => {});
+    
+    // Clear locally and force remount
+    setQuiz({ ...quiz, progress: [] });
+    setRetakeIds(null);
+    setRestartKey(prev => prev + 1);
+    setView("take");
+  }
   
   const fetchQuizAndAttempts = useCallback(async () => {
     try {
@@ -121,7 +139,18 @@ export default function QuizStudyPage() {
         </div>
 
         {/* View toggle & Share */}
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-2 md:gap-4">
+          {view === "take" && (
+            <button
+              onClick={handleRestart}
+              className="p-1.5 rounded-lg text-text-muted hover:text-text-heading hover:bg-bg-surface-alt transition-all duration-200 cursor-pointer"
+              title="Restart Quiz"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+              </svg>
+            </button>
+          )}
           <ShareMenu targetType="QUIZ" contentId={quiz.id} classSlug={classSlug} />
           
           {attempts.length > 0 && (
@@ -163,6 +192,7 @@ export default function QuizStudyPage() {
         />
       ) : (
         <QuizViewer 
+          key={restartKey}
           quiz={quiz} 
           retakeIds={retakeIds}
           onFinished={() => {