feat(frontend): Spec out SearchDialog for maximum utility
Some checks are pending
Deploy Elmeg / deploy (push) Waiting to run
Some checks are pending
Deploy Elmeg / deploy (push) Waiting to run
This commit is contained in:
fullsizemalt
parent
be7e9111f0
commit
5c53fbc497
1 changed files with 91 additions and 41 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue