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

PWA: Better contrast, 5-item nav, black theme-color, Watchlist native mobile
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
This commit is contained in:
Yves Gugger
2025-12-13 09:52:07 +01:00
parent 6b6ed51466
commit 2ba38a13e7
4 changed files with 912 additions and 564 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/app/layout.tsx
View File

@ -10,7 +10,8 @@ const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://pounce.com'
export const viewport: Viewport = {
width: 'device-width',
initialScale: 1,
themeColor: '#10b981',
themeColor: '#020202',
viewportFit: 'cover',
}
export const metadata: Metadata = {

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

@ -26,7 +26,9 @@ import {
Bell,
ChevronRight,
TrendingUp,
RefreshCw
RefreshCw,
Tag,
Coins
} from 'lucide-react'
import clsx from 'clsx'
import Link from 'next/link'
@ -55,7 +57,7 @@ interface SearchResult {
}
// ============================================================================
// MOBILE BOTTOM NAV
// MOBILE BOTTOM NAV - 5 Items
// ============================================================================
function MobileBottomNav({ active }: { active: string }) {
@ -64,32 +66,27 @@ function MobileBottomNav({ active }: { active: string }) {
{ id: 'market', label: 'Market', icon: Gavel, href: '/terminal/market' },
{ id: 'watchlist', label: 'Watch', icon: Eye, href: '/terminal/watchlist' },
{ id: 'intel', label: 'Intel', icon: BarChart3, href: '/terminal/intel' },
{ id: 'more', label: 'More', icon: Settings, href: '/terminal/settings' },
]
return (
<nav className="lg:hidden fixed bottom-0 left-0 right-0 z-50 bg-[#0a0a0a]/95 backdrop-blur-xl border-t border-white/10 safe-area-bottom">
<div className="flex items-center justify-around h-16">
<nav className="lg:hidden fixed bottom-0 left-0 right-0 z-50 bg-[#0a0a0a] border-t border-white/[0.15] safe-area-bottom">
<div className="flex items-center justify-around h-[60px]">
{navItems.map((item) => {
const isActive = active === item.id
return (
<Link
key={item.id}
href={item.href}
className="flex flex-col items-center justify-center flex-1 h-full active:scale-95 transition-transform"
className={clsx(
"flex flex-col items-center justify-center flex-1 h-full active:scale-95 transition-transform",
isActive ? "text-accent" : "text-white/40"
)}
>
<item.icon className={clsx(
"w-6 h-6 mb-1 transition-colors",
isActive ? "text-accent" : "text-white/40"
)} />
<span className={clsx(
"text-[10px] font-medium transition-colors",
isActive ? "text-accent" : "text-white/40"
)}>
<item.icon className={clsx("w-5 h-5 mb-0.5", isActive && "text-accent")} />
<span className={clsx("text-[10px] font-medium", isActive && "text-accent")}>
{item.label}
</span>
{isActive && (
<div className="absolute bottom-2 w-1 h-1 bg-accent rounded-full" />
)}
</Link>
)
})}
@ -112,32 +109,32 @@ function MobileHeader({
onRefresh: () => void
}) {
return (
<header className="lg:hidden sticky top-0 z-40 bg-[#020202]/95 backdrop-blur-xl border-b border-white/[0.08] safe-area-top">
<div className="flex items-center justify-between px-4 h-14">
<header className="lg:hidden sticky top-0 z-40 bg-[#050505] border-b border-white/[0.12] safe-area-top">
<div className="flex items-center justify-between px-4 h-[56px]">
<div className="flex items-center gap-3">
<div className="w-8 h-8 bg-accent/10 border border-accent/20 flex items-center justify-center">
<Crosshair className="w-4 h-4 text-accent" />
<div className="w-9 h-9 bg-accent/20 border border-accent/40 flex items-center justify-center">
<Crosshair className="w-5 h-5 text-accent" />
</div>
<div>
<h1 className="text-base font-semibold text-white">Radar</h1>
<h1 className="text-[15px] font-semibold text-white">Radar</h1>
<div className="flex items-center gap-1.5">
<div className="w-1.5 h-1.5 bg-accent rounded-full animate-pulse" />
<span className="text-[10px] text-accent font-mono">Live</span>
<span className="text-[10px] text-accent font-medium">Live</span>
</div>
</div>
</div>
<div className="flex items-center gap-2">
<div className="flex items-center gap-1">
<button
onClick={onRefresh}
disabled={isRefreshing}
className="w-10 h-10 flex items-center justify-center text-white/50 active:text-white transition-colors"
className="w-11 h-11 flex items-center justify-center text-white/50 active:bg-white/10 rounded-lg transition-colors"
>
<RefreshCw className={clsx("w-5 h-5", isRefreshing && "animate-spin")} />
</button>
<button
onClick={onSearchOpen}
className="w-10 h-10 bg-accent/10 border border-accent/30 flex items-center justify-center text-accent active:scale-95 transition-transform"
className="w-11 h-11 bg-accent flex items-center justify-center text-black active:scale-95 transition-transform rounded-lg"
>
<Search className="w-5 h-5" />
</button>
@ -179,12 +176,12 @@ function MobileSearchModal({
if (!isOpen) return null
return (
<div className="lg:hidden fixed inset-0 z-50 bg-[#020202] animate-in fade-in slide-in-from-bottom-4 duration-300">
<div className="lg:hidden fixed inset-0 z-50 bg-[#050505] animate-in fade-in slide-in-from-bottom-4 duration-200">
{/* Header */}
<div className="flex items-center gap-3 px-4 h-16 border-b border-white/10 safe-area-top">
<div className="flex items-center gap-3 px-4 h-[60px] border-b border-white/[0.12] safe-area-top">
<button
onClick={onClose}
className="text-white/50 text-sm font-medium"
className="text-accent text-[15px] font-medium"
>
Cancel
</button>
@ -196,7 +193,7 @@ function MobileSearchModal({
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Search domain..."
className="w-full h-10 bg-white/5 border border-white/10 pl-11 pr-4 text-white placeholder:text-white/30 outline-none focus:border-accent/50 rounded-lg"
className="w-full h-11 bg-white/10 border border-white/[0.15] pl-11 pr-4 text-white placeholder:text-white/40 outline-none focus:border-accent/50 rounded-lg text-[15px]"
autoComplete="off"
autoCorrect="off"
autoCapitalize="none"
@ -205,48 +202,48 @@ function MobileSearchModal({
</div>
{/* Results */}
<div className="flex-1 overflow-auto p-4">
<div className="flex-1 overflow-auto p-4 pb-20">
{searchResult?.loading && (
<div className="flex items-center justify-center gap-3 py-16 text-white/40">
<Loader2 className="w-6 h-6 animate-spin text-accent" />
<span className="text-sm">Checking...</span>
<div className="flex flex-col items-center justify-center gap-3 py-20">
<Loader2 className="w-8 h-8 animate-spin text-accent" />
<span className="text-sm text-white/50">Checking availability...</span>
</div>
)}
{searchResult && !searchResult.loading && (
<div className={clsx(
"border-2 overflow-hidden",
searchResult.is_available ? "bg-accent/5 border-accent/40" : "bg-white/[0.02] border-white/10"
"border-2 overflow-hidden rounded-xl",
searchResult.is_available ? "bg-accent/10 border-accent/50" : "bg-white/5 border-white/[0.15]"
)}>
{/* Status Banner */}
<div className={clsx(
"px-5 py-4 flex items-center gap-4",
searchResult.is_available ? "bg-accent/10" : "bg-white/[0.02]"
"px-5 py-5 flex items-center gap-4",
searchResult.is_available ? "bg-accent/10" : "bg-white/5"
)}>
{searchResult.is_available ? (
<div className="w-12 h-12 bg-accent/20 border border-accent/40 flex items-center justify-center">
<CheckCircle2 className="w-6 h-6 text-accent" />
<div className="w-14 h-14 bg-accent/30 border-2 border-accent flex items-center justify-center rounded-lg">
<CheckCircle2 className="w-7 h-7 text-accent" />
</div>
) : (
<div className="w-12 h-12 bg-white/5 border border-white/10 flex items-center justify-center">
<XCircle className="w-6 h-6 text-white/30" />
<div className="w-14 h-14 bg-white/10 border-2 border-white/20 flex items-center justify-center rounded-lg">
<XCircle className="w-7 h-7 text-white/40" />
</div>
)}
<div className="flex-1">
<div className="text-lg font-semibold text-white">{searchResult.domain}</div>
<div className={clsx(
"text-xs font-medium",
searchResult.is_available ? "text-accent" : "text-white/40"
"text-sm font-medium mt-0.5",
searchResult.is_available ? "text-accent" : "text-white/50"
)}>
{searchResult.is_available ? 'Available for registration' : 'Already registered'}
</div>
</div>
</div>
{/* Details */}
{/* Details for taken */}
{!searchResult.is_available && searchResult.registrar && (
<div className="px-5 py-3 border-t border-white/[0.06] bg-black/20">
<div className="flex items-center justify-between text-xs">
<div className="px-5 py-4 border-t border-white/[0.1] bg-black/30">
<div className="flex items-center justify-between text-sm">
<span className="text-white/40">Registrar</span>
<span className="text-white/70">{searchResult.registrar}</span>
</div>
@ -254,15 +251,15 @@ function MobileSearchModal({
)}
{/* Actions */}
<div className="p-4 border-t border-white/[0.06] space-y-3">
<div className="p-4 border-t border-white/[0.1] space-y-3">
<button
onClick={onAddToWatchlist}
disabled={addingToWatchlist}
className={clsx(
"w-full h-14 flex items-center justify-center gap-3 text-base font-semibold transition-colors active:scale-[0.98]",
"w-full h-[52px] flex items-center justify-center gap-3 text-[15px] font-semibold rounded-lg transition-colors active:scale-[0.98]",
searchResult.is_available
? "border border-white/20 text-white/80 active:bg-white/10"
: "border border-accent/30 text-accent active:bg-accent/10"
? "border-2 border-white/30 text-white active:bg-white/10"
: "border-2 border-accent text-accent active:bg-accent/10"
)}
>
{addingToWatchlist ? (
@ -277,7 +274,7 @@ function MobileSearchModal({
<a
href={`https://www.namecheap.com/domains/registration/results/?domain=${searchResult.domain}`}
target="_blank"
className="w-full h-14 bg-accent text-black text-base font-bold flex items-center justify-center gap-3 active:bg-white transition-colors active:scale-[0.98]"
className="w-full h-[52px] bg-accent text-black text-[15px] font-bold flex items-center justify-center gap-3 rounded-lg active:bg-white transition-colors active:scale-[0.98]"
>
Register Now
<ArrowRight className="w-5 h-5" />
@ -288,11 +285,11 @@ function MobileSearchModal({
)}
{!searchResult && searchQuery.length === 0 && (
<div className="text-center py-16">
<div className="w-16 h-16 mx-auto bg-white/[0.02] border border-white/10 flex items-center justify-center mb-4">
<Search className="w-8 h-8 text-white/10" />
<div className="text-center py-20">
<div className="w-20 h-20 mx-auto bg-white/5 border-2 border-white/10 flex items-center justify-center mb-4 rounded-2xl">
<Search className="w-10 h-10 text-white/15" />
</div>
<p className="text-white/30 text-sm">Enter a domain to check availability</p>
<p className="text-white/40 text-[15px]">Enter a domain to check availability</p>
</div>
)}
</div>
@ -301,7 +298,7 @@ function MobileSearchModal({
}
// ============================================================================
// STAT CARD - Mobile Optimized
// STAT CARD - Mobile with better contrast
// ============================================================================
function StatCard({ label, value, highlight, icon: Icon }: {
@ -311,13 +308,13 @@ function StatCard({ label, value, highlight, icon: Icon }: {
icon: any
}) {
return (
<div className="bg-white/[0.02] border border-white/[0.06] p-4 active:bg-white/[0.04] transition-colors">
<div className="bg-[#0a0a0a] border border-white/[0.12] p-4 rounded-xl active:bg-white/5 transition-colors">
<div className="flex items-center gap-2 mb-2">
<Icon className={clsx("w-4 h-4", highlight ? "text-accent" : "text-white/30")} />
<span className="text-[10px] font-mono text-white/40 tracking-wide">{label}</span>
<Icon className={clsx("w-4 h-4", highlight ? "text-accent" : "text-white/40")} />
<span className="text-[11px] font-medium text-white/50 tracking-wide">{label}</span>
</div>
<div className={clsx(
"text-2xl font-display",
"text-[28px] font-bold tracking-tight",
highlight ? "text-accent" : "text-white"
)}>
{value}
@ -327,7 +324,7 @@ function StatCard({ label, value, highlight, icon: Icon }: {
}
// ============================================================================
// AUCTION CARD - Mobile Optimized
// AUCTION CARD - Mobile with better contrast
// ============================================================================
function AuctionCard({ auction }: { auction: HotAuction }) {
@ -335,20 +332,19 @@ function AuctionCard({ auction }: { auction: HotAuction }) {
<a
href={auction.affiliate_url || '#'}
target="_blank"
className="flex items-center gap-4 p-4 bg-white/[0.02] border border-white/[0.06] active:bg-white/[0.05] transition-colors"
className="flex items-center gap-4 p-4 bg-[#0a0a0a] border border-white/[0.12] rounded-xl active:bg-white/5 transition-colors"
>
<div className="w-10 h-10 bg-white/5 border border-white/10 flex items-center justify-center shrink-0">
<span className="text-[10px] font-mono text-white/40">{auction.platform.substring(0, 2)}</span>
<div className="w-11 h-11 bg-white/10 border border-white/[0.15] flex items-center justify-center shrink-0 rounded-lg">
<span className="text-[10px] font-bold text-white/50">{auction.platform.substring(0, 2).toUpperCase()}</span>
</div>
<div className="flex-1 min-w-0">
<div className="text-sm font-medium text-white truncate">{auction.domain}</div>
<div className="text-[10px] text-white/40">{auction.time_remaining}</div>
<div className="text-[15px] font-medium text-white truncate">{auction.domain}</div>
<div className="text-[12px] text-white/40 font-medium">{auction.time_remaining}</div>
</div>
<div className="text-right shrink-0">
<div className="font-mono text-base font-semibold text-accent">${auction.current_bid.toLocaleString()}</div>
<div className="text-[10px] text-white/30">Current bid</div>
<div className="font-mono text-[17px] font-bold text-accent">${auction.current_bid.toLocaleString()}</div>
</div>
<ChevronRight className="w-4 h-4 text-white/20 shrink-0" />
<ChevronRight className="w-5 h-5 text-white/20 shrink-0" />
</a>
)
}
@ -456,12 +452,12 @@ export default function RadarPage() {
setAddingToWatchlist(true)
try {
await addDomain(searchQuery.trim())
showToast(`Target acquired: ${searchQuery.trim()}`, 'success')
showToast(`Added: ${searchQuery.trim()}`, 'success')
setSearchQuery('')
setSearchResult(null)
setMobileSearchOpen(false)
} catch (err: any) {
showToast(err.message || 'Mission failed', 'error')
showToast(err.message || 'Failed', 'error')
} finally {
setAddingToWatchlist(false)
}
@ -507,11 +503,11 @@ export default function RadarPage() {
/>
{/* Mobile Content */}
<div className="lg:hidden min-h-screen bg-[#020202] pb-20">
<div className="lg:hidden min-h-screen bg-[#020202] pb-24">
{toast && <Toast message={toast.message} type={toast.type} onClose={hideToast} />}
{/* Stats Grid */}
<div className="p-4 grid grid-cols-2 gap-2">
<div className="p-4 grid grid-cols-2 gap-3">
<StatCard label="Tracking" value={totalDomains} icon={Eye} />
<StatCard label="Available" value={availableDomains.length} highlight={availableDomains.length > 0} icon={CheckCircle2} />
<StatCard label="Auctions" value={marketStats.totalAuctions} icon={Gavel} />
@ -520,17 +516,17 @@ export default function RadarPage() {
{/* Available Alert */}
{availableDomains.length > 0 && (
<div className="mx-4 mb-4 p-4 bg-accent/10 border border-accent/30">
<div className="flex items-center gap-3">
<div className="w-10 h-10 bg-accent/20 border border-accent/40 flex items-center justify-center">
<Bell className="w-5 h-5 text-accent" />
<div className="mx-4 mb-4 p-4 bg-accent/15 border-2 border-accent/50 rounded-xl">
<div className="flex items-center gap-4">
<div className="w-12 h-12 bg-accent/25 border-2 border-accent flex items-center justify-center rounded-lg">
<Bell className="w-6 h-6 text-accent" />
</div>
<div className="flex-1">
<div className="text-sm font-semibold text-white">{availableDomains.length} Domain{availableDomains.length > 1 ? 's' : ''} Available!</div>
<div className="text-xs text-accent">Check your watchlist now</div>
<div className="text-[15px] font-semibold text-white">{availableDomains.length} Domain{availableDomains.length > 1 ? 's' : ''} Available!</div>
<div className="text-[13px] text-accent font-medium">Grab them now</div>
</div>
<Link href="/terminal/watchlist" className="w-10 h-10 bg-accent flex items-center justify-center">
<ArrowRight className="w-5 h-5 text-black" />
<Link href="/terminal/watchlist" className="w-12 h-12 bg-accent flex items-center justify-center rounded-lg">
<ArrowRight className="w-6 h-6 text-black" />
</Link>
</div>
</div>
@ -540,52 +536,54 @@ export default function RadarPage() {
<div className="px-4 mb-6">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2">
<Gavel className="w-4 h-4 text-accent" />
<span className="text-sm font-semibold text-white">Live Auctions</span>
<Gavel className="w-5 h-5 text-accent" />
<span className="text-[15px] font-semibold text-white">Live Auctions</span>
</div>
<Link href="/terminal/market" className="text-xs text-accent font-medium">
<Link href="/terminal/market" className="text-[13px] text-accent font-semibold">
See all
</Link>
</div>
{loadingData ? (
<div className="flex items-center justify-center py-12">
<Loader2 className="w-6 h-6 text-accent animate-spin" />
<div className="flex items-center justify-center py-16">
<Loader2 className="w-8 h-8 text-accent animate-spin" />
</div>
) : hotAuctions.length > 0 ? (
<div className="space-y-2">
<div className="space-y-3">
{hotAuctions.map((auction, i) => (
<AuctionCard key={i} auction={auction} />
))}
</div>
) : (
<div className="text-center py-12 border border-dashed border-white/10">
<Gavel className="w-8 h-8 text-white/10 mx-auto mb-2" />
<p className="text-white/30 text-sm">No active auctions</p>
<div className="text-center py-16 border-2 border-dashed border-white/10 rounded-xl">
<Gavel className="w-10 h-10 text-white/15 mx-auto mb-3" />
<p className="text-white/40 text-[15px]">No active auctions</p>
</div>
)}
</div>
{/* Section: Quick Links */}
<div className="px-4 mb-6">
<div className="px-4">
<div className="flex items-center gap-2 mb-3">
<Zap className="w-4 h-4 text-white/50" />
<span className="text-sm font-semibold text-white">Quick Actions</span>
<Zap className="w-5 h-5 text-white/50" />
<span className="text-[15px] font-semibold text-white">Quick Actions</span>
</div>
<div className="grid grid-cols-2 gap-2">
<div className="grid grid-cols-2 gap-3">
{[
{ label: 'TLD Intel', desc: 'Price trends', href: '/terminal/intel', icon: TrendingUp },
{ label: 'Sniper', desc: 'Set alerts', href: '/terminal/sniper', icon: Target },
{ label: 'Yield', desc: 'Monetize', href: '/terminal/yield', icon: Coins },
{ label: 'For Sale', desc: 'List domains', href: '/terminal/listing', icon: Tag },
].map((item) => (
<Link
key={item.href}
href={item.href}
className="p-4 bg-white/[0.02] border border-white/[0.06] active:bg-white/[0.05] transition-colors"
className="p-4 bg-[#0a0a0a] border border-white/[0.12] rounded-xl active:bg-white/5 transition-colors"
>
<item.icon className="w-5 h-5 text-accent mb-3" />
<div className="text-sm font-medium text-white">{item.label}</div>
<div className="text-[10px] text-white/40">{item.desc}</div>
<item.icon className="w-6 h-6 text-accent mb-3" />
<div className="text-[15px] font-medium text-white">{item.label}</div>
<div className="text-[11px] text-white/40 font-medium">{item.desc}</div>
</Link>
))}
</div>
@ -863,7 +861,6 @@ export default function RadarPage() {
100% { transform: translateX(-33.33%); }
}
/* Safe area for notch and home indicator */
.safe-area-top {
padding-top: env(safe-area-inset-top);
}
@ -871,7 +868,6 @@ export default function RadarPage() {
padding-bottom: env(safe-area-inset-bottom);
}
/* Prevent overscroll on mobile */
@media (max-width: 1023px) {
html, body {
overscroll-behavior: none;

1275
frontend/src/app/terminal/watchlist/page.tsx
View File

File diff suppressed because it is too large Load Diff

2
frontend/src/components/SEO.tsx
View File

@ -93,7 +93,7 @@ export function SEO({
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="#10b981" />
<meta name="theme-color" content="#020202" />
</Head>
)
}