From be7e9111f0410a375251b931825ea912d7999acd Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Sun, 21 Dec 2025 01:45:33 -0800
Subject: [PATCH] feat(frontend): Added Heady Version sorting to song page &
 fixed backend bug

---
 backend/routers/songs.py                      |   6 +-
 frontend/app/songs/[id]/page.tsx              | 107 ++++---------
 .../components/songs/performance-list.tsx     | 151 ++++++++++++++++++
 3 files changed, 184 insertions(+), 80 deletions(-)
 create mode 100644 frontend/components/songs/performance-list.tsx

diff --git a/backend/routers/songs.py b/backend/routers/songs.py
index 052d0c5..3d12213 100644
--- a/backend/routers/songs.py
+++ b/backend/routers/songs.py
@@ -80,7 +80,7 @@ def read_song(song_id: int, session: Session = Depends(get_session)):
                  venue_city = p.show.venue.city
                  venue_state = p.show.venue.state
         
-        stats = rating_stats.get(p.id, {"avg": 0.0, "count": 0})
+        r_stats = rating_stats.get(p.id, {"avg": 0.0, "count": 0})
                  
         perf_dtos.append(PerformanceReadWithShow(
             **p.model_dump(),
@@ -88,8 +88,8 @@ def read_song(song_id: int, session: Session = Depends(get_session)):
             venue_name=venue_name,
             venue_city=venue_city,
             venue_state=venue_state,
-            avg_rating=stats["avg"],
-            total_reviews=stats["count"]
+            avg_rating=r_stats["avg"],
+            total_reviews=r_stats["count"]
         ))
 
     # Merge song data with stats
diff --git a/frontend/app/songs/[id]/page.tsx b/frontend/app/songs/[id]/page.tsx
index 8d1f3d3..f43a8c4 100644
--- a/frontend/app/songs/[id]/page.tsx
+++ b/frontend/app/songs/[id]/page.tsx
@@ -1,15 +1,16 @@
+
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { ArrowLeft, PlayCircle, History } from "lucide-react"
+import { ArrowLeft, PlayCircle, History, Calendar } from "lucide-react"
 import Link from "next/link"
 import { notFound } from "next/navigation"
 import { Badge } from "@/components/ui/badge"
 import { getApiUrl } from "@/lib/api-config"
-import { RatePerformanceDialog } from "@/components/songs/rate-performance-dialog"
 import { CommentSection } from "@/components/social/comment-section"
 import { EntityRating } from "@/components/social/entity-rating"
 import { EntityReviews } from "@/components/reviews/entity-reviews"
 import { SocialWrapper } from "@/components/social/social-wrapper"
+import { PerformanceList } from "@/components/songs/performance-list"
 
 async function getSong(id: string) {
     try {
@@ -32,24 +33,30 @@ export default async function SongDetailPage({ params }: { params: Promise<{ id:
 
     return (
         <div className="flex flex-col gap-6">
-            <div className="flex items-center gap-4">
-                <Link href="/archive">
-                    <Button variant="ghost" size="icon">
-                        <ArrowLeft className="h-4 w-4" />
-                    </Button>
-                </Link>
-                <div>
-                    <h1 className="text-3xl font-bold tracking-tight">{song.title}</h1>
-                    <p className="text-muted-foreground">{song.original_artist}</p>
-                    {song.tags && song.tags.length > 0 && (
-                        <div className="flex flex-wrap gap-2 mt-2">
-                            {song.tags.map((tag: any) => (
-                                <span key={tag.id} className="bg-secondary text-secondary-foreground px-2 py-0.5 rounded-full text-xs font-medium">
-                                    #{tag.name}
-                                </span>
-                            ))}
+            <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+                <div className="flex items-center gap-4">
+                    <Link href="/archive">
+                        <Button variant="ghost" size="icon">
+                            <ArrowLeft className="h-4 w-4" />
+                        </Button>
+                    </Link>
+                    <div>
+                        <div className="flex items-baseline gap-3">
+                            <h1 className="text-3xl font-bold tracking-tight">{song.title}</h1>
+                            {song.original_artist && (
+                                <span className="text-lg text-muted-foreground font-medium">({song.original_artist})</span>
+                            )}
                         </div>
-                    )}
+                        {song.tags && song.tags.length > 0 && (
+                            <div className="flex flex-wrap gap-2 mt-2">
+                                {song.tags.map((tag: any) => (
+                                    <span key={tag.id} className="bg-secondary text-secondary-foreground px-2 py-0.5 rounded-full text-xs font-medium">
+                                        #{tag.name}
+                                    </span>
+                                ))}
+                            </div>
+                        )}
+                    </div>
                 </div>
                 <SocialWrapper type="ratings">
                     <EntityRating entityType="song" entityId={song.id} />
@@ -84,70 +91,16 @@ export default async function SongDetailPage({ params }: { params: Promise<{ id:
                         <CardTitle className="text-sm font-medium text-muted-foreground">Last Played</CardTitle>
                     </CardHeader>
                     <CardContent>
-                        <div className="text-2xl font-bold">
+                        <div className="text-2xl font-bold flex items-center gap-2">
+                            <Calendar className="h-5 w-5 text-primary" />
                             {song.last_played ? new Date(song.last_played).toLocaleDateString() : "Never"}
                         </div>
                     </CardContent>
                 </Card>
             </div>
 
-            <Card>
-                <CardHeader>
-                    <CardTitle>Performance History</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    {song.performances && song.performances.length > 0 ? (
-                        <div className="space-y-4">
-                            {song.performances.map((perf: any) => (
-                                <div key={perf.id} className="flex items-center justify-between border-b pb-4 last:border-0 last:pb-0">
-                                    <div className="space-y-1">
-                                        <Link href={`/shows/${perf.show_id}`} className="font-medium hover:underline text-primary">
-                                            {new Date(perf.show_date).toLocaleDateString(undefined, {
-                                                weekday: 'long',
-                                                year: 'numeric',
-                                                month: 'long',
-                                                day: 'numeric'
-                                            })}
-                                        </Link>
-                                        <div className="text-sm text-muted-foreground flex items-center gap-2">
-                                            <span>
-                                                {perf.venue_name}, {perf.venue_city} {perf.venue_state}
-                                            </span>
-                                        </div>
-                                        {perf.notes && (
-                                            <p className="text-sm italic text-muted-foreground/80">"{perf.notes}"</p>
-                                        )}
-                                    </div>
-                                    <div className="flex flex-col items-end gap-1">
-                                        <div className="flex items-center gap-2">
-                                            {perf.avg_rating > 0 && (
-                                                <Badge variant="secondary" className="bg-yellow-500/10 text-yellow-600 hover:bg-yellow-500/20 border-yellow-500/20">
-                                                    ★ {perf.avg_rating.toFixed(1)}
-                                                </Badge>
-                                            )}
-                                            <RatePerformanceDialog
-                                                performanceId={perf.id}
-                                                performanceDate={new Date(perf.show_date).toLocaleDateString()}
-                                                venue={perf.venue_name}
-                                                // We don't have *user's* rating in 'perf' object yet, only avg.
-                                                // So currentRating prop logic needs fetching user rating.
-                                                // For now, pass 0 or undefined.
-                                                onRatingSubmit={() => {
-                                                    // Trigger refresh if possible, or just ignore.
-                                                    // Ideal: reload song data.
-                                                    window.location.reload()
-                                                }}
-                                            />
-                                        </div>
-                                    </div>
-                                </div>
-                            ))}
-                        </div>
-                    ) : (
-                        <p className="text-muted-foreground text-sm">No performances recorded.</p>
-                    )}
-                </CardContent>
-            </Card>
+            {/* Performance List Component (Handles Client Sorting) */}
+            <PerformanceList performances={song.performances || []} songTitle={song.title} />
 
             <div className="grid gap-6 md:grid-cols-2">
                 <SocialWrapper type="comments">
diff --git a/frontend/components/songs/performance-list.tsx b/frontend/components/songs/performance-list.tsx
new file mode 100644
index 0000000..60940ae
--- /dev/null
+++ b/frontend/components/songs/performance-list.tsx
@@ -0,0 +1,151 @@
+"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { RatePerformanceDialog } from "@/components/songs/rate-performance-dialog"
+import { ArrowUpDown, Star, Calendar, Music } from "lucide-react"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+
+export interface Performance {
+    id: number
+    show_id: number
+    song_id: number
+    position: number
+    set_name: string | null
+    segue: boolean
+    notes: string | null
+    show_date: string
+    venue_name: string
+    venue_city: string
+    venue_state: string | null
+    avg_rating: number
+    total_reviews: number
+}
+
+interface PerformanceListProps {
+    performances: Performance[]
+    songTitle?: string
+}
+
+type SortOption = "date_desc" | "date_asc" | "rating_desc"
+
+export function PerformanceList({ performances, songTitle }: PerformanceListProps) {
+    const [sort, setSort] = useState<SortOption>("date_desc")
+
+    const sortedPerformances = [...performances].sort((a, b) => {
+        if (sort === "date_desc") {
+            return new Date(b.show_date).getTime() - new Date(a.show_date).getTime()
+        }
+        if (sort === "date_asc") {
+            return new Date(a.show_date).getTime() - new Date(b.show_date).getTime()
+        }
+        if (sort === "rating_desc") {
+            // Primary: Rating, Secondary: Review Count, Tertiary: Date
+            if (b.avg_rating !== a.avg_rating) return b.avg_rating - a.avg_rating
+            if (b.total_reviews !== a.total_reviews) return b.total_reviews - a.total_reviews
+            return new Date(b.show_date).getTime() - new Date(a.show_date).getTime()
+        }
+        return 0
+    })
+
+    return (
+        <Card>
+            <CardHeader className="flex flex-row items-center justify-between pb-4">
+                <CardTitle className="text-lg font-semibold flex items-center gap-2">
+                    <Music className="h-5 w-5 text-primary" />
+                    Performance History
+                    <Badge variant="secondary" className="ml-2 font-normal">
+                        {performances.length}
+                    </Badge>
+                </CardTitle>
+                <div className="flex items-center gap-2">
+                    <span className="text-sm text-muted-foreground hidden sm:inline-block">Sort by:</span>
+                    <Select value={sort} onValueChange={(v) => setSort(v as SortOption)}>
+                        <SelectTrigger className="w-[160px] h-8 text-xs">
+                            <SelectValue placeholder="Sort order" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="date_desc">Newest First</SelectItem>
+                            <SelectItem value="date_asc">Oldest First</SelectItem>
+                            <SelectItem value="rating_desc">Highest Rated</SelectItem>
+                        </SelectContent>
+                    </Select>
+                </div>
+            </CardHeader>
+            <CardContent>
+                {sortedPerformances.length > 0 ? (
+                    <div className="space-y-1">
+                        {sortedPerformances.map((perf) => (
+                            <div
+                                key={perf.id}
+                                className="flex flex-col sm:flex-row sm:items-center justify-between p-3 rounded-lg hover:bg-muted/50 transition-colors border border-transparent hover:border-border"
+                            >
+                                <div className="space-y-1 flex-1 min-w-0 pr-4">
+                                    <div className="flex items-baseline gap-2 flex-wrap">
+                                        <Link
+                                            href={`/shows/${perf.show_id}`}
+                                            className="font-medium hover:underline text-primary truncate"
+                                        >
+                                            {new Date(perf.show_date).toLocaleDateString(undefined, {
+                                                year: 'numeric',
+                                                month: 'short',
+                                                day: 'numeric',
+                                                weekday: 'short'
+                                            })}
+                                        </Link>
+                                        <span className="text-xs text-muted-foreground uppercase tracking-wider font-mono">
+                                            {perf.set_name || "Set ?"}
+                                        </span>
+                                    </div>
+                                    <div className="text-sm text-muted-foreground truncate">
+                                        {perf.venue_name} • {perf.venue_city}{perf.venue_state ? `, ${perf.venue_state}` : ""}
+                                    </div>
+                                    {perf.notes && (
+                                        <p className="text-sm italic text-muted-foreground/90 line-clamp-2">
+                                            "{perf.notes}"
+                                        </p>
+                                    )}
+                                </div>
+                                <div className="flex items-center gap-3 mt-3 sm:mt-0 shrink-0">
+                                    {perf.avg_rating > 0 && (
+                                        <div className="flex flex-col items-end">
+                                            <Badge
+                                                variant="outline"
+                                                className={`
+                                                    gap-1 px-2 py-1
+                                                    ${perf.avg_rating >= 4.5 ? 'border-yellow-500/50 bg-yellow-500/10 text-yellow-600' : 'border-muted'}
+                                                `}
+                                            >
+                                                <Star className={`h-3 w-3 ${perf.avg_rating >= 4.5 ? 'fill-yellow-600' : ''}`} />
+                                                {perf.avg_rating.toFixed(1)}
+                                            </Badge>
+                                            <span className="text-[10px] text-muted-foreground mt-0.5">
+                                                {perf.total_reviews} review{perf.total_reviews !== 1 ? 's' : ''}
+                                            </span>
+                                        </div>
+                                    )}
+                                    <RatePerformanceDialog
+                                        performanceId={perf.id}
+                                        performanceDate={new Date(perf.show_date).toLocaleDateString()}
+                                        venue={perf.venue_name}
+                                        onRatingSubmit={() => {
+                                            // Optional: trigger refresh
+                                            window.location.reload()
+                                        }}
+                                    />
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                ) : (
+                    <div className="text-center py-10 text-muted-foreground text-sm">
+                        No performances recorded yet.
+                    </div>
+                )}
+            </CardContent>
+        </Card>
+    )
+}