From 06dc8889b5e5f85db433be80c223629f8be118f2 Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Sun, 21 Dec 2025 15:44:09 -0800
Subject: [PATCH] feat: Add Heady Versions (performances) page

- /performances page with top-rated performance leaderboard
- Added to Browse dropdown in navbar
- Updated home page CTA to feature Heady Versions
- Medal icons for top 3 performances
---
 frontend/app/page.tsx                 |   6 +-
 frontend/app/performances/page.tsx    | 142 ++++++++++++++++++++++++++
 frontend/components/layout/navbar.tsx |   3 +
 3 files changed, 148 insertions(+), 3 deletions(-)
 create mode 100644 frontend/app/performances/page.tsx

diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index 15d343d..c3458e6 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -86,13 +86,13 @@ export default async function Home() {
         <p className="max-w-[600px] text-lg text-muted-foreground">
           The ultimate community archive for Goose history.
           <br />
-          Discover shows, rate performances, and connect with fans.
+          Discover shows, rate performances, and find the <strong>heady versions</strong>.
         </p>
         <div className="flex gap-4">
-          <Link href="/leaderboards">
+          <Link href="/performances">
             <Button size="lg" className="gap-2">
               <Trophy className="h-4 w-4" />
-              View Leaderboards
+              Heady Versions
             </Button>
           </Link>
           <Link href="/shows">
diff --git a/frontend/app/performances/page.tsx b/frontend/app/performances/page.tsx
new file mode 100644
index 0000000..1efed07
--- /dev/null
+++ b/frontend/app/performances/page.tsx
@@ -0,0 +1,142 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Trophy, Star, Calendar, MapPin, ExternalLink } from "lucide-react"
+import Link from "next/link"
+import { getApiUrl } from "@/lib/api-config"
+
+interface TopPerformance {
+    performance: {
+        id: number
+        position: number
+        set_name: string
+        notes?: string
+        youtube_link?: string
+    }
+    song: {
+        id: number
+        title: string
+    }
+    show: {
+        id: number
+        date: string
+    }
+    venue: {
+        id: number
+        name: string
+        city: string
+        state?: string
+    }
+    avg_score: number
+    rating_count: number
+}
+
+async function getTopPerformances(): Promise<TopPerformance[]> {
+    try {
+        const res = await fetch(`${getApiUrl()}/leaderboards/performances/top?limit=50`, {
+            cache: 'no-store'
+        })
+        if (!res.ok) return []
+        return res.json()
+    } catch (e) {
+        console.error('Failed to fetch top performances:', e)
+        return []
+    }
+}
+
+export default async function PerformancesPage() {
+    const performances = await getTopPerformances()
+
+    return (
+        <div className="flex flex-col gap-6">
+            <div className="text-center py-8">
+                <h1 className="text-4xl font-bold tracking-tight flex items-center justify-center gap-3">
+                    <Trophy className="h-10 w-10 text-yellow-500" />
+                    Heady Versions
+                </h1>
+                <p className="text-muted-foreground mt-2 text-lg">
+                    The top-rated performances as voted by the community
+                </p>
+            </div>
+
+            {performances.length > 0 ? (
+                <div className="space-y-3">
+                    {performances.map((item, index) => (
+                        <Link key={item.performance.id} href={`/performances/${item.performance.id}`}>
+                            <Card className={`hover:bg-accent/50 transition-colors cursor-pointer ${index === 0 ? 'border-2 border-yellow-500 bg-gradient-to-r from-yellow-50 to-orange-50 dark:from-yellow-900/10 dark:to-orange-900/10' :
+                                    index === 1 ? 'border-gray-300 dark:border-gray-600' :
+                                        index === 2 ? 'border-amber-600 dark:border-amber-700' : ''
+                                }`}>
+                                <CardContent className="p-4">
+                                    <div className="flex items-center gap-4">
+                                        {/* Rank */}
+                                        <div className="text-3xl font-bold w-12 text-center shrink-0">
+                                            {index === 0 ? "🥇" : index === 1 ? "🥈" : index === 2 ? "🥉" : <span className="text-muted-foreground">{index + 1}</span>}
+                                        </div>
+
+                                        {/* Song & Show Info */}
+                                        <div className="flex-1 min-w-0">
+                                            <div className="flex items-center gap-2 flex-wrap">
+                                                <span className="font-bold text-lg truncate">{item.song.title}</span>
+                                                {item.performance.youtube_link && (
+                                                    <Badge variant="outline" className="text-red-500 border-red-300">
+                                                        <ExternalLink className="h-3 w-3 mr-1" />
+                                                        Video
+                                                    </Badge>
+                                                )}
+                                            </div>
+                                            <div className="flex items-center gap-4 text-sm text-muted-foreground mt-1">
+                                                <span className="flex items-center gap-1">
+                                                    <Calendar className="h-4 w-4" />
+                                                    {new Date(item.show.date).toLocaleDateString('en-US', {
+                                                        month: 'short',
+                                                        day: 'numeric',
+                                                        year: 'numeric'
+                                                    })}
+                                                </span>
+                                                <span className="flex items-center gap-1">
+                                                    <MapPin className="h-4 w-4" />
+                                                    {item.venue.name}
+                                                    {item.venue.city && ` - ${item.venue.city}`}
+                                                    {item.venue.state && `, ${item.venue.state}`}
+                                                </span>
+                                            </div>
+                                            {item.performance.notes && (
+                                                <p className="text-xs text-primary mt-1 italic">
+                                                    {item.performance.notes}
+                                                </p>
+                                            )}
+                                        </div>
+
+                                        {/* Rating */}
+                                        <div className="text-right shrink-0">
+                                            <div className="flex items-center gap-1 text-yellow-600">
+                                                <Star className="h-5 w-5 fill-current" />
+                                                <span className="font-bold text-xl">{item.avg_score.toFixed(1)}</span>
+                                            </div>
+                                            <div className="text-xs text-muted-foreground">
+                                                {item.rating_count} {item.rating_count === 1 ? 'rating' : 'ratings'}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </CardContent>
+                            </Card>
+                        </Link>
+                    ))}
+                </div>
+            ) : (
+                <Card className="p-12 text-center">
+                    <CardContent>
+                        <Trophy className="h-16 w-16 mx-auto mb-4 text-muted-foreground/30" />
+                        <h2 className="text-xl font-bold">No rated performances yet</h2>
+                        <p className="text-muted-foreground mt-2">
+                            Be the first to rate a performance! Browse shows and rate your favorite jams.
+                        </p>
+                        <Link href="/shows" className="text-primary hover:underline mt-4 inline-block">
+                            Browse Shows →
+                        </Link>
+                    </CardContent>
+                </Card>
+            )}
+        </div>
+    )
+}
diff --git a/frontend/components/layout/navbar.tsx b/frontend/components/layout/navbar.tsx
index 0e705a8..29205ac 100644
--- a/frontend/components/layout/navbar.tsx
+++ b/frontend/components/layout/navbar.tsx
@@ -45,6 +45,9 @@ export function Navbar() {
                                 <Link href="/songs">
                                     <DropdownMenuItem>Songs</DropdownMenuItem>
                                 </Link>
+                                <Link href="/performances">
+                                    <DropdownMenuItem>Top Performances</DropdownMenuItem>
+                                </Link>
                                 <Link href="/tours">
                                     <DropdownMenuItem>Tours</DropdownMenuItem>
                                 </Link>