From 4795d624cb2db65704631892f795407c4f84ff6f Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Wed, 31 Dec 2025 09:29:51 -0800
Subject: [PATCH] feat: show artist (vertical) on venue detail page

---
 frontend/app/venues/[slug]/page.tsx | 47 ++++++++++++++++++++++++++++-
 1 file changed, 46 insertions(+), 1 deletion(-)

diff --git a/frontend/app/venues/[slug]/page.tsx b/frontend/app/venues/[slug]/page.tsx
index ad636b3..9306b68 100644
--- a/frontend/app/venues/[slug]/page.tsx
+++ b/frontend/app/venues/[slug]/page.tsx
@@ -23,9 +23,49 @@ interface Show {
     slug?: string
     date: string
     tour?: { name: string }
+    vertical?: { name: string; slug: string }
     performances?: any[]
 }
 
+// ... (skipping to render loop)
+
+{
+    shows.map((show) => (
+        <Link
+            key={show.id}
+            href={show.vertical ? `/${show.vertical.slug}/shows/${show.slug}` : `/shows/${show.slug}`}
+            className="block group"
+        >
+            <div className="flex items-center justify-between p-4 rounded-lg border bg-card hover:bg-accent transition-colors">
+                <div className="space-y-1">
+                    <div className="font-semibold flex items-center gap-2">
+                        <Calendar className="h-4 w-4 text-muted-foreground" />
+                        <span>{new Date(show.date).toLocaleDateString(undefined, {
+                            weekday: 'long',
+                            year: 'numeric',
+                            month: 'long',
+                            day: 'numeric'
+                        })}</span>
+                        {show.vertical && (
+                            <span className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80 ml-2">
+                                {show.vertical.name}
+                            </span>
+                        )}
+                    </div>
+                    {show.tour?.name && (
+                        <div className="text-sm text-muted-foreground ml-6">
+                            {show.tour.name}
+                        </div>
+                    )}
+                </div>
+                <div className="text-right text-sm text-muted-foreground">
+                    {show.performances?.length || 0} songs
+                </div>
+            </div>
+        </Link>
+    ))
+}
+
 export default function VenueDetailPage() {
     const params = useParams()
     const slug = params.slug as string
@@ -138,7 +178,7 @@ export default function VenueDetailPage() {
                         {shows.length > 0 ? (
                             <div className="space-y-2">
                                 {shows.map((show) => (
-                                    <Link key={show.id} href={`/shows/${show.slug}`} className="block group">
+                                    <Link key={show.id} href={show.vertical ? `/${show.vertical.slug}/shows/${show.slug}` : `/shows/${show.slug}`} className="block group">
                                         <div className="flex items-center justify-between p-3 rounded-md hover:bg-muted/50 transition-colors border">
                                             <div className="flex items-center gap-3">
                                                 <Calendar className="h-4 w-4 text-muted-foreground" />
@@ -150,6 +190,11 @@ export default function VenueDetailPage() {
                                                         day: "numeric"
                                                     })}
                                                 </span>
+                                                {show.vertical && (
+                                                    <span className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold bg-primary text-primary-foreground">
+                                                        {show.vertical.name}
+                                                    </span>
+                                                )}
                                             </div>
                                             <div className="flex items-center gap-4">
                                                 {show.tour && (