yvg/pounce
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: RADAR & MARKET - Content Integration & Award-Winning Search
Some checks failed
CI / Frontend Lint & Type Check (push) Has been cancelled
Details
CI / Frontend Build (push) Has been cancelled
Details
CI / Backend Lint (push) Has been cancelled
Details
CI / Backend Tests (push) Has been cancelled
Details
CI / Docker Build (push) Has been cancelled
Details
CI / Security Scan (push) Has been cancelled
Details
Deploy / Build & Push Images (push) Has been cancelled
Details
Deploy / Deploy to Server (push) Has been cancelled
Details
Deploy / Notify (push) Has been cancelled
Details

Browse Source 
Changes:
- TerminalLayout:
  - Added 'hideHeaderSearch' prop to remove top bar elements
  - Header is now non-sticky and transparent when search is hidden for seamless integration
- RADAR (Dashboard):
  - Removed top bar search/shortcuts
  - Implemented 'Hero Style' Universal Search:
    - Floating design with backdrop blur
    - Dynamic emerald glow on focus
    - Animated icons and clean typography
    - Integrated results dropdown
  - Content flows seamlessly from top
- MARKET:
  - Integrated header into content (removed sticky behavior)
  - Removed duplicate search/shortcuts from top bar
This commit is contained in:
Yves Gugger
2025-12-11 07:41:10 +01:00
parent eda7a1fa0a
commit 60d49272bf
3 changed files with 232 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/app/terminal/market/page.tsx
View File

@ -403,7 +403,11 @@ export default function MarketPage() {
const formatPrice = (price: number) => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(price) const formatPrice = (price: number) => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(price)
return ( return (
<TerminalLayout title="Market" subtitle="Global Domain Opportunities"> <TerminalLayout
title="Market"
subtitle="Global Domain Opportunities"
hideHeaderSearch={true}
>
<div className="relative"> <div className="relative">
{/* Page-specific emerald glow (mirrors landing page look) */} {/* Page-specific emerald glow (mirrors landing page look) */}
<div className="pointer-events-none absolute inset-0 -z-10"> <div className="pointer-events-none absolute inset-0 -z-10">

169
frontend/src/app/terminal/radar/page.tsx
View File

@ -1,6 +1,6 @@
'use client' 'use client'
import { useEffect, useState, useMemo, useCallback } from 'react' import { useEffect, useState, useMemo, useCallback, useRef } from 'react'
import { useSearchParams } from 'next/navigation' import { useSearchParams } from 'next/navigation'
import { useStore } from '@/lib/store' import { useStore } from '@/lib/store'
import { api } from '@/lib/api' import { api } from '@/lib/api'
@ -28,13 +28,14 @@ import {
Loader2, Loader2,
Wifi, Wifi,
ShieldAlert, ShieldAlert,
BarChart3 BarChart3,
Command
} from 'lucide-react' } from 'lucide-react'
import clsx from 'clsx' import clsx from 'clsx'
import Link from 'next/link' import Link from 'next/link'
// ============================================================================ // ============================================================================
// SHARED COMPONENTS (Matching Market Page Style) // SHARED COMPONENTS
// ============================================================================ // ============================================================================
function Tooltip({ children, content }: { children: React.ReactNode; content: string }) { function Tooltip({ children, content }: { children: React.ReactNode; content: string }) {
@ -136,6 +137,8 @@ export default function RadarPage() {
const [searchQuery, setSearchQuery] = useState('') const [searchQuery, setSearchQuery] = useState('')
const [searchResult, setSearchResult] = useState<SearchResult | null>(null) const [searchResult, setSearchResult] = useState<SearchResult | null>(null)
const [addingToWatchlist, setAddingToWatchlist] = useState(false) const [addingToWatchlist, setAddingToWatchlist] = useState(false)
const [searchFocused, setSearchFocused] = useState(false)
const searchInputRef = useRef<HTMLInputElement>(null)
// Load Data // Load Data
const loadDashboardData = useCallback(async () => { const loadDashboardData = useCallback(async () => {
@ -220,6 +223,18 @@ export default function RadarPage() {
return () => clearTimeout(timer) return () => clearTimeout(timer)
}, [searchQuery, handleSearch]) }, [searchQuery, handleSearch])
// Focus shortcut
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.metaKey && e.key === 'k') {
e.preventDefault()
searchInputRef.current?.focus()
}
}
window.addEventListener('keydown', handleKeyDown)
return () => window.removeEventListener('keydown', handleKeyDown)
}, [])
// Computed // Computed
const { availableDomains, totalDomains, greeting, subtitle } = useMemo(() => { const { availableDomains, totalDomains, greeting, subtitle } = useMemo(() => {
const available = domains?.filter(d => d.is_available) || [] const available = domains?.filter(d => d.is_available) || []
@ -241,6 +256,7 @@ export default function RadarPage() {
<TerminalLayout <TerminalLayout
title={`${greeting}${user?.name ? `, ${user.name.split(' ')[0]}` : ''}`} title={`${greeting}${user?.name ? `, ${user.name.split(' ')[0]}` : ''}`}
subtitle={subtitle} subtitle={subtitle}
hideHeaderSearch={true}
> >
{toast && <Toast message={toast.message} type={toast.type} onClose={hideToast} />} {toast && <Toast message={toast.message} type={toast.type} onClose={hideToast} />}
@ -260,7 +276,7 @@ export default function RadarPage() {
{/* 2. STAT GRID */} {/* 2. STAT GRID */}
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4"> <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
<Link href="/terminal/watchlist" className="block"> <Link href="/terminal/watchlist" className="block group">
<StatCard <StatCard
label="Watchlist" label="Watchlist"
value={totalDomains} value={totalDomains}
@ -269,7 +285,7 @@ export default function RadarPage() {
trend="neutral" trend="neutral"
/> />
</Link> </Link>
<Link href="/terminal/market" className="block"> <Link href="/terminal/market" className="block group">
<StatCard <StatCard
label="Opportunities" label="Opportunities"
value={hotAuctions.length} value={hotAuctions.length}
@ -298,117 +314,148 @@ export default function RadarPage() {
</div> </div>
</div> </div>
{/* 3. UNIVERSAL SEARCH */} {/* 3. AWARD-WINNING SEARCH (HERO STYLE) */}
<div className="relative p-1 bg-gradient-to-br from-white/10 to-white/5 rounded-2xl p-[1px]"> <div className="relative py-8">
<div className="bg-zinc-950/80 backdrop-blur-xl rounded-2xl p-6 md:p-8 relative overflow-hidden"> <div className="max-w-3xl mx-auto">
<div className="absolute top-0 right-0 w-64 h-64 bg-emerald-500/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2" /> <div className={clsx(
"relative bg-zinc-950/50 backdrop-blur-xl border rounded-2xl transition-all duration-300",
<div className="relative z-10 max-w-2xl mx-auto text-center mb-6"> searchFocused
<h2 className="text-xl font-bold text-white mb-2">Universal Domain Search</h2> ? "border-emerald-500/30 shadow-[0_0_40px_-10px_rgba(16,185,129,0.15)] scale-[1.01]"
<p className="text-sm text-zinc-400">Check availability, auctions & marketplace instantly</p> : "border-white/10 shadow-xl"
</div> )}>
<div className="relative flex items-center h-16 sm:h-20 px-6">
<div className="relative max-w-2xl mx-auto z-10"> <Search className={clsx(
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-zinc-500" /> "w-6 h-6 mr-4 transition-colors",
searchFocused ? "text-emerald-400" : "text-zinc-500"
)} />
<input <input
ref={searchInputRef}
type="text" type="text"
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Enter domain (e.g. pounce.com)" onFocus={() => setSearchFocused(true)}
className="w-full h-14 pl-12 pr-4 bg-zinc-900/50 border border-white/10 rounded-xl onBlur={() => setSearchFocused(false)}
text-lg text-white placeholder:text-zinc-600 placeholder="Analyze any domain..."
focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/50 transition-all shadow-inner" className="w-full bg-transparent text-xl sm:text-2xl text-white placeholder:text-zinc-600 font-light outline-none"
/> />
{!searchQuery && (
<div className="hidden sm:flex items-center gap-1.5 px-2 py-1 rounded border border-white/10 bg-white/5 text-xs text-zinc-500 font-mono">
<Command className="w-3 h-3" /> K
</div>
)}
{searchQuery && (
<button
onClick={() => { setSearchQuery(''); setSearchFocused(true); }}
className="p-2 text-zinc-500 hover:text-white transition-colors"
>
<XCircle className="w-5 h-5" />
</button>
)}
</div> </div>
{/* Search Results Panel */} {/* SEARCH RESULTS DROPDOWN */}
{searchResult && ( {searchResult && (
<div className="max-w-2xl mx-auto mt-4 animate-in fade-in slide-in-from-top-2"> <div className="border-t border-white/5 p-4 sm:p-6 animate-in slide-in-from-top-2 fade-in duration-200">
<div className="p-4 bg-zinc-900/90 border border-white/10 rounded-xl shadow-2xl">
{searchResult.loading ? ( {searchResult.loading ? (
<div className="flex items-center justify-center gap-3 py-4 text-zinc-500"> <div className="flex items-center justify-center py-8 gap-3 text-zinc-500">
<Loader2 className="w-5 h-5 animate-spin text-emerald-500" /> <Loader2 className="w-5 h-5 animate-spin text-emerald-500" />
<span className="text-sm">Analyzing global databases...</span> <span className="text-sm font-medium">Scanning global availability...</span>
</div> </div>
) : ( ) : (
<div className="space-y-4"> <div className="space-y-6">
{/* Availability Status */} {/* Availability Card */}
<div className="flex items-center justify-between p-3 bg-white/[0.02] rounded-lg border border-white/5"> <div className={clsx(
<div className="flex items-center gap-3"> "flex flex-col sm:flex-row items-start sm:items-center justify-between p-4 rounded-xl border transition-all",
{searchResult.available === true ? ( searchResult.available
<div className="w-8 h-8 rounded-full bg-emerald-500/20 flex items-center justify-center"> ? "bg-emerald-500/10 border-emerald-500/20"
: "bg-white/[0.02] border-white/5"
)}>
<div className="flex items-center gap-4 mb-4 sm:mb-0">
{searchResult.available ? (
<div className="w-10 h-10 rounded-full bg-emerald-500/20 flex items-center justify-center shadow-[0_0_15px_rgba(16,185,129,0.2)]">
<CheckCircle2 className="w-5 h-5 text-emerald-400" /> <CheckCircle2 className="w-5 h-5 text-emerald-400" />
</div> </div>
) : searchResult.available === false ? (
<div className="w-8 h-8 rounded-full bg-red-500/20 flex items-center justify-center">
<XCircle className="w-5 h-5 text-red-400" />
</div>
) : ( ) : (
<div className="w-8 h-8 rounded-full bg-zinc-800 flex items-center justify-center"> <div className="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center">
<Globe className="w-5 h-5 text-zinc-500" /> <XCircle className="w-5 h-5 text-red-400" />
</div> </div>
)} )}
<div> <div>
<p className="text-sm font-medium text-white"> <h3 className="text-lg font-medium text-white">
{searchResult.available === true ? 'Available for Registration' : {searchResult.available ? 'Available' : 'Registered'}
searchResult.available === false ? 'Currently Registered' : 'Status Unknown'} </h3>
</p> <p className="text-sm text-zinc-400">
<p className="text-xs text-zinc-500"> {searchResult.available
{searchResult.available === true ? 'Instant registration possible' : 'Check secondary market'} ? 'Ready for immediate registration'
: 'Currently owned by someone else'}
</p> </p>
</div> </div>
</div> </div>
{searchResult.available === true && (
{searchResult.available && (
<a <a
href={`https://www.namecheap.com/domains/registration/results/?domain=${searchQuery}`} href={`https://www.namecheap.com/domains/registration/results/?domain=${searchQuery}`}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="px-4 py-2 bg-emerald-500 text-black text-xs font-bold rounded-lg hover:bg-emerald-400 transition-colors" className="w-full sm:w-auto px-6 py-2.5 bg-emerald-500 hover:bg-emerald-400 text-black text-sm font-bold rounded-lg transition-all shadow-lg hover:shadow-emerald-500/20 text-center"
> >
Register Register Now
</a> </a>
)} )}
</div> </div>
{/* Auction Match */} {/* Auction Card */}
{searchResult.inAuction && searchResult.auctionData && ( {searchResult.inAuction && searchResult.auctionData && (
<div className="flex items-center justify-between p-3 bg-amber-500/10 border border-amber-500/20 rounded-lg"> <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between p-4 rounded-xl border border-amber-500/20 bg-amber-500/5">
<div className="flex items-center gap-3"> <div className="flex items-center gap-4 mb-4 sm:mb-0">
<div className="w-8 h-8 rounded-full bg-amber-500/20 flex items-center justify-center"> <div className="w-10 h-10 rounded-full bg-amber-500/10 flex items-center justify-center">
<Gavel className="w-4 h-4 text-amber-400" /> <Gavel className="w-5 h-5 text-amber-400" />
</div> </div>
<div> <div>
<p className="text-sm font-medium text-amber-400">Auction Detected</p> <h3 className="text-lg font-medium text-white flex items-center gap-2">
<p className="text-xs text-amber-500/70"> In Auction
Current Bid: ${searchResult.auctionData.current_bid} • Ends in {searchResult.auctionData.time_remaining} <span className="px-2 py-0.5 rounded text-[10px] bg-amber-500/20 text-amber-400 uppercase tracking-wider font-bold">Live</span>
</h3>
<p className="text-sm text-zinc-400 font-mono mt-1">
Current Bid: <span className="text-white font-bold">${searchResult.auctionData.current_bid}</span> • Ends in {searchResult.auctionData.time_remaining}
</p> </p>
</div> </div>
</div> </div>
<a <a
href={searchResult.auctionData.affiliate_url} href={searchResult.auctionData.affiliate_url}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="px-4 py-2 bg-amber-500 text-black text-xs font-bold rounded-lg hover:bg-amber-400 transition-colors" className="w-full sm:w-auto px-6 py-2.5 bg-amber-500 hover:bg-amber-400 text-black text-sm font-bold rounded-lg transition-all shadow-lg hover:shadow-amber-500/20 text-center"
> >
Bid Now Place Bid
</a> </a>
</div> </div>
)} )}
{/* Action Bar */} {/* Add to Watchlist */}
<div className="pt-2 border-t border-white/5 flex justify-end"> <div className="flex justify-end pt-2">
<button <button
onClick={handleAddToWatchlist} onClick={handleAddToWatchlist}
disabled={addingToWatchlist} disabled={addingToWatchlist}
className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-zinc-300 hover:text-white hover:bg-white/5 rounded-lg transition-colors" className="flex items-center gap-2 px-6 py-2.5 text-zinc-400 hover:text-white hover:bg-white/5 rounded-lg transition-all text-sm font-medium"
> >
{addingToWatchlist ? <Loader2 className="w-4 h-4 animate-spin" /> : <Plus className="w-4 h-4" />} {addingToWatchlist ? <Loader2 className="w-4 h-4 animate-spin" /> : <Plus className="w-4 h-4" />}
Add to Watchlist Add to Pounce Watchlist
</button> </button>
</div> </div>
</div> </div>
)} )}
</div> </div>
)}
</div>
{/* Helper Text */}
{!searchQuery && !searchFocused && (
<div className="mt-4 text-center">
<p className="text-sm text-zinc-500">
Search across <span className="text-zinc-400 font-medium">Global Registrars</span>, <span className="text-zinc-400 font-medium">Auctions</span>, and <span className="text-zinc-400 font-medium">Marketplaces</span> simultaneously.
</p>
</div> </div>
)} )}
</div> </div>

48
frontend/src/components/TerminalLayout.tsx
View File

@ -14,13 +14,15 @@ interface TerminalLayoutProps {
title?: string title?: string
subtitle?: string subtitle?: string
actions?: React.ReactNode actions?: React.ReactNode
hideHeaderSearch?: boolean // New prop to control header elements
} }
export function TerminalLayout({ export function TerminalLayout({
children, children,
title, title,
subtitle, subtitle,
actions actions,
hideHeaderSearch = false
}: TerminalLayoutProps) { }: TerminalLayoutProps) {
const router = useRouter() const router = useRouter()
const { isAuthenticated, isLoading, checkAuth, domains } = useStore() const { isAuthenticated, isLoading, checkAuth, domains } = useStore()
@ -107,8 +109,13 @@ export function TerminalLayout({
"ml-0 pt-16 lg:pt-0" "ml-0 pt-16 lg:pt-0"
)} )}
> >
{/* Top Bar */} {/* Top Bar - No longer sticky if hideHeaderSearch is true, or generally refined */}
<header className="sticky top-0 z-30 bg-gradient-to-r from-background/95 via-background/90 to-background/95 backdrop-blur-xl border-b border-border/30"> <header className={clsx(
"z-30 border-b border-border/30 transition-all duration-200",
hideHeaderSearch
? "relative bg-transparent border-none py-2" // Integrated feel
: "sticky top-0 bg-zinc-950/80 backdrop-blur-xl" // Sticky standard
)}>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-5 sm:py-6 flex items-center justify-between"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-5 sm:py-6 flex items-center justify-between">
{/* Left: Title */} {/* Left: Title */}
<div className="ml-10 lg:ml-0 min-w-0 flex-1"> <div className="ml-10 lg:ml-0 min-w-0 flex-1">
@ -122,6 +129,8 @@ export function TerminalLayout({
{/* Right: Actions */} {/* Right: Actions */}
<div className="flex items-center gap-2 sm:gap-3 shrink-0 ml-4"> <div className="flex items-center gap-2 sm:gap-3 shrink-0 ml-4">
{!hideHeaderSearch && (
<>
{/* Quick Search */} {/* Quick Search */}
<button <button
onClick={() => setSearchOpen(true)} onClick={() => setSearchOpen(true)}
@ -165,13 +174,13 @@ export function TerminalLayout({
{/* Notifications Dropdown */} {/* Notifications Dropdown */}
{notificationsOpen && ( {notificationsOpen && (
<div className="absolute right-0 top-full mt-2 w-80 bg-background-secondary border border-border <div className="absolute right-0 top-full mt-2 w-80 bg-zinc-900 border border-zinc-800
rounded-xl shadow-2xl overflow-hidden"> rounded-xl shadow-2xl overflow-hidden z-50">
<div className="p-4 border-b border-border flex items-center justify-between"> <div className="p-4 border-b border-zinc-800 flex items-center justify-between">
<h3 className="text-sm font-medium text-foreground">Notifications</h3> <h3 className="text-sm font-medium text-white">Notifications</h3>
<button <button
onClick={() => setNotificationsOpen(false)} onClick={() => setNotificationsOpen(false)}
className="text-foreground-muted hover:text-foreground" className="text-zinc-500 hover:text-white"
> >
<X className="w-4 h-4" /> <X className="w-4 h-4" />
</button> </button>
@ -184,23 +193,23 @@ export function TerminalLayout({
key={domain.id} key={domain.id}
href="/terminal/watchlist" href="/terminal/watchlist"
onClick={() => setNotificationsOpen(false)} onClick={() => setNotificationsOpen(false)}
className="flex items-start gap-3 p-3 hover:bg-foreground/5 rounded-lg transition-colors" className="flex items-start gap-3 p-3 hover:bg-white/5 rounded-lg transition-colors"
> >
<div className="w-8 h-8 bg-accent/10 rounded-lg flex items-center justify-center shrink-0"> <div className="w-8 h-8 bg-emerald-500/10 rounded-lg flex items-center justify-center shrink-0">
<span className="w-2 h-2 bg-accent rounded-full animate-pulse" /> <span className="w-2 h-2 bg-emerald-500 rounded-full animate-pulse" />
</div> </div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<p className="text-sm font-medium text-foreground truncate">{domain.name}</p> <p className="text-sm font-medium text-white truncate">{domain.name}</p>
<p className="text-xs text-accent">Available now!</p> <p className="text-xs text-emerald-400">Available now!</p>
</div> </div>
</Link> </Link>
))} ))}
</div> </div>
) : ( ) : (
<div className="p-8 text-center"> <div className="p-8 text-center">
<Bell className="w-8 h-8 text-foreground-subtle mx-auto mb-3" /> <Bell className="w-8 h-8 text-zinc-700 mx-auto mb-3" />
<p className="text-sm text-foreground-muted">No notifications</p> <p className="text-sm text-zinc-500">No notifications</p>
<p className="text-xs text-foreground-subtle mt-1"> <p className="text-xs text-zinc-600 mt-1">
We'll notify you when domains become available We'll notify you when domains become available
</p> </p>
</div> </div>
@ -220,6 +229,8 @@ export function TerminalLayout({
<Command className="w-3.5 h-3.5" /> <Command className="w-3.5 h-3.5" />
<span>?</span> <span>?</span>
</button> </button>
</>
)}
{/* Custom Actions */} {/* Custom Actions */}
{actions} {actions}
@ -235,7 +246,8 @@ export function TerminalLayout({
</main> </main>
</div> </div>
{/* Quick Search Modal */} {/* Quick Search Modal - Only if not hidden, or maybe still available via hotkey?
Let's keep it available via hotkey but hidden from UI if requested */}
{searchOpen && ( {searchOpen && (
<div <div
className="fixed inset-0 z-[60] bg-background/80 backdrop-blur-sm flex items-start justify-center pt-[15vh] sm:pt-[20vh] px-4" className="fixed inset-0 z-[60] bg-background/80 backdrop-blur-sm flex items-start justify-center pt-[15vh] sm:pt-[20vh] px-4"
@ -271,7 +283,7 @@ export function TerminalLayout({
</div> </div>
)} )}
{/* Keyboard shortcut for search */} {/* Keyboard shortcut for search - Still active unless strictly disabled */}
<KeyboardShortcut onTrigger={() => setSearchOpen(true)} keys={['Meta', 'k']} /> <KeyboardShortcut onTrigger={() => setSearchOpen(true)} keys={['Meta', 'k']} />
</div> </div>
</KeyboardShortcutsProvider> </KeyboardShortcutsProvider>