From 5c53fbc49772d5c7d4d5c00160e27b3ba6c5fad9 Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Sun, 21 Dec 2025 01:53:44 -0800
Subject: [PATCH] feat(frontend): Spec out SearchDialog for maximum utility

---
 frontend/components/ui/search-dialog.tsx | 132 ++++++++++++++++-------
 1 file changed, 91 insertions(+), 41 deletions(-)

diff --git a/frontend/components/ui/search-dialog.tsx b/frontend/components/ui/search-dialog.tsx
index e01dc9d..478e6fb 100644
--- a/frontend/components/ui/search-dialog.tsx
+++ b/frontend/components/ui/search-dialog.tsx
@@ -10,13 +10,18 @@ import {
     CommandList,
     CommandSeparator,
 } from "@/components/ui/command"
-import { Search, Music, MapPin, Calendar, Users, Globe } from "lucide-react"
+import {
+    Search, Music, MapPin, Calendar, Users, Globe,
+    LayoutDashboard, Library, Star, History, ArrowRight
+} from "lucide-react"
 import { useRouter } from "next/navigation"
 import { getApiUrl } from "@/lib/api-config"
+import { Badge } from "@/components/ui/badge"
 
 export function SearchDialog() {
     const [open, setOpen] = React.useState(false)
     const [query, setQuery] = React.useState("")
+    const [loading, setLoading] = React.useState(false)
     const [results, setResults] = React.useState<any>({
         songs: [],
         venues: [],
@@ -24,7 +29,8 @@ export function SearchDialog() {
         groups: [],
         users: [],
         nicknames: [],
-        performances: []
+        performances: [],
+        shows: [] // Ensure backend sends this or we default to empty
     })
     const router = useRouter()
 
@@ -42,15 +48,22 @@ export function SearchDialog() {
 
     React.useEffect(() => {
         if (query.length < 2) {
-            setResults({ songs: [], venues: [], tours: [], groups: [], users: [], nicknames: [], performances: [] })
+            setResults({ songs: [], venues: [], tours: [], groups: [], users: [], nicknames: [], performances: [], shows: [] })
             return
         }
 
+        setLoading(true)
         const timer = setTimeout(() => {
             fetch(`${getApiUrl()}/search/?q=${query}`)
                 .then(res => res.json())
-                .then(data => setResults(data))
-                .catch(err => console.error(err))
+                .then(data => {
+                    setResults(data)
+                    setLoading(false)
+                })
+                .catch(err => {
+                    console.error(err)
+                    setLoading(false)
+                })
         }, 300)
 
         return () => clearTimeout(timer)
@@ -65,42 +78,80 @@ export function SearchDialog() {
         <>
             <button
                 onClick={() => setOpen(true)}
-                className="inline-flex items-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 relative w-full justify-start text-sm text-muted-foreground sm:pr-12 md:w-40 lg:w-64"
+                className="inline-flex items-center rounded-lg font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background/50 shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 relative w-full justify-start text-sm text-muted-foreground sm:pr-12 md:w-40 lg:w-64"
             >
-                <span className="hidden lg:inline-flex">Search...</span>
+                <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+                <span className="hidden lg:inline-flex">Search Elmeg...</span>
                 <span className="inline-flex lg:hidden">Search...</span>
                 <kbd className="pointer-events-none absolute right-1.5 top-1.5 hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
                     <span className="text-xs">⌘</span>K
                 </kbd>
             </button>
             <CommandDialog open={open} onOpenChange={setOpen}>
-                <CommandInput placeholder="Type a command or search..." value={query} onValueChange={setQuery} />
-                <CommandList>
-                    <CommandEmpty>No results found.</CommandEmpty>
+                <CommandInput placeholder="Type to search songs, venues, tours..." value={query} onValueChange={setQuery} />
+                <CommandList className="max-h-[500px]">
+                    <CommandEmpty>
+                        {loading ? (
+                            <div className="flex items-center justify-center py-6 text-sm text-muted-foreground">
+                                Searching...
+                            </div>
+                        ) : (
+                            "No results found."
+                        )}
+                    </CommandEmpty>
 
-                    {results.songs.length > 0 && (
+                    {query.length < 2 && (
+                        <CommandGroup heading="Quick Navigation">
+                            <CommandItem onSelect={() => handleSelect("/archive")}>
+                                <Library className="mr-2 h-4 w-4" />
+                                <span>Archive</span>
+                            </CommandItem>
+                            <CommandItem onSelect={() => handleSelect("/leaderboards")}>
+                                <Star className="mr-2 h-4 w-4" />
+                                <span>Leaderboards</span>
+                            </CommandItem>
+                            <CommandItem onSelect={() => handleSelect("/shows")}>
+                                <Calendar className="mr-2 h-4 w-4" />
+                                <span>All Shows</span>
+                            </CommandItem>
+                            <CommandItem onSelect={() => handleSelect("/tours")}>
+                                <Globe className="mr-2 h-4 w-4" />
+                                <span>Tours</span>
+                            </CommandItem>
+                        </CommandGroup>
+                    )}
+
+                    {results.songs?.length > 0 && (
                         <CommandGroup heading="Songs">
                             {results.songs.map((song: any) => (
                                 <CommandItem key={song.id} onSelect={() => handleSelect(`/songs/${song.id}`)}>
                                     <Music className="mr-2 h-4 w-4" />
-                                    <span>{song.title}</span>
+                                    <div className="flex flex-col">
+                                        <span>{song.title}</span>
+                                        {song.original_artist && (
+                                            <span className="text-[10px] text-muted-foreground">{song.original_artist}</span>
+                                        )}
+                                    </div>
                                 </CommandItem>
                             ))}
                         </CommandGroup>
                     )}
 
-                    {results.venues.length > 0 && (
+                    {results.venues?.length > 0 && (
                         <CommandGroup heading="Venues">
                             {results.venues.map((venue: any) => (
                                 <CommandItem key={venue.id} onSelect={() => handleSelect(`/venues/${venue.id}`)}>
                                     <MapPin className="mr-2 h-4 w-4" />
                                     <span>{venue.name}</span>
+                                    <span className="ml-2 text-xs text-muted-foreground hidden sm:inline-block">
+                                        {venue.city}, {venue.state}
+                                    </span>
                                 </CommandItem>
                             ))}
                         </CommandGroup>
                     )}
 
-                    {results.tours.length > 0 && (
+                    {results.tours?.length > 0 && (
                         <CommandGroup heading="Tours">
                             {results.tours.map((tour: any) => (
                                 <CommandItem key={tour.id} onSelect={() => handleSelect(`/tours/${tour.id}`)}>
@@ -111,45 +162,44 @@ export function SearchDialog() {
                         </CommandGroup>
                     )}
 
-                    {results.groups.length > 0 && (
-                        <CommandGroup heading="Communities">
-                            {results.groups.map((group: any) => (
-                                <CommandItem key={group.id} onSelect={() => handleSelect(`/groups/${group.id}`)}>
-                                    <Globe className="mr-2 h-4 w-4" />
-                                    <span>{group.name}</span>
-                                </CommandItem>
-                            ))}
-                        </CommandGroup>
-                    )}
-
-                    {results.nicknames && results.nicknames.length > 0 && (
-                        <CommandGroup heading="Nicknames">
-                            {results.nicknames.map((nickname: any) => (
-                                <CommandItem key={nickname.id} onSelect={() => handleSelect(`/performances/${nickname.performance_id}`)}>
-                                    <Music className="mr-2 h-4 w-4" />
-                                    <span>{nickname.nickname}</span>
-                                </CommandItem>
-                            ))}
-                        </CommandGroup>
-                    )}
-
-                    {results.performances && results.performances.length > 0 && (
+                    {results.performances?.length > 0 && (
                         <CommandGroup heading="Performances">
                             {results.performances.map((perf: any) => (
-                                <CommandItem key={perf.id} onSelect={() => handleSelect(`/performances/${perf.id}`)}>
+                                <CommandItem key={perf.id} onSelect={() => handleSelect(`/shows/${perf.show_id}`)}>
                                     <Music className="mr-2 h-4 w-4" />
-                                    <span>{perf.song?.title} - {perf.notes}</span>
+                                    <div className="flex flex-col">
+                                        <span>{perf.song?.title || "Unknown Song"}</span>
+                                        <span className="text-[10px] text-muted-foreground">
+                                            {perf.notes}
+                                            {/* We rely on frontend resolving show date if available, or just link to show */}
+                                        </span>
+                                    </div>
+                                    <Badge variant="outline" className="ml-auto text-[10px] h-5">Performance</Badge>
                                 </CommandItem>
                             ))}
                         </CommandGroup>
                     )}
 
-                    {results.users.length > 0 && (
+                    {results.nicknames?.length > 0 && (
+                        <CommandGroup heading="Heady Nicknames">
+                            {results.nicknames.map((nickname: any) => (
+                                <CommandItem key={nickname.id} onSelect={() => handleSelect(`/shows/${nickname.performance?.show_id}`)}>
+                                    <Star className="mr-2 h-4 w-4 text-yellow-500" />
+                                    <span>{nickname.nickname}</span>
+                                    <span className="ml-2 text-xs text-muted-foreground">
+                                        ({nickname.performance?.song?.title})
+                                    </span>
+                                </CommandItem>
+                            ))}
+                        </CommandGroup>
+                    )}
+
+                    {results.users?.length > 0 && (
                         <CommandGroup heading="Users">
                             {results.users.map((user: any) => (
                                 <CommandItem key={user.id} onSelect={() => handleSelect(`/profile/${user.id}`)}>
                                     <Users className="mr-2 h-4 w-4" />
-                                    <span>{user.email}</span>
+                                    <span>{user.username || user.email.split('@')[0]}</span>
                                 </CommandItem>
                             ))}
                         </CommandGroup>