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

Deploy: 2025-12-19 12:10
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-19 12:10:14 +01:00
parent 93a18820c2
commit 2011aae6fa
1 changed files with 81 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
frontend/src/components/hunt/DropsTab.tsx
View File

@ -89,6 +89,7 @@ export function DropsTab({ showToast }: DropsTabProps) {
const [maxLength, setMaxLength] = useState<number | undefined>(undefined)
const [excludeNumeric, setExcludeNumeric] = useState(true)
const [excludeHyphen, setExcludeHyphen] = useState(true)
const [showOnlyAvailable, setShowOnlyAvailable] = useState(false)
const [filtersOpen, setFiltersOpen] = useState(false)
// Pagination
@ -203,10 +204,17 @@ export function DropsTab({ showToast }: DropsTabProps) {
}
}, [trackingDrop, showToast])
// Sorted Items
// Filtered and Sorted Items
const sortedItems = useMemo(() => {
// Filter first if "show only available" is enabled
let filtered = items
if (showOnlyAvailable) {
filtered = items.filter(item => item.availability_status === 'available')
}
// Then sort
const mult = sortDirection === 'asc' ? 1 : -1
return [...items].sort((a, b) => {
return [...filtered].sort((a, b) => {
switch (sortField) {
case 'domain':
return mult * a.domain.localeCompare(b.domain)
@ -218,7 +226,12 @@ export function DropsTab({ showToast }: DropsTabProps) {
return 0
}
})
}, [items, sortField, sortDirection])
}, [items, sortField, sortDirection, showOnlyAvailable])
// Count available domains
const availableCount = useMemo(() =>
items.filter(item => item.availability_status === 'available').length
, [items])
const handleSort = useCallback((field: typeof sortField) => {
if (sortField === field) {
@ -236,6 +249,7 @@ export function DropsTab({ showToast }: DropsTabProps) {
maxLength !== undefined,
excludeNumeric,
excludeHyphen,
showOnlyAvailable,
].filter(Boolean).length
const formatTime = (iso: string) => {
@ -426,17 +440,47 @@ export function DropsTab({ showToast }: DropsTabProps) {
{excludeHyphen && <CheckCircle2 className="w-3 h-3 text-black" />}
</div>
</button>
{/* Show Only Available Filter */}
<button
onClick={() => setShowOnlyAvailable(!showOnlyAvailable)}
className={clsx(
"flex items-center justify-between py-3 px-4 border transition-all",
showOnlyAvailable ? "border-accent/30 bg-accent/5" : "border-white/[0.08] hover:border-white/20"
)}
>
<div className="flex items-center gap-3">
<Zap className={clsx("w-4 h-4", showOnlyAvailable ? "text-accent" : "text-white/30")} />
<span className={clsx("text-xs font-mono uppercase tracking-wider", showOnlyAvailable ? "text-accent" : "text-white/50")}>
Only Available
</span>
</div>
<div className={clsx(
"w-5 h-5 border flex items-center justify-center transition-all",
showOnlyAvailable ? "border-accent bg-accent" : "border-white/20"
)}>
{showOnlyAvailable && <CheckCircle2 className="w-3 h-3 text-black" />}
</div>
</button>
</div>
</div>
)}
{/* Results Info */}
<div className="flex items-center justify-between px-1">
<div className="flex items-center gap-3 text-[11px] font-mono text-white/40 uppercase tracking-widest">
<div className="w-1.5 h-1.5 bg-accent rounded-full animate-pulse" />
<span>{total.toLocaleString()} domains detected</span>
<div className="flex items-center gap-4 text-[11px] font-mono uppercase tracking-widest">
<div className="flex items-center gap-2 text-white/40">
<div className="w-1.5 h-1.5 bg-accent rounded-full animate-pulse" />
<span>{showOnlyAvailable ? sortedItems.length : total.toLocaleString()} domains</span>
</div>
{availableCount > 0 && !showOnlyAvailable && (
<div className="flex items-center gap-2 text-accent">
<Zap className="w-3 h-3" />
<span>{availableCount} available now</span>
</div>
)}
</div>
{totalPages > 1 && (
{totalPages > 1 && !showOnlyAvailable && (
<span className="text-[11px] font-mono text-white/30 uppercase tracking-widest">
Page {page} of {totalPages}
</span>
@ -537,6 +581,17 @@ export function DropsTab({ showToast }: DropsTabProps) {
</div>
<div className="flex gap-2">
{/* Track Button - always visible */}
<button
onClick={() => trackDrop(item.id, fullDomain)}
disabled={isTrackingThis}
className="h-12 px-4 border border-white/10 text-white/60 text-xs font-bold uppercase tracking-widest flex items-center justify-center gap-2 hover:bg-white/5 active:scale-[0.98] transition-all"
>
{isTrackingThis ? <Loader2 className="w-4 h-4 animate-spin" /> : <Eye className="w-4 h-4" />}
Track
</button>
{/* Action Button based on status */}
{status === 'available' ? (
<a
href={`https://www.namecheap.com/domains/registration/results/?domain=${fullDomain}`}
@ -548,14 +603,10 @@ export function DropsTab({ showToast }: DropsTabProps) {
Buy Now
</a>
) : status === 'dropping_soon' ? (
<button
onClick={() => trackDrop(item.id, fullDomain)}
disabled={isTrackingThis}
className="flex-1 h-12 bg-amber-500 text-black text-xs font-black uppercase tracking-widest flex items-center justify-center gap-2 hover:bg-amber-400 active:scale-[0.98] transition-all"
>
{isTrackingThis ? <Loader2 className="w-4 h-4 animate-spin" /> : <Eye className="w-4 h-4" />}
Track & Notify
</button>
<span className="flex-1 h-12 border border-amber-400/30 text-amber-400 bg-amber-400/5 text-xs font-bold uppercase tracking-widest flex items-center justify-center gap-2">
<Clock className="w-4 h-4" />
Dropping Soon
</span>
) : status === 'taken' ? (
<span className="flex-1 h-12 border border-rose-400/20 text-rose-400/60 text-xs font-bold uppercase tracking-widest flex items-center justify-center gap-2 bg-rose-400/5">
<Ban className="w-4 h-4" />
@ -627,8 +678,17 @@ export function DropsTab({ showToast }: DropsTabProps) {
</span>
</div>
{/* Actions - simplified */}
{/* Actions */}
<div className="flex items-center justify-end gap-2 opacity-60 group-hover:opacity-100 transition-all">
{/* Track Button - always visible */}
<button
onClick={() => trackDrop(item.id, fullDomain)}
disabled={isTrackingThis}
className="w-9 h-9 flex items-center justify-center border border-white/10 text-white/50 hover:text-white hover:bg-white/5 transition-all"
title="Add to Watchlist"
>
{isTrackingThis ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Eye className="w-3.5 h-3.5" />}
</button>
<button
onClick={() => openAnalyze(fullDomain)}
className="w-9 h-9 flex items-center justify-center border border-white/10 text-white/50 hover:text-accent hover:border-accent/30 hover:bg-accent/5 transition-all"
@ -650,17 +710,12 @@ export function DropsTab({ showToast }: DropsTabProps) {
Buy Now
</a>
) : status === 'dropping_soon' ? (
<button
onClick={() => trackDrop(item.id, fullDomain)}
disabled={isTrackingThis}
className="h-9 px-4 bg-amber-500 text-black text-[10px] font-black uppercase tracking-widest flex items-center gap-1.5 hover:bg-amber-400 transition-all"
title="Add to Watchlist & get notified!"
>
{isTrackingThis ? <Loader2 className="w-3 h-3 animate-spin" /> : <Eye className="w-3 h-3" />}
Track
</button>
<span className="h-9 px-3 text-amber-400 text-[10px] font-bold uppercase tracking-widest flex items-center gap-1.5 border border-amber-400/30 bg-amber-400/5">
<Clock className="w-3 h-3" />
Soon
</span>
) : status === 'taken' ? (
<span className="h-9 px-4 text-rose-400/50 text-[10px] font-bold uppercase tracking-widest flex items-center gap-1.5 border border-rose-400/20 bg-rose-400/5">
<span className="h-9 px-3 text-rose-400/50 text-[10px] font-bold uppercase tracking-widest flex items-center gap-1.5 border border-rose-400/20 bg-rose-400/5">
<Ban className="w-3 h-3" />
Taken
</span>