audio player respects group context

app/(app)/(reader)/transcriptions/year/[year]/year-browser.tsx

@@ -7,6 +7,7 @@ import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 import { Calendar, ChevronRight, Clock, MapPin } from "lucide-react";
+import { TranscriptQueue } from "@/components/audio-player/transcript-queue";
 import { PlayAudioButton } from "@/app/(app)/(reader)/transcriptions/[slug]/play-audio-button";
 
 type TranscriptionItem = {
@@ -169,6 +170,12 @@ export function TranscriptionYearBrowser({
     return groups;
   }, [transcriptions]);
 
+  // Display order — month by month — is the order Next / Previous play in.
+  const queueItems = useMemo(
+    () => monthGroups.flatMap((g) => g.items),
+    [monthGroups],
+  );
+
   const lectureCount = transcriptions.filter(
     (t) => t.type === "lecture",
   ).length;
@@ -202,19 +209,21 @@ export function TranscriptionYearBrowser({
             </p>
           </div>
         ) : (
-          <Card className="overflow-hidden">
-            <CardContent className="p-0 divide-y divide-border">
-              {monthGroups.map((mg, i) => (
-                <MonthSection
-                  key={mg.month}
-                  month={mg.month}
-                  label={mg.label}
-                  items={mg.items}
-                  defaultOpen={i === 0 || monthGroups.length <= 3}
-                />
-              ))}
-            </CardContent>
-          </Card>
+          <TranscriptQueue items={queueItems}>
+            <Card className="overflow-hidden">
+              <CardContent className="p-0 divide-y divide-border">
+                {monthGroups.map((mg, i) => (
+                  <MonthSection
+                    key={mg.month}
+                    month={mg.month}
+                    label={mg.label}
+                    items={mg.items}
+                    defaultOpen={i === 0 || monthGroups.length <= 3}
+                  />
+                ))}
+              </CardContent>
+            </Card>
+          </TranscriptQueue>
         )}
       </main>
     </>