Yves Gugger
ab27cb1295
Some checks failed
CI / Frontend Lint & Type Check (push) Has been cancelled
CI / Frontend Build (push) Has been cancelled
CI / Backend Lint (push) Has been cancelled
CI / Backend Tests (push) Has been cancelled
CI / Docker Build (push) Has been cancelled
CI / Security Scan (push) Has been cancelled
Deploy / Build & Push Images (push) Has been cancelled
Deploy / Deploy to Server (push) Has been cancelled
Deploy / Notify (push) Has been cancelled
606 lines
25 KiB
TypeScript
606 lines
25 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useMemo, useState, useCallback } from 'react'
|
|
import { useSearchParams } from 'next/navigation'
|
|
import { useStore } from '@/lib/store'
|
|
import { api } from '@/lib/api'
|
|
import { Sidebar } from '@/components/Sidebar'
|
|
import {
|
|
Loader2,
|
|
MessageSquare,
|
|
X,
|
|
Send,
|
|
Lock,
|
|
Target,
|
|
Gavel,
|
|
Eye,
|
|
TrendingUp,
|
|
Menu,
|
|
Settings,
|
|
LogOut,
|
|
Crown,
|
|
Zap,
|
|
Tag,
|
|
ShoppingCart,
|
|
DollarSign,
|
|
CheckCircle,
|
|
AlertCircle,
|
|
Mail,
|
|
ExternalLink,
|
|
} from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import Image from 'next/image'
|
|
import clsx from 'clsx'
|
|
|
|
// Types
|
|
type BuyerThread = {
|
|
id: number
|
|
listing_id: number
|
|
domain: string
|
|
slug: string
|
|
status: string
|
|
created_at: string
|
|
closed_at: string | null
|
|
closed_reason: string | null
|
|
}
|
|
|
|
type SellerInquiry = {
|
|
id: number
|
|
listing_id: number
|
|
domain: string
|
|
slug: string
|
|
buyer_name: string
|
|
buyer_email: string
|
|
offer_amount: number | null
|
|
status: string
|
|
created_at: string
|
|
read_at: string | null
|
|
replied_at: string | null
|
|
closed_at: string | null
|
|
closed_reason: string | null
|
|
has_unread_reply: boolean
|
|
last_message_preview: string
|
|
last_message_at: string
|
|
last_message_is_buyer: boolean
|
|
}
|
|
|
|
type Message = {
|
|
id: number
|
|
inquiry_id: number
|
|
listing_id: number
|
|
sender_user_id: number
|
|
body: string
|
|
created_at: string
|
|
}
|
|
|
|
type InboxTab = 'buying' | 'selling'
|
|
|
|
export default function InboxPage() {
|
|
const { user, subscription, logout, checkAuth } = useStore()
|
|
const searchParams = useSearchParams()
|
|
const openInquiryId = searchParams.get('inquiry')
|
|
const initialTab = searchParams.get('tab') as InboxTab | null
|
|
|
|
const [activeTab, setActiveTab] = useState<InboxTab>(initialTab || 'buying')
|
|
|
|
// Buyer state
|
|
const [buyerThreads, setBuyerThreads] = useState<BuyerThread[]>([])
|
|
const [loadingBuyer, setLoadingBuyer] = useState(true)
|
|
|
|
// Seller state
|
|
const [sellerInquiries, setSellerInquiries] = useState<SellerInquiry[]>([])
|
|
const [loadingSeller, setLoadingSeller] = useState(true)
|
|
const [sellerUnread, setSellerUnread] = useState(0)
|
|
|
|
// Shared state
|
|
const [menuOpen, setMenuOpen] = useState(false)
|
|
const [activeThread, setActiveThread] = useState<BuyerThread | SellerInquiry | null>(null)
|
|
const [messages, setMessages] = useState<Message[]>([])
|
|
const [loadingMessages, setLoadingMessages] = useState(false)
|
|
const [sending, setSending] = useState(false)
|
|
const [draft, setDraft] = useState('')
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
useEffect(() => { checkAuth() }, [checkAuth])
|
|
|
|
const tierName = subscription?.tier_name || subscription?.tier || 'Scout'
|
|
const TierIcon = tierName === 'Tycoon' ? Crown : tierName === 'Trader' ? TrendingUp : Zap
|
|
const isSeller = tierName !== 'Scout' // Scout can't list domains
|
|
|
|
// Load buyer threads
|
|
const loadBuyerThreads = useCallback(async () => {
|
|
setLoadingBuyer(true)
|
|
setError(null)
|
|
try {
|
|
const data = await api.getMyInquiryThreads()
|
|
setBuyerThreads(data)
|
|
} catch (err: any) {
|
|
// Silently fail - might not have any threads
|
|
} finally {
|
|
setLoadingBuyer(false)
|
|
}
|
|
}, [])
|
|
|
|
// Load seller inquiries
|
|
const loadSellerInquiries = useCallback(async () => {
|
|
if (!isSeller) {
|
|
setLoadingSeller(false)
|
|
return
|
|
}
|
|
setLoadingSeller(true)
|
|
try {
|
|
const data = await api.getSellerInbox()
|
|
setSellerInquiries(data.inquiries)
|
|
setSellerUnread(data.unread)
|
|
} catch (err: any) {
|
|
// Silently fail
|
|
} finally {
|
|
setLoadingSeller(false)
|
|
}
|
|
}, [isSeller])
|
|
|
|
useEffect(() => {
|
|
loadBuyerThreads()
|
|
loadSellerInquiries()
|
|
|
|
// Poll inbox counts every 30 seconds for badge updates
|
|
const pollInterval = setInterval(() => {
|
|
loadBuyerThreads()
|
|
loadSellerInquiries()
|
|
}, 30000)
|
|
|
|
return () => clearInterval(pollInterval)
|
|
}, [loadBuyerThreads, loadSellerInquiries])
|
|
|
|
// Handle URL parameter for opening specific inquiry
|
|
const threadsById = useMemo(() => {
|
|
const map = new Map<number, BuyerThread | SellerInquiry>()
|
|
buyerThreads.forEach(t => map.set(t.id, t))
|
|
sellerInquiries.forEach(t => map.set(t.id, t))
|
|
return map
|
|
}, [buyerThreads, sellerInquiries])
|
|
|
|
useEffect(() => {
|
|
if (!openInquiryId) return
|
|
const id = Number(openInquiryId)
|
|
if (!Number.isFinite(id)) return
|
|
const t = threadsById.get(id)
|
|
if (t) {
|
|
setActiveThread(t)
|
|
// Determine which tab
|
|
if ('buyer_name' in t) {
|
|
setActiveTab('selling')
|
|
} else {
|
|
setActiveTab('buying')
|
|
}
|
|
}
|
|
}, [openInquiryId, threadsById])
|
|
|
|
// Load messages for thread
|
|
const loadMessages = useCallback(async (thread: BuyerThread | SellerInquiry) => {
|
|
setLoadingMessages(true)
|
|
setError(null)
|
|
try {
|
|
if ('buyer_name' in thread) {
|
|
// Seller loading buyer's messages
|
|
const data = await api.getInquiryMessagesAsSeller(thread.listing_id, thread.id)
|
|
setMessages(data)
|
|
} else {
|
|
// Buyer loading their own messages
|
|
const data = await api.getInquiryMessagesAsBuyer(thread.id)
|
|
setMessages(data)
|
|
}
|
|
} catch (err: any) {
|
|
setError(err?.message || 'Failed to load messages')
|
|
} finally {
|
|
setLoadingMessages(false)
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (!activeThread) return
|
|
loadMessages(activeThread)
|
|
|
|
// Poll for new messages every 15 seconds when thread is open
|
|
const pollInterval = setInterval(() => {
|
|
loadMessages(activeThread)
|
|
}, 15000)
|
|
|
|
return () => clearInterval(pollInterval)
|
|
}, [activeThread, loadMessages])
|
|
|
|
// Send message
|
|
const sendMessage = useCallback(async () => {
|
|
if (!activeThread) return
|
|
const body = draft.trim()
|
|
if (!body) return
|
|
|
|
setSending(true)
|
|
setError(null)
|
|
try {
|
|
let created: Message
|
|
if ('buyer_name' in activeThread) {
|
|
// Seller replying
|
|
created = await api.sendInquiryMessageAsSeller(activeThread.listing_id, activeThread.id, body)
|
|
} else {
|
|
// Buyer replying
|
|
created = await api.sendInquiryMessageAsBuyer(activeThread.id, body)
|
|
}
|
|
setDraft('')
|
|
setMessages(prev => [...prev, created])
|
|
} catch (err: any) {
|
|
setError(err?.message || 'Failed to send')
|
|
} finally {
|
|
setSending(false)
|
|
}
|
|
}, [activeThread, draft])
|
|
|
|
// Refresh on tab change
|
|
useEffect(() => {
|
|
setActiveThread(null)
|
|
setMessages([])
|
|
setDraft('')
|
|
if (activeTab === 'buying') {
|
|
loadBuyerThreads()
|
|
} else {
|
|
loadSellerInquiries()
|
|
}
|
|
}, [activeTab, loadBuyerThreads, loadSellerInquiries])
|
|
|
|
const isLoading = activeTab === 'buying' ? loadingBuyer : loadingSeller
|
|
const currentItems = activeTab === 'buying' ? buyerThreads : sellerInquiries
|
|
const emptyMessage = activeTab === 'buying'
|
|
? 'No inquiries yet. Browse Pounce Direct deals and send an inquiry.'
|
|
: 'No buyer inquiries yet. List a domain for sale to receive offers.'
|
|
const emptyAction = activeTab === 'buying'
|
|
? { href: '/acquire', label: 'Browse Deals' }
|
|
: { href: '/terminal/listing', label: 'List Domain' }
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#020202]">
|
|
<div className="hidden lg:block"><Sidebar /></div>
|
|
|
|
<main className="lg:pl-[240px]">
|
|
{/* MOBILE HEADER */}
|
|
<header className="lg:hidden sticky top-0 z-40 bg-[#020202]/95 backdrop-blur-md border-b border-white/[0.08]" style={{ paddingTop: 'env(safe-area-inset-top)' }}>
|
|
<div className="px-4 py-3">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-1.5 h-1.5 bg-accent animate-pulse" />
|
|
<span className="text-[10px] font-mono tracking-[0.2em] text-accent uppercase">Inbox</span>
|
|
</div>
|
|
<button onClick={() => setMenuOpen(true)} className="p-2 text-white/40">
|
|
<Menu className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* DESKTOP HEADER */}
|
|
<section className="hidden lg:block px-10 pt-10 pb-6">
|
|
<div className="flex items-end justify-between gap-6">
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-1.5 h-1.5 bg-accent animate-pulse" />
|
|
<span className="text-[10px] font-mono tracking-[0.2em] text-accent uppercase">Inbox</span>
|
|
</div>
|
|
<h1 className="font-display text-[2.5rem] leading-[1] tracking-[-0.02em]">
|
|
<span className="text-white">Inbox</span>
|
|
</h1>
|
|
<p className="text-sm text-white/40 font-mono max-w-lg">
|
|
Manage your domain inquiries and conversations.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* TABS */}
|
|
<section className="px-4 lg:px-10 pb-4">
|
|
<div className="flex border border-white/[0.08] bg-white/[0.02]">
|
|
<button
|
|
type="button"
|
|
onClick={() => setActiveTab('buying')}
|
|
className={clsx(
|
|
'flex-1 py-3 flex items-center justify-center gap-2 text-xs font-mono uppercase tracking-wider transition-all border-b-2',
|
|
activeTab === 'buying'
|
|
? 'bg-accent/10 text-accent border-accent'
|
|
: 'text-white/40 hover:text-white border-transparent'
|
|
)}
|
|
>
|
|
<ShoppingCart className="w-4 h-4" />
|
|
Buying
|
|
{buyerThreads.length > 0 && (
|
|
<span className="ml-1 px-1.5 py-0.5 bg-white/10 text-[10px]">{buyerThreads.length}</span>
|
|
)}
|
|
</button>
|
|
{isSeller && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setActiveTab('selling')}
|
|
className={clsx(
|
|
'flex-1 py-3 flex items-center justify-center gap-2 text-xs font-mono uppercase tracking-wider transition-all border-b-2',
|
|
activeTab === 'selling'
|
|
? 'bg-accent/10 text-accent border-accent'
|
|
: 'text-white/40 hover:text-white border-transparent'
|
|
)}
|
|
>
|
|
<Tag className="w-4 h-4" />
|
|
Selling
|
|
{sellerUnread > 0 && (
|
|
<span className="ml-1 px-1.5 py-0.5 bg-accent text-black text-[10px] font-bold">{sellerUnread}</span>
|
|
)}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
{/* CONTENT */}
|
|
<section className="px-4 lg:px-10 pb-28 lg:pb-10">
|
|
{isLoading ? (
|
|
<div className="flex items-center justify-center py-20">
|
|
<Loader2 className="w-6 h-6 text-accent animate-spin" />
|
|
</div>
|
|
) : error && !activeThread ? (
|
|
<div className="p-4 border border-rose-400/20 bg-rose-400/5 text-rose-300 text-sm font-mono">{error}</div>
|
|
) : currentItems.length === 0 ? (
|
|
<div className="text-center py-16 border border-dashed border-white/[0.08]">
|
|
<MessageSquare className="w-8 h-8 text-white/10 mx-auto mb-3" />
|
|
<p className="text-white/40 text-sm font-mono">{emptyMessage}</p>
|
|
<Link href={emptyAction.href} className="mt-4 inline-flex items-center gap-2 px-4 py-2 bg-accent text-black text-xs font-bold uppercase">
|
|
{emptyAction.label}
|
|
</Link>
|
|
</div>
|
|
) : (
|
|
<div className="grid lg:grid-cols-[400px_1fr] gap-4">
|
|
{/* Thread/Inquiry list */}
|
|
<div className="border border-white/[0.08] bg-white/[0.02] max-h-[600px] overflow-auto">
|
|
<div className="px-3 py-2 border-b border-white/[0.08] text-[10px] font-mono text-white/40 uppercase tracking-wider sticky top-0 bg-[#0A0A0A]">
|
|
{activeTab === 'buying' ? 'Your Inquiries' : 'Buyer Inquiries'}
|
|
</div>
|
|
<div className="divide-y divide-white/[0.06]">
|
|
{activeTab === 'buying' ? (
|
|
// Buyer view
|
|
buyerThreads.map(t => (
|
|
<button
|
|
key={t.id}
|
|
type="button"
|
|
onClick={() => setActiveThread(t)}
|
|
className={clsx(
|
|
'w-full text-left px-3 py-3 hover:bg-white/[0.03] transition-colors',
|
|
activeThread?.id === t.id && 'bg-white/[0.03]'
|
|
)}
|
|
>
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="min-w-0">
|
|
<div className="text-sm font-bold text-white font-mono truncate">{t.domain}</div>
|
|
<div className="text-[10px] font-mono text-white/30 mt-0.5">
|
|
{new Date(t.created_at).toLocaleDateString('en-US')}
|
|
</div>
|
|
</div>
|
|
<span className={clsx(
|
|
'px-2 py-1 text-[9px] font-mono uppercase border shrink-0',
|
|
t.status === 'closed' ? 'bg-white/[0.03] text-white/40 border-white/[0.10]' :
|
|
t.status === 'spam' ? 'bg-rose-500/10 text-rose-300 border-rose-500/20' :
|
|
'bg-accent/10 text-accent border-accent/20'
|
|
)}>
|
|
{t.status}
|
|
</span>
|
|
</div>
|
|
</button>
|
|
))
|
|
) : (
|
|
// Seller view
|
|
sellerInquiries.map(inq => (
|
|
<button
|
|
key={inq.id}
|
|
type="button"
|
|
onClick={() => setActiveThread(inq)}
|
|
className={clsx(
|
|
'w-full text-left px-3 py-3 hover:bg-white/[0.03] transition-colors',
|
|
activeThread?.id === inq.id && 'bg-white/[0.03]',
|
|
inq.has_unread_reply && 'border-l-2 border-accent'
|
|
)}
|
|
>
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm font-bold text-white font-mono truncate">{inq.domain}</span>
|
|
{inq.has_unread_reply && (
|
|
<span className="w-2 h-2 bg-accent rounded-full animate-pulse shrink-0" />
|
|
)}
|
|
</div>
|
|
<div className="text-[10px] font-mono text-white/50 mt-0.5 truncate">
|
|
{inq.buyer_name} • {inq.buyer_email}
|
|
</div>
|
|
{inq.offer_amount && (
|
|
<div className="text-[10px] font-mono text-accent mt-0.5">
|
|
${inq.offer_amount.toLocaleString()} offer
|
|
</div>
|
|
)}
|
|
<div className="text-[10px] font-mono text-white/30 mt-1 truncate">
|
|
{inq.last_message_preview}
|
|
</div>
|
|
</div>
|
|
<div className="text-right shrink-0">
|
|
<span className={clsx(
|
|
'px-2 py-1 text-[9px] font-mono uppercase border',
|
|
inq.status === 'new' ? 'bg-amber-400/10 text-amber-400 border-amber-400/20' :
|
|
inq.status === 'closed' ? 'bg-white/[0.03] text-white/40 border-white/[0.10]' :
|
|
inq.status === 'spam' ? 'bg-rose-500/10 text-rose-300 border-rose-500/20' :
|
|
'bg-accent/10 text-accent border-accent/20'
|
|
)}>
|
|
{inq.status}
|
|
</span>
|
|
<div className="text-[9px] font-mono text-white/20 mt-1">
|
|
{new Date(inq.last_message_at).toLocaleDateString('en-US')}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Thread detail */}
|
|
<div className="border border-white/[0.08] bg-[#020202]">
|
|
{!activeThread ? (
|
|
<div className="p-10 text-center text-white/40 font-mono">
|
|
<MessageSquare className="w-8 h-8 mx-auto mb-3 text-white/10" />
|
|
Select a conversation
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* Thread header */}
|
|
<div className="px-4 py-3 border-b border-white/[0.08] flex items-center justify-between">
|
|
<div>
|
|
<div className="text-[10px] font-mono tracking-[0.2em] text-accent uppercase">
|
|
{activeTab === 'buying' ? 'Thread' : 'Inquiry'}
|
|
</div>
|
|
<div className="text-sm font-bold text-white font-mono">
|
|
{'buyer_name' in activeThread ? activeThread.domain : activeThread.domain}
|
|
</div>
|
|
{'buyer_name' in activeThread && (
|
|
<div className="text-[10px] font-mono text-white/40 mt-0.5">
|
|
From: {activeThread.buyer_name} ({activeThread.buyer_email})
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{'buyer_name' in activeThread && (
|
|
<a
|
|
href={`mailto:${activeThread.buyer_email}?subject=Re: ${activeThread.domain}`}
|
|
className="p-2 border border-white/[0.10] bg-white/[0.03] text-white/50 hover:text-white"
|
|
title="Reply via email"
|
|
>
|
|
<Mail className="w-4 h-4" />
|
|
</a>
|
|
)}
|
|
<Link
|
|
href={`/buy/${activeThread.slug}`}
|
|
className="p-2 border border-white/[0.10] bg-white/[0.03] text-white/50 hover:text-white"
|
|
title="View listing"
|
|
>
|
|
<ExternalLink className="w-4 h-4" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Messages */}
|
|
<div className="p-4 space-y-3 min-h-[280px] max-h-[450px] overflow-auto">
|
|
{loadingMessages ? (
|
|
<div className="flex items-center justify-center py-12">
|
|
<Loader2 className="w-6 h-6 text-accent animate-spin" />
|
|
</div>
|
|
) : messages.length === 0 ? (
|
|
<div className="text-sm font-mono text-white/40">No messages yet</div>
|
|
) : (
|
|
messages.map(m => {
|
|
const isMe = m.sender_user_id === user?.id
|
|
return (
|
|
<div
|
|
key={m.id}
|
|
className={clsx(
|
|
'p-3 border max-w-[85%]',
|
|
isMe
|
|
? 'bg-accent/10 border-accent/20 ml-auto'
|
|
: 'bg-white/[0.02] border-white/[0.08]'
|
|
)}
|
|
>
|
|
<div className="flex items-center justify-between text-[10px] font-mono text-white/40 mb-1">
|
|
<span>{isMe ? 'You' : (activeTab === 'buying' ? 'Seller' : 'Buyer')}</span>
|
|
<span>{new Date(m.created_at).toLocaleString('en-US')}</span>
|
|
</div>
|
|
<div className="text-sm text-white/80 whitespace-pre-line">{m.body}</div>
|
|
</div>
|
|
)
|
|
})
|
|
)}
|
|
</div>
|
|
|
|
{/* Reply form */}
|
|
<div className="p-4 border-t border-white/[0.08]">
|
|
{activeThread.status === 'closed' || activeThread.status === 'spam' ? (
|
|
<div className="flex items-center gap-2 text-[11px] font-mono text-white/40">
|
|
<Lock className="w-4 h-4" /> This conversation is closed.
|
|
</div>
|
|
) : (
|
|
<div className="flex gap-2">
|
|
<textarea
|
|
value={draft}
|
|
onChange={(e) => setDraft(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
|
|
e.preventDefault()
|
|
sendMessage()
|
|
}
|
|
}}
|
|
placeholder="Write a message... (Cmd+Enter to send)"
|
|
rows={2}
|
|
className="flex-1 px-3 py-2 bg-[#0A0A0A] border border-white/10 text-white font-mono text-sm placeholder:text-white/20 focus:outline-none focus:border-accent resize-none"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={sendMessage}
|
|
disabled={sending || !draft.trim()}
|
|
className="px-4 py-2 bg-accent text-black text-xs font-bold uppercase disabled:opacity-50 flex items-center gap-2 self-end"
|
|
>
|
|
{sending ? <Loader2 className="w-4 h-4 animate-spin" /> : <Send className="w-4 h-4" />}
|
|
Send
|
|
</button>
|
|
</div>
|
|
)}
|
|
{error && (
|
|
<div className="mt-2 text-[11px] font-mono text-rose-400">{error}</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
{/* MOBILE DRAWER */}
|
|
{menuOpen && (
|
|
<div className="lg:hidden fixed inset-0 z-50">
|
|
<button onClick={() => setMenuOpen(false)} className="absolute inset-0 bg-black/70" />
|
|
<div className="absolute right-0 top-0 bottom-0 w-[320px] bg-[#020202] border-l border-white/[0.08]">
|
|
<div className="p-4 border-b border-white/[0.08]">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<Image src="/pounce-puma.png" alt="Pounce" width={24} height={24} />
|
|
<div>
|
|
<div className="text-sm font-bold text-white">Terminal</div>
|
|
<div className="text-[10px] font-mono text-white/40">{tierName}</div>
|
|
</div>
|
|
</div>
|
|
<button onClick={() => setMenuOpen(false)} className="p-1 text-white/40 hover:text-white">
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="p-4 space-y-4">
|
|
<Link href="/terminal/hunt" className="flex items-center gap-3 px-3 py-2.5 border border-white/[0.08] text-white/70" onClick={() => setMenuOpen(false)}>
|
|
<Target className="w-4 h-4" /> Hunt
|
|
</Link>
|
|
<Link href="/terminal/watchlist" className="flex items-center gap-3 px-3 py-2.5 border border-white/[0.08] text-white/70" onClick={() => setMenuOpen(false)}>
|
|
<Eye className="w-4 h-4" /> Watchlist
|
|
</Link>
|
|
<Link href="/terminal/listing" className="flex items-center gap-3 px-3 py-2.5 border border-white/[0.08] text-white/70" onClick={() => setMenuOpen(false)}>
|
|
<Tag className="w-4 h-4" /> For Sale
|
|
</Link>
|
|
<div className="pt-4 border-t border-white/[0.08]">
|
|
<button onClick={() => { logout(); setMenuOpen(false) }} className="flex items-center gap-3 px-3 py-2.5 text-rose-400/60">
|
|
<LogOut className="w-4 h-4" /> Logout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|