feat: implement bff layer

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>