refactor: clarify Top Songs definition

- Updated backend  to support
- Renamed frontend section from 'Top Songs' to 'Most Played Songs'
- Ensuring terms are clearly defined throughout the site

backend/routers/songs.py

@@ -23,6 +23,7 @@ def read_songs(
     offset: int = 0, 
     limit: int = Query(default=100, le=1000), 
     vertical: str = Query(default=None, description="Filter by vertical slug"),
+    sort: str = Query(default=None, regex="^(times_played)$"),
     session: Session = Depends(get_session)
 ):
     query = select(Song)
@@ -35,6 +36,9 @@ def read_songs(
         else:
             return []
     
+    if sort == "times_played":
+        query = query.outerjoin(Performance).group_by(Song.id).order_by(func.count(Performance.id).desc())
+            
     songs = session.exec(query.offset(offset).limit(limit)).all()
     return songs
 

frontend/app/[vertical]/page.tsx

@@ -139,13 +139,13 @@ export default async function VerticalPage({ params }: Props) {
                     </section>
                 )}
 
-                {/* Top Songs */}
+                {/* Most Played Songs */}
                 {topSongs.length > 0 && (
                     <section className="space-y-4">
                         <div className="flex items-center justify-between">
-                            <h2 className="text-2xl font-bold tracking-tight">Top Songs</h2>
+                            <h2 className="text-2xl font-bold tracking-tight">Most Played Songs</h2>
                             <Link href={`/${verticalSlug}/songs`} className="text-sm text-muted-foreground hover:text-primary transition-colors flex items-center gap-1">
-                                All songs <ChevronRight className="h-4 w-4" />
+                                View all songs <ChevronRight className="h-4 w-4" />
                             </Link>
                         </div>
                         <div className="space-y-2">