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

feat: MARKET & NAV - High-End Polish

Browse Source 
Changes:
- MARKET: Re-introduced 'Emerald Glow' background effect (Landing Page style)
- NAVIGATION: Complete redesign of Sidebar to match Award-Winning style
  - Darker, cleaner background (zinc-950)
  - Ultra-thin borders (white/5)
  - New active state: subtle emerald glow line + text color (no blocky backgrounds)
  - Simplified Logo section
  - Modernized User Profile card
This commit is contained in:
Yves Gugger
2025-12-11 07:27:40 +01:00
parent 8e2adfac0a
commit 6da0eb4164
2 changed files with 323 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -313,7 +313,7 @@ export default function MarketPage() {
// Watchlist
const [trackedDomains, setTrackedDomains] = useState<Set<string>>(new Set())
const [trackingInProgress, setTrackingInProgress] = useState<string | null>(null)
// Load
const loadData = useCallback(async () => {
setLoading(true)
@ -378,7 +378,7 @@ export default function MarketPage() {
if (priceRange === 'high') filtered = filtered.filter(item => item.price >= 1000)
if (searchQuery) filtered = filtered.filter(item => item.domain.toLowerCase().includes(searchQuery.toLowerCase()))
const mult = sortDirection === 'asc' ? 1 : -1
const mult = sortDirection === 'asc' ? 1 : -1
filtered.sort((a, b) => {
switch (sortField) {
case 'domain': return mult * a.domain.localeCompare(b.domain)
@ -386,9 +386,9 @@ export default function MarketPage() {
case 'price': return mult * (a.price - b.price)
case 'time': return mult * (parseTimeToSeconds(a.timeLeft) - parseTimeToSeconds(b.timeLeft))
case 'source': return mult * a.source.localeCompare(b.source)
default: return 0
}
})
default: return 0
}
})
return filtered
}, [auctions, hideSpam, pounceOnly, priceRange, searchQuery, sortField, sortDirection])
@ -404,215 +404,224 @@ export default function MarketPage() {
return (
<TerminalLayout title="Market" subtitle="Global Domain Opportunities">
<div className="space-y-6 pb-20 md:pb-0">
{/* METRICS */}
<div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
<StatCard label="Active" value={stats.total} icon={Activity} trend="neutral" />
<StatCard label="Top Tier" value={stats.highScore} subValue="80+ Score" icon={TrendingUp} trend="up" />
<StatCard label="Ending Soon" value={stats.endingSoon} subValue="< 1h" icon={Flame} trend={stats.endingSoon > 5 ? 'down' : 'neutral'} />
<StatCard label="Avg Price" value={formatPrice(stats.avgPrice)} icon={Zap} trend="neutral" />
<div className="relative">
{/* Page-specific emerald glow (mirrors landing page look) */}
<div className="pointer-events-none absolute inset-0 -z-10">
<div className="absolute -top-72 left-1/2 -translate-x-1/2 w-[1200px] h-[900px] bg-emerald-500/8 blur-[160px]" />
<div className="absolute bottom-[-240px] right-[-160px] w-[720px] h-[720px] bg-emerald-500/6 blur-[140px]" />
<div className="absolute bottom-[-180px] left-[-120px] w-[520px] h-[520px] bg-emerald-500/5 blur-[120px]" />
</div>
{/* CONTROLS */}
<div className="sticky top-0 z-30 bg-zinc-950/80 backdrop-blur-md py-4 border-b border-white/5 -mx-4 px-4 md:mx-0 md:px-0 md:border-none md:bg-transparent md:static">
<div className="flex flex-col md:flex-row gap-4">
{/* Search */}
<div className="relative w-full md:w-80 group">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-500 group-focus-within:text-white transition-colors" />
<input
type="text"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Search domains..."
className="w-full pl-10 pr-4 py-2.5 bg-zinc-900 border border-white/10 rounded-xl
text-sm text-white placeholder:text-zinc-600
focus:outline-none focus:border-white/20 focus:ring-1 focus:ring-white/20 transition-all"
/>
</div>
{/* Filters */}
<div className="flex items-center gap-2 overflow-x-auto w-full pb-1 md:pb-0 scrollbar-hide mask-fade-right">
<FilterToggle active={hideSpam} onClick={() => setHideSpam(!hideSpam)} label="No Spam" />
<FilterToggle active={pounceOnly} onClick={() => setPounceOnly(!pounceOnly)} label="Pounce Exclusive" />
<div className="w-px h-5 bg-white/10 mx-2 flex-shrink-0" />
<FilterToggle active={priceRange === 'low'} onClick={() => setPriceRange(p => p === 'low' ? 'all' : 'low')} label="< $100" />
<FilterToggle active={priceRange === 'high'} onClick={() => setPriceRange(p => p === 'high' ? 'all' : 'high')} label="$1k+" />
</div>
<div className="hidden md:block flex-1" />
<button onClick={handleRefresh} className="hidden md:flex items-center gap-2 text-xs font-medium text-zinc-500 hover:text-white transition-colors">
<RefreshCw className={clsx("w-3.5 h-3.5", refreshing && "animate-spin")} />
Refresh
</button>
<div className="space-y-6 pb-20 md:pb-0 relative">
{/* METRICS */}
<div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
<StatCard label="Active" value={stats.total} icon={Activity} trend="neutral" />
<StatCard label="Top Tier" value={stats.highScore} subValue="80+ Score" icon={TrendingUp} trend="up" />
<StatCard label="Ending Soon" value={stats.endingSoon} subValue="< 1h" icon={Flame} trend={stats.endingSoon > 5 ? 'down' : 'neutral'} />
<StatCard label="Avg Price" value={formatPrice(stats.avgPrice)} icon={Zap} trend="neutral" />
</div>
</div>
{/* DATA GRID */}
<div className="min-h-[400px]">
{loading ? (
<div className="flex flex-col items-center justify-center py-32 space-y-4">
<Loader2 className="w-8 h-8 text-emerald-500 animate-spin" />
<p className="text-zinc-500 text-sm animate-pulse">Scanning markets...</p>
</div>
) : marketItems.length === 0 ? (
<div className="flex flex-col items-center justify-center py-32 text-center">
<div className="w-16 h-16 bg-zinc-900 rounded-full flex items-center justify-center mb-4 border border-zinc-800">
<Search className="w-6 h-6 text-zinc-600" />
{/* CONTROLS */}
<div className="sticky top-0 z-30 bg-zinc-950/80 backdrop-blur-md py-4 border-b border-white/5 -mx-4 px-4 md:mx-0 md:px-0 md:border-none md:bg-transparent md:static">
<div className="flex flex-col md:flex-row gap-4">
{/* Search */}
<div className="relative w-full md:w-80 group">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-500 group-focus-within:text-white transition-colors" />
<input
type="text"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Search domains..."
className="w-full pl-10 pr-4 py-2.5 bg-zinc-900 border border-white/10 rounded-xl
text-sm text-white placeholder:text-zinc-600
focus:outline-none focus:border-white/20 focus:ring-1 focus:ring-white/20 transition-all"
/>
</div>
<h3 className="text-white font-medium mb-1">No matches found</h3>
<p className="text-zinc-500 text-sm">Try adjusting your filters</p>
{/* Filters */}
<div className="flex items-center gap-2 overflow-x-auto w-full pb-1 md:pb-0 scrollbar-hide mask-fade-right">
<FilterToggle active={hideSpam} onClick={() => setHideSpam(!hideSpam)} label="No Spam" />
<FilterToggle active={pounceOnly} onClick={() => setPounceOnly(!pounceOnly)} label="Pounce Exclusive" />
<div className="w-px h-5 bg-white/10 mx-2 flex-shrink-0" />
<FilterToggle active={priceRange === 'low'} onClick={() => setPriceRange(p => p === 'low' ? 'all' : 'low')} label="< $100" />
<FilterToggle active={priceRange === 'high'} onClick={() => setPriceRange(p => p === 'high' ? 'all' : 'high')} label="$1k+" />
</div>
<div className="hidden md:block flex-1" />
<button onClick={handleRefresh} className="hidden md:flex items-center gap-2 text-xs font-medium text-zinc-500 hover:text-white transition-colors">
<RefreshCw className={clsx("w-3.5 h-3.5", refreshing && "animate-spin")} />
Refresh
</button>
</div>
) : (
<>
{/* DESKTOP TABLE */}
<div className="hidden md:block border border-white/5 rounded-xl overflow-hidden bg-zinc-900/40 backdrop-blur-sm shadow-xl">
<div className="grid grid-cols-12 gap-4 px-6 py-3 border-b border-white/5 bg-white/[0.02]">
<div className="col-span-4"><SortableHeader label="Domain Asset" field="domain" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} tooltip="The domain name being auctioned" /></div>
<div className="col-span-2 text-center"><SortableHeader label="Score" field="score" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} align="center" tooltip="Pounce Score: AI-calculated value based on length, TLD, and demand" /></div>
<div className="col-span-2 text-right"><SortableHeader label="Price" field="price" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} align="right" tooltip="Current highest bid or buy-now price" /></div>
<div className="col-span-2 text-center"><SortableHeader label="Time" field="time" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} align="center" tooltip="Time remaining until auction ends" /></div>
<div className="col-span-2 text-right"><span className="text-[10px] font-bold uppercase tracking-widest text-zinc-600 py-2 block">Action</span></div>
</div>
{/* DATA GRID */}
<div className="min-h-[400px]">
{loading ? (
<div className="flex flex-col items-center justify-center py-32 space-y-4">
<Loader2 className="w-8 h-8 text-emerald-500 animate-spin" />
<p className="text-zinc-500 text-sm animate-pulse">Scanning markets...</p>
</div>
) : marketItems.length === 0 ? (
<div className="flex flex-col items-center justify-center py-32 text-center">
<div className="w-16 h-16 bg-zinc-900 rounded-full flex items-center justify-center mb-4 border border-zinc-800">
<Search className="w-6 h-6 text-zinc-600" />
</div>
<div className="divide-y divide-white/5">
<h3 className="text-white font-medium mb-1">No matches found</h3>
<p className="text-zinc-500 text-sm">Try adjusting your filters</p>
</div>
) : (
<>
{/* DESKTOP TABLE */}
<div className="hidden md:block border border-white/5 rounded-xl overflow-hidden bg-zinc-900/40 backdrop-blur-sm shadow-xl">
<div className="grid grid-cols-12 gap-4 px-6 py-3 border-b border-white/5 bg-white/[0.02]">
<div className="col-span-4"><SortableHeader label="Domain Asset" field="domain" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} tooltip="The domain name being auctioned" /></div>
<div className="col-span-2 text-center"><SortableHeader label="Score" field="score" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} align="center" tooltip="Pounce Score: AI-calculated value based on length, TLD, and demand" /></div>
<div className="col-span-2 text-right"><SortableHeader label="Price" field="price" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} align="right" tooltip="Current highest bid or buy-now price" /></div>
<div className="col-span-2 text-center"><SortableHeader label="Time" field="time" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} align="center" tooltip="Time remaining until auction ends" /></div>
<div className="col-span-2 text-right"><span className="text-[10px] font-bold uppercase tracking-widest text-zinc-600 py-2 block">Action</span></div>
</div>
<div className="divide-y divide-white/5">
{marketItems.map((item) => {
const timeLeftSec = parseTimeToSeconds(item.timeLeft)
const isUrgent = timeLeftSec < 3600
return (
<div key={item.id} className="grid grid-cols-12 gap-4 px-6 py-4 items-center hover:bg-white/[0.04] transition-all group relative">
{/* Domain */}
<div className="col-span-4">
<div className="flex items-center gap-3">
{item.isPounce && (
<Tooltip content="Pounce Exclusive Inventory">
<Diamond className="w-4 h-4 text-emerald-400 fill-emerald-400/20" />
</Tooltip>
)}
<div>
<div className="font-medium text-white text-[15px] tracking-tight cursor-default">{item.domain}</div>
<Tooltip content={`Source: ${item.source}`}>
<div className="text-[11px] text-zinc-500 mt-0.5 w-fit hover:text-zinc-300 cursor-help transition-colors">{item.source}</div>
</Tooltip>
</div>
</div>
</div>
{/* Score */}
<div className="col-span-2 flex justify-center"><ScoreDisplay score={item.pounceScore} /></div>
{/* Price */}
<div className="col-span-2 text-right">
<Tooltip content={`${item.numBids || 0} bids placed`}>
<div className="cursor-help">
<div className="font-mono text-white font-medium">{formatPrice(item.price)}</div>
{item.numBids !== undefined && item.numBids > 0 && <div className="text-[10px] text-zinc-500 mt-0.5">{item.numBids} bids</div>}
</div>
</Tooltip>
</div>
{/* Time */}
<div className="col-span-2 flex justify-center">
<Tooltip content="Auction ends soon">
<div className={clsx("flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium cursor-help", isUrgent ? "text-red-400 bg-red-500/10" : "text-zinc-400 bg-zinc-800/50")}>
<Clock className="w-3 h-3" />
{item.timeLeft}
</div>
</Tooltip>
</div>
{/* Actions */}
<div className="col-span-2 flex items-center justify-end opacity-0 group-hover:opacity-100 transition-opacity">
{/* Monitor Button - Distinct Style & Spacing */}
<Tooltip content={trackedDomains.has(item.domain) ? "Already tracking" : "Add to Watchlist"}>
<button
onClick={() => handleTrack(item.domain)}
disabled={trackedDomains.has(item.domain)}
className={clsx(
"w-8 h-8 flex items-center justify-center rounded-full border transition-all mr-4", // Added margin-right for separation
trackedDomains.has(item.domain)
? "bg-emerald-500/10 text-emerald-400 border-emerald-500/20 cursor-default"
: "border-zinc-700 bg-zinc-900 text-zinc-400 hover:text-white hover:border-zinc-500 hover:scale-105 active:scale-95"
)}
>
{trackedDomains.has(item.domain) ? <Check className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
</button>
</Tooltip>
{/* Buy Button */}
<Tooltip content={item.isPounce ? "Buy Instantly" : "Place Bid on External Site"}>
<a href={item.affiliateUrl || '#'} target="_blank" rel="noopener noreferrer" className="h-9 px-4 flex items-center gap-2 bg-white text-zinc-950 rounded-lg text-xs font-bold hover:bg-zinc-200 transition-all hover:scale-105 active:scale-95 shadow-lg shadow-white/5">
{item.isPounce ? 'Buy Now' : 'Place Bid'}
<ExternalLink className="w-3 h-3" />
</a>
</Tooltip>
</div>
</div>
)
})}
</div>
</div>
{/* MOBILE CARDS */}
<div className="md:hidden space-y-3">
{marketItems.map((item) => {
const timeLeftSec = parseTimeToSeconds(item.timeLeft)
const isUrgent = timeLeftSec < 3600
return (
<div key={item.id} className="grid grid-cols-12 gap-4 px-6 py-4 items-center hover:bg-white/[0.04] transition-all group relative">
{/* Domain */}
<div className="col-span-4">
<div className="flex items-center gap-3">
{item.isPounce && (
<Tooltip content="Pounce Exclusive Inventory">
<Diamond className="w-4 h-4 text-emerald-400 fill-emerald-400/20" />
</Tooltip>
)}
<div>
<div className="font-medium text-white text-[15px] tracking-tight cursor-default">{item.domain}</div>
<Tooltip content={`Source: ${item.source}`}>
<div className="text-[11px] text-zinc-500 mt-0.5 w-fit hover:text-zinc-300 cursor-help transition-colors">{item.source}</div>
</Tooltip>
</div>
return (
<div key={item.id} className="bg-zinc-900/40 border border-white/5 rounded-xl p-4 active:bg-zinc-900/60 transition-colors">
<div className="flex justify-between items-start mb-3">
<div className="flex items-center gap-2">
{item.isPounce && <Diamond className="w-3.5 h-3.5 text-emerald-400 fill-emerald-400/20" />}
<span className="font-medium text-white text-base">{item.domain}</span>
</div>
<ScoreDisplay score={item.pounceScore} mobile />
</div>
{/* Score */}
<div className="col-span-2 flex justify-center"><ScoreDisplay score={item.pounceScore} /></div>
{/* Price */}
<div className="col-span-2 text-right">
<Tooltip content={`${item.numBids || 0} bids placed`}>
<div className="cursor-help">
<div className="font-mono text-white font-medium">{formatPrice(item.price)}</div>
{item.numBids !== undefined && item.numBids > 0 && <div className="text-[10px] text-zinc-500 mt-0.5">{item.numBids} bids</div>}
</div>
</Tooltip>
</div>
{/* Time */}
<div className="col-span-2 flex justify-center">
<Tooltip content="Auction ends soon">
<div className={clsx("flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium cursor-help", isUrgent ? "text-red-400 bg-red-500/10" : "text-zinc-400 bg-zinc-800/50")}>
<div className="flex items-center justify-between mb-4">
<div>
<div className="text-[10px] text-zinc-500 uppercase tracking-wider mb-0.5">Current Bid</div>
<div className="font-mono text-lg font-medium text-white">{formatPrice(item.price)}</div>
</div>
<div className="text-right">
<div className="text-[10px] text-zinc-500 uppercase tracking-wider mb-0.5">Ends In</div>
<div className={clsx("flex items-center gap-1.5 justify-end font-medium", isUrgent ? "text-red-400" : "text-zinc-400")}>
<Clock className="w-3 h-3" />
{item.timeLeft}
</div>
</Tooltip>
</div>
{/* Actions */}
<div className="col-span-2 flex items-center justify-end opacity-0 group-hover:opacity-100 transition-opacity">
{/* Monitor Button - Distinct Style & Spacing */}
<Tooltip content={trackedDomains.has(item.domain) ? "Already tracking" : "Add to Watchlist"}>
<button
onClick={() => handleTrack(item.domain)}
disabled={trackedDomains.has(item.domain)}
className={clsx(
"w-8 h-8 flex items-center justify-center rounded-full border transition-all mr-4", // Added margin-right for separation
trackedDomains.has(item.domain)
? "bg-emerald-500/10 text-emerald-400 border-emerald-500/20 cursor-default"
: "border-zinc-700 bg-zinc-900 text-zinc-400 hover:text-white hover:border-zinc-500 hover:scale-105 active:scale-95"
)}
>
{trackedDomains.has(item.domain) ? <Check className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
</button>
</Tooltip>
{/* Buy Button */}
<Tooltip content={item.isPounce ? "Buy Instantly" : "Place Bid on External Site"}>
<a href={item.affiliateUrl || '#'} target="_blank" rel="noopener noreferrer" className="h-9 px-4 flex items-center gap-2 bg-white text-zinc-950 rounded-lg text-xs font-bold hover:bg-zinc-200 transition-all hover:scale-105 active:scale-95 shadow-lg shadow-white/5">
{item.isPounce ? 'Buy Now' : 'Place Bid'}
<ExternalLink className="w-3 h-3" />
</a>
</Tooltip>
</div>
</div>
)
})}
</div>
</div>
{/* MOBILE CARDS */}
<div className="md:hidden space-y-3">
{marketItems.map((item) => {
const timeLeftSec = parseTimeToSeconds(item.timeLeft)
const isUrgent = timeLeftSec < 3600
return (
<div key={item.id} className="bg-zinc-900/40 border border-white/5 rounded-xl p-4 active:bg-zinc-900/60 transition-colors">
<div className="flex justify-between items-start mb-3">
<div className="flex items-center gap-2">
{item.isPounce && <Diamond className="w-3.5 h-3.5 text-emerald-400 fill-emerald-400/20" />}
<span className="font-medium text-white text-base">{item.domain}</span>
</div>
<ScoreDisplay score={item.pounceScore} mobile />
</div>
<div className="flex items-center justify-between mb-4">
<div>
<div className="text-[10px] text-zinc-500 uppercase tracking-wider mb-0.5">Current Bid</div>
<div className="font-mono text-lg font-medium text-white">{formatPrice(item.price)}</div>
</div>
<div className="text-right">
<div className="text-[10px] text-zinc-500 uppercase tracking-wider mb-0.5">Ends In</div>
<div className={clsx("flex items-center gap-1.5 justify-end font-medium", isUrgent ? "text-red-400" : "text-zinc-400")}>
<Clock className="w-3 h-3" />
{item.timeLeft}
</div>
</div>
</div>
<div className="grid grid-cols-2 gap-3">
<button
onClick={() => handleTrack(item.domain)}
disabled={trackedDomains.has(item.domain)}
className={clsx(
"flex items-center justify-center gap-2 py-3 rounded-xl text-sm font-medium border transition-all",
trackedDomains.has(item.domain)
? "bg-emerald-500/10 text-emerald-400 border-emerald-500/20"
: "bg-zinc-800/30 text-zinc-400 border-zinc-700/50 active:scale-95"
)}
>
{trackedDomains.has(item.domain) ? (
<><Check className="w-4 h-4" /> Tracked</>
) : (
<><Eye className="w-4 h-4" /> Watch</>
)}
</button>
<a
href={item.affiliateUrl || '#'}
target="_blank"
rel="noopener noreferrer"
className="flex items-center justify-center gap-2 py-3 rounded-xl text-sm font-bold bg-white text-black hover:bg-zinc-200 active:scale-95 transition-all shadow-lg shadow-white/5"
>
{item.isPounce ? 'Buy Now' : 'Place Bid'}
<ExternalLink className="w-3 h-3 opacity-50" />
</a>
</div>
</div>
)
})}
</div>
</>
)}
</div>
<div className="grid grid-cols-2 gap-3">
<button
onClick={() => handleTrack(item.domain)}
disabled={trackedDomains.has(item.domain)}
className={clsx(
"flex items-center justify-center gap-2 py-3 rounded-xl text-sm font-medium border transition-all",
trackedDomains.has(item.domain)
? "bg-emerald-500/10 text-emerald-400 border-emerald-500/20"
: "bg-zinc-800/30 text-zinc-400 border-zinc-700/50 active:scale-95"
)}
>
{trackedDomains.has(item.domain) ? (
<><Check className="w-4 h-4" /> Tracked</>
) : (
<><Eye className="w-4 h-4" /> Watch</>
)}
</button>
<a
href={item.affiliateUrl || '#'}
target="_blank"
rel="noopener noreferrer"
className="flex items-center justify-center gap-2 py-3 rounded-xl text-sm font-bold bg-white text-black hover:bg-zinc-200 active:scale-95 transition-all shadow-lg shadow-white/5"
>
{item.isPounce ? 'Buy Now' : 'Place Bid'}
<ExternalLink className="w-3 h-3 opacity-50" />
</a>
</div>
</div>
</div>
)
})}
</div>
</>
)}
</div>
</div>
</div>
</TerminalLayout>
)
}

276
frontend/src/components/Sidebar.tsx
View File

@ -7,7 +7,6 @@ import { useStore } from '@/lib/store'
import {
LayoutDashboard,
Eye,
Briefcase,
Gavel,
TrendingUp,
Settings,
@ -22,8 +21,6 @@ import {
X,
Sparkles,
Tag,
Target,
Link2,
} from 'lucide-react'
import { useState, useEffect } from 'react'
import clsx from 'clsx'
@ -66,12 +63,10 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
}
const tierName = subscription?.tier_name || subscription?.tier || 'Scout'
const tierIcon = tierName === 'Tycoon' ? Crown : tierName === 'Trader' ? TrendingUp : Zap
const TierIcon = tierIcon
const TierIcon = tierName === 'Tycoon' ? Crown : tierName === 'Trader' ? TrendingUp : Zap
// Count available domains for notification badge
const availableCount = domains?.filter(d => d.is_available).length || 0
const isTycoon = tierName.toLowerCase() === 'tycoon'
// SECTION 1: Discover - External market data
@ -131,7 +126,7 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
<>
{/* Logo Section */}
<div className={clsx(
"relative h-20 flex items-center border-b border-border/30",
"relative h-20 flex items-center border-b border-white/5",
collapsed ? "justify-center px-2" : "px-4"
)}>
<Link href="/" className="flex items-center gap-3 group">
@ -139,29 +134,29 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
"relative flex items-center justify-center transition-all duration-300",
collapsed ? "w-10 h-10" : "w-12 h-12"
)}>
{/* Glow effect behind logo */}
<div className="absolute inset-0 bg-accent/20 blur-xl rounded-full scale-150 opacity-50 group-hover:opacity-80 transition-opacity" />
{/* Glow effect behind logo - Reduced intensity for cleanliness */}
<div className="absolute inset-0 bg-emerald-500/10 blur-xl rounded-full scale-150 opacity-30 group-hover:opacity-60 transition-opacity" />
<Image
src="/pounce-puma.png"
alt="pounce"
width={48}
height={48}
className={clsx(
"relative object-contain drop-shadow-[0_0_20px_rgba(16,185,129,0.3)] group-hover:drop-shadow-[0_0_30px_rgba(16,185,129,0.5)] transition-all",
collapsed ? "w-9 h-9" : "w-12 h-12"
"relative object-contain transition-all",
collapsed ? "w-8 h-8" : "w-10 h-10"
)}
/>
</div>
{!collapsed && (
<div className="flex flex-col">
<span
className="text-lg font-bold tracking-[0.12em] text-foreground group-hover:text-accent transition-colors"
<span
className="text-lg font-bold tracking-[0.12em] text-white group-hover:text-emerald-400 transition-colors"
style={{ fontFamily: 'var(--font-display), Georgia, serif' }}
>
POUNCE
</span>
<span className="text-[10px] text-foreground-subtle tracking-wider uppercase">
Command Center
>
POUNCE
</span>
<span className="text-[10px] text-zinc-500 tracking-wider uppercase">
Terminal
</span>
</div>
)}
@ -169,67 +164,62 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
</div>
{/* Main Navigation */}
<nav className="flex-1 py-6 px-3 overflow-y-auto">
<nav className="flex-1 py-6 px-3 overflow-y-auto scrollbar-hide">
{/* SECTION 1: Discover */}
<div className={clsx("mb-6", collapsed ? "px-1" : "px-2")}>
{!collapsed && (
<p className="text-[10px] font-semibold text-foreground-subtle/60 uppercase tracking-[0.15em] mb-3">
<p className="text-[10px] font-bold text-zinc-600 uppercase tracking-widest mb-3 pl-2">
Discover
</p>
)}
{collapsed && <div className="h-px bg-border/50 mb-3" />}
{collapsed && <div className="h-px bg-white/5 mb-3 w-4 mx-auto" />}
<div className="space-y-1.5">
<div className="space-y-1">
{discoverItems.map((item) => (
<Link
key={item.href}
href={item.href}
onClick={() => setMobileOpen(false)}
className={clsx(
"group relative flex items-center gap-3 px-3 py-3 rounded-xl transition-all duration-300",
isActive(item.href)
? "bg-gradient-to-r from-accent/20 to-accent/5 text-foreground border border-accent/20 shadow-[0_0_20px_-5px_rgba(16,185,129,0.2)]"
: "text-foreground-muted hover:text-foreground hover:bg-foreground/5 border border-transparent"
)}
title={collapsed ? item.label : undefined}
>
<Link
key={item.href}
href={item.href}
onClick={() => setMobileOpen(false)}
className={clsx(
"group relative flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200",
isActive(item.href)
? "text-emerald-400 bg-emerald-500/[0.08]"
: "text-zinc-400 hover:text-zinc-200 hover:bg-white/[0.03]"
)}
title={collapsed ? item.label : undefined}
>
{isActive(item.href) && (
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 bg-accent rounded-r-full shadow-[0_0_10px_rgba(16,185,129,0.5)]" />
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-5 bg-emerald-500 rounded-full shadow-[0_0_8px_rgba(16,185,129,0.5)]" />
)}
<div className="relative">
<item.icon className={clsx(
"w-5 h-5 transition-all duration-300",
isActive(item.href)
? "text-accent drop-shadow-[0_0_8px_rgba(16,185,129,0.5)]"
: "group-hover:text-foreground"
)} />
</div>
{!collapsed && (
<span className={clsx(
"text-sm font-medium transition-colors",
isActive(item.href) && "text-foreground"
)}>
{item.label}
</span>
)}
{!isActive(item.href) && (
<div className="absolute inset-0 rounded-xl bg-accent/5 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
<item.icon className={clsx(
"w-4 h-4 transition-all duration-300",
isActive(item.href)
? "text-emerald-400"
: "group-hover:text-zinc-200"
)} />
{!collapsed && (
<span className={clsx(
"text-xs font-semibold tracking-wide transition-colors",
isActive(item.href) ? "text-emerald-400" : "text-zinc-400 group-hover:text-zinc-200"
)}>
{item.label}
</span>
)}
</Link>
))}
</Link>
))}
</div>
</div>
{/* SECTION 2: Manage */}
<div className={clsx("", collapsed ? "px-1" : "px-2")}>
{!collapsed && (
<p className="text-[10px] font-semibold text-foreground-subtle/60 uppercase tracking-[0.15em] mb-3">
<p className="text-[10px] font-bold text-zinc-600 uppercase tracking-widest mb-3 pl-2">
Manage
</p>
)}
{collapsed && <div className="h-px bg-border/50 mb-3" />}
{collapsed && <div className="h-px bg-white/5 mb-3 w-4 mx-auto" />}
<div className="space-y-1.5">
<div className="space-y-1">
{manageItems.map((item) => {
const isDisabled = item.tycoonOnly && !isTycoon
const ItemWrapper = (isDisabled ? 'div' : Link) as any
@ -240,54 +230,40 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
{...(!isDisabled && { href: item.href })}
onClick={() => !isDisabled && setMobileOpen(false)}
className={clsx(
"group relative flex items-center gap-3 px-3 py-3 rounded-xl transition-all duration-300",
"group relative flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200",
isDisabled
? "opacity-50 cursor-not-allowed border border-transparent"
? "opacity-50 cursor-not-allowed"
: isActive(item.href)
? "bg-gradient-to-r from-accent/20 to-accent/5 text-foreground border border-accent/20 shadow-[0_0_20px_-5px_rgba(16,185,129,0.2)]"
: "text-foreground-muted hover:text-foreground hover:bg-foreground/5 border border-transparent"
? "text-emerald-400 bg-emerald-500/[0.08]"
: "text-zinc-400 hover:text-zinc-200 hover:bg-white/[0.03]"
)}
title={
isDisabled
? "SEO Juice Detector: Analyze backlinks, domain authority & find hidden SEO value. Upgrade to Tycoon to unlock."
: collapsed ? item.label : undefined
}
title={isDisabled ? "Upgrade to Tycoon to unlock" : collapsed ? item.label : undefined}
>
{!isDisabled && isActive(item.href) && (
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 bg-accent rounded-r-full shadow-[0_0_10px_rgba(16,185,129,0.5)]" />
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-5 bg-emerald-500 rounded-full shadow-[0_0_8px_rgba(16,185,129,0.5)]" />
)}
<div className="relative">
<item.icon className={clsx(
"w-5 h-5 transition-all duration-300",
isDisabled
? "text-foreground-subtle"
: isActive(item.href)
? "text-accent drop-shadow-[0_0_8px_rgba(16,185,129,0.5)]"
: "group-hover:text-foreground"
"w-4 h-4 transition-all duration-300",
isDisabled ? "text-zinc-600" : isActive(item.href) ? "text-emerald-400" : "group-hover:text-zinc-200"
)} />
{item.badge && typeof item.badge === 'number' && !isDisabled && (
<span className="absolute -top-2 -right-2 w-5 h-5 bg-accent text-background
text-[10px] font-bold rounded-full flex items-center justify-center
shadow-[0_0_10px_rgba(16,185,129,0.4)] animate-pulse">
{item.badge > 9 ? '9+' : item.badge}
<span className="absolute -top-1.5 -right-1.5 w-3.5 h-3.5 bg-emerald-500 text-black
text-[9px] font-bold rounded-full flex items-center justify-center
shadow-[0_0_8px_rgba(16,185,129,0.4)]">
{item.badge > 9 ? '•' : item.badge}
</span>
)}
</div>
{!collapsed && (
<span className={clsx(
"text-sm font-medium transition-colors flex-1",
isDisabled ? "text-foreground-subtle" : isActive(item.href) && "text-foreground"
"text-xs font-semibold tracking-wide transition-colors flex-1",
isDisabled ? "text-zinc-600" : isActive(item.href) ? "text-emerald-400" : "text-zinc-400 group-hover:text-zinc-200"
)}>
{item.label}
</span>
)}
{/* Lock icon for disabled items */}
{isDisabled && !collapsed && (
<Crown className="w-4 h-4 text-amber-400/60" />
)}
{!isDisabled && !isActive(item.href) && (
<div className="absolute inset-0 rounded-xl bg-accent/5 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
)}
{isDisabled && !collapsed && <Crown className="w-3 h-3 text-amber-500/40" />}
</ItemWrapper>
)
})}
@ -296,25 +272,17 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
</nav>
{/* Bottom Section */}
<div className="border-t border-border/30 py-4 px-3 space-y-1.5">
<div className="border-t border-white/5 py-4 px-3 space-y-1">
{/* Admin Link */}
{user?.is_admin && (
<Link
href="/admin"
onClick={() => setMobileOpen(false)}
className={clsx(
"group relative flex items-center gap-3 px-3 py-3 rounded-xl transition-all duration-300",
pathname.startsWith('/admin')
? "bg-gradient-to-r from-accent/20 to-accent/5 text-accent border border-accent/30"
: "text-accent/70 hover:text-accent hover:bg-accent/5 border border-transparent"
)}
className="group flex items-center gap-3 px-3 py-2.5 rounded-lg text-amber-500/80 hover:text-amber-400 hover:bg-amber-500/10 transition-all"
title={collapsed ? "Admin Panel" : undefined}
>
{pathname.startsWith('/admin') && (
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 bg-accent rounded-r-full" />
)}
<Shield className="w-5 h-5" />
{!collapsed && <span className="text-sm font-medium">Admin Panel</span>}
<Shield className="w-4 h-4" />
{!collapsed && <span className="text-xs font-semibold tracking-wide">Admin</span>}
</Link>
)}
@ -325,64 +293,62 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
href={item.href}
onClick={() => setMobileOpen(false)}
className={clsx(
"group relative flex items-center gap-3 px-3 py-3 rounded-xl transition-all duration-300",
"group flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all",
isActive(item.href)
? "bg-foreground/10 text-foreground border border-foreground/10"
: "text-foreground-muted hover:text-foreground hover:bg-foreground/5 border border-transparent"
? "text-emerald-400 bg-emerald-500/[0.08]"
: "text-zinc-400 hover:text-zinc-200 hover:bg-white/[0.03]"
)}
title={collapsed ? item.label : undefined}
>
<item.icon className="w-5 h-5" />
{!collapsed && <span className="text-sm font-medium">{item.label}</span>}
<item.icon className="w-4 h-4" />
{!collapsed && <span className="text-xs font-semibold tracking-wide">{item.label}</span>}
</Link>
))}
{/* User Card */}
<div className={clsx(
"mt-4 p-4 bg-gradient-to-br from-foreground/[0.03] to-transparent border border-border/50 rounded-2xl",
collapsed && "p-3"
"mt-4 border border-white/5 rounded-xl bg-zinc-900/50",
collapsed ? "p-2 bg-transparent border-none" : "p-3"
)}>
{collapsed ? (
<div className="flex justify-center">
<div className="w-10 h-10 bg-gradient-to-br from-accent/20 to-accent/5 rounded-xl flex items-center justify-center border border-accent/20">
<TierIcon className="w-5 h-5 text-accent" />
<div className="w-8 h-8 rounded-lg bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center">
<TierIcon className="w-4 h-4 text-emerald-400" />
</div>
</div>
) : (
<>
<div className="flex items-center gap-3 mb-4">
<div className="w-11 h-11 bg-gradient-to-br from-accent/20 to-accent/5 rounded-xl flex items-center justify-center border border-accent/20 shadow-[0_0_20px_-5px_rgba(16,185,129,0.3)]">
<TierIcon className="w-5 h-5 text-accent" />
<div className="flex items-center gap-3 mb-3">
<div className="w-9 h-9 rounded-lg bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center flex-shrink-0">
<TierIcon className="w-4 h-4 text-emerald-400" />
</div>
<div className="flex-1 min-w-0">
<p className="text-sm font-semibold text-foreground truncate">
<p className="text-xs font-bold text-white truncate">
{user?.name || user?.email?.split('@')[0]}
</p>
<div className="flex items-center gap-1.5">
<span className={clsx(
"text-xs font-medium",
"text-[10px] uppercase tracking-wider font-bold",
tierName === 'Tycoon' ? "text-amber-400" :
tierName === 'Trader' ? "text-accent" :
"text-foreground-muted"
tierName === 'Trader' ? "text-emerald-400" :
"text-zinc-500"
)}>
{tierName}
</span>
{tierName === 'Tycoon' && <Sparkles className="w-3 h-3 text-amber-400" />}
{tierName === 'Tycoon' && <Sparkles className="w-2.5 h-2.5 text-amber-400" />}
</div>
</div>
</div>
{/* Usage bar */}
<div className="space-y-2">
<div className="flex items-center justify-between text-xs">
<span className="text-foreground-subtle">Domains</span>
<span className="text-foreground-muted">
{subscription?.domains_used || 0}/{subscription?.domain_limit || 5}
</span>
<div className="space-y-1.5">
<div className="flex items-center justify-between text-[10px] font-medium text-zinc-500">
<span>Usage</span>
<span>{subscription?.domains_used || 0}/{subscription?.domain_limit || 5}</span>
</div>
<div className="h-1.5 bg-foreground/5 rounded-full overflow-hidden">
<div className="h-1 bg-zinc-800 rounded-full overflow-hidden">
<div
className="h-full bg-gradient-to-r from-accent to-accent/60 rounded-full transition-all duration-500"
className="h-full bg-emerald-500 rounded-full transition-all duration-500"
style={{
width: `${Math.min(((subscription?.domains_used || 0) / (subscription?.domain_limit || 5)) * 100, 100)}%`
}}
@ -390,17 +356,17 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
</div>
</div>
{tierName === 'Scout' && (
<Link
href="/pricing"
className="mt-4 flex items-center justify-center gap-2 w-full py-2.5 bg-gradient-to-r from-accent to-accent/80
text-background text-xs font-semibold rounded-xl
hover:shadow-[0_0_20px_-5px_rgba(16,185,129,0.5)] transition-all"
>
<CreditCard className="w-3.5 h-3.5" />
Upgrade Plan
</Link>
)}
{tierName === 'Scout' && (
<Link
href="/pricing"
className="mt-3 flex items-center justify-center gap-2 w-full py-2
bg-emerald-500 text-black text-[10px] font-bold uppercase tracking-wider rounded-lg
hover:bg-emerald-400 transition-colors"
>
<CreditCard className="w-3 h-3" />
Upgrade
</Link>
)}
</>
)}
</div>
@ -411,14 +377,11 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
logout()
setMobileOpen(false)
}}
className={clsx(
"w-full flex items-center gap-3 px-3 py-3 rounded-xl transition-all duration-300",
"text-foreground-muted hover:text-foreground hover:bg-foreground/5"
)}
className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-zinc-500 hover:text-red-400 hover:bg-red-500/10 transition-all"
title={collapsed ? "Sign out" : undefined}
>
<LogOut className="w-5 h-5" />
{!collapsed && <span className="text-sm font-medium">Sign out</span>}
<LogOut className="w-4 h-4" />
{!collapsed && <span className="text-xs font-semibold tracking-wide">Sign out</span>}
</button>
</div>
@ -426,16 +389,12 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
<button
onClick={toggleCollapsed}
className={clsx(
"hidden lg:flex absolute -right-3 top-24 w-6 h-6 bg-background border border-border rounded-full",
"items-center justify-center text-foreground-muted hover:text-foreground",
"hover:bg-accent/10 hover:border-accent/30 transition-all duration-300 shadow-lg"
"hidden lg:flex absolute -right-3 top-24 w-6 h-6 bg-zinc-900 border border-zinc-800 rounded-full",
"items-center justify-center text-zinc-500 hover:text-white",
"hover:border-zinc-700 transition-all shadow-xl z-50"
)}
>
{collapsed ? (
<ChevronRight className="w-3.5 h-3.5" />
) : (
<ChevronLeft className="w-3.5 h-3.5" />
)}
{collapsed ? <ChevronRight className="w-3 h-3" /> : <ChevronLeft className="w-3 h-3" />}
</button>
</>
)
@ -445,9 +404,9 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
{/* Mobile Menu Button */}
<button
onClick={() => setMobileOpen(true)}
className="lg:hidden fixed top-4 left-4 z-50 w-11 h-11 bg-background/80 backdrop-blur-xl border border-border
rounded-xl flex items-center justify-center text-foreground-muted hover:text-foreground
transition-all shadow-lg hover:shadow-xl hover:border-accent/30"
className="lg:hidden fixed top-4 left-4 z-50 w-10 h-10 bg-zinc-900/90 backdrop-blur border border-white/10
rounded-lg flex items-center justify-center text-zinc-400 hover:text-white
transition-all shadow-lg"
>
<Menu className="w-5 h-5" />
</button>
@ -455,7 +414,7 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
{/* Mobile Overlay */}
{mobileOpen && (
<div
className="lg:hidden fixed inset-0 z-40 bg-background/80 backdrop-blur-sm"
className="lg:hidden fixed inset-0 z-40 bg-black/80 backdrop-blur-sm"
onClick={() => setMobileOpen(false)}
/>
)}
@ -464,16 +423,15 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
<aside
className={clsx(
"lg:hidden fixed left-0 top-0 bottom-0 z-50 w-[280px] flex flex-col",
"bg-background/95 backdrop-blur-xl border-r border-border/50",
"bg-zinc-950 border-r border-white/5",
"transition-transform duration-300 ease-out",
mobileOpen ? "translate-x-0" : "-translate-x-full"
)}
>
{/* Close button */}
<button
onClick={() => setMobileOpen(false)}
className="absolute top-5 right-4 w-8 h-8 flex items-center justify-center
text-foreground-muted hover:text-foreground transition-colors"
text-zinc-500 hover:text-white transition-colors"
>
<X className="w-5 h-5" />
</button>
@ -484,10 +442,10 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
<aside
className={clsx(
"hidden lg:flex fixed left-0 top-0 bottom-0 z-40 flex-col",
"bg-gradient-to-b from-background/95 via-background/90 to-background/95 backdrop-blur-xl",
"border-r border-border/30",
"bg-zinc-950/95 backdrop-blur-xl", // Darker background
"border-r border-white/5", // Thinner border
"transition-all duration-300 ease-out",
collapsed ? "w-[72px]" : "w-[260px]"
collapsed ? "w-[72px]" : "w-[240px]" // Slightly narrower
)}
>
<SidebarContent />