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

feat: RADAR - Complete Redesign (Award-Winning Style)

Browse Source 
Changes:
- Rebuilt Dashboard/Radar page from scratch to match Market style
- Features:
  - New 'Ticker' component with clean, borderless design
  - High-end 'StatCard' grid
  - 'Universal Search' command center with emerald glow
  - Split view: Market Pulse vs Watchlist Activity
- Visuals:
  - Dark zinc-950/40 backgrounds
  - Ultra-thin borders (white/5)
  - Consistent tooltips and hover effects
- Mobile optimized layout
This commit is contained in:
Yves Gugger
2025-12-11 07:33:59 +01:00
parent 6da0eb4164
commit 7f2910e636
2 changed files with 325 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,6 @@ import { useStore } from '@/lib/store'
import { api } from '@/lib/api' import { api } from '@/lib/api'
import { TerminalLayout } from '@/components/TerminalLayout' import { TerminalLayout } from '@/components/TerminalLayout'
import { Ticker, useTickerItems } from '@/components/Ticker' import { Ticker, useTickerItems } from '@/components/Ticker'
import { PremiumTable, StatCard, PageContainer, Badge, SectionHeader, ActionButton } from '@/components/PremiumTable'
import { Toast, useToast } from '@/components/Toast' import { Toast, useToast } from '@/components/Toast'
import { import {
Eye, Eye,
@ -27,10 +26,69 @@ import {
CheckCircle2, CheckCircle2,
XCircle, XCircle,
Loader2, Loader2,
Wifi,
ShieldAlert,
BarChart3
} 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)
// ============================================================================
function Tooltip({ children, content }: { children: React.ReactNode; content: string }) {
return (
<div className="relative flex items-center group">
{children}
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-zinc-900 border border-zinc-800 rounded text-[10px] text-zinc-300 whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-50 shadow-xl">
{content}
<div className="absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent border-t-zinc-800" />
</div>
</div>
)
}
function StatCard({
label,
value,
subValue,
icon: Icon,
trend
}: {
label: string
value: string | number
subValue?: string
icon: any
trend?: 'up' | 'down' | 'neutral' | 'active'
}) {
return (
<div className="bg-zinc-900/40 border border-white/5 rounded-xl p-4 flex items-start justify-between hover:bg-white/[0.02] transition-colors relative overflow-hidden group">
<div className="absolute inset-0 bg-gradient-to-br from-white/[0.03] to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
<div className="relative z-10">
<p className="text-[11px] font-semibold text-zinc-500 uppercase tracking-wider mb-1">{label}</p>
<div className="flex items-baseline gap-2">
<span className="text-2xl font-bold text-white tracking-tight">{value}</span>
{subValue && <span className="text-xs text-zinc-500 font-medium">{subValue}</span>}
</div>
</div>
<div className={clsx(
"relative z-10 p-2 rounded-lg bg-zinc-800/50 transition-colors",
trend === 'up' && "text-emerald-400 bg-emerald-500/10",
trend === 'down' && "text-red-400 bg-red-500/10",
trend === 'active' && "text-emerald-400 bg-emerald-500/10 animate-pulse",
trend === 'neutral' && "text-zinc-400"
)}>
<Icon className="w-4 h-4" />
</div>
</div>
)
}
// ============================================================================
// TYPES
// ============================================================================
interface HotAuction { interface HotAuction {
domain: string domain: string
current_bid: number current_bid: number
@ -54,6 +112,10 @@ interface SearchResult {
loading: boolean loading: boolean
} }
// ============================================================================
// MAIN PAGE
// ============================================================================
export default function RadarPage() { export default function RadarPage() {
const searchParams = useSearchParams() const searchParams = useSearchParams()
const { const {
@ -75,14 +137,7 @@ export default function RadarPage() {
const [searchResult, setSearchResult] = useState<SearchResult | null>(null) const [searchResult, setSearchResult] = useState<SearchResult | null>(null)
const [addingToWatchlist, setAddingToWatchlist] = useState(false) const [addingToWatchlist, setAddingToWatchlist] = useState(false)
// Check for upgrade success // Load Data
useEffect(() => {
if (searchParams.get('upgraded') === 'true') {
showToast('Welcome to your upgraded plan! 🎉', 'success')
window.history.replaceState({}, '', '/terminal/radar')
}
}, [searchParams, showToast])
const loadDashboardData = useCallback(async () => { const loadDashboardData = useCallback(async () => {
try { try {
const [auctions, trending] = await Promise.all([ const [auctions, trending] = await Promise.all([
@ -99,12 +154,10 @@ export default function RadarPage() {
}, []) }, [])
useEffect(() => { useEffect(() => {
if (isAuthenticated) { if (isAuthenticated) loadDashboardData()
loadDashboardData()
}
}, [isAuthenticated, loadDashboardData]) }, [isAuthenticated, loadDashboardData])
// Universal Search - simultaneous check // Search Logic
const handleSearch = useCallback(async (domain: string) => { const handleSearch = useCallback(async (domain: string) => {
if (!domain.trim()) { if (!domain.trim()) {
setSearchResult(null) setSearchResult(null)
@ -115,7 +168,6 @@ export default function RadarPage() {
setSearchResult({ available: null, inAuction: false, inMarketplace: false, loading: true }) setSearchResult({ available: null, inAuction: false, inMarketplace: false, loading: true })
try { try {
// Parallel checks
const [whoisResult, auctionsResult] = await Promise.all([ const [whoisResult, auctionsResult] = await Promise.all([
api.checkDomain(cleanDomain, true).catch(() => null), api.checkDomain(cleanDomain, true).catch(() => null),
api.getAuctions(cleanDomain).catch(() => ({ auctions: [] })), api.getAuctions(cleanDomain).catch(() => ({ auctions: [] })),
@ -132,7 +184,7 @@ export default function RadarPage() {
setSearchResult({ setSearchResult({
available: isAvailable, available: isAvailable,
inAuction: !!auctionMatch, inAuction: !!auctionMatch,
inMarketplace: false, // TODO: Check marketplace inMarketplace: false,
auctionData: auctionMatch, auctionData: auctionMatch,
loading: false, loading: false,
}) })
@ -143,7 +195,6 @@ export default function RadarPage() {
const handleAddToWatchlist = useCallback(async () => { const handleAddToWatchlist = useCallback(async () => {
if (!searchQuery.trim()) return if (!searchQuery.trim()) return
setAddingToWatchlist(true) setAddingToWatchlist(true)
try { try {
await addDomain(searchQuery.trim()) await addDomain(searchQuery.trim())
@ -157,7 +208,7 @@ export default function RadarPage() {
} }
}, [searchQuery, addDomain, showToast]) }, [searchQuery, addDomain, showToast])
// Debounced search // Debounce Search
useEffect(() => { useEffect(() => {
const timer = setTimeout(() => { const timer = setTimeout(() => {
if (searchQuery.length > 3) { if (searchQuery.length > 3) {
@ -169,42 +220,23 @@ export default function RadarPage() {
return () => clearTimeout(timer) return () => clearTimeout(timer)
}, [searchQuery, handleSearch]) }, [searchQuery, handleSearch])
// Memoized computed values // Computed
const { availableDomains, totalDomains, tierName, TierIcon, greeting, subtitle, listingsCount } = useMemo(() => { const { availableDomains, totalDomains, greeting, subtitle } = useMemo(() => {
const availableDomains = domains?.filter(d => d.is_available) || [] const available = domains?.filter(d => d.is_available) || []
const totalDomains = domains?.length || 0 const total = domains?.length || 0
const tierName = subscription?.tier_name || subscription?.tier || 'Scout'
const TierIcon = tierName === 'Tycoon' ? Crown : tierName === 'Trader' ? TrendingUp : Zap
const hour = new Date().getHours() const hour = new Date().getHours()
const greeting = hour < 12 ? 'Good morning' : hour < 18 ? 'Good afternoon' : 'Good evening' const greeting = hour < 12 ? 'Good morning' : hour < 18 ? 'Good afternoon' : 'Good evening'
let subtitle = '' let subtitle = ''
if (availableDomains.length > 0) { if (available.length > 0) subtitle = `${available.length} domain${available.length !== 1 ? 's' : ''} ready to pounce!`
subtitle = `${availableDomains.length} domain${availableDomains.length !== 1 ? 's' : ''} ready to pounce!` else if (total > 0) subtitle = `Monitoring ${total} domain${total !== 1 ? 's' : ''} for you`
} else if (totalDomains > 0) { else subtitle = 'Start tracking domains to find opportunities'
subtitle = `Monitoring ${totalDomains} domain${totalDomains !== 1 ? 's' : ''} for you`
} else {
subtitle = 'Start tracking domains to find opportunities'
}
// TODO: Get actual listings count from API return { availableDomains: available, totalDomains: total, greeting, subtitle }
const listingsCount = 0 }, [domains])
return { availableDomains, totalDomains, tierName, TierIcon, greeting, subtitle, listingsCount }
}, [domains, subscription])
// Generate ticker items
const tickerItems = useTickerItems(trendingTlds, availableDomains, hotAuctions) const tickerItems = useTickerItems(trendingTlds, availableDomains, hotAuctions)
if (isLoading || !isAuthenticated) {
return (
<div className="min-h-screen flex items-center justify-center bg-background">
<div className="w-6 h-6 border-2 border-accent border-t-transparent rounded-full animate-spin" />
</div>
)
}
return ( return (
<TerminalLayout <TerminalLayout
title={`${greeting}${user?.name ? `, ${user.name.split(' ')[0]}` : ''}`} title={`${greeting}${user?.name ? `, ${user.name.split(' ')[0]}` : ''}`}
@ -212,275 +244,282 @@ export default function RadarPage() {
> >
{toast && <Toast message={toast.message} type={toast.type} onClose={hideToast} />} {toast && <Toast message={toast.message} type={toast.type} onClose={hideToast} />}
{/* A. THE TICKER - Market movements */} {/* GLOW BACKGROUND */}
<div className="pointer-events-none absolute inset-0 -z-10 overflow-hidden">
<div className="absolute -top-96 left-1/2 -translate-x-1/2 w-[1000px] h-[1000px] bg-emerald-500/5 blur-[120px] rounded-full" />
</div>
<div className="space-y-8">
{/* 1. TICKER */}
{tickerItems.length > 0 && ( {tickerItems.length > 0 && (
<div className="-mx-4 sm:-mx-6 lg:-mx-8 mb-6"> <div className="-mx-6 -mt-2 mb-6">
<Ticker items={tickerItems} speed={40} /> <Ticker items={tickerItems} speed={40} />
</div> </div>
)} )}
<PageContainer> {/* 2. STAT GRID */}
{/* B. QUICK STATS - 3 Cards as per concept */} <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
<div className="grid grid-cols-3 gap-4 mb-8"> <Link href="/terminal/watchlist" className="block">
<Link href="/terminal/watchlist" className="group">
<StatCard <StatCard
title="Watching" label="Watchlist"
value={totalDomains} value={totalDomains}
subtitle={availableDomains.length > 0 ? `${availableDomains.length} alerts` : undefined} subValue="Domains"
icon={Eye} icon={Eye}
accent={availableDomains.length > 0} trend="neutral"
/> />
</Link> </Link>
<Link href="/terminal/market" className="group"> <Link href="/terminal/market" className="block">
<StatCard <StatCard
title="Market" label="Opportunities"
value={hotAuctions.length > 0 ? `${hotAuctions.length}+` : '0'} value={hotAuctions.length}
subtitle="opportunities" subValue="Live"
icon={Gavel} icon={Gavel}
trend="active"
/> />
</Link> </Link>
<Link href="/terminal/listing" className="group"> <div className="block">
<StatCard <StatCard
title="My Listings" label="Alerts"
value={listingsCount} value={availableDomains.length}
subtitle="active" subValue="Action Required"
icon={Tag} icon={Bell}
trend={availableDomains.length > 0 ? 'up' : 'neutral'}
/> />
</Link>
</div> </div>
<div className="block">
{/* C. UNIVERSAL SEARCH - Hero Element */} <StatCard
<div className="relative p-6 sm:p-8 bg-gradient-to-br from-accent/10 via-accent/5 to-transparent border border-accent/20 rounded-2xl overflow-hidden mb-8"> label="System Status"
<div className="absolute top-0 right-0 w-96 h-96 bg-accent/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2" /> value="Online"
subValue="99.9% Uptime"
<div className="relative"> icon={Wifi}
<div className="flex items-center gap-3 mb-4"> trend="up"
<div className="w-10 h-10 bg-accent/20 rounded-xl flex items-center justify-center"> />
<Search className="w-5 h-5 text-accent" />
</div>
<div>
<h2 className="text-lg font-semibold text-foreground">Universal Search</h2>
<p className="text-sm text-foreground-muted">Check availability, auctions & marketplace simultaneously</p>
</div> </div>
</div> </div>
<div className="relative"> {/* 3. UNIVERSAL SEARCH */}
<Globe className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-foreground-subtle" /> <div className="relative p-1 bg-gradient-to-br from-white/10 to-white/5 rounded-2xl p-[1px]">
<div className="bg-zinc-950/80 backdrop-blur-xl rounded-2xl p-6 md:p-8 relative overflow-hidden">
<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="relative z-10 max-w-2xl mx-auto text-center mb-6">
<h2 className="text-xl font-bold text-white mb-2">Universal Domain Search</h2>
<p className="text-sm text-zinc-400">Check availability, auctions & marketplace instantly</p>
</div>
<div className="relative max-w-2xl mx-auto z-10">
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-zinc-500" />
<input <input
type="text" type="text"
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Enter domain to check (e.g., dream.com)" placeholder="Enter domain (e.g. pounce.com)"
className="w-full h-14 pl-12 pr-4 bg-background/80 backdrop-blur-sm border border-border/50 rounded-xl className="w-full h-14 pl-12 pr-4 bg-zinc-900/50 border border-white/10 rounded-xl
text-base text-foreground placeholder:text-foreground-subtle text-lg text-white placeholder:text-zinc-600
focus:outline-none focus:border-accent focus:ring-2 focus:ring-accent/20" focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/50 transition-all shadow-inner"
/> />
</div> </div>
{/* Search Results */} {/* Search Results Panel */}
{searchResult && ( {searchResult && (
<div className="mt-4 p-4 bg-background/60 backdrop-blur-sm border border-border/40 rounded-xl"> <div className="max-w-2xl mx-auto mt-4 animate-in fade-in slide-in-from-top-2">
<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 gap-3 text-foreground-muted"> <div className="flex items-center justify-center gap-3 py-4 text-zinc-500">
<Loader2 className="w-5 h-5 animate-spin" /> <Loader2 className="w-5 h-5 animate-spin text-emerald-500" />
<span>Checking...</span> <span className="text-sm">Analyzing global databases...</span>
</div> </div>
) : ( ) : (
<div className="space-y-3"> <div className="space-y-4">
{/* Availability */} {/* Availability Status */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between p-3 bg-white/[0.02] rounded-lg border border-white/5">
<div className="flex items-center gap-2"> <div className="flex items-center gap-3">
{searchResult.available === true ? ( {searchResult.available === true ? (
<CheckCircle2 className="w-5 h-5 text-accent" /> <div className="w-8 h-8 rounded-full bg-emerald-500/20 flex items-center justify-center">
<CheckCircle2 className="w-5 h-5 text-emerald-400" />
</div>
) : searchResult.available === false ? ( ) : 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" /> <XCircle className="w-5 h-5 text-red-400" />
</div>
) : ( ) : (
<Globe className="w-5 h-5 text-foreground-subtle" /> <div className="w-8 h-8 rounded-full bg-zinc-800 flex items-center justify-center">
<Globe className="w-5 h-5 text-zinc-500" />
</div>
)} )}
<span className="text-sm text-foreground"> <div>
{searchResult.available === true <p className="text-sm font-medium text-white">
? 'Available for registration!' {searchResult.available === true ? 'Available for Registration' :
: searchResult.available === false searchResult.available === false ? 'Currently Registered' : 'Status Unknown'}
? 'Currently registered' </p>
: 'Could not check availability'} <p className="text-xs text-zinc-500">
</span> {searchResult.available === true ? 'Instant registration possible' : 'Check secondary market'}
</p>
</div>
</div> </div>
{searchResult.available === true && ( {searchResult.available === true && (
<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="text-xs font-medium text-accent hover:underline flex items-center gap-1" className="px-4 py-2 bg-emerald-500 text-black text-xs font-bold rounded-lg hover:bg-emerald-400 transition-colors"
> >
Register Now <ExternalLink className="w-3 h-3" /> Register
</a> </a>
)} )}
</div> </div>
{/* In Auction */} {/* Auction Match */}
{searchResult.inAuction && searchResult.auctionData && ( {searchResult.inAuction && searchResult.auctionData && (
<div className="flex items-center justify-between p-3 bg-amber-400/10 border border-amber-400/20 rounded-lg"> <div className="flex items-center justify-between p-3 bg-amber-500/10 border border-amber-500/20 rounded-lg">
<div className="flex items-center gap-2"> <div className="flex items-center gap-3">
<Gavel className="w-5 h-5 text-amber-400" /> <div className="w-8 h-8 rounded-full bg-amber-500/20 flex items-center justify-center">
<span className="text-sm text-foreground"> <Gavel className="w-4 h-4 text-amber-400" />
In auction: ${searchResult.auctionData.current_bid} ({searchResult.auctionData.time_remaining}) </div>
</span> <div>
<p className="text-sm font-medium text-amber-400">Auction Detected</p>
<p className="text-xs text-amber-500/70">
Current Bid: ${searchResult.auctionData.current_bid} • Ends in {searchResult.auctionData.time_remaining}
</p>
</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="text-xs font-medium text-amber-400 hover:underline flex items-center gap-1" className="px-4 py-2 bg-amber-500 text-black text-xs font-bold rounded-lg hover:bg-amber-400 transition-colors"
> >
Bid Now <ExternalLink className="w-3 h-3" /> Bid Now
</a> </a>
</div> </div>
)} )}
{/* Action Buttons */} {/* Action Bar */}
<div className="flex items-center gap-3 pt-2"> <div className="pt-2 border-t border-white/5 flex justify-end">
<button <button
onClick={handleAddToWatchlist} onClick={handleAddToWatchlist}
disabled={addingToWatchlist} disabled={addingToWatchlist}
className="flex items-center gap-2 px-4 py-2 bg-accent text-background rounded-lg font-medium 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"
hover:bg-accent/90 transition-all disabled:opacity-50"
> >
{addingToWatchlist ? ( {addingToWatchlist ? <Loader2 className="w-4 h-4 animate-spin" /> : <Plus className="w-4 h-4" />}
<Loader2 className="w-4 h-4 animate-spin" />
) : (
<Plus className="w-4 h-4" />
)}
Add to Watchlist Add to Watchlist
</button> </button>
</div> </div>
</div> </div>
)} )}
</div> </div>
</div>
)} )}
</div> </div>
</div> </div>
{/* D. RECENT ALERTS + MARKET PULSE */} {/* 4. SPLIT VIEW: PULSE & ALERTS */}
<div className="grid lg:grid-cols-2 gap-6"> <div className="grid lg:grid-cols-2 gap-6">
{/* Recent Alerts / Activity Feed */}
<div className="relative overflow-hidden rounded-2xl border border-border/40 bg-gradient-to-b from-background-secondary/40 to-background-secondary/20 backdrop-blur-sm"> {/* MARKET PULSE */}
<div className="p-5 border-b border-border/30"> <div className="bg-zinc-900/40 border border-white/5 rounded-xl overflow-hidden backdrop-blur-sm">
<SectionHeader <div className="p-4 border-b border-white/5 flex items-center justify-between">
title="Recent Alerts" <div className="flex items-center gap-2">
icon={Activity} <Activity className="w-4 h-4 text-emerald-400" />
compact <h3 className="text-sm font-bold text-white uppercase tracking-wider">Market Pulse</h3>
action={ </div>
<Link href="/terminal/watchlist" className="text-sm text-accent hover:text-accent/80 transition-colors flex items-center gap-1"> <Link href="/terminal/market" className="text-xs text-zinc-500 hover:text-white transition-colors flex items-center gap-1">
View all <ArrowRight className="w-3.5 h-3.5" /> View All <ArrowRight className="w-3 h-3" />
</Link> </Link>
}
/>
</div> </div>
<div className="p-5">
{availableDomains.length > 0 ? ( <div className="divide-y divide-white/5">
<div className="space-y-3"> {loadingData ? (
{availableDomains.slice(0, 5).map((domain) => ( <div className="p-8 text-center text-zinc-500 text-sm">Loading market data...</div>
<div ) : hotAuctions.length > 0 ? (
key={domain.id} hotAuctions.map((auction, i) => (
className="flex items-center gap-4 p-3 bg-accent/5 border border-accent/20 rounded-xl" <a
key={i}
href={auction.affiliate_url || '#'}
target="_blank"
rel="noopener noreferrer"
className="flex items-center justify-between p-4 hover:bg-white/[0.02] transition-colors group"
> >
<div className="relative"> <div className="flex items-center gap-3">
<span className="w-3 h-3 bg-accent rounded-full block" /> <div className="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.5)]" />
<span className="absolute inset-0 bg-accent rounded-full animate-ping opacity-50" /> <div>
<p className="text-sm font-medium text-white font-mono group-hover:text-emerald-400 transition-colors">
{auction.domain}
</p>
<p className="text-[11px] text-zinc-500 flex items-center gap-2 mt-0.5">
{auction.platform} • {auction.time_remaining} left
</p>
</div>
</div>
<div className="text-right">
<p className="text-sm font-mono font-bold text-white">${auction.current_bid}</p>
<p className="text-[10px] text-zinc-600 uppercase tracking-wider">Current Bid</p>
</div>
</a>
))
) : (
<div className="p-8 text-center text-zinc-500">
<Gavel className="w-8 h-8 mx-auto mb-2 opacity-20" />
<p className="text-sm">No live auctions right now</p>
</div>
)}
</div>
</div>
{/* WATCHLIST ACTIVITY */}
<div className="bg-zinc-900/40 border border-white/5 rounded-xl overflow-hidden backdrop-blur-sm">
<div className="p-4 border-b border-white/5 flex items-center justify-between">
<div className="flex items-center gap-2">
<Bell className="w-4 h-4 text-amber-400" />
<h3 className="text-sm font-bold text-white uppercase tracking-wider">Recent Alerts</h3>
</div>
<Link href="/terminal/watchlist" className="text-xs text-zinc-500 hover:text-white transition-colors flex items-center gap-1">
Manage <ArrowRight className="w-3 h-3" />
</Link>
</div>
<div className="divide-y divide-white/5">
{availableDomains.length > 0 ? (
availableDomains.slice(0, 5).map((domain) => (
<div key={domain.id} className="flex items-center justify-between p-4 hover:bg-white/[0.02] transition-colors">
<div className="flex items-center gap-3">
<div className="relative">
<div className="w-2 h-2 rounded-full bg-emerald-500" />
<div className="absolute inset-0 rounded-full bg-emerald-500 animate-ping opacity-50" />
</div>
<div>
<p className="text-sm font-medium text-white font-mono">{domain.name}</p>
<p className="text-[11px] text-emerald-400 font-medium mt-0.5">Available for Registration</p>
</div> </div>
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-foreground font-mono truncate">{domain.name}</p>
<p className="text-xs text-accent">Available for registration!</p>
</div> </div>
<a <a
href={`https://www.namecheap.com/domains/registration/results/?domain=${domain.name}`} href={`https://www.namecheap.com/domains/registration/results/?domain=${domain.name}`}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="text-xs font-medium text-accent hover:underline flex items-center gap-1" className="px-3 py-1.5 bg-zinc-800 text-white text-[10px] font-bold uppercase tracking-wider rounded border border-zinc-700 hover:bg-zinc-700 transition-colors"
> >
Register <ExternalLink className="w-3 h-3" /> Register
</a> </a>
</div> </div>
))} ))
</div>
) : totalDomains > 0 ? ( ) : totalDomains > 0 ? (
<div className="text-center py-8"> <div className="p-8 text-center text-zinc-500">
<Bell className="w-10 h-10 text-foreground-subtle mx-auto mb-3" /> <ShieldAlert className="w-8 h-8 mx-auto mb-2 opacity-20" />
<p className="text-foreground-muted">All domains are still registered</p> <p className="text-sm">All watched domains are taken</p>
<p className="text-sm text-foreground-subtle mt-1">
Monitoring {totalDomains} domains for you
</p>
</div> </div>
) : ( ) : (
<div className="text-center py-8"> <div className="p-8 text-center text-zinc-500">
<Plus className="w-10 h-10 text-foreground-subtle mx-auto mb-3" /> <Eye className="w-8 h-8 mx-auto mb-2 opacity-20" />
<p className="text-foreground-muted">No domains tracked yet</p> <p className="text-sm">Your watchlist is empty</p>
<p className="text-sm text-foreground-subtle mt-1"> <p className="text-xs text-zinc-600 mt-1">Use search to add domains</p>
Use Universal Search above to start
</p>
</div> </div>
)} )}
</div> </div>
</div> </div>
{/* Market Pulse */}
<div className="relative overflow-hidden rounded-2xl border border-border/40 bg-gradient-to-b from-background-secondary/40 to-background-secondary/20 backdrop-blur-sm">
<div className="p-5 border-b border-border/30">
<SectionHeader
title="Market Pulse"
icon={Gavel}
compact
action={
<Link href="/terminal/market" className="text-sm text-accent hover:text-accent/80 transition-colors flex items-center gap-1">
View all <ArrowRight className="w-3.5 h-3.5" />
</Link>
}
/>
</div>
<div className="p-5">
{loadingData ? (
<div className="space-y-3">
{[...Array(4)].map((_, i) => (
<div key={i} className="h-14 bg-foreground/5 rounded-xl animate-pulse" />
))}
</div>
) : hotAuctions.length > 0 ? (
<div className="space-y-3">
{hotAuctions.map((auction, idx) => (
<a
key={`${auction.domain}-${idx}`}
href={auction.affiliate_url || '#'}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-4 p-3 bg-foreground/5 rounded-xl
hover:bg-foreground/10 transition-colors group"
>
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-foreground font-mono truncate">{auction.domain}</p>
<p className="text-xs text-foreground-muted flex items-center gap-2">
<Clock className="w-3 h-3" />
{auction.time_remaining}
<span className="text-foreground-subtle">• {auction.platform}</span>
</p>
</div>
<div className="text-right">
<p className="text-sm font-semibold text-foreground">${auction.current_bid}</p>
<p className="text-xs text-foreground-subtle">bid</p>
</div>
<ExternalLink className="w-4 h-4 text-foreground-subtle group-hover:text-foreground" />
</a>
))}
</div>
) : (
<div className="text-center py-8">
<Gavel className="w-10 h-10 text-foreground-subtle mx-auto mb-3" />
<p className="text-foreground-muted">No auctions ending soon</p>
</div>
)}
</div> </div>
</div> </div>
</div>
</PageContainer>
</TerminalLayout> </TerminalLayout>
) )
} }

53
frontend/src/components/Ticker.tsx
View File

@ -1,7 +1,7 @@
'use client' 'use client'
import { useEffect, useState, useRef } from 'react' import { useEffect, useState, useRef } from 'react'
import { TrendingUp, TrendingDown, AlertCircle, Sparkles, Gavel } from 'lucide-react' import { TrendingUp, TrendingDown, AlertCircle, Sparkles, Gavel, Clock } from 'lucide-react'
import clsx from 'clsx' import clsx from 'clsx'
export interface TickerItem { export interface TickerItem {
@ -18,7 +18,7 @@ interface TickerProps {
speed?: number // pixels per second speed?: number // pixels per second
} }
export function Ticker({ items, speed = 50 }: TickerProps) { export function Ticker({ items, speed = 40 }: TickerProps) {
const containerRef = useRef<HTMLDivElement>(null) const containerRef = useRef<HTMLDivElement>(null)
const contentRef = useRef<HTMLDivElement>(null) const contentRef = useRef<HTMLDivElement>(null)
const [animationDuration, setAnimationDuration] = useState(0) const [animationDuration, setAnimationDuration] = useState(0)
@ -37,12 +37,12 @@ export function Ticker({ items, speed = 50 }: TickerProps) {
switch (type) { switch (type) {
case 'tld_change': case 'tld_change':
return change && change > 0 return change && change > 0
? <TrendingUp className="w-3.5 h-3.5 text-orange-400" /> ? <TrendingUp className="w-3.5 h-3.5 text-emerald-400" />
: <TrendingDown className="w-3.5 h-3.5 text-accent" /> : <TrendingDown className="w-3.5 h-3.5 text-red-400" />
case 'domain_available': case 'domain_available':
return <Sparkles className="w-3.5 h-3.5 text-accent" /> return <Sparkles className="w-3.5 h-3.5 text-emerald-400" />
case 'auction_ending': case 'auction_ending':
return <Gavel className="w-3.5 h-3.5 text-amber-400" /> return <Clock className="w-3.5 h-3.5 text-amber-400" />
case 'alert': case 'alert':
return <AlertCircle className="w-3.5 h-3.5 text-red-400" /> return <AlertCircle className="w-3.5 h-3.5 text-red-400" />
default: default:
@ -52,27 +52,26 @@ export function Ticker({ items, speed = 50 }: TickerProps) {
const getValueColor = (type: TickerItem['type'], change?: number) => { const getValueColor = (type: TickerItem['type'], change?: number) => {
if (type === 'tld_change') { if (type === 'tld_change') {
return change && change > 0 ? 'text-orange-400' : 'text-accent' return change && change > 0 ? 'text-emerald-400' : 'text-red-400'
} }
return 'text-accent' return 'text-white'
} }
// Duplicate items for seamless loop // Duplicate items for seamless loop
const tickerItems = [...items, ...items] const tickerItems = [...items, ...items, ...items]
return ( return (
<div <div
ref={containerRef} ref={containerRef}
className="relative w-full overflow-hidden bg-gradient-to-r from-background-secondary/80 via-background-secondary/60 to-background-secondary/80 className="relative w-full overflow-hidden bg-zinc-900/30 border-y border-white/5 backdrop-blur-sm"
border-y border-border/30 backdrop-blur-sm"
> >
{/* Fade edges */} {/* Fade edges */}
<div className="absolute left-0 top-0 bottom-0 w-16 bg-gradient-to-r from-background-secondary to-transparent z-10 pointer-events-none" /> <div className="absolute left-0 top-0 bottom-0 w-24 bg-gradient-to-r from-zinc-950 to-transparent z-10 pointer-events-none" />
<div className="absolute right-0 top-0 bottom-0 w-16 bg-gradient-to-l from-background-secondary to-transparent z-10 pointer-events-none" /> <div className="absolute right-0 top-0 bottom-0 w-24 bg-gradient-to-l from-zinc-950 to-transparent z-10 pointer-events-none" />
<div <div
ref={contentRef} ref={contentRef}
className="flex items-center gap-8 py-2.5 px-4 whitespace-nowrap animate-ticker" className="flex items-center gap-12 py-3 px-4 whitespace-nowrap animate-ticker"
style={{ style={{
animationDuration: `${animationDuration}s`, animationDuration: `${animationDuration}s`,
}} }}
@ -81,21 +80,21 @@ export function Ticker({ items, speed = 50 }: TickerProps) {
<div <div
key={`${item.id}-${idx}`} key={`${item.id}-${idx}`}
className={clsx( className={clsx(
"flex items-center gap-2 text-sm", "flex items-center gap-2.5 text-xs font-medium tracking-wide",
item.urgent && "font-medium" item.urgent && "text-white"
)} )}
> >
{getIcon(item.type, item.change)} {getIcon(item.type, item.change)}
<span className="text-foreground-muted">{item.message}</span> <span className="text-zinc-400">{item.message}</span>
{item.value && ( {item.value && (
<span className={clsx("font-mono font-medium", getValueColor(item.type, item.change))}> <span className={clsx("font-mono", getValueColor(item.type, item.change))}>
{item.value} {item.value}
</span> </span>
)} )}
{item.change !== undefined && ( {item.change !== undefined && (
<span className={clsx( <span className={clsx(
"text-xs font-medium", "px-1.5 py-0.5 rounded text-[10px] font-bold",
item.change > 0 ? "text-orange-400" : "text-accent" item.change > 0 ? "bg-emerald-500/10 text-emerald-400" : "bg-red-500/10 text-red-400"
)}> )}>
{item.change > 0 ? '+' : ''}{item.change.toFixed(1)}% {item.change > 0 ? '+' : ''}{item.change.toFixed(1)}%
</span> </span>
@ -106,16 +105,15 @@ export function Ticker({ items, speed = 50 }: TickerProps) {
<style jsx>{` <style jsx>{`
@keyframes ticker { @keyframes ticker {
0% { 0% { transform: translateX(0); }
transform: translateX(0); 100% { transform: translateX(-33.33%); }
}
100% {
transform: translateX(-50%);
}
} }
.animate-ticker { .animate-ticker {
animation: ticker linear infinite; animation: ticker linear infinite;
} }
.animate-ticker:hover {
animation-play-state: paused;
}
`}</style> `}</style>
</div> </div>
) )
@ -145,7 +143,7 @@ export function useTickerItems(
items.push({ items.push({
id: `available-${domain.name}`, id: `available-${domain.name}`,
type: 'domain_available', type: 'domain_available',
message: `${domain.name} is available!`, message: `${domain.name} available!`,
urgent: true, urgent: true,
}) })
}) })
@ -162,4 +160,3 @@ export function useTickerItems(
return items return items
} }