feat: RADAR & MARKET - Content Integration & Award-Winning Search
Changes:
- TerminalLayout:
- Added 'hideHeaderSearch' prop to remove top bar elements
- Header is now non-sticky and transparent when search is hidden for seamless integration
- RADAR (Dashboard):
- Removed top bar search/shortcuts
- Implemented 'Hero Style' Universal Search:
- Floating design with backdrop blur
- Dynamic emerald glow on focus
- Animated icons and clean typography
- Integrated results dropdown
- Content flows seamlessly from top
- MARKET:
- Integrated header into content (removed sticky behavior)
- Removed duplicate search/shortcuts from top bar
This commit is contained in:
@ -403,7 +403,11 @@ export default function MarketPage() {
|
||||
const formatPrice = (price: number) => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(price)
|
||||
|
||||
return (
|
||||
<TerminalLayout title="Market" subtitle="Global Domain Opportunities">
|
||||
<TerminalLayout
|
||||
title="Market"
|
||||
subtitle="Global Domain Opportunities"
|
||||
hideHeaderSearch={true}
|
||||
>
|
||||
<div className="relative">
|
||||
{/* Page-specific emerald glow (mirrors landing page look) */}
|
||||
<div className="pointer-events-none absolute inset-0 -z-10">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState, useMemo, useCallback } from 'react'
|
||||
import { useEffect, useState, useMemo, useCallback, useRef } from 'react'
|
||||
import { useSearchParams } from 'next/navigation'
|
||||
import { useStore } from '@/lib/store'
|
||||
import { api } from '@/lib/api'
|
||||
@ -28,13 +28,14 @@ import {
|
||||
Loader2,
|
||||
Wifi,
|
||||
ShieldAlert,
|
||||
BarChart3
|
||||
BarChart3,
|
||||
Command
|
||||
} from 'lucide-react'
|
||||
import clsx from 'clsx'
|
||||
import Link from 'next/link'
|
||||
|
||||
// ============================================================================
|
||||
// SHARED COMPONENTS (Matching Market Page Style)
|
||||
// SHARED COMPONENTS
|
||||
// ============================================================================
|
||||
|
||||
function Tooltip({ children, content }: { children: React.ReactNode; content: string }) {
|
||||
@ -136,6 +137,8 @@ export default function RadarPage() {
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
const [searchResult, setSearchResult] = useState<SearchResult | null>(null)
|
||||
const [addingToWatchlist, setAddingToWatchlist] = useState(false)
|
||||
const [searchFocused, setSearchFocused] = useState(false)
|
||||
const searchInputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
// Load Data
|
||||
const loadDashboardData = useCallback(async () => {
|
||||
@ -220,6 +223,18 @@ export default function RadarPage() {
|
||||
return () => clearTimeout(timer)
|
||||
}, [searchQuery, handleSearch])
|
||||
|
||||
// Focus shortcut
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.metaKey && e.key === 'k') {
|
||||
e.preventDefault()
|
||||
searchInputRef.current?.focus()
|
||||
}
|
||||
}
|
||||
window.addEventListener('keydown', handleKeyDown)
|
||||
return () => window.removeEventListener('keydown', handleKeyDown)
|
||||
}, [])
|
||||
|
||||
// Computed
|
||||
const { availableDomains, totalDomains, greeting, subtitle } = useMemo(() => {
|
||||
const available = domains?.filter(d => d.is_available) || []
|
||||
@ -241,6 +256,7 @@ export default function RadarPage() {
|
||||
<TerminalLayout
|
||||
title={`${greeting}${user?.name ? `, ${user.name.split(' ')[0]}` : ''}`}
|
||||
subtitle={subtitle}
|
||||
hideHeaderSearch={true}
|
||||
>
|
||||
{toast && <Toast message={toast.message} type={toast.type} onClose={hideToast} />}
|
||||
|
||||
@ -260,7 +276,7 @@ export default function RadarPage() {
|
||||
|
||||
{/* 2. STAT GRID */}
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<Link href="/terminal/watchlist" className="block">
|
||||
<Link href="/terminal/watchlist" className="block group">
|
||||
<StatCard
|
||||
label="Watchlist"
|
||||
value={totalDomains}
|
||||
@ -269,7 +285,7 @@ export default function RadarPage() {
|
||||
trend="neutral"
|
||||
/>
|
||||
</Link>
|
||||
<Link href="/terminal/market" className="block">
|
||||
<Link href="/terminal/market" className="block group">
|
||||
<StatCard
|
||||
label="Opportunities"
|
||||
value={hotAuctions.length}
|
||||
@ -298,117 +314,148 @@ export default function RadarPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3. UNIVERSAL SEARCH */}
|
||||
<div className="relative p-1 bg-gradient-to-br from-white/10 to-white/5 rounded-2xl p-[1px]">
|
||||
<div className="bg-zinc-950/80 backdrop-blur-xl rounded-2xl p-6 md:p-8 relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-emerald-500/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2" />
|
||||
|
||||
<div className="relative z-10 max-w-2xl mx-auto text-center mb-6">
|
||||
<h2 className="text-xl font-bold text-white mb-2">Universal Domain Search</h2>
|
||||
<p className="text-sm text-zinc-400">Check availability, auctions & marketplace instantly</p>
|
||||
</div>
|
||||
{/* 3. AWARD-WINNING SEARCH (HERO STYLE) */}
|
||||
<div className="relative py-8">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<div className={clsx(
|
||||
"relative bg-zinc-950/50 backdrop-blur-xl border rounded-2xl transition-all duration-300",
|
||||
searchFocused
|
||||
? "border-emerald-500/30 shadow-[0_0_40px_-10px_rgba(16,185,129,0.15)] scale-[1.01]"
|
||||
: "border-white/10 shadow-xl"
|
||||
)}>
|
||||
<div className="relative flex items-center h-16 sm:h-20 px-6">
|
||||
<Search className={clsx(
|
||||
"w-6 h-6 mr-4 transition-colors",
|
||||
searchFocused ? "text-emerald-400" : "text-zinc-500"
|
||||
)} />
|
||||
<input
|
||||
ref={searchInputRef}
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
onFocus={() => setSearchFocused(true)}
|
||||
onBlur={() => setSearchFocused(false)}
|
||||
placeholder="Analyze any domain..."
|
||||
className="w-full bg-transparent text-xl sm:text-2xl text-white placeholder:text-zinc-600 font-light outline-none"
|
||||
/>
|
||||
{!searchQuery && (
|
||||
<div className="hidden sm:flex items-center gap-1.5 px-2 py-1 rounded border border-white/10 bg-white/5 text-xs text-zinc-500 font-mono">
|
||||
<Command className="w-3 h-3" /> K
|
||||
</div>
|
||||
)}
|
||||
{searchQuery && (
|
||||
<button
|
||||
onClick={() => { setSearchQuery(''); setSearchFocused(true); }}
|
||||
className="p-2 text-zinc-500 hover:text-white transition-colors"
|
||||
>
|
||||
<XCircle className="w-5 h-5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-2xl mx-auto z-10">
|
||||
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-zinc-500" />
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Enter domain (e.g. pounce.com)"
|
||||
className="w-full h-14 pl-12 pr-4 bg-zinc-900/50 border border-white/10 rounded-xl
|
||||
text-lg text-white placeholder:text-zinc-600
|
||||
focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/50 transition-all shadow-inner"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Search Results Panel */}
|
||||
{searchResult && (
|
||||
<div className="max-w-2xl mx-auto mt-4 animate-in fade-in slide-in-from-top-2">
|
||||
<div className="p-4 bg-zinc-900/90 border border-white/10 rounded-xl shadow-2xl">
|
||||
{/* SEARCH RESULTS DROPDOWN */}
|
||||
{searchResult && (
|
||||
<div className="border-t border-white/5 p-4 sm:p-6 animate-in slide-in-from-top-2 fade-in duration-200">
|
||||
{searchResult.loading ? (
|
||||
<div className="flex items-center justify-center gap-3 py-4 text-zinc-500">
|
||||
<div className="flex items-center justify-center py-8 gap-3 text-zinc-500">
|
||||
<Loader2 className="w-5 h-5 animate-spin text-emerald-500" />
|
||||
<span className="text-sm">Analyzing global databases...</span>
|
||||
<span className="text-sm font-medium">Scanning global availability...</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{/* Availability Status */}
|
||||
<div className="flex items-center justify-between p-3 bg-white/[0.02] rounded-lg border border-white/5">
|
||||
<div className="flex items-center gap-3">
|
||||
{searchResult.available === true ? (
|
||||
<div className="w-8 h-8 rounded-full bg-emerald-500/20 flex items-center justify-center">
|
||||
<div className="space-y-6">
|
||||
{/* Availability Card */}
|
||||
<div className={clsx(
|
||||
"flex flex-col sm:flex-row items-start sm:items-center justify-between p-4 rounded-xl border transition-all",
|
||||
searchResult.available
|
||||
? "bg-emerald-500/10 border-emerald-500/20"
|
||||
: "bg-white/[0.02] border-white/5"
|
||||
)}>
|
||||
<div className="flex items-center gap-4 mb-4 sm:mb-0">
|
||||
{searchResult.available ? (
|
||||
<div className="w-10 h-10 rounded-full bg-emerald-500/20 flex items-center justify-center shadow-[0_0_15px_rgba(16,185,129,0.2)]">
|
||||
<CheckCircle2 className="w-5 h-5 text-emerald-400" />
|
||||
</div>
|
||||
) : searchResult.available === false ? (
|
||||
<div className="w-8 h-8 rounded-full bg-red-500/20 flex items-center justify-center">
|
||||
<XCircle className="w-5 h-5 text-red-400" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-8 h-8 rounded-full bg-zinc-800 flex items-center justify-center">
|
||||
<Globe className="w-5 h-5 text-zinc-500" />
|
||||
<div className="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center">
|
||||
<XCircle className="w-5 h-5 text-red-400" />
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<p className="text-sm font-medium text-white">
|
||||
{searchResult.available === true ? 'Available for Registration' :
|
||||
searchResult.available === false ? 'Currently Registered' : 'Status Unknown'}
|
||||
</p>
|
||||
<p className="text-xs text-zinc-500">
|
||||
{searchResult.available === true ? 'Instant registration possible' : 'Check secondary market'}
|
||||
<h3 className="text-lg font-medium text-white">
|
||||
{searchResult.available ? 'Available' : 'Registered'}
|
||||
</h3>
|
||||
<p className="text-sm text-zinc-400">
|
||||
{searchResult.available
|
||||
? 'Ready for immediate registration'
|
||||
: 'Currently owned by someone else'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{searchResult.available === true && (
|
||||
|
||||
{searchResult.available && (
|
||||
<a
|
||||
href={`https://www.namecheap.com/domains/registration/results/?domain=${searchQuery}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="px-4 py-2 bg-emerald-500 text-black text-xs font-bold rounded-lg hover:bg-emerald-400 transition-colors"
|
||||
className="w-full sm:w-auto px-6 py-2.5 bg-emerald-500 hover:bg-emerald-400 text-black text-sm font-bold rounded-lg transition-all shadow-lg hover:shadow-emerald-500/20 text-center"
|
||||
>
|
||||
Register
|
||||
Register Now
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Auction Match */}
|
||||
{/* Auction Card */}
|
||||
{searchResult.inAuction && searchResult.auctionData && (
|
||||
<div className="flex items-center justify-between p-3 bg-amber-500/10 border border-amber-500/20 rounded-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-full bg-amber-500/20 flex items-center justify-center">
|
||||
<Gavel className="w-4 h-4 text-amber-400" />
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between p-4 rounded-xl border border-amber-500/20 bg-amber-500/5">
|
||||
<div className="flex items-center gap-4 mb-4 sm:mb-0">
|
||||
<div className="w-10 h-10 rounded-full bg-amber-500/10 flex items-center justify-center">
|
||||
<Gavel className="w-5 h-5 text-amber-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-amber-400">Auction Detected</p>
|
||||
<p className="text-xs text-amber-500/70">
|
||||
Current Bid: ${searchResult.auctionData.current_bid} • Ends in {searchResult.auctionData.time_remaining}
|
||||
<h3 className="text-lg font-medium text-white flex items-center gap-2">
|
||||
In Auction
|
||||
<span className="px-2 py-0.5 rounded text-[10px] bg-amber-500/20 text-amber-400 uppercase tracking-wider font-bold">Live</span>
|
||||
</h3>
|
||||
<p className="text-sm text-zinc-400 font-mono mt-1">
|
||||
Current Bid: <span className="text-white font-bold">${searchResult.auctionData.current_bid}</span> • Ends in {searchResult.auctionData.time_remaining}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href={searchResult.auctionData.affiliate_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="px-4 py-2 bg-amber-500 text-black text-xs font-bold rounded-lg hover:bg-amber-400 transition-colors"
|
||||
className="w-full sm:w-auto px-6 py-2.5 bg-amber-500 hover:bg-amber-400 text-black text-sm font-bold rounded-lg transition-all shadow-lg hover:shadow-amber-500/20 text-center"
|
||||
>
|
||||
Bid Now
|
||||
Place Bid
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Action Bar */}
|
||||
<div className="pt-2 border-t border-white/5 flex justify-end">
|
||||
{/* Add to Watchlist */}
|
||||
<div className="flex justify-end pt-2">
|
||||
<button
|
||||
onClick={handleAddToWatchlist}
|
||||
disabled={addingToWatchlist}
|
||||
className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-zinc-300 hover:text-white hover:bg-white/5 rounded-lg transition-colors"
|
||||
className="flex items-center gap-2 px-6 py-2.5 text-zinc-400 hover:text-white hover:bg-white/5 rounded-lg transition-all text-sm font-medium"
|
||||
>
|
||||
{addingToWatchlist ? <Loader2 className="w-4 h-4 animate-spin" /> : <Plus className="w-4 h-4" />}
|
||||
Add to Watchlist
|
||||
Add to Pounce Watchlist
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Helper Text */}
|
||||
{!searchQuery && !searchFocused && (
|
||||
<div className="mt-4 text-center">
|
||||
<p className="text-sm text-zinc-500">
|
||||
Search across <span className="text-zinc-400 font-medium">Global Registrars</span>, <span className="text-zinc-400 font-medium">Auctions</span>, and <span className="text-zinc-400 font-medium">Marketplaces</span> simultaneously.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -14,13 +14,15 @@ interface TerminalLayoutProps {
|
||||
title?: string
|
||||
subtitle?: string
|
||||
actions?: React.ReactNode
|
||||
hideHeaderSearch?: boolean // New prop to control header elements
|
||||
}
|
||||
|
||||
export function TerminalLayout({
|
||||
children,
|
||||
title,
|
||||
subtitle,
|
||||
actions
|
||||
actions,
|
||||
hideHeaderSearch = false
|
||||
}: TerminalLayoutProps) {
|
||||
const router = useRouter()
|
||||
const { isAuthenticated, isLoading, checkAuth, domains } = useStore()
|
||||
@ -50,7 +52,7 @@ export function TerminalLayout({
|
||||
useEffect(() => {
|
||||
if (!authCheckedRef.current) {
|
||||
authCheckedRef.current = true
|
||||
checkAuth()
|
||||
checkAuth()
|
||||
}
|
||||
}, [checkAuth])
|
||||
|
||||
@ -107,8 +109,13 @@ export function TerminalLayout({
|
||||
"ml-0 pt-16 lg:pt-0"
|
||||
)}
|
||||
>
|
||||
{/* Top Bar */}
|
||||
<header className="sticky top-0 z-30 bg-gradient-to-r from-background/95 via-background/90 to-background/95 backdrop-blur-xl border-b border-border/30">
|
||||
{/* Top Bar - No longer sticky if hideHeaderSearch is true, or generally refined */}
|
||||
<header className={clsx(
|
||||
"z-30 border-b border-border/30 transition-all duration-200",
|
||||
hideHeaderSearch
|
||||
? "relative bg-transparent border-none py-2" // Integrated feel
|
||||
: "sticky top-0 bg-zinc-950/80 backdrop-blur-xl" // Sticky standard
|
||||
)}>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-5 sm:py-6 flex items-center justify-between">
|
||||
{/* Left: Title */}
|
||||
<div className="ml-10 lg:ml-0 min-w-0 flex-1">
|
||||
@ -122,104 +129,108 @@ export function TerminalLayout({
|
||||
|
||||
{/* Right: Actions */}
|
||||
<div className="flex items-center gap-2 sm:gap-3 shrink-0 ml-4">
|
||||
{/* Quick Search */}
|
||||
<button
|
||||
onClick={() => setSearchOpen(true)}
|
||||
className="hidden md:flex items-center gap-2 h-9 px-3 bg-foreground/5 hover:bg-foreground/8
|
||||
border border-border/40 rounded-lg text-sm text-foreground-muted
|
||||
hover:text-foreground transition-all duration-200 hover:border-border/60"
|
||||
>
|
||||
<Search className="w-4 h-4" />
|
||||
<span className="hidden lg:inline">Search</span>
|
||||
<kbd className="hidden xl:inline-flex items-center h-5 px-1.5 bg-background border border-border/60
|
||||
rounded text-[10px] text-foreground-subtle font-mono">⌘K</kbd>
|
||||
</button>
|
||||
{!hideHeaderSearch && (
|
||||
<>
|
||||
{/* Quick Search */}
|
||||
<button
|
||||
onClick={() => setSearchOpen(true)}
|
||||
className="hidden md:flex items-center gap-2 h-9 px-3 bg-foreground/5 hover:bg-foreground/8
|
||||
border border-border/40 rounded-lg text-sm text-foreground-muted
|
||||
hover:text-foreground transition-all duration-200 hover:border-border/60"
|
||||
>
|
||||
<Search className="w-4 h-4" />
|
||||
<span className="hidden lg:inline">Search</span>
|
||||
<kbd className="hidden xl:inline-flex items-center h-5 px-1.5 bg-background border border-border/60
|
||||
rounded text-[10px] text-foreground-subtle font-mono">⌘K</kbd>
|
||||
</button>
|
||||
|
||||
{/* Mobile Search */}
|
||||
<button
|
||||
onClick={() => setSearchOpen(true)}
|
||||
className="md:hidden flex items-center justify-center w-9 h-9 text-foreground-muted
|
||||
hover:text-foreground hover:bg-foreground/5 rounded-lg transition-colors"
|
||||
>
|
||||
<Search className="w-5 h-5" />
|
||||
</button>
|
||||
{/* Mobile Search */}
|
||||
<button
|
||||
onClick={() => setSearchOpen(true)}
|
||||
className="md:hidden flex items-center justify-center w-9 h-9 text-foreground-muted
|
||||
hover:text-foreground hover:bg-foreground/5 rounded-lg transition-colors"
|
||||
>
|
||||
<Search className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
{/* Notifications */}
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setNotificationsOpen(!notificationsOpen)}
|
||||
className={clsx(
|
||||
"relative flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-200",
|
||||
notificationsOpen
|
||||
? "bg-foreground/10 text-foreground"
|
||||
: "text-foreground-muted hover:text-foreground hover:bg-foreground/5"
|
||||
)}
|
||||
>
|
||||
<Bell className="w-5 h-5" />
|
||||
{hasNotifications && (
|
||||
<span className="absolute top-1.5 right-1.5 w-2 h-2 bg-accent rounded-full">
|
||||
<span className="absolute inset-0 rounded-full bg-accent animate-ping opacity-50" />
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Notifications Dropdown */}
|
||||
{notificationsOpen && (
|
||||
<div className="absolute right-0 top-full mt-2 w-80 bg-background-secondary border border-border
|
||||
rounded-xl shadow-2xl overflow-hidden">
|
||||
<div className="p-4 border-b border-border flex items-center justify-between">
|
||||
<h3 className="text-sm font-medium text-foreground">Notifications</h3>
|
||||
<button
|
||||
onClick={() => setNotificationsOpen(false)}
|
||||
className="text-foreground-muted hover:text-foreground"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="max-h-80 overflow-y-auto">
|
||||
{availableDomains.length > 0 ? (
|
||||
<div className="p-2">
|
||||
{availableDomains.slice(0, 5).map((domain) => (
|
||||
<Link
|
||||
key={domain.id}
|
||||
href="/terminal/watchlist"
|
||||
onClick={() => setNotificationsOpen(false)}
|
||||
className="flex items-start gap-3 p-3 hover:bg-foreground/5 rounded-lg transition-colors"
|
||||
>
|
||||
<div className="w-8 h-8 bg-accent/10 rounded-lg flex items-center justify-center shrink-0">
|
||||
<span className="w-2 h-2 bg-accent rounded-full animate-pulse" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-foreground truncate">{domain.name}</p>
|
||||
<p className="text-xs text-accent">Available now!</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-8 text-center">
|
||||
<Bell className="w-8 h-8 text-foreground-subtle mx-auto mb-3" />
|
||||
<p className="text-sm text-foreground-muted">No notifications</p>
|
||||
<p className="text-xs text-foreground-subtle mt-1">
|
||||
We'll notify you when domains become available
|
||||
</p>
|
||||
</div>
|
||||
{/* Notifications */}
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setNotificationsOpen(!notificationsOpen)}
|
||||
className={clsx(
|
||||
"relative flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-200",
|
||||
notificationsOpen
|
||||
? "bg-foreground/10 text-foreground"
|
||||
: "text-foreground-muted hover:text-foreground hover:bg-foreground/5"
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
>
|
||||
<Bell className="w-5 h-5" />
|
||||
{hasNotifications && (
|
||||
<span className="absolute top-1.5 right-1.5 w-2 h-2 bg-accent rounded-full">
|
||||
<span className="absolute inset-0 rounded-full bg-accent animate-ping opacity-50" />
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Keyboard Shortcuts Hint */}
|
||||
<button
|
||||
onClick={() => {}}
|
||||
className="hidden sm:flex items-center gap-1.5 px-2 py-1.5 text-xs text-foreground-subtle hover:text-foreground
|
||||
bg-foreground/5 rounded-lg border border-border/40 hover:border-border/60 transition-all"
|
||||
title="Keyboard shortcuts (?)"
|
||||
>
|
||||
<Command className="w-3.5 h-3.5" />
|
||||
<span>?</span>
|
||||
</button>
|
||||
{/* Notifications Dropdown */}
|
||||
{notificationsOpen && (
|
||||
<div className="absolute right-0 top-full mt-2 w-80 bg-zinc-900 border border-zinc-800
|
||||
rounded-xl shadow-2xl overflow-hidden z-50">
|
||||
<div className="p-4 border-b border-zinc-800 flex items-center justify-between">
|
||||
<h3 className="text-sm font-medium text-white">Notifications</h3>
|
||||
<button
|
||||
onClick={() => setNotificationsOpen(false)}
|
||||
className="text-zinc-500 hover:text-white"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="max-h-80 overflow-y-auto">
|
||||
{availableDomains.length > 0 ? (
|
||||
<div className="p-2">
|
||||
{availableDomains.slice(0, 5).map((domain) => (
|
||||
<Link
|
||||
key={domain.id}
|
||||
href="/terminal/watchlist"
|
||||
onClick={() => setNotificationsOpen(false)}
|
||||
className="flex items-start gap-3 p-3 hover:bg-white/5 rounded-lg transition-colors"
|
||||
>
|
||||
<div className="w-8 h-8 bg-emerald-500/10 rounded-lg flex items-center justify-center shrink-0">
|
||||
<span className="w-2 h-2 bg-emerald-500 rounded-full animate-pulse" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-white truncate">{domain.name}</p>
|
||||
<p className="text-xs text-emerald-400">Available now!</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-8 text-center">
|
||||
<Bell className="w-8 h-8 text-zinc-700 mx-auto mb-3" />
|
||||
<p className="text-sm text-zinc-500">No notifications</p>
|
||||
<p className="text-xs text-zinc-600 mt-1">
|
||||
We'll notify you when domains become available
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Keyboard Shortcuts Hint */}
|
||||
<button
|
||||
onClick={() => {}}
|
||||
className="hidden sm:flex items-center gap-1.5 px-2 py-1.5 text-xs text-foreground-subtle hover:text-foreground
|
||||
bg-foreground/5 rounded-lg border border-border/40 hover:border-border/60 transition-all"
|
||||
title="Keyboard shortcuts (?)"
|
||||
>
|
||||
<Command className="w-3.5 h-3.5" />
|
||||
<span>?</span>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Custom Actions */}
|
||||
{actions}
|
||||
@ -235,7 +246,8 @@ export function TerminalLayout({
|
||||
</main>
|
||||
</div>
|
||||
|
||||
{/* Quick Search Modal */}
|
||||
{/* Quick Search Modal - Only if not hidden, or maybe still available via hotkey?
|
||||
Let's keep it available via hotkey but hidden from UI if requested */}
|
||||
{searchOpen && (
|
||||
<div
|
||||
className="fixed inset-0 z-[60] bg-background/80 backdrop-blur-sm flex items-start justify-center pt-[15vh] sm:pt-[20vh] px-4"
|
||||
@ -271,7 +283,7 @@ export function TerminalLayout({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Keyboard shortcut for search */}
|
||||
{/* Keyboard shortcut for search - Still active unless strictly disabled */}
|
||||
<KeyboardShortcut onTrigger={() => setSearchOpen(true)} keys={['Meta', 'k']} />
|
||||
</div>
|
||||
</KeyboardShortcutsProvider>
|
||||
|
||||
Reference in New Issue
Block a user