feat: Add Upcoming Shows feature (backend+frontend) and Special Features section

backend/routers/shows.py

@@ -48,6 +48,17 @@ def read_recent_shows(
     shows = session.exec(query).all()
     return shows
 
+@router.get("/upcoming", response_model=List[ShowRead])
+def read_upcoming_shows(
+    limit: int = Query(default=50, le=100),
+    session: Session = Depends(get_session)
+):
+    """Get upcoming shows ordered by date ascending"""
+    from datetime import datetime
+    query = select(Show).where(Show.date > datetime.now()).order_by(Show.date.asc()).limit(limit)
+    shows = session.exec(query).all()
+    return shows
+
 @router.get("/{slug}", response_model=ShowRead)
 def read_show(slug: str, session: Session = Depends(get_session)):
     show = session.exec(select(Show).where(Show.slug == slug)).first()

frontend/app/shows/page.tsx

@@ -76,11 +76,21 @@ function ShowsContent() {
     return (
         <div className="container py-10 space-y-8 animate-in fade-in duration-700">
             <div className="flex flex-col gap-2">
+                <div className="flex justify-between items-start">
+                    <div>
                         <h1 className="text-3xl font-bold tracking-tight">Shows</h1>
                         <p className="text-muted-foreground">
                             Browse the complete archive of performances.
                         </p>
                     </div>
+                    <Link href="/shows/upcoming">
+                        <Button variant="outline" className="gap-2">
+                            <Calendar className="h-4 w-4" />
+                            Upcoming Shows
+                        </Button>
+                    </Link>
+                </div>
+            </div>
 
             <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                 {shows.map((show) => (

frontend/app/shows/upcoming/page.tsx

@@ -0,0 +1,121 @@
+"use client"
+
+import { useEffect, useState, Suspense } from "react"
+import { getApiUrl } from "@/lib/api-config"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import Link from "next/link"
+import { Calendar, MapPin, Loader2, ArrowLeft } from "lucide-react"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Button } from "@/components/ui/button"
+
+interface Show {
+    id: number
+    slug?: string
+    date: string
+    venue: {
+        id: number
+        name: string
+        city: string
+        state: string
+    }
+}
+
+function UpcomingShowsContent() {
+    const [shows, setShows] = useState<Show[]>([])
+    const [loading, setLoading] = useState(true)
+
+    useEffect(() => {
+        // Fetch upcoming shows
+        fetch(`${getApiUrl()}/shows/upcoming?limit=100`)
+            .then(res => res.json())
+            .then(data => {
+                // Already sorted ascending by backend, but ensure just in case
+                setShows(data)
+            })
+            .catch(console.error)
+            .finally(() => setLoading(false))
+    }, [])
+
+    if (loading) {
+        return (
+            <div className="container py-10 space-y-8">
+                <div className="flex flex-col gap-2">
+                    <Skeleton className="h-10 w-48" />
+                    <Skeleton className="h-5 w-96" />
+                </div>
+                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                    {Array.from({ length: 6 }).map((_, i) => (
+                        <Skeleton key={i} className="h-40 w-full" />
+                    ))}
+                </div>
+            </div>
+        )
+    }
+
+    return (
+        <div className="container py-10 space-y-8 animate-in fade-in duration-700">
+            <div className="flex items-center gap-4">
+                <Link href="/shows">
+                    <Button variant="ghost" size="icon">
+                        <ArrowLeft className="h-5 w-5" />
+                    </Button>
+                </Link>
+                <div className="flex flex-col gap-1">
+                    <h1 className="text-3xl font-bold tracking-tight">Upcoming Shows</h1>
+                    <p className="text-muted-foreground">
+                        See where the flock is headed next.
+                    </p>
+                </div>
+            </div>
+
+            {shows.length === 0 ? (
+                <div className="text-center py-20 bg-muted/20 rounded-lg">
+                    <h3 className="text-lg font-medium text-muted-foreground">No upcoming shows found.</h3>
+                    <p className="text-sm text-muted-foreground/70 mt-1">Check back later for tour announcements!</p>
+                </div>
+            ) : (
+                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                    {shows.map((show) => (
+                        <Card key={show.id} className="h-full border-primary/20 hover:border-primary/50 transition-colors">
+                            <CardHeader>
+                                <CardTitle className="flex items-center gap-2">
+                                    <Calendar className="h-5 w-5 text-primary" />
+                                    {new Date(show.date).toLocaleDateString(undefined, {
+                                        weekday: 'long',
+                                        year: 'numeric',
+                                        month: 'long',
+                                        day: 'numeric'
+                                    })}
+                                </CardTitle>
+                            </CardHeader>
+                            <CardContent>
+                                <div className="flex items-center gap-2 text-muted-foreground">
+                                    <MapPin className="h-4 w-4" />
+                                    <span>
+                                        {show.venue?.name}, {show.venue?.city}, {show.venue?.state}
+                                    </span>
+                                </div>
+                            </CardContent>
+                        </Card>
+                    ))}
+                </div>
+            )}
+        </div>
+    )
+}
+
+function LoadingFallback() {
+    return (
+        <div className="container py-10 flex items-center justify-center min-h-[400px]">
+            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        </div>
+    )
+}
+
+export default function UpcomingShowsPage() {
+    return (
+        <Suspense fallback={<LoadingFallback />}>
+            <UpcomingShowsContent />
+        </Suspense>
+    )
+}

frontend/app/videos/page.tsx

@@ -141,6 +141,44 @@ export default function VideosPage() {
                 )}
             </div>
 
+            {/* Special Features Section */}
+            <div className="bg-muted/30 rounded-lg p-6 border border-primary/20">
+                <div className="flex items-center gap-2 mb-4">
+                    <Film className="h-5 w-5 text-purple-600" />
+                    <h2 className="text-xl font-semibold">Special Features</h2>
+                </div>
+                <div className="grid md:grid-cols-2 gap-4">
+                    <div className="flex flex-col gap-2 p-4 bg-background rounded-md border hover:border-primary/50 transition-colors">
+                        <div className="flex items-center justify-between">
+                            <h3 className="font-semibold text-lg">Show Upon Time</h3>
+                            <Badge variant="secondary">Documentary</Badge>
+                        </div>
+                        <p className="text-sm text-muted-foreground">
+                            An intimate look behind the scenes of Goose's journey.
+                        </p>
+                        <button
+                            onClick={() => toggleVideo("doc-show-upon-time")}
+                            className="text-primary hover:underline text-sm font-medium text-left mt-2 flex items-center gap-2"
+                        >
+                            <Youtube className="h-4 w-4" />
+                            Watch Now
+                        </button>
+                        {expandedVideoId === "doc-show-upon-time" && (
+                            <div className="mt-4 aspect-video w-full rounded-lg overflow-hidden shadow-lg bg-black">
+                                <iframe
+                                    width="100%"
+                                    height="100%"
+                                    src={`https://www.youtube.com/embed/JdWnhOIWh-I?autoplay=1`}
+                                    title="Show Upon Time"
+                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                                    allowFullScreen
+                                />
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+
             <div className="flex flex-col md:flex-row gap-4 justify-between items-start md:items-center">
                 {/* Filter Tabs */}
                 <div className="flex gap-2">