From 115c411ebc1f17cc4ef3d29f66b516e22527eb24 Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Wed, 24 Dec 2025 13:49:45 -0800
Subject: [PATCH] refactor: show page right column with Listen On, Tour,
 Attendance, Rating cards

---
 frontend/app/shows/[slug]/page.tsx | 157 +++++++++++++++++------------
 1 file changed, 91 insertions(+), 66 deletions(-)

diff --git a/frontend/app/shows/[slug]/page.tsx b/frontend/app/shows/[slug]/page.tsx
index c87dffc..94c7b3f 100644
--- a/frontend/app/shows/[slug]/page.tsx
+++ b/frontend/app/shows/[slug]/page.tsx
@@ -93,40 +93,14 @@ export default async function ShowDetailPage({ params }: { params: Promise<{ slu
                             {show.tour && (
                                 <p className="text-muted-foreground flex items-center gap-2">
                                     <Music2 className="h-4 w-4" />
-                                    {show.tour.name}
+                                    <Link href={`/tours/${show.tour.slug || show.tour.id}`} className="hover:underline">
+                                        {show.tour.name}
+                                    </Link>
                                 </p>
                             )}
-
-                            {/* Audio Links */}
-                            {(show.bandcamp_link || show.nugs_link) && (
-                                <div className="flex items-center gap-2">
-                                    {show.bandcamp_link && (
-                                        <a href={show.bandcamp_link} target="_blank" rel="noopener noreferrer">
-                                            <Button variant="outline" size="sm" className="h-7 text-xs gap-1.5">
-                                                <Disc className="h-3.5 w-3.5" />
-                                                Bandcamp
-                                            </Button>
-                                        </a>
-                                    )}
-                                    {show.nugs_link && (
-                                        <a href={show.nugs_link} target="_blank" rel="noopener noreferrer">
-                                            <Button variant="outline" size="sm" className="h-7 text-xs gap-1.5">
-                                                <PlayCircle className="h-3.5 w-3.5" />
-                                                Nugs.net
-                                            </Button>
-                                        </a>
-                                    )}
-                                </div>
-                            )}
                         </div>
                     </div>
                 </div>
-                <div className="flex items-center gap-4">
-                    <ShowAttendance showId={show.id} />
-                    <SocialWrapper type="ratings">
-                        <EntityRating entityType="show" entityId={show.id} />
-                    </SocialWrapper>
-                </div>
             </div>
 
             {show.notes && (
@@ -135,38 +109,6 @@ export default async function ShowDetailPage({ params }: { params: Promise<{ slu
                 </div>
             )}
 
-            {/* External Links */}
-            {(show.nugs_link || show.bandcamp_link) && (
-                <div className="flex flex-wrap gap-3">
-                    {show.nugs_link && (
-                        <a
-                            href={show.nugs_link}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-orange-500/10 border border-orange-500/30 text-orange-600 dark:text-orange-400 hover:bg-orange-500/20 transition-colors text-sm font-medium"
-                        >
-                            <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
-                                <circle cx="12" cy="12" r="10" />
-                            </svg>
-                            Listen on Nugs.net
-                        </a>
-                    )}
-                    {show.bandcamp_link && (
-                        <a
-                            href={show.bandcamp_link}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-blue-500/10 border border-blue-500/30 text-blue-600 dark:text-blue-400 hover:bg-blue-500/20 transition-colors text-sm font-medium"
-                        >
-                            <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
-                                <path d="M0 18.75l7.437-13.5H24l-7.438 13.5H0z" />
-                            </svg>
-                            Listen on Bandcamp
-                        </a>
-                    )}
-                </div>
-            )}
-
             <div className="grid gap-6 md:grid-cols-[2fr_1fr]">
                 <div className="flex flex-col gap-6">
                     {/* Full Show Video */}
@@ -315,12 +257,13 @@ export default async function ShowDetailPage({ params }: { params: Promise<{ slu
                     </SocialWrapper>
                 </div>
 
-                <div className="flex flex-col gap-6">
+                <div className="flex flex-col gap-4">
+                    {/* Venue Info Card */}
                     <Card>
-                        <CardHeader>
-                            <CardTitle>Venue Info</CardTitle>
+                        <CardHeader className="pb-2">
+                            <CardTitle className="text-sm">Venue</CardTitle>
                         </CardHeader>
-                        <CardContent className="space-y-2">
+                        <CardContent className="space-y-1">
                             {show.venue ? (
                                 <>
                                     <div className="flex items-center gap-2">
@@ -338,8 +281,90 @@ export default async function ShowDetailPage({ params }: { params: Promise<{ slu
                             )}
                         </CardContent>
                     </Card>
+
+                    {/* Listen On Card */}
+                    {(show.nugs_link || show.bandcamp_link) && (
+                        <Card>
+                            <CardHeader className="pb-2">
+                                <CardTitle className="text-sm">Listen On</CardTitle>
+                            </CardHeader>
+                            <CardContent className="space-y-2">
+                                {show.nugs_link && (
+                                    <a
+                                        href={show.nugs_link}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className="flex items-center gap-3 p-2 rounded-lg bg-orange-500/10 hover:bg-orange-500/20 border border-orange-500/20 transition-colors"
+                                    >
+                                        <PlayCircle className="h-5 w-5 text-orange-500" />
+                                        <div>
+                                            <p className="font-medium text-sm">Nugs.net</p>
+                                            <p className="text-xs text-muted-foreground">Stream or download</p>
+                                        </div>
+                                    </a>
+                                )}
+                                {show.bandcamp_link && (
+                                    <a
+                                        href={show.bandcamp_link}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className="flex items-center gap-3 p-2 rounded-lg bg-blue-500/10 hover:bg-blue-500/20 border border-blue-500/20 transition-colors"
+                                    >
+                                        <Disc className="h-5 w-5 text-blue-500" />
+                                        <div>
+                                            <p className="font-medium text-sm">Bandcamp</p>
+                                            <p className="text-xs text-muted-foreground">Official release</p>
+                                        </div>
+                                    </a>
+                                )}
+                            </CardContent>
+                        </Card>
+                    )}
+
+                    {/* Tour Info */}
+                    {show.tour && (
+                        <Card>
+                            <CardHeader className="pb-2">
+                                <CardTitle className="text-sm">Tour</CardTitle>
+                            </CardHeader>
+                            <CardContent>
+                                <div className="flex items-center gap-2">
+                                    <Music2 className="h-4 w-4 text-muted-foreground" />
+                                    <Link href={`/tours/${show.tour.slug || show.tour.id}`} className="font-medium hover:underline hover:text-primary">
+                                        {show.tour.name}
+                                    </Link>
+                                </div>
+                            </CardContent>
+                        </Card>
+                    )}
+
+                    {/* Attendance */}
+                    <Card>
+                        <CardHeader className="pb-2">
+                            <CardTitle className="text-sm">I Was There</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            <ShowAttendance showId={show.id} />
+                        </CardContent>
+                    </Card>
+
+                    {/* Rate This Show */}
+                    <Card>
+                        <CardHeader className="pb-2">
+                            <CardTitle className="text-sm">Rate This Show</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            <SocialWrapper type="ratings">
+                                <EntityRating
+                                    entityType="show"
+                                    entityId={show.id}
+                                    compact={false}
+                                />
+                            </SocialWrapper>
+                        </CardContent>
+                    </Card>
                 </div>
             </div>
-        </div>
+        </div >
     )
 }