From 8dd7ac428950c82ead2fe8193ebba8190cd32676 Mon Sep 17 00:00:00 2001
From: RawGroundBeef <rawggroundbeef@RawGroundBeefs-Mac-mini.local>
Date: Sat, 14 Feb 2026 09:53:55 -0500
Subject: [PATCH] feat(search): add search functionality for tracks and artists

- Add SearchBar component with autocomplete dropdown
- Add SearchPage with full search results and filters
- Support searching tracks by title, artist, genre
- Support searching artists by username, display name
- Add tabs to filter between tracks/artists/all
- Navigate to track/artist pages on selection
- Press Enter to view full search results page
---
 web/src/App.tsx                  |   3 +
 web/src/components/SearchBar.tsx | 276 ++++++++++++++++++++++++
 web/src/layouts/RadioLayout.tsx  |   2 +
 web/src/pages/SearchPage.tsx     | 353 +++++++++++++++++++++++++++++++
 4 files changed, 634 insertions(+)
 create mode 100644 web/src/components/SearchBar.tsx
 create mode 100644 web/src/pages/SearchPage.tsx

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 589412e..405e9b5 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -7,6 +7,7 @@ import { TrackPage, WalletTrackPage, LegacyTrackRedirect } from './pages/TrackPa
 import { RoyaltiesPage } from './pages/RoyaltiesPage'
 import { NotFoundPage } from './pages/NotFoundPage'
 import { FavoritesPage } from './pages/FavoritesPage'
+import { SearchPage } from './pages/SearchPage'
 
 export default function App() {
   return (
@@ -21,6 +22,8 @@ export default function App() {
             <Route path="royalties" element={<RoyaltiesPage />} />
             {/* Favorites page */}
             <Route path="favorites" element={<FavoritesPage />} />
+            {/* Search page */}
+            <Route path="search" element={<SearchPage />} />
             {/* Wallet-based track page (must be before wallet profile) */}
             <Route path="w/:wallet/:trackSlug" element={<WalletTrackPage />} />
             {/* Wallet lookup (no username) */}
diff --git a/web/src/components/SearchBar.tsx b/web/src/components/SearchBar.tsx
new file mode 100644
index 0000000..15ad728
--- /dev/null
+++ b/web/src/components/SearchBar.tsx
@@ -0,0 +1,276 @@
+import { useState, useEffect, useRef } from 'react'
+import { useNavigate } from 'react-router'
+import { API_URL } from '../lib/constants'
+
+interface SearchResult {
+  type: 'track' | 'artist'
+  id: string
+  title?: string
+  slug?: string
+  username?: string
+  displayName?: string
+  wallet?: string
+  coverUrl?: string | null
+  avatarUrl?: string | null
+  genre?: string
+}
+
+export function SearchBar() {
+  const navigate = useNavigate()
+  const [query, setQuery] = useState('')
+  const [results, setResults] = useState<SearchResult[]>([])
+  const [isOpen, setIsOpen] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [])
+
+  // Search API call
+  useEffect(() => {
+    if (!query.trim()) {
+      setResults([])
+      return
+    }
+
+    const timeoutId = setTimeout(async () => {
+      setIsLoading(true)
+      try {
+        const res = await fetch(`${API_URL}/api/search?q=${encodeURIComponent(query)}&limit=8`)
+        if (res.ok) {
+          const data = await res.json()
+          setResults(data.results || [])
+          setIsOpen(true)
+        }
+      } catch (e) {
+        console.error('Search failed:', e)
+      } finally {
+        setIsLoading(false)
+      }
+    }, 150) // Debounce 150ms
+
+    return () => clearTimeout(timeoutId)
+  }, [query])
+
+  const handleSelect = (result: SearchResult) => {
+    setIsOpen(false)
+    setQuery('')
+    if (result.type === 'track') {
+      navigate(`/${result.username}/${result.slug}`)
+    } else {
+      navigate(`/${result.username}`)
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && query.trim()) {
+      navigate(`/search?q=${encodeURIComponent(query)}`)
+      setIsOpen(false)
+      setQuery('')
+    }
+  }
+
+  return (
+    <div ref={containerRef} style={{ position: 'relative' }}>
+      <div style={{ position: 'relative' }}>
+        <input
+          ref={inputRef}
+          type="text"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onFocus={() => query.trim() && setIsOpen(true)}
+          placeholder="Search tracks & artists..."
+          style={{
+            width: '200px',
+            padding: '6px 12px 6px 32px',
+            borderRadius: '20px',
+            border: '1px solid var(--border)',
+            background: 'var(--bg-card)',
+            color: 'var(--text-primary)',
+            fontSize: '13px',
+            outline: 'none',
+          }}
+        />
+        <svg
+          style={{
+            position: 'absolute',
+            left: '10px',
+            top: '50%',
+            transform: 'translateY(-50%)',
+            width: '14px',
+            height: '14px',
+            color: 'var(--text-muted)',
+          }}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <circle cx="11" cy="11" r="8" />
+          <path d="m21 21-4.35-4.35" />
+        </svg>
+        {isLoading && (
+          <div
+            style={{
+              position: 'absolute',
+              right: '8px',
+              top: '50%',
+              transform: 'translateY(-50%)',
+            }}
+          >
+            <div
+              style={{
+                width: '12px',
+                height: '12px',
+                border: '2px solid var(--border)',
+                borderTopColor: 'var(--accent)',
+                borderRadius: '50%',
+                animation: 'spin 1s linear infinite',
+              }}
+            />
+          </div>
+        )}
+      </div>
+
+      {/* Dropdown results */}
+      {isOpen && results.length > 0 && (
+        <div
+          style={{
+            position: 'absolute',
+            top: 'calc(100% + 8px)',
+            left: 0,
+            right: 0,
+            minWidth: '280px',
+            background: 'var(--bg-card)',
+            border: '1px solid var(--border)',
+            borderRadius: '12px',
+            boxShadow: '0 4px 20px rgba(0,0,0,0.3)',
+            zIndex: 100,
+            maxHeight: '400px',
+            overflowY: 'auto',
+          }}
+        >
+          {results.map((result) => (
+            <button
+              key={`${result.type}-${result.id}`}
+              onClick={() => handleSelect(result)}
+              style={{
+                width: '100%',
+                padding: '10px 14px',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '12px',
+                background: 'transparent',
+                border: 'none',
+                borderBottom: '1px solid var(--border-subtle)',
+                cursor: 'pointer',
+                textAlign: 'left',
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.background = 'var(--bg-card-hover)'
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.background = 'transparent'
+              }}
+            >
+              {/* Icon or image */}
+              {result.type === 'track' ? (
+                result.coverUrl ? (
+                  <img
+                    src={result.coverUrl}
+                    alt=""
+                    style={{
+                      width: '36px',
+                      height: '36px',
+                      borderRadius: '4px',
+                      objectFit: 'cover',
+                    }}
+                  />
+                ) : (
+                  <div
+                    style={{
+                      width: '36px',
+                      height: '36px',
+                      borderRadius: '4px',
+                      background: 'var(--bg-muted)',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                    }}
+                  >
+                    <span style={{ fontSize: '16px' }}>🎵</span>
+                  </div>
+                )
+              ) : result.avatarUrl ? (
+                <img
+                  src={result.avatarUrl}
+                  alt=""
+                  style={{
+                    width: '36px',
+                    height: '36px',
+                    borderRadius: '50%',
+                    objectFit: 'cover',
+                  }}
+                />
+              ) : (
+                <div
+                  style={{
+                    width: '36px',
+                    height: '36px',
+                    borderRadius: '50%',
+                    background: 'var(--bg-muted)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}
+                >
+                  <span style={{ fontSize: '16px' }}>👤</span>
+                </div>
+              )}
+
+              {/* Text */}
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <div
+                  style={{
+                    fontSize: '13px',
+                    fontWeight: 600,
+                    color: 'var(--text-primary)',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                  }}
+                >
+                  {result.type === 'track' ? result.title : result.displayName || result.username}
+                </div>
+                <div
+                  style={{
+                    fontSize: '11px',
+                    color: 'var(--text-secondary)',
+                  }}
+                >
+                  {result.type === 'track' ? `🎵 ${result.artist} • ${result.genre}` : `@${result.username}`}
+                </div>
+              </div>
+            </button>
+          ))}
+        </div>
+      )}
+
+      <style>{`
+        @keyframes spin {
+          to { transform: translateY(-50%) rotate(360deg); }
+        }
+      `}</style>
+    </div>
+  )
+}
diff --git a/web/src/layouts/RadioLayout.tsx b/web/src/layouts/RadioLayout.tsx
index 3f262ab..30a0160 100644
--- a/web/src/layouts/RadioLayout.tsx
+++ b/web/src/layouts/RadioLayout.tsx
@@ -9,6 +9,7 @@ import { ReconnectingIndicator } from '../components/ReconnectingIndicator'
 import { WalletButton } from '../components/WalletButton'
 import { ConfettiCelebration } from '../components/ConfettiCelebration'
 import { WhatIsThisModal } from '../components/WhatIsThisModal'
+import { SearchBar } from '../components/SearchBar'
 import { Toaster } from 'sonner'
 
 export function RadioLayout() {
@@ -55,6 +56,7 @@ export function RadioLayout() {
           </span>
         </Link>
         <div className="flex items-center" style={{ gap: '16px' }}>
+          <SearchBar />
           <button
             onClick={openModal}
             className="transition-colors"
diff --git a/web/src/pages/SearchPage.tsx b/web/src/pages/SearchPage.tsx
new file mode 100644
index 0000000..5e9999f
--- /dev/null
+++ b/web/src/pages/SearchPage.tsx
@@ -0,0 +1,353 @@
+import { useState, useEffect } from 'react'
+import { useSearchParams, Link } from 'react-router'
+import { useAudio } from '../contexts/AudioContext'
+import { API_URL } from '../lib/constants'
+
+interface SearchResult {
+  type: 'track' | 'artist'
+  id: string
+  title?: string
+  slug?: string
+  username?: string
+  displayName?: string
+  wallet?: string
+  coverUrl?: string | null
+  avatarUrl?: string | null
+  genre?: string
+  plays?: number
+  followerCount?: number
+  trackCount?: number
+}
+
+export function SearchPage() {
+  const [searchParams] = useSearchParams()
+  const query = searchParams.get('q') || ''
+  const { theme } = useAudio()
+  
+  const [results, setResults] = useState<SearchResult[]>([])
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [activeTab, setActiveTab] = useState<'all' | 'tracks' | 'artists'>('all')
+
+  useEffect(() => {
+    if (!query.trim()) {
+      setResults([])
+      return
+    }
+
+    const fetchResults = async () => {
+      setIsLoading(true)
+      setError(null)
+      try {
+        const res = await fetch(`${API_URL}/api/search?q=${encodeURIComponent(query)}&limit=50`)
+        if (!res.ok) throw new Error('Search failed')
+        const data = await res.json()
+        setResults(data.results || [])
+      } catch (e) {
+        setError('Failed to search. Please try again.')
+        console.error('Search error:', e)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    fetchResults()
+  }, [query])
+
+  const filteredResults = results.filter((r) => {
+    if (activeTab === 'all') return true
+    return r.type === activeTab.slice(0, -1) // 'tracks' -> 'track', 'artists' -> 'artist'
+  })
+
+  const trackCount = results.filter((r) => r.type === 'track').length
+  const artistCount = results.filter((r) => r.type === 'artist').length
+
+  return (
+    <div style={{ padding: '24px', maxWidth: '800px', margin: '0 auto' }}>
+      {/* Header */}
+      <h1
+        style={{
+          fontSize: '24px',
+          fontWeight: 700,
+          marginBottom: '8px',
+          color: 'var(--text-primary)',
+        }}
+      >
+        Search Results
+      </h1>
+      <p
+        style={{
+          fontSize: '14px',
+          color: 'var(--text-secondary)',
+          marginBottom: '24px',
+        }}
+      >
+        {query ? `Results for "${query}"` : 'Enter a search term'}
+      </p>
+
+      {/* Tabs */}
+      {query && (
+        <div
+          style={{
+            display: 'flex',
+            gap: '8px',
+            marginBottom: '24px',
+            borderBottom: '1px solid var(--border)',
+            paddingBottom: '12px',
+          }}
+        >
+          {[
+            { key: 'all', label: 'All', count: results.length },
+            { key: 'tracks', label: 'Tracks', count: trackCount },
+            { key: 'artists', label: 'Artists', count: artistCount },
+          ].map((tab) => (
+            <button
+              key={tab.key}
+              onClick={() => setActiveTab(tab.key as typeof activeTab)}
+              style={{
+                padding: '8px 16px',
+                borderRadius: '20px',
+                border: 'none',
+                background: activeTab === tab.key ? 'var(--accent)' : 'transparent',
+                color: activeTab === tab.key ? 'white' : 'var(--text-secondary)',
+                fontSize: '13px',
+                fontWeight: 600,
+                cursor: 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '6px',
+              }}
+            >
+              {tab.label}
+              <span
+                style={{
+                  padding: '2px 8px',
+                  borderRadius: '10px',
+                  background: activeTab === tab.key ? 'rgba(255,255,255,0.2)' : 'var(--bg-card)',
+                  fontSize: '11px',
+                }}
+              >
+                {tab.count}
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Loading */}
+      {isLoading && (
+        <div style={{ textAlign: 'center', padding: '40px' }}>
+          <div
+            style={{
+              width: '32px',
+              height: '32px',
+              border: '3px solid var(--border)',
+              borderTopColor: 'var(--accent)',
+              borderRadius: '50%',
+              animation: 'spin 1s linear infinite',
+              margin: '0 auto 16px',
+            }}
+          />
+          <p style={{ color: 'var(--text-secondary)', fontSize: '14px' }}>Searching...</p>
+          <style>{`
+            @keyframes spin {
+              to { transform: rotate(360deg); }
+            }
+          `}</style>
+        </div>
+      )}
+
+      {/* Error */}
+      {error && (
+        <div
+          style={{
+            padding: '16px',
+            background: 'rgba(239, 68, 68, 0.1)',
+            borderRadius: '8px',
+            color: '#ef4444',
+            fontSize: '14px',
+          }}
+        >
+          {error}
+        </div>
+      )}
+
+      {/* Results */}
+      {!isLoading && !error && filteredResults.length === 0 && query && (
+        <div style={{ textAlign: 'center', padding: '60px 20px' }}>
+          <div style={{ fontSize: '48px', marginBottom: '16px' }}>🔍</div>
+          <h3
+            style={{
+              fontSize: '18px',
+              fontWeight: 600,
+              color: 'var(--text-primary)',
+              marginBottom: '8px',
+            }}
+          >
+            No results found
+          </h3>
+          <p style={{ color: 'var(--text-secondary)', fontSize: '14px' }}>
+            Try searching for a different track title, artist name, or genre
+          </p>
+        </div>
+      )}
+
+      {/* Results grid */}
+      {!isLoading && filteredResults.length > 0 && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+          {filteredResults.map((result) => (
+            <Link
+              key={`${result.type}-${result.id}`}
+              to={
+                result.type === 'track'
+                  ? `/${result.username}/${result.slug}`
+                  : `/${result.username}`
+              }
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '16px',
+                padding: '16px',
+                background: 'var(--bg-card)',
+                borderRadius: '12px',
+                border: '1px solid var(--border)',
+                textDecoration: 'none',
+                transition: 'all 0.2s',
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.background = 'var(--bg-card-hover)'
+                e.currentTarget.style.transform = 'translateY(-2px)'
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.background = 'var(--bg-card)'
+                e.currentTarget.style.transform = 'translateY(0)'
+              }}
+            >
+              {/* Image */}
+              {result.type === 'track' ? (
+                result.coverUrl ? (
+                  <img
+                    src={result.coverUrl}
+                    alt=""
+                    style={{
+                      width: '64px',
+                      height: '64px',
+                      borderRadius: '8px',
+                      objectFit: 'cover',
+                    }}
+                  />
+                ) : (
+                  <div
+                    style={{
+                      width: '64px',
+                      height: '64px',
+                      borderRadius: '8px',
+                      background: 'var(--bg-muted)',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      fontSize: '28px',
+                    }}
+                  >
+                    🎵
+                  </div>
+                )
+              ) : result.avatarUrl ? (
+                <img
+                  src={result.avatarUrl}
+                  alt=""
+                  style={{
+                    width: '64px',
+                    height: '64px',
+                    borderRadius: '50%',
+                    objectFit: 'cover',
+                  }}
+                />
+              ) : (
+                <div
+                  style={{
+                    width: '64px',
+                    height: '64px',
+                    borderRadius: '50%',
+                    background: 'var(--bg-muted)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: '28px',
+                  }}
+                >
+                  👤
+                </div>
+              )}
+
+              {/* Info */}
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <div
+                  style={{
+                    fontSize: '16px',
+                    fontWeight: 600,
+                    color: 'var(--text-primary)',
+                    marginBottom: '4px',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                  }}
+                >
+                  {result.type === 'track' ? result.title : result.displayName || result.username}
+                </div>
+                <div
+                  style={{
+                    fontSize: '13px',
+                    color: 'var(--text-secondary)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '8px',
+                  }}
+                >
+                  {result.type === 'track' ? (
+                    <>
+                      <span>🎵 Track</span>
+                      <span>•</span>
+                      <span>{result.genre}</span>
+                      {result.plays !== undefined && (
+                        <>
+                          <span>•</span>
+                          <span>{result.plays.toLocaleString()} plays</span>
+                        </>
+                      )}
+                    </>
+                  ) : (
+                    <>
+                      <span>👤 Artist</span>
+                      <span>•</span>
+                      <span>@{result.username}</span>
+                      {result.followerCount !== undefined && (
+                        <>
+                          <span>•</span>
+                          <span>{result.followerCount.toLocaleString()} followers</span>
+                        </>
+                      )}
+                    </>
+                  )}
+                </div>
+              </div>
+
+              {/* Arrow */}
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                style={{ color: 'var(--text-muted)' }}
+              >
+                <path d="m9 18 6-6-6-6" />
+              </svg>
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}