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

Mobile: Beautiful slide-in navigation drawer
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 13:19:54 +01:00
parent 155280a84e
commit c1db9727c7
1 changed files with 196 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,7 +25,14 @@ import {
ChevronRight,
Sparkles,
Radio,
Activity
Activity,
Menu,
Tag,
Coins,
Shield,
LogOut,
Crown,
ChevronDown
} from 'lucide-react'
import clsx from 'clsx'
import Link from 'next/link'
@ -59,7 +66,7 @@ interface SearchResult {
// ============================================================================
export default function RadarPage() {
const { isAuthenticated, domains, addDomain } = useStore()
const { isAuthenticated, domains, addDomain, user, subscription, logout } = useStore()
const { toast, showToast, hideToast } = useToast()
const [hotAuctions, setHotAuctions] = useState<HotAuction[]>([])
@ -71,6 +78,9 @@ export default function RadarPage() {
const [addingToWatchlist, setAddingToWatchlist] = useState(false)
const [searchFocused, setSearchFocused] = useState(false)
const searchInputRef = useRef<HTMLInputElement>(null)
// Mobile Menu State
const [menuOpen, setMenuOpen] = useState(false)
// Load Data
const loadDashboardData = useCallback(async () => {
@ -147,13 +157,41 @@ export default function RadarPage() {
const availableDomains = domains?.filter(d => d.is_available) || []
const totalDomains = domains?.length || 0
// Nav Items for Mobile
// Nav Items for Mobile Bottom Bar
const mobileNavItems = [
{ href: '/terminal/radar', label: 'Radar', icon: Target, active: true },
{ href: '/terminal/market', label: 'Market', icon: Gavel, active: false },
{ href: '/terminal/watchlist', label: 'Watch', icon: Eye, active: false },
{ href: '/terminal/intel', label: 'Intel', icon: TrendingUp, active: false },
{ href: '/terminal/settings', label: 'More', icon: Settings, active: false },
]
// Full Navigation for Drawer
const tierName = subscription?.tier_name || subscription?.tier || 'Scout'
const TierIcon = tierName === 'Tycoon' ? Crown : tierName === 'Trader' ? TrendingUp : Zap
const drawerNavSections = [
{
title: 'Discover',
items: [
{ href: '/terminal/radar', label: 'Radar', icon: Target },
{ href: '/terminal/market', label: 'Market', icon: Gavel },
{ href: '/terminal/intel', label: 'Intel', icon: TrendingUp },
]
},
{
title: 'Manage',
items: [
{ href: '/terminal/watchlist', label: 'Watchlist', icon: Eye },
{ href: '/terminal/sniper', label: 'Sniper', icon: Target },
]
},
{
title: 'Monetize',
items: [
{ href: '/terminal/yield', label: 'Yield', icon: Coins, isNew: true },
{ href: '/terminal/listing', label: 'For Sale', icon: Tag },
]
}
]
return (
@ -521,8 +559,162 @@ export default function RadarPage() {
<span className="text-[10px] font-medium">{item.label}</span>
</Link>
))}
{/* Menu Button */}
<button
onClick={() => setMenuOpen(true)}
className="flex-1 flex flex-col items-center justify-center gap-1 text-white/40 active:text-white/60 transition-colors"
>
<Menu className="w-5 h-5" />
<span className="text-[10px] font-medium">Menu</span>
</button>
</div>
</nav>
{/* ═══════════════════════════════════════════════════════════════════════ */}
{/* MOBILE DRAWER MENU */}
{/* ═══════════════════════════════════════════════════════════════════════ */}
{menuOpen && (
<div className="lg:hidden fixed inset-0 z-[100]">
{/* Backdrop */}
<div
className="absolute inset-0 bg-black/80 backdrop-blur-sm animate-in fade-in duration-200"
onClick={() => setMenuOpen(false)}
/>
{/* Drawer Panel */}
<div className="absolute top-0 right-0 bottom-0 w-[85%] max-w-[320px] bg-[#0A0A0A] border-l border-white/[0.08] animate-in slide-in-from-right duration-300 flex flex-col" style={{ paddingTop: 'env(safe-area-inset-top)', paddingBottom: 'env(safe-area-inset-bottom)' }}>
{/* Drawer Header */}
<div className="flex items-center justify-between p-5 border-b border-white/[0.08]">
<div className="flex items-center gap-3">
<Image src="/pounce-puma.png" alt="Pounce" width={32} height={32} className="object-contain" />
<div>
<h2 className="text-sm font-bold text-white">Pounce</h2>
<p className="text-[10px] text-white/40 font-mono">Terminal</p>
</div>
</div>
<button
onClick={() => setMenuOpen(false)}
className="w-10 h-10 flex items-center justify-center text-white/40 hover:text-white active:text-white transition-colors"
>
<X className="w-5 h-5" />
</button>
</div>
{/* Navigation Sections */}
<div className="flex-1 overflow-y-auto py-4">
{drawerNavSections.map((section) => (
<div key={section.title} className="mb-6">
<div className="flex items-center gap-2 px-5 mb-2">
<div className="w-1 h-1 bg-accent rounded-full" />
<span className="text-[10px] font-mono text-white/30 uppercase tracking-widest">{section.title}</span>
</div>
<div className="space-y-0.5">
{section.items.map((item: any) => (
<Link
key={item.href}
href={item.href}
onClick={() => setMenuOpen(false)}
className="flex items-center gap-3 px-5 py-3 text-white/60 hover:text-white hover:bg-white/[0.03] active:bg-white/[0.05] transition-colors"
>
<item.icon className="w-5 h-5 text-white/40" />
<span className="text-sm font-medium flex-1">{item.label}</span>
{item.isNew && (
<span className="px-2 py-0.5 text-[9px] font-bold bg-accent/20 text-accent border border-accent/20">
New
</span>
)}
<ChevronRight className="w-4 h-4 text-white/20" />
</Link>
))}
</div>
</div>
))}
{/* Settings */}
<div className="border-t border-white/[0.08] pt-4 mt-2">
<Link
href="/terminal/settings"
onClick={() => setMenuOpen(false)}
className="flex items-center gap-3 px-5 py-3 text-white/60 hover:text-white hover:bg-white/[0.03] active:bg-white/[0.05] transition-colors"
>
<Settings className="w-5 h-5 text-white/40" />
<span className="text-sm font-medium flex-1">Settings</span>
<ChevronRight className="w-4 h-4 text-white/20" />
</Link>
{user?.is_admin && (
<Link
href="/admin"
onClick={() => setMenuOpen(false)}
className="flex items-center gap-3 px-5 py-3 text-amber-500/70 hover:text-amber-400 hover:bg-amber-500/5 active:bg-amber-500/10 transition-colors"
>
<Shield className="w-5 h-5" />
<span className="text-sm font-medium flex-1">Admin Panel</span>
<ChevronRight className="w-4 h-4 text-amber-500/30" />
</Link>
)}
</div>
</div>
{/* User Card */}
<div className="border-t border-white/[0.08] p-5">
<div className="flex items-center gap-3 mb-4">
<div className="w-10 h-10 bg-accent/10 border border-accent/20 flex items-center justify-center">
<TierIcon className="w-5 h-5 text-accent" />
</div>
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-white truncate">
{user?.name || user?.email?.split('@')[0] || 'User'}
</p>
<p className={clsx(
"text-[10px] font-mono",
tierName === 'Tycoon' ? "text-amber-400" :
tierName === 'Trader' ? "text-accent" :
"text-white/40"
)}>
{tierName}
</p>
</div>
</div>
{/* Usage Bar */}
<div className="mb-4">
<div className="flex items-center justify-between text-[10px] font-mono text-white/30 mb-1">
<span>Usage</span>
<span>{subscription?.domains_used || 0}/{subscription?.domain_limit || 5}</span>
</div>
<div className="h-1 bg-white/10 w-full">
<div
className="h-full bg-accent transition-all duration-500"
style={{ width: `${Math.min(((subscription?.domains_used || 0) / (subscription?.domain_limit || 5)) * 100, 100)}%` }}
/>
</div>
</div>
{tierName === 'Scout' && (
<Link
href="/pricing"
onClick={() => setMenuOpen(false)}
className="flex items-center justify-center gap-2 w-full py-3 bg-accent text-black text-sm font-bold hover:bg-white active:scale-[0.98] transition-all mb-3"
>
<Sparkles className="w-4 h-4" />
Upgrade Plan
</Link>
)}
<button
onClick={() => { logout(); setMenuOpen(false) }}
className="flex items-center justify-center gap-2 w-full py-3 border border-white/10 text-white/50 text-sm font-medium hover:text-white hover:border-white/20 active:bg-white/5 transition-all"
>
<LogOut className="w-4 h-4" />
Sign out
</button>
</div>
</div>
</div>
)}
</main>
{/* Toast */}