feat: implement bff layer

app/transcriptions/[slug]/play-audio-button.tsx

@@ -67,7 +67,11 @@ export function PlayAudioButton({
         aria-label={isThisPlaying ? "Pause" : "Play audio"}
       >
         {isThisPlaying ? (
-          <Pause className="size-3.5" />
+          <AudioWaveAnimation
+            paused={false}
+            colorClassName="bg-primary-foreground"
+            size="sm"
+          />
         ) : (
           <Play className="size-3.5 ml-0.5" />
         )}

app/transcriptions/place/[place]/page.tsx

@@ -8,7 +8,8 @@ import { buildOgMeta } from "@/lib/og";
 import { PageHeader } from "@/components/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import { Clock } from "lucide-react";
+import { Clock, MapPin } from "lucide-react";
+import { PlayAudioButton } from "@/app/transcriptions/[slug]/play-audio-button";
 
 export async function generateMetadata({
   params,
@@ -60,7 +61,7 @@ export default async function TranscriptionsByPlacePage({
               <Link
                 key={t.slug}
                 href={`/transcriptions/${t.slug}`}
-                className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-3.5 gap-1 sm:gap-4 hover:bg-muted transition-colors"
+                className="flex items-center px-5 py-3.5 gap-3 hover:bg-muted transition-colors"
               >
                 <div className="min-w-0 flex-1">
                   <div className="flex items-center gap-2 flex-wrap">
@@ -87,6 +88,16 @@ export default async function TranscriptionsByPlacePage({
                     )}
                   </div>
                 </div>
+                {t.audioUrl && (
+                  <PlayAudioButton
+                    audioUrl={t.audioUrl}
+                    title={t.name}
+                    subtitle={[t.date, t.place].filter(Boolean).join(" · ")}
+                    sourceUrl={`/transcriptions/${t.slug}`}
+                    type={t.type}
+                    variant="compact"
+                  />
+                )}
               </Link>
             ))}
           </CardContent>

app/transcriptions/type/[type]/type-browser.tsx

@@ -8,6 +8,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { ReadingSettings } from "@/components/reading-settings";
 import { cn } from "@/lib/utils";
 import { ChevronLeft, ChevronRight, Menu, Clock, MapPin } from "lucide-react";
+import { PlayAudioButton } from "@/app/transcriptions/[slug]/play-audio-button";
 import {
   Drawer,
   DrawerClose,
@@ -34,6 +35,7 @@ export type TranscriptionItem = {
   reference: string | null;
   durationMinutes: number | null;
   participants: string[];
+  audioUrl: string | null;
 };
 
 type YearGroup = {
@@ -364,7 +366,7 @@ function MonthSection({
             <li key={t.slug}>
               <Link
                 href={`/transcriptions/${t.slug}`}
-                className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 pl-12 py-3.5 gap-1 sm:gap-4 hover:bg-muted transition-colors"
+                className="flex items-center px-5 pl-12 py-3.5 gap-3 hover:bg-muted transition-colors"
               >
                 <div className="min-w-0 flex-1">
                   <div className="flex items-center gap-2 flex-wrap">
@@ -396,6 +398,16 @@ function MonthSection({
                     )}
                   </div>
                 </div>
+                {t.audioUrl && (
+                  <PlayAudioButton
+                    audioUrl={t.audioUrl}
+                    title={t.name}
+                    subtitle={[t.date, t.place].filter(Boolean).join(" · ")}
+                    sourceUrl={`/transcriptions/${t.slug}`}
+                    type={t.type}
+                    variant="compact"
+                  />
+                )}
               </Link>
             </li>
           ))}