quiz grouping

app/(app)/quizzes/quizzes-list.tsx

@@ -9,19 +9,13 @@
  */
 
 import { useEffect, useMemo, useState } from "react";
-import Link from "next/link";
-import { ClipboardCheck } from "lucide-react";
 import { useSignedInPage } from "@/components/auth/use-signed-in-page";
-import { quiz, quizActionLabel, type QuizCard } from "@/lib/quiz";
+import { quiz, type QuizCard } from "@/lib/quiz";
+import { groupQuizzes } from "@/lib/quiz-groups";
+import { QuizGrid } from "@/components/quiz/quiz-grid";
+import { GroupedQuizzes } from "@/components/quiz/grouped-quizzes";
 import { cn } from "@/lib/utils";
 
-const KIND: Record<QuizCard["target_kind"], string> = {
-  chapter: "Book chapter",
-  lecture: "Lecture",
-  conversation: "Conversation",
-  standalone: "Quiz",
-};
-
 type Filter = "all" | "todo" | "done";
 
 export function QuizzesList() {
@@ -102,52 +96,10 @@ export function QuizzesList() {
             ? "No quizzes yet — check back soon."
             : "Nothing here."}
         </p>
+      ) : filter !== "all" ? (
+        <QuizGrid quizzes={shown} />
       ) : (
-        // minmax(0,1fr) + min-w-0: grid items otherwise refuse to shrink
-        // below their content, so one long word pushes a card off-screen.
-        <ul className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-          {shown.map((q) => {
-            const done = q.my.state === "completed";
-            return (
-              <li key={q.id} className="min-w-0">
-                <Link
-                  href={`/quizzes/${q.id}`}
-                  className="flex h-full min-w-0 flex-col rounded-2xl border border-border bg-card p-4 transition-colors hover:border-primary/40 hover:bg-muted/30"
-                >
-                  <p className="text-xs font-medium text-primary">
-                    {KIND[q.target_kind]}
-                  </p>
-                  <p className="mt-1 break-words font-semibold leading-snug text-foreground [overflow-wrap:anywhere]">
-                    {q.title}
-                  </p>
-                  {q.target_title && (
-                    <p className="mt-0.5 truncate text-sm text-muted-foreground">
-                      {q.target_title}
-                    </p>
-                  )}
-                  <div className="mt-auto flex flex-wrap items-center justify-between gap-x-3 gap-y-1 pt-4 text-xs">
-                    <span className="text-muted-foreground">
-                      {q.question_count}{" "}
-                      {q.question_count === 1 ? "question" : "questions"}
-                    </span>
-                    <span
-                      className={cn(
-                        "inline-flex items-center gap-1 whitespace-nowrap font-medium",
-                        done ? "text-muted-foreground" : "text-primary",
-                      )}
-                    >
-                      <ClipboardCheck className="size-3.5" />
-                      {quizActionLabel(q.my.state)}
-                      {done &&
-                        q.my.score !== undefined &&
-                        ` · ${q.my.score}/${q.my.total}`}
-                    </span>
-                  </div>
-                </Link>
-              </li>
-            );
-          })}
-        </ul>
+        <GroupedQuizzes sections={groupQuizzes(shown)} />
       )}
     </main>
   );