feat: quiz

app/(app)/(reader)/transcriptions/[slug]/page.tsx

@@ -9,6 +9,7 @@ import {
 } from "@/lib/transcriptions";
 import { buildOgMeta, ogForTranscription, extractQuoteFromHl } from "@/lib/og";
 import { PageHeader } from "@/components/layout/page-header";
+import { QuizButton } from "@/components/quiz/quiz-button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { buttonVariants } from "@/components/ui/button";
@@ -95,6 +96,9 @@ export default async function TranscriptionPage({
       />
       <PageHeader
         sticky
+        // With audio, the quiz button sits beside the play control below
+        // instead; without it, the header shows it as on any other page.
+        quiz={!t.audioUrl}
         offline={{
           type: "transcript",
           title: t.name,
@@ -168,7 +172,8 @@ export default async function TranscriptionPage({
 
           {/* Play Audio button */}
           {t.audioUrl && (
-            <div className="w-full md:w-[25%] flex justify-end">
+            <div className="w-full md:w-auto flex flex-wrap items-center justify-end gap-2">
+              <QuizButton path={`/transcriptions/${t.slug}`} className="py-2" />
               <PlayAudioButton
                 audioUrl={t.audioUrl}
                 title={t.name}