From d3d094e4429748005a0f8bfc463c86869cf000bc Mon Sep 17 00:00:00 2001
From: Elijah <elijah.kuntz@gmail.com>
Date: Sun, 28 Jun 2026 12:29:03 -0700
Subject: [PATCH] feat: Add toggle for collapsing quiz topics list

---
 src/components/quizzes/QuizViewer.tsx | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/components/quizzes/QuizViewer.tsx b/src/components/quizzes/QuizViewer.tsx
index da91fa8..90f55f0 100644
--- a/src/components/quizzes/QuizViewer.tsx
+++ b/src/components/quizzes/QuizViewer.tsx
@@ -47,6 +47,7 @@ export function QuizViewer({ quiz, retakeIds, isShared = false, onFinished }: Qu
   
   const [loading, setLoading] = useState(true);
   const [resultsData, setResultsData] = useState<any | null>(null);
+  const [showTopics, setShowTopics] = useState(false);
 
   // Initialize session
   useEffect(() => {
@@ -274,12 +275,26 @@ export function QuizViewer({ quiz, retakeIds, isShared = false, onFinished }: Qu
       
       {/* Title & Meta */}
       <div className="w-full max-w-3xl mb-6 text-left">
-        <h1 className="text-3xl font-bold font-serif text-text-heading mb-2">
-          {quiz.name}
-        </h1>
-        <div className="text-sm tracking-widest text-text-muted font-medium">
-          {categories}
-        </div>
+        <button 
+          onClick={() => setShowTopics(!showTopics)}
+          className="flex items-center gap-2 group cursor-pointer text-left focus:outline-none"
+        >
+          <h1 className="text-3xl font-bold font-serif text-text-heading group-hover:text-primary transition-colors">
+            {quiz.name}
+          </h1>
+          <svg 
+            className={`w-6 h-6 text-text-muted transition-transform duration-200 ${showTopics ? "rotate-180" : ""}`} 
+            fill="none" viewBox="0 0 24 24" stroke="currentColor"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+          </svg>
+        </button>
+        
+        {showTopics && (
+          <div className="text-sm tracking-widest text-text-muted font-medium mt-3 animate-in fade-in slide-in-from-top-2 duration-200 leading-relaxed">
+            {categories}
+          </div>
+        )}
       </div>
 
       {/* Main Unified Card */}