Inbox: Unread badges, Seller Inbox, Polling updates
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

This commit is contained in:
2025-12-17 08:46:45 +01:00
parent 7594a723c6
commit ab27cb1295
4 changed files with 592 additions and 146 deletions

View File

@ -1474,3 +1474,168 @@ async def check_dns_verification(
"message": "DNS check failed. Please try again in a few minutes.",
}
# ============== Inbox API (Unified Buyer + Seller) ==============
@router.get("/inbox/counts")
async def get_inbox_counts(
current_user: User = Depends(get_current_user),
db: AsyncSession = Depends(get_db),
):
"""
Get unread message/inquiry counts for both Buyer and Seller roles.
Used for badge display in navigation.
"""
# BUYER: Count inquiries where there are unread seller messages
# A message is "unread" for buyer if sender_user_id != buyer_user_id and no newer message from buyer
buyer_inquiries = await db.execute(
select(ListingInquiry).where(ListingInquiry.buyer_user_id == current_user.id)
)
buyer_inqs = list(buyer_inquiries.scalars().all())
buyer_unread = 0
for inq in buyer_inqs:
# Get the latest message
latest_msg = await db.execute(
select(ListingInquiryMessage)
.where(ListingInquiryMessage.inquiry_id == inq.id)
.order_by(ListingInquiryMessage.created_at.desc())
.limit(1)
)
msg = latest_msg.scalar_one_or_none()
# If latest message is from seller (not buyer), it's unread
if msg and msg.sender_user_id != current_user.id:
buyer_unread += 1
# SELLER: Count new/unread inquiries across all listings
seller_listings = await db.execute(
select(DomainListing.id).where(DomainListing.user_id == current_user.id)
)
listing_ids = [lid for (lid,) in seller_listings.fetchall()]
seller_unread = 0
if listing_ids:
# Count inquiries that are 'new' (never read)
new_count = await db.execute(
select(func.count(ListingInquiry.id)).where(
and_(
ListingInquiry.listing_id.in_(listing_ids),
ListingInquiry.status == "new",
)
)
)
seller_unread = new_count.scalar() or 0
# Also count inquiries where latest message is from buyer (unread reply)
for lid in listing_ids:
inqs_result = await db.execute(
select(ListingInquiry).where(
and_(
ListingInquiry.listing_id == lid,
ListingInquiry.status.notin_(["closed", "spam"]),
)
)
)
for inq in inqs_result.scalars().all():
if inq.status == "new":
continue # Already counted
latest_msg = await db.execute(
select(ListingInquiryMessage)
.where(ListingInquiryMessage.inquiry_id == inq.id)
.order_by(ListingInquiryMessage.created_at.desc())
.limit(1)
)
msg = latest_msg.scalar_one_or_none()
# If latest message is from buyer (not seller), it's unread for seller
if msg and msg.sender_user_id != current_user.id:
seller_unread += 1
return {
"buyer_unread": buyer_unread,
"seller_unread": seller_unread,
"total_unread": buyer_unread + seller_unread,
}
@router.get("/inbox/seller")
async def get_seller_inbox(
current_user: User = Depends(get_current_user),
db: AsyncSession = Depends(get_db),
status_filter: Optional[str] = Query(None, enum=["all", "new", "read", "replied", "closed", "spam"]),
):
"""
Seller Inbox: Get all inquiries across all listings owned by the current user.
This provides a unified inbox view for sellers.
"""
# Get all listings owned by user
listings_result = await db.execute(
select(DomainListing).where(DomainListing.user_id == current_user.id)
)
listings = {l.id: l for l in listings_result.scalars().all()}
if not listings:
return {"inquiries": [], "total": 0, "unread": 0}
# Build query for inquiries
query = (
select(ListingInquiry)
.where(ListingInquiry.listing_id.in_(listings.keys()))
.order_by(ListingInquiry.created_at.desc())
)
if status_filter and status_filter != "all":
query = query.where(ListingInquiry.status == status_filter)
result = await db.execute(query)
inquiries = list(result.scalars().all())
# Count unread
unread_count = sum(1 for inq in inquiries if inq.status == "new" or not inq.read_at)
# Build response with listing info
response_items = []
for inq in inquiries:
listing = listings.get(inq.listing_id)
if not listing:
continue
# Get latest message for preview
latest_msg_result = await db.execute(
select(ListingInquiryMessage)
.where(ListingInquiryMessage.inquiry_id == inq.id)
.order_by(ListingInquiryMessage.created_at.desc())
.limit(1)
)
latest_msg = latest_msg_result.scalar_one_or_none()
# Check if has unread reply from buyer
has_unread_reply = False
if latest_msg and latest_msg.sender_user_id != current_user.id and inq.status not in ["closed", "spam"]:
has_unread_reply = True
response_items.append({
"id": inq.id,
"listing_id": listing.id,
"domain": listing.domain,
"slug": listing.slug,
"buyer_name": inq.name,
"buyer_email": inq.email,
"offer_amount": inq.offer_amount,
"status": inq.status,
"created_at": inq.created_at.isoformat(),
"read_at": inq.read_at.isoformat() if inq.read_at else None,
"replied_at": getattr(inq, "replied_at", None),
"closed_at": inq.closed_at.isoformat() if getattr(inq, "closed_at", None) else None,
"closed_reason": getattr(inq, "closed_reason", None),
"has_unread_reply": has_unread_reply,
"last_message_preview": (latest_msg.body[:100] + "..." if len(latest_msg.body) > 100 else latest_msg.body) if latest_msg else inq.message[:100],
"last_message_at": latest_msg.created_at.isoformat() if latest_msg else inq.created_at.isoformat(),
"last_message_is_buyer": latest_msg.sender_user_id != current_user.id if latest_msg else True,
})
return {
"inquiries": response_items,
"total": len(response_items),
"unread": unread_count,
}

View File

@ -20,12 +20,20 @@ import {
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'
type Thread = {
// Types
type BuyerThread = {
id: number
listing_id: number
domain: string
@ -36,6 +44,26 @@ type Thread = {
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
@ -45,16 +73,28 @@ type Message = {
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 [threads, setThreads] = useState<Thread[]>([])
const [loading, setLoading] = useState(true)
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<Thread | null>(null)
const [activeThread, setActiveThread] = useState<BuyerThread | SellerInquiry | null>(null)
const [messages, setMessages] = useState<Message[]>([])
const [loadingMessages, setLoadingMessages] = useState(false)
const [sending, setSending] = useState(false)
@ -65,54 +105,91 @@ export default function InboxPage() {
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
const drawerNavSections = [
{ title: 'Discover', items: [
{ href: '/terminal/hunt', 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/inbox', label: 'Inbox', icon: MessageSquare, active: true },
]},
]
const loadThreads = useCallback(async () => {
setLoading(true)
// Load buyer threads
const loadBuyerThreads = useCallback(async () => {
setLoadingBuyer(true)
setError(null)
try {
const data = await api.getMyInquiryThreads()
setThreads(data)
setBuyerThreads(data)
} catch (err: any) {
setError(err?.message || 'Failed to load inbox')
// Silently fail - might not have any threads
} finally {
setLoading(false)
setLoadingBuyer(false)
}
}, [])
useEffect(() => { loadThreads() }, [loadThreads])
// 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, Thread>()
threads.forEach(t => map.set(t.id, t))
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
}, [threads])
}, [buyerThreads, sellerInquiries])
useEffect(() => {
if (!openInquiryId) return
const id = Number(openInquiryId)
if (!Number.isFinite(id)) return
const t = threadsById.get(id)
if (t) setActiveThread(t)
if (t) {
setActiveThread(t)
// Determine which tab
if ('buyer_name' in t) {
setActiveTab('selling')
} else {
setActiveTab('buying')
}
}
}, [openInquiryId, threadsById])
const loadMessages = useCallback(async (thread: Thread) => {
// 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 {
@ -123,8 +200,16 @@ export default function InboxPage() {
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()
@ -133,7 +218,14 @@ export default function InboxPage() {
setSending(true)
setError(null)
try {
const created = await api.sendInquiryMessageAsBuyer(activeThread.id, body)
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) {
@ -143,6 +235,27 @@ export default function InboxPage() {
}
}, [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>
@ -175,37 +288,79 @@ export default function InboxPage() {
<span className="text-white">Inbox</span>
</h1>
<p className="text-sm text-white/40 font-mono max-w-lg">
Your inquiry threads with verified sellers.
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">
{loading ? (
{isLoading ? (
<div className="flex items-center justify-center py-20">
<Loader2 className="w-6 h-6 text-accent animate-spin" />
</div>
) : error ? (
) : error && !activeThread ? (
<div className="p-4 border border-rose-400/20 bg-rose-400/5 text-rose-300 text-sm font-mono">{error}</div>
) : threads.length === 0 ? (
) : 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">No threads yet</p>
<p className="text-white/25 text-xs font-mono mt-1">Browse Pounce Direct deals and send an inquiry.</p>
<Link href="/acquire" className="mt-4 inline-flex items-center gap-2 px-4 py-2 bg-accent text-black text-xs font-bold uppercase">
View Deals
<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-[360px_1fr] gap-4">
{/* Thread list */}
<div className="border border-white/[0.08] bg-white/[0.02]">
<div className="px-3 py-2 border-b border-white/[0.08] text-[10px] font-mono text-white/40 uppercase tracking-wider">
Threads
<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]">
{threads.map(t => (
{activeTab === 'buying' ? (
// Buyer view
buyerThreads.map(t => (
<button
key={t.id}
type="button"
@ -220,11 +375,10 @@ export default function InboxPage() {
<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')}
{t.status === 'closed' && t.closed_reason ? ` • closed: ${t.closed_reason}` : ''}
</div>
</div>
<span className={clsx(
'px-2 py-1 text-[9px] font-mono uppercase border',
'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'
@ -233,83 +387,172 @@ export default function InboxPage() {
</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">Select a thread</div>
<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">Thread</div>
<div className="text-sm font-bold text-white font-mono">{activeThread.domain}</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="px-3 py-2 border border-white/[0.10] bg-white/[0.03] text-white/70 hover:text-white text-[10px] font-mono uppercase"
className="p-2 border border-white/[0.10] bg-white/[0.03] text-white/50 hover:text-white"
title="View listing"
>
View Deal
<ExternalLink className="w-4 h-4" />
</Link>
</div>
</div>
<div className="p-4 space-y-3 min-h-[280px] max-h-[520px] overflow-auto">
{/* 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</div>
<div className="text-sm font-mono text-white/40">No messages yet</div>
) : (
messages.map(m => (
messages.map(m => {
const isMe = m.sender_user_id === user?.id
return (
<div
key={m.id}
className={clsx(
'p-3 border',
m.sender_user_id === user?.id
? 'bg-accent/10 border-accent/20'
'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>{m.sender_user_id === user?.id ? 'You' : 'Seller'}</span>
<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" /> Thread is closed.
<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)}
placeholder="Write a message..."
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"
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"
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>
</>
)}
@ -326,7 +569,7 @@ export default function InboxPage() {
<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-icon.png" alt="Pounce" width={24} height={24} />
<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>
@ -337,44 +580,19 @@ export default function InboxPage() {
</button>
</div>
</div>
<div className="p-4 space-y-6">
{drawerNavSections.map(section => (
<div key={section.title}>
<div className="text-[10px] font-mono text-white/30 uppercase tracking-wider mb-2">{section.title}</div>
<div className="space-y-1">
{section.items.map(item => (
<Link
key={item.href}
href={item.href}
className={clsx(
'flex items-center gap-3 px-3 py-2.5 border border-white/[0.08] bg-white/[0.02] text-white/70 hover:text-white',
(item as any).active && 'border-accent/20 bg-accent/5 text-accent'
)}
onClick={() => setMenuOpen(false)}
>
<item.icon className="w-4 h-4" />
<span className="text-sm font-medium">{item.label}</span>
<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>
))}
</div>
</div>
))}
<div className="space-y-2 pt-4 border-t border-white/[0.08]">
<Link
href="/terminal/settings"
className="w-full flex items-center gap-3 px-3 py-2.5 text-white/70 hover:text-white transition-colors"
onClick={() => setMenuOpen(false)}
>
<Settings className="w-4 h-4" />
<span className="text-sm font-medium">Settings</span>
<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>
<button
onClick={() => { logout(); setMenuOpen(false) }}
className="w-full flex items-center gap-3 px-3 py-2.5 text-rose-400/60 hover:text-rose-400 transition-colors"
>
<LogOut className="w-4 h-4" />
<span className="text-sm font-medium">Logout</span>
<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>

View File

@ -4,6 +4,7 @@ import Link from 'next/link'
import Image from 'next/image'
import { usePathname } from 'next/navigation'
import { useStore } from '@/lib/store'
import { api } from '@/lib/api'
import {
Eye,
TrendingUp,
@ -23,7 +24,7 @@ import {
Briefcase,
MessageSquare,
} from 'lucide-react'
import { useState, useEffect } from 'react'
import { useState, useEffect, useCallback } from 'react'
import clsx from 'clsx'
interface SidebarProps {
@ -37,10 +38,28 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
const [internalCollapsed, setInternalCollapsed] = useState(false)
const [mobileOpen, setMobileOpen] = useState(false)
const [inboxCounts, setInboxCounts] = useState<{ buyer_unread: number; seller_unread: number; total_unread: number } | null>(null)
const collapsed = controlledCollapsed ?? internalCollapsed
const setCollapsed = onCollapsedChange ?? setInternalCollapsed
// Fetch inbox counts for badge
const fetchInboxCounts = useCallback(async () => {
try {
const counts = await api.getInboxCounts()
setInboxCounts(counts)
} catch {
// Silently fail - user might not be authenticated yet
}
}, [])
useEffect(() => {
fetchInboxCounts()
// Poll every 60 seconds for updates
const interval = setInterval(fetchInboxCounts, 60000)
return () => clearInterval(interval)
}, [fetchInboxCounts])
useEffect(() => {
const saved = localStorage.getItem('sidebar-collapsed')
if (saved) {
@ -104,7 +123,7 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
href: '/terminal/inbox',
label: 'INBOX',
icon: MessageSquare,
badge: null,
badge: inboxCounts?.total_unread || null,
},
{
href: '/terminal/sniper',
@ -263,8 +282,10 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
"w-4 h-4 transition-all duration-300",
isDisabled ? "text-white/20" : isActive(item.href) ? "text-accent" : "text-white/40 group-hover:text-white"
)} />
{item.badge && typeof item.badge === 'number' && !isDisabled && (
<span className="absolute -top-1 -right-1 w-1.5 h-1.5 bg-accent rounded-full animate-pulse" />
{item.badge && typeof item.badge === 'number' && !isDisabled && collapsed && (
<span className="absolute -top-1 -right-1 min-w-[14px] h-[14px] bg-accent rounded-full flex items-center justify-center text-[9px] font-bold text-black">
{item.badge > 9 ? '9+' : item.badge}
</span>
)}
</div>
{!collapsed && (
@ -275,6 +296,11 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
{item.label}
</span>
)}
{item.badge && typeof item.badge === 'number' && !isDisabled && !collapsed && (
<span className="min-w-[18px] h-[18px] bg-accent rounded-full flex items-center justify-center text-[10px] font-bold text-black">
{item.badge > 99 ? '99+' : item.badge}
</span>
)}
{isDisabled && !collapsed && <Crown className="w-3 h-3 text-amber-500/40" />}
</ItemWrapper>
)

View File

@ -578,6 +578,43 @@ class ApiClient {
})
}
// Inbox Counts (for badge)
async getInboxCounts() {
return this.request<{
buyer_unread: number
seller_unread: number
total_unread: number
}>('/listings/inbox/counts')
}
// Seller Inbox (unified view of all inquiries)
async getSellerInbox(statusFilter?: 'all' | 'new' | 'read' | 'replied' | 'closed' | 'spam') {
const params = statusFilter && statusFilter !== 'all' ? `?status_filter=${statusFilter}` : ''
return this.request<{
inquiries: Array<{
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
}>
total: number
unread: number
}>(`/listings/inbox/seller${params}`)
}
// Subscription
async getSubscription() {
return this.request<{