diff --git a/frontend/src/components/hunt/DropsTab.tsx b/frontend/src/components/hunt/DropsTab.tsx index d7e3861..061684a 100644 --- a/frontend/src/components/hunt/DropsTab.tsx +++ b/frontend/src/components/hunt/DropsTab.tsx @@ -89,6 +89,7 @@ export function DropsTab({ showToast }: DropsTabProps) { const [maxLength, setMaxLength] = useState(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 && } + + {/* Show Only Available Filter */} + )} {/* Results Info */}
-
-
- {total.toLocaleString()} domains detected +
+
+
+ {showOnlyAvailable ? sortedItems.length : total.toLocaleString()} domains +
+ {availableCount > 0 && !showOnlyAvailable && ( +
+ + {availableCount} available now +
+ )}
- {totalPages > 1 && ( + {totalPages > 1 && !showOnlyAvailable && ( Page {page} of {totalPages} @@ -537,6 +581,17 @@ export function DropsTab({ showToast }: DropsTabProps) {
+ {/* Track Button - always visible */} + + + {/* Action Button based on status */} {status === 'available' ? ( ) : status === 'dropping_soon' ? ( - + + + Dropping Soon + ) : status === 'taken' ? ( @@ -627,8 +678,17 @@ export function DropsTab({ showToast }: DropsTabProps) {
- {/* Actions - simplified */} + {/* Actions */}
+ {/* Track Button - always visible */} + + + + Soon + ) : status === 'taken' ? ( - + Taken