From 855d54f76dcc01c77ee0a9afa09e4ee49753f825 Mon Sep 17 00:00:00 2001 From: Yves Gugger Date: Thu, 11 Dec 2025 07:27:40 +0100 Subject: [PATCH] feat: MARKET & NAV - High-End Polish Changes: - MARKET: Re-introduced 'Emerald Glow' background effect (Landing Page style) - NAVIGATION: Complete redesign of Sidebar to match Award-Winning style - Darker, cleaner background (zinc-950) - Ultra-thin borders (white/5) - New active state: subtle emerald glow line + text color (no blocky backgrounds) - Simplified Logo section - Modernized User Profile card --- frontend/src/app/terminal/market/page.tsx | 403 +++++++++++----------- frontend/src/components/Sidebar.tsx | 276 +++++++-------- 2 files changed, 323 insertions(+), 356 deletions(-) diff --git a/frontend/src/app/terminal/market/page.tsx b/frontend/src/app/terminal/market/page.tsx index 9ffb2d9..3d59ca4 100644 --- a/frontend/src/app/terminal/market/page.tsx +++ b/frontend/src/app/terminal/market/page.tsx @@ -313,7 +313,7 @@ export default function MarketPage() { // Watchlist const [trackedDomains, setTrackedDomains] = useState>(new Set()) const [trackingInProgress, setTrackingInProgress] = useState(null) - + // Load const loadData = useCallback(async () => { setLoading(true) @@ -378,7 +378,7 @@ export default function MarketPage() { if (priceRange === 'high') filtered = filtered.filter(item => item.price >= 1000) if (searchQuery) filtered = filtered.filter(item => item.domain.toLowerCase().includes(searchQuery.toLowerCase())) - const mult = sortDirection === 'asc' ? 1 : -1 + const mult = sortDirection === 'asc' ? 1 : -1 filtered.sort((a, b) => { switch (sortField) { case 'domain': return mult * a.domain.localeCompare(b.domain) @@ -386,9 +386,9 @@ export default function MarketPage() { case 'price': return mult * (a.price - b.price) case 'time': return mult * (parseTimeToSeconds(a.timeLeft) - parseTimeToSeconds(b.timeLeft)) case 'source': return mult * a.source.localeCompare(b.source) - default: return 0 - } - }) + default: return 0 + } + }) return filtered }, [auctions, hideSpam, pounceOnly, priceRange, searchQuery, sortField, sortDirection]) @@ -404,215 +404,224 @@ export default function MarketPage() { return ( -
- - {/* METRICS */} -
- - - 5 ? 'down' : 'neutral'} /> - +
+ {/* Page-specific emerald glow (mirrors landing page look) */} +
+
+
+
- {/* CONTROLS */} -
-
- {/* Search */} -
- - setSearchQuery(e.target.value)} - placeholder="Search domains..." - className="w-full pl-10 pr-4 py-2.5 bg-zinc-900 border border-white/10 rounded-xl - text-sm text-white placeholder:text-zinc-600 - focus:outline-none focus:border-white/20 focus:ring-1 focus:ring-white/20 transition-all" - /> -
- - {/* Filters */} -
- setHideSpam(!hideSpam)} label="No Spam" /> - setPounceOnly(!pounceOnly)} label="Pounce Exclusive" /> -
- setPriceRange(p => p === 'low' ? 'all' : 'low')} label="< $100" /> - setPriceRange(p => p === 'high' ? 'all' : 'high')} label="$1k+" /> -
- -
- - +
+ + {/* METRICS */} +
+ + + 5 ? 'down' : 'neutral'} /> +
-
- {/* DATA GRID */} -
- {loading ? ( -
- -

Scanning markets...

-
- ) : marketItems.length === 0 ? ( -
-
- + {/* CONTROLS */} +
+
+ {/* Search */} +
+ + setSearchQuery(e.target.value)} + placeholder="Search domains..." + className="w-full pl-10 pr-4 py-2.5 bg-zinc-900 border border-white/10 rounded-xl + text-sm text-white placeholder:text-zinc-600 + focus:outline-none focus:border-white/20 focus:ring-1 focus:ring-white/20 transition-all" + />
-

No matches found

-

Try adjusting your filters

+ + {/* Filters */} +
+ setHideSpam(!hideSpam)} label="No Spam" /> + setPounceOnly(!pounceOnly)} label="Pounce Exclusive" /> +
+ setPriceRange(p => p === 'low' ? 'all' : 'low')} label="< $100" /> + setPriceRange(p => p === 'high' ? 'all' : 'high')} label="$1k+" /> +
+ +
+ +
- ) : ( - <> - {/* DESKTOP TABLE */} -
-
-
-
-
-
-
Action
+
+ + {/* DATA GRID */} +
+ {loading ? ( +
+ +

Scanning markets...

+
+ ) : marketItems.length === 0 ? ( +
+
+
-
+

No matches found

+

Try adjusting your filters

+
+ ) : ( + <> + {/* DESKTOP TABLE */} +
+
+
+
+
+
+
Action
+
+
+ {marketItems.map((item) => { + const timeLeftSec = parseTimeToSeconds(item.timeLeft) + const isUrgent = timeLeftSec < 3600 + return ( +
+ {/* Domain */} +
+
+ {item.isPounce && ( + + + + )} +
+
{item.domain}
+ +
{item.source}
+ +
+
+
+ {/* Score */} +
+ {/* Price */} +
+ +
+
{formatPrice(item.price)}
+ {item.numBids !== undefined && item.numBids > 0 &&
{item.numBids} bids
} +
+ +
+ {/* Time */} +
+ +
+ + {item.timeLeft} +
+ +
+ {/* Actions */} +
+ {/* Monitor Button - Distinct Style & Spacing */} + + + + + {/* Buy Button */} + + + {item.isPounce ? 'Buy Now' : 'Place Bid'} + + + +
+
+ ) + })} +
+
+ + {/* MOBILE CARDS */} +
{marketItems.map((item) => { const timeLeftSec = parseTimeToSeconds(item.timeLeft) const isUrgent = timeLeftSec < 3600 - return ( -
- {/* Domain */} -
-
- {item.isPounce && ( - - - - )} -
-
{item.domain}
- -
{item.source}
- -
+ return ( +
+
+
+ {item.isPounce && } + {item.domain}
+
- {/* Score */} -
- {/* Price */} -
- -
-
{formatPrice(item.price)}
- {item.numBids !== undefined && item.numBids > 0 &&
{item.numBids} bids
} -
- -
- {/* Time */} -
- -
+ +
+
+
Current Bid
+
{formatPrice(item.price)}
+
+
+
Ends In
+
{item.timeLeft}
- -
- {/* Actions */} -
- {/* Monitor Button - Distinct Style & Spacing */} - - - - - {/* Buy Button */} - - - {item.isPounce ? 'Buy Now' : 'Place Bid'} - - - -
-
- ) - })} -
-
- - {/* MOBILE CARDS */} -
- {marketItems.map((item) => { - const timeLeftSec = parseTimeToSeconds(item.timeLeft) - const isUrgent = timeLeftSec < 3600 - return ( -
-
-
- {item.isPounce && } - {item.domain} -
- -
- -
-
-
Current Bid
-
{formatPrice(item.price)}
-
-
-
Ends In
-
- - {item.timeLeft}
-
-
- -
- - - {item.isPounce ? 'Buy Now' : 'Place Bid'} - - -
-
- ) - })} -
- - )} +
+ +
+ + + {item.isPounce ? 'Buy Now' : 'Place Bid'} + +
-
+
+ ) + })} +
+ + )} +
+
+
) } diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx index e1447ef..0c19d2d 100755 --- a/frontend/src/components/Sidebar.tsx +++ b/frontend/src/components/Sidebar.tsx @@ -7,7 +7,6 @@ import { useStore } from '@/lib/store' import { LayoutDashboard, Eye, - Briefcase, Gavel, TrendingUp, Settings, @@ -22,8 +21,6 @@ import { X, Sparkles, Tag, - Target, - Link2, } from 'lucide-react' import { useState, useEffect } from 'react' import clsx from 'clsx' @@ -66,12 +63,10 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S } const tierName = subscription?.tier_name || subscription?.tier || 'Scout' - const tierIcon = tierName === 'Tycoon' ? Crown : tierName === 'Trader' ? TrendingUp : Zap - const TierIcon = tierIcon + const TierIcon = tierName === 'Tycoon' ? Crown : tierName === 'Trader' ? TrendingUp : Zap // Count available domains for notification badge const availableCount = domains?.filter(d => d.is_available).length || 0 - const isTycoon = tierName.toLowerCase() === 'tycoon' // SECTION 1: Discover - External market data @@ -131,7 +126,7 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S <> {/* Logo Section */}
@@ -139,29 +134,29 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S "relative flex items-center justify-center transition-all duration-300", collapsed ? "w-10 h-10" : "w-12 h-12" )}> - {/* Glow effect behind logo */} -
+ {/* Glow effect behind logo - Reduced intensity for cleanliness */} +
pounce
{!collapsed && (
- - POUNCE - - - Command Center + > + POUNCE + + + Terminal
)} @@ -169,67 +164,62 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
{/* Main Navigation */} -