From 1ece5a037e4f981af27dc2d0f4d9338c10941147 Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Sun, 21 Dec 2025 02:29:47 -0800
Subject: [PATCH] feat(frontend): Add smooth page transitions and animations

---
 frontend/app/leaderboards/page.tsx | 183 ++++++++++++++++++-----------
 frontend/app/profile/page.tsx      |  70 +++++++----
 2 files changed, 165 insertions(+), 88 deletions(-)

diff --git a/frontend/app/leaderboards/page.tsx b/frontend/app/leaderboards/page.tsx
index 36c9dda..571074c 100644
--- a/frontend/app/leaderboards/page.tsx
+++ b/frontend/app/leaderboards/page.tsx
@@ -8,6 +8,7 @@ import Link from "next/link"
 import { Star, MapPin, Music, User, Trophy, Calendar, Sparkles } from "lucide-react"
 import { Badge } from "@/components/ui/badge"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { motion, AnimatePresence } from "framer-motion"
 
 interface TopShow {
     show: { id: number; date: string; venue_id: number }
@@ -87,14 +88,19 @@ export default function LeaderboardsPage() {
 
     return (
         <div className="container py-10 space-y-8 max-w-5xl">
-            <div className="flex flex-col gap-2">
+            <motion.div
+                initial={{ opacity: 0, y: -20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5 }}
+                className="flex flex-col gap-2"
+            >
                 <h1 className="text-4xl font-bold tracking-tight bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
                     Leaderboards
                 </h1>
                 <p className="text-xl text-muted-foreground">
                     Discover the highest rated shows, legendary jams, and top contributors.
                 </p>
-            </div>
+            </motion.div>
 
             <Tabs defaultValue="jams" className="w-full">
                 <TabsList className="grid w-full grid-cols-4 mb-8 h-12">
@@ -106,61 +112,81 @@ export default function LeaderboardsPage() {
 
                 {/* HEADY JAMS CONTENT */}
                 <TabsContent value="jams">
-                    <Card className="border-none shadow-none bg-transparent">
-                        <div className="grid gap-4">
-                            {topPerformances.map((item, i) => (
-                                <div
-                                    key={item.performance.id}
-                                    className="group relative flex items-center gap-4 rounded-xl border bg-card p-4 shadow-sm transition-all hover:shadow-md hover:border-primary/50"
-                                >
-                                    <div className="flex h-12 w-12 items-center justify-center rounded-full bg-secondary/50 font-bold text-xl">
-                                        <RankIcon rank={i + 1} />
-                                    </div>
-                                    <div className="flex flex-1 flex-col justify-center gap-1">
-                                        <div className="flex items-center gap-2">
-                                            <Link href={`/songs/${item.song.id}`} className="font-semibold text-lg hover:underline decoration-primary decoration-2 underline-offset-2">
-                                                {item.song.title}
-                                            </Link>
-                                            {item.performance.notes && (
-                                                <Badge variant="outline" className="text-[10px] font-normal hidden sm:inline-flex">
-                                                    {item.performance.notes}
-                                                </Badge>
-                                            )}
+                    <motion.div
+                        initial={{ opacity: 0, x: -10 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        transition={{ duration: 0.2 }}
+                    >
+                        <Card className="border-none shadow-none bg-transparent">
+                            <div className="grid gap-4">
+                                {topPerformances.map((item, i) => (
+                                    <motion.div
+                                        key={item.performance.id}
+                                        initial={{ opacity: 0, y: 10 }}
+                                        animate={{ opacity: 1, y: 0 }}
+                                        transition={{ delay: i * 0.05 }}
+                                        className="group relative flex items-center gap-4 rounded-xl border bg-card p-4 shadow-sm transition-all hover:shadow-md hover:border-primary/50"
+                                    >
+                                        <div className="flex h-12 w-12 items-center justify-center rounded-full bg-secondary/50 font-bold text-xl">
+                                            <RankIcon rank={i + 1} />
                                         </div>
-                                        <div className="flex items-center text-sm text-muted-foreground gap-2">
-                                            <Calendar className="h-3 w-3" />
-                                            <Link href={`/shows/${item.show.id}`} className="hover:text-primary transition-colors">
-                                                {new Date(item.show.date).toLocaleDateString(undefined, {
-                                                    weekday: 'short', year: 'numeric', month: 'short', day: 'numeric'
-                                                })}
-                                            </Link>
-                                            <span className="text-muted-foreground/50">•</span>
-                                            <span className="truncate max-w-[200px]">{item.venue.name}</span>
+                                        <div className="flex flex-1 flex-col justify-center gap-1">
+                                            <div className="flex items-center gap-2">
+                                                <Link href={`/songs/${item.song.id}`} className="font-semibold text-lg hover:underline decoration-primary decoration-2 underline-offset-2">
+                                                    {item.song.title}
+                                                </Link>
+                                                {item.performance.notes && (
+                                                    <Badge variant="outline" className="text-[10px] font-normal hidden sm:inline-flex">
+                                                        {item.performance.notes}
+                                                    </Badge>
+                                                )}
+                                            </div>
+                                            <div className="flex items-center text-sm text-muted-foreground gap-2">
+                                                <Calendar className="h-3 w-3" />
+                                                <Link href={`/shows/${item.show.id}`} className="hover:text-primary transition-colors">
+                                                    {new Date(item.show.date).toLocaleDateString(undefined, {
+                                                        weekday: 'short', year: 'numeric', month: 'short', day: 'numeric'
+                                                    })}
+                                                </Link>
+                                                <span className="text-muted-foreground/50">•</span>
+                                                <span className="truncate max-w-[200px]">{item.venue.name}</span>
+                                            </div>
                                         </div>
-                                    </div>
-                                    <div className="flex flex-col items-end justify-center min-w-[80px]">
-                                        <div className="flex items-center gap-1.5">
-                                            <Star className="h-4 w-4 fill-yellow-500 text-yellow-500" />
-                                            <span className="text-xl font-bold">{item.avg_score.toFixed(2)}</span>
+                                        <div className="flex flex-col items-end justify-center min-w-[80px]">
+                                            <div className="flex items-center gap-1.5">
+                                                <Star className="h-4 w-4 fill-yellow-500 text-yellow-500" />
+                                                <span className="text-xl font-bold">{item.avg_score.toFixed(2)}</span>
+                                            </div>
+                                            <span className="text-xs text-muted-foreground">{item.rating_count} votes</span>
                                         </div>
-                                        <span className="text-xs text-muted-foreground">{item.rating_count} votes</span>
+                                    </motion.div>
+                                ))}
+                                {topPerformances.length === 0 && (
+                                    <div className="text-center py-12 text-muted-foreground">
+                                        No ranked jams yet. Start rating performances!
                                     </div>
-                                </div>
-                            ))}
-                            {topPerformances.length === 0 && (
-                                <div className="text-center py-12 text-muted-foreground">
-                                    No ranked jams yet. Start rating performances!
-                                </div>
-                            )}
-                        </div>
-                    </Card>
+                                )}
+                            </div>
+                        </Card>
+                    </motion.div>
                 </TabsContent>
 
                 {/* TOP SHOWS CONTENT */}
                 <TabsContent value="shows">
-                    <div className="grid gap-4">
+                    <motion.div
+                        initial={{ opacity: 0, x: -10 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        transition={{ duration: 0.2 }}
+                        className="grid gap-4"
+                    >
                         {topShows.map((item, i) => (
-                            <div key={item.show.id} className="flex items-center justify-between p-4 rounded-lg border bg-card hover:bg-accent/50 transition-colors">
+                            <motion.div
+                                key={item.show.id}
+                                initial={{ opacity: 0, y: 10 }}
+                                animate={{ opacity: 1, y: 0 }}
+                                transition={{ delay: i * 0.05 }}
+                                className="flex items-center justify-between p-4 rounded-lg border bg-card hover:bg-accent/50 transition-colors"
+                            >
                                 <div className="flex items-center gap-4">
                                     <div className="font-mono text-muted-foreground w-6 text-center">{i + 1}</div>
                                     <div>
@@ -181,16 +207,27 @@ export default function LeaderboardsPage() {
                                     </div>
                                     <div className="text-xs text-muted-foreground">{item.review_count} ratings</div>
                                 </div>
-                            </div>
+                            </motion.div>
                         ))}
-                    </div>
+                    </motion.div>
                 </TabsContent>
 
                 {/* VENUES CONTENT */}
                 <TabsContent value="venues">
-                    <div className="grid gap-4 md:grid-cols-2">
+                    <motion.div
+                        initial={{ opacity: 0, x: -10 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        transition={{ duration: 0.2 }}
+                        className="grid gap-4 md:grid-cols-2"
+                    >
                         {topVenues.map((item, i) => (
-                            <div key={item.venue.id} className="flex items-center justify-between p-4 rounded-lg border bg-card/50">
+                            <motion.div
+                                key={item.venue.id}
+                                initial={{ opacity: 0, scale: 0.95 }}
+                                animate={{ opacity: 1, scale: 1 }}
+                                transition={{ delay: i * 0.05 }}
+                                className="flex items-center justify-between p-4 rounded-lg border bg-card/50"
+                            >
                                 <div className="flex items-center gap-3 overflow-hidden">
                                     <div className={`
                                         flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold shrink-0
@@ -211,29 +248,41 @@ export default function LeaderboardsPage() {
                                     <Star className="h-3 w-3 fill-current" />
                                     {item.avg_score.toFixed(2)}
                                 </Badge>
-                            </div>
+                            </motion.div>
                         ))}
-                    </div>
+                    </motion.div>
                 </TabsContent>
 
                 {/* USERS CONTENT */}
                 <TabsContent value="users">
-                    <div className="grid gap-4 md:grid-cols-3">
+                    <motion.div
+                        initial={{ opacity: 0, x: -10 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        transition={{ duration: 0.2 }}
+                        className="grid gap-4 md:grid-cols-3"
+                    >
                         {topUsers.map((item, i) => (
-                            <Card key={item.profile.id} className="flex flex-col items-center justify-center p-6 text-center hover:border-primary/50 transition-colors">
-                                <Avatar className="h-16 w-16 mb-4">
-                                    <AvatarImage src={`https://api.dicebear.com/7.x/notionists/svg?seed=${item.profile.user_id}`} />
-                                    <AvatarFallback>U</AvatarFallback>
-                                </Avatar>
-                                <div className="font-semibold text-lg">User {item.profile.user_id}</div>
-                                <p className="text-sm text-muted-foreground mb-3">Top Contributor</p>
-                                <Badge variant="outline" className="bg-primary/5">
-                                    {item.review_count} Reviews
-                                </Badge>
-                            </Card>
+                            <motion.div
+                                key={item.profile.id}
+                                initial={{ opacity: 0, y: 10 }}
+                                animate={{ opacity: 1, y: 0 }}
+                                transition={{ delay: i * 0.05 }}
+                            >
+                                <Card className="flex flex-col items-center justify-center p-6 text-center hover:border-primary/50 transition-colors h-full">
+                                    <Avatar className="h-16 w-16 mb-4">
+                                        <AvatarImage src={`https://api.dicebear.com/7.x/notionists/svg?seed=${item.profile.user_id}`} />
+                                        <AvatarFallback>U</AvatarFallback>
+                                    </Avatar>
+                                    <div className="font-semibold text-lg">User {item.profile.user_id}</div>
+                                    <p className="text-sm text-muted-foreground mb-3">Top Contributor</p>
+                                    <Badge variant="outline" className="bg-primary/5">
+                                        {item.review_count} Reviews
+                                    </Badge>
+                                </Card>
+                            </motion.div>
                         ))}
                         {topUsers.length === 0 && <p className="col-span-3 text-center text-muted-foreground py-10">No active users yet.</p>}
-                    </div>
+                    </motion.div>
                 </TabsContent>
             </Tabs>
         </div>
diff --git a/frontend/app/profile/page.tsx b/frontend/app/profile/page.tsx
index ab17c50..c03069b 100644
--- a/frontend/app/profile/page.tsx
+++ b/frontend/app/profile/page.tsx
@@ -12,6 +12,7 @@ import { UserAttendanceList } from "@/components/profile/user-attendance-list"
 import { UserReviewsList } from "@/components/profile/user-reviews-list"
 import { UserGroupsList } from "@/components/profile/user-groups-list"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { motion } from "framer-motion"
 
 // Types
 interface UserProfile {
@@ -105,7 +106,12 @@ export default function ProfilePage() {
     return (
         <div className="container py-10 max-w-5xl space-y-8">
             {/* Header Section */}
-            <div className="relative">
+            <motion.div
+                initial={{ opacity: 0, y: -20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5 }}
+                className="relative"
+            >
                 <div className="absolute right-0 top-0">
                     <Link href="/settings">
                         <Button variant="outline" size="sm" className="gap-2">
@@ -159,7 +165,7 @@ export default function ProfilePage() {
                         </div>
                     </div>
                 </div>
-            </div>
+            </motion.div>
 
             <Tabs defaultValue="overview" className="w-full">
                 <TabsList className="grid w-full grid-cols-4 mb-8 h-12">
@@ -170,34 +176,56 @@ export default function ProfilePage() {
                 </TabsList>
 
                 <TabsContent value="overview" className="space-y-6">
-                    <Card>
-                        <CardHeader>
-                            <CardTitle className="flex items-center gap-2">
-                                <Trophy className="h-5 w-5 text-yellow-500" />
-                                Achievements
-                            </CardTitle>
-                        </CardHeader>
-                        <CardContent>
-                            <BadgeList badges={displayBadges} />
-                            {displayBadges.length === 0 && (
-                                <p className="text-muted-foreground text-sm">No badges earned yet. Keep active!</p>
-                            )}
-                        </CardContent>
-                    </Card>
-
-                    {/* Recent Activity or generic stats summary could go here later */}
+                    <motion.div
+                        initial={{ opacity: 0, x: -10 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        transition={{ duration: 0.2 }}
+                    >
+                        <Card>
+                            <CardHeader>
+                                <CardTitle className="flex items-center gap-2">
+                                    <Trophy className="h-5 w-5 text-yellow-500" />
+                                    Achievements
+                                </CardTitle>
+                            </CardHeader>
+                            <CardContent>
+                                <BadgeList badges={displayBadges} />
+                                {displayBadges.length === 0 && (
+                                    <p className="text-muted-foreground text-sm">No badges earned yet. Keep active!</p>
+                                )}
+                            </CardContent>
+                        </Card>
+                    </motion.div>
                 </TabsContent>
 
                 <TabsContent value="attendance">
-                    <UserAttendanceList userId={user.id} />
+                    <motion.div
+                        initial={{ opacity: 0, x: -10 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        transition={{ duration: 0.2 }}
+                    >
+                        <UserAttendanceList userId={user.id} />
+                    </motion.div>
                 </TabsContent>
 
                 <TabsContent value="reviews">
-                    <UserReviewsList userId={user.id} />
+                    <motion.div
+                        initial={{ opacity: 0, x: -10 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        transition={{ duration: 0.2 }}
+                    >
+                        <UserReviewsList userId={user.id} />
+                    </motion.div>
                 </TabsContent>
 
                 <TabsContent value="groups">
-                    <UserGroupsList userId={user.id} />
+                    <motion.div
+                        initial={{ opacity: 0, x: -10 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        transition={{ duration: 0.2 }}
+                    >
+                        <UserGroupsList userId={user.id} />
+                    </motion.div>
                 </TabsContent>
             </Tabs>
         </div>