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

Navigation: Radar first, For Sale under Monetize; Settings page redesign
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-12 23:19:38 +01:00
parent 2d5a36ea98
commit 2e507f5484
2 changed files with 174 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

297
frontend/src/app/terminal/settings/page.tsx
View File

@ -1,9 +1,8 @@
'use client' 'use client'
import { useEffect, useState, useCallback, useMemo } from 'react' import { useEffect, useState, useCallback } from 'react'
import { useRouter } from 'next/navigation' import { useRouter } from 'next/navigation'
import { TerminalLayout } from '@/components/TerminalLayout' import { CommandCenterLayout } from '@/components/CommandCenterLayout'
import { PageContainer, TabBar } from '@/components/PremiumTable'
import { useStore } from '@/lib/store' import { useStore } from '@/lib/store'
import { api, PriceAlert } from '@/lib/api' import { api, PriceAlert } from '@/lib/api'
import { import {
@ -21,6 +20,8 @@ import {
Zap, Zap,
Key, Key,
TrendingUp, TrendingUp,
X,
Settings,
} from 'lucide-react' } from 'lucide-react'
import Link from 'next/link' import Link from 'next/link'
import clsx from 'clsx' import clsx from 'clsx'
@ -36,13 +37,11 @@ export default function SettingsPage() {
const [success, setSuccess] = useState<string | null>(null) const [success, setSuccess] = useState<string | null>(null)
const [error, setError] = useState<string | null>(null) const [error, setError] = useState<string | null>(null)
// Profile form
const [profileForm, setProfileForm] = useState({ const [profileForm, setProfileForm] = useState({
name: '', name: '',
email: '', email: '',
}) })
// Notification preferences
const [notificationPrefs, setNotificationPrefs] = useState({ const [notificationPrefs, setNotificationPrefs] = useState({
domain_availability: true, domain_availability: true,
price_alerts: true, price_alerts: true,
@ -50,7 +49,6 @@ export default function SettingsPage() {
}) })
const [savingNotifications, setSavingNotifications] = useState(false) const [savingNotifications, setSavingNotifications] = useState(false)
// Price alerts
const [priceAlerts, setPriceAlerts] = useState<PriceAlert[]>([]) const [priceAlerts, setPriceAlerts] = useState<PriceAlert[]>([])
const [loadingAlerts, setLoadingAlerts] = useState(false) const [loadingAlerts, setLoadingAlerts] = useState(false)
const [deletingAlertId, setDeletingAlertId] = useState<number | null>(null) const [deletingAlertId, setDeletingAlertId] = useState<number | null>(null)
@ -102,7 +100,7 @@ export default function SettingsPage() {
await api.updateMe({ name: profileForm.name || undefined }) await api.updateMe({ name: profileForm.name || undefined })
const { checkAuth } = useStore.getState() const { checkAuth } = useStore.getState()
await checkAuth() await checkAuth()
setSuccess('Profile updated successfully') setSuccess('Profile updated')
} catch (err) { } catch (err) {
setError(err instanceof Error ? err.message : 'Failed to update profile') setError(err instanceof Error ? err.message : 'Failed to update profile')
} finally { } finally {
@ -117,7 +115,7 @@ export default function SettingsPage() {
try { try {
localStorage.setItem('notification_prefs', JSON.stringify(notificationPrefs)) localStorage.setItem('notification_prefs', JSON.stringify(notificationPrefs))
setSuccess('Notification preferences saved') setSuccess('Preferences saved')
} catch (err) { } catch (err) {
setError(err instanceof Error ? err.message : 'Failed to save preferences') setError(err instanceof Error ? err.message : 'Failed to save preferences')
} finally { } finally {
@ -157,8 +155,8 @@ export default function SettingsPage() {
if (isLoading) { if (isLoading) {
return ( return (
<div className="min-h-screen flex items-center justify-center"> <div className="min-h-screen flex items-center justify-center bg-[#020202]">
<div className="w-5 h-5 border-2 border-accent border-t-transparent rounded-full animate-spin" /> <Loader2 className="w-6 h-6 text-accent animate-spin" />
</div> </div>
) )
} }
@ -178,46 +176,69 @@ export default function SettingsPage() {
] ]
return ( return (
<TerminalLayout <CommandCenterLayout minimal>
title="Settings" {/* ═══════════════════════════════════════════════════════════════════════ */}
subtitle="Manage your account" {/* HEADER */}
> {/* ═══════════════════════════════════════════════════════════════════════ */}
<PageContainer> <section className="pt-6 lg:pt-8 pb-6">
{/* Messages */} <div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6">
{error && ( <div className="space-y-3">
<div className="p-4 bg-red-500/10 border border-red-500/20 rounded-xl flex items-center gap-3"> <div className="inline-flex items-center gap-2">
<AlertCircle className="w-5 h-5 text-red-400 shrink-0" /> <Settings className="w-4 h-4 text-accent" />
<p className="text-sm text-red-400 flex-1">{error}</p> <span className="text-[10px] font-mono tracking-wide text-accent">Account</span>
<button onClick={() => setError(null)} className="text-red-400 hover:text-red-300"> </div>
<Trash2 className="w-4 h-4" />
</button> <h1 className="font-display text-[2rem] lg:text-[2.5rem] leading-[1] tracking-[-0.02em]">
<span className="text-white">Settings</span>
</h1>
</div> </div>
)}
<div className="flex items-center gap-3">
{success && ( <div className="px-3 py-1.5 border border-white/10 bg-white/[0.02] flex items-center gap-2">
<div className="p-4 bg-accent/10 border border-accent/20 rounded-xl flex items-center gap-3"> {tierName === 'Tycoon' ? <Crown className="w-4 h-4 text-amber-400" /> :
<Check className="w-5 h-5 text-accent shrink-0" /> tierName === 'Trader' ? <TrendingUp className="w-4 h-4 text-accent" /> :
<p className="text-sm text-accent flex-1">{success}</p> <Zap className="w-4 h-4 text-accent" />}
<button onClick={() => setSuccess(null)} className="text-accent hover:text-accent/80"> <span className="text-xs font-mono text-white">{tierName}</span>
<Trash2 className="w-4 h-4" /> </div>
</button>
</div> </div>
)} </div>
</section>
<div className="flex flex-col lg:flex-row gap-6"> {/* Messages */}
{/* Sidebar */} {error && (
<div className="lg:w-72 shrink-0 space-y-5"> <div className="mb-6 p-4 bg-red-500/10 border border-red-500/20 flex items-center gap-3 text-red-400">
{/* Mobile: Horizontal scroll tabs */} <AlertCircle className="w-5 h-5" />
<nav className="lg:hidden flex gap-2 overflow-x-auto pb-2 -mx-4 px-4 scrollbar-hide"> <p className="text-sm flex-1">{error}</p>
<button onClick={() => setError(null)}><X className="w-4 h-4" /></button>
</div>
)}
{success && (
<div className="mb-6 p-4 bg-accent/10 border border-accent/20 flex items-center gap-3 text-accent">
<Check className="w-5 h-5" />
<p className="text-sm flex-1">{success}</p>
<button onClick={() => setSuccess(null)}><X className="w-4 h-4" /></button>
</div>
)}
{/* ═══════════════════════════════════════════════════════════════════════ */}
{/* TABS + CONTENT */}
{/* ═══════════════════════════════════════════════════════════════════════ */}
<section className="pb-12">
<div className="flex flex-col lg:flex-row gap-8">
{/* Tab Navigation */}
<div className="lg:w-56 shrink-0">
{/* Mobile: Horizontal */}
<nav className="lg:hidden flex gap-2 overflow-x-auto pb-2 scrollbar-hide">
{tabs.map((tab) => ( {tabs.map((tab) => (
<button <button
key={tab.id} key={tab.id}
onClick={() => setActiveTab(tab.id)} onClick={() => setActiveTab(tab.id)}
className={clsx( className={clsx(
"flex items-center gap-2.5 px-5 py-3 text-sm font-medium rounded-xl whitespace-nowrap transition-all", "flex items-center gap-2 px-4 py-2 text-xs font-mono whitespace-nowrap transition-all",
activeTab === tab.id activeTab === tab.id
? "bg-gradient-to-r from-accent to-accent/80 text-background shadow-lg shadow-accent/20" ? "bg-accent text-black"
: "bg-background-secondary/50 text-foreground-muted hover:text-foreground border border-border/50" : "bg-white/[0.02] border border-white/10 text-white/50 hover:text-white"
)} )}
> >
<tab.icon className="w-4 h-4" /> <tab.icon className="w-4 h-4" />
@ -226,17 +247,17 @@ export default function SettingsPage() {
))} ))}
</nav> </nav>
{/* Desktop: Vertical tabs */} {/* Desktop: Vertical */}
<nav className="hidden lg:block p-2 bg-gradient-to-b from-background-secondary/40 to-background-secondary/20 border border-border/40 rounded-2xl backdrop-blur-sm"> <nav className="hidden lg:block space-y-1">
{tabs.map((tab) => ( {tabs.map((tab) => (
<button <button
key={tab.id} key={tab.id}
onClick={() => setActiveTab(tab.id)} onClick={() => setActiveTab(tab.id)}
className={clsx( className={clsx(
"w-full flex items-center gap-3 px-5 py-3.5 text-sm font-medium rounded-xl transition-all", "w-full flex items-center gap-3 px-4 py-3 text-sm font-mono transition-all",
activeTab === tab.id activeTab === tab.id
? "bg-gradient-to-r from-accent to-accent/80 text-background shadow-lg shadow-accent/20" ? "bg-white/[0.03] text-white border-l-2 border-accent"
: "text-foreground-muted hover:text-foreground hover:bg-foreground/5" : "text-white/40 hover:text-white hover:bg-white/[0.02] border-l-2 border-transparent"
)} )}
> >
<tab.icon className="w-4 h-4" /> <tab.icon className="w-4 h-4" />
@ -245,22 +266,22 @@ export default function SettingsPage() {
))} ))}
</nav> </nav>
{/* Plan info */} {/* Plan Info - Desktop */}
<div className="hidden lg:block p-5 bg-accent/5 border border-accent/20 rounded-2xl"> <div className="hidden lg:block mt-8 p-4 bg-accent/5 border border-accent/20">
<div className="flex items-center gap-2 mb-3"> <div className="flex items-center gap-2 mb-3">
{isProOrHigher ? <Crown className="w-5 h-5 text-accent" /> : <Zap className="w-5 h-5 text-accent" />} {isProOrHigher ? <Crown className="w-4 h-4 text-accent" /> : <Zap className="w-4 h-4 text-accent" />}
<span className="text-sm font-semibold text-foreground">{tierName} Plan</span> <span className="text-xs font-mono text-white">{tierName}</span>
</div> </div>
<p className="text-xs text-foreground-muted mb-4"> <p className="text-[10px] text-white/40 font-mono mb-4">
{subscription?.domains_used || 0} / {subscription?.domain_limit || 5} domains tracked {subscription?.domains_used || 0} / {subscription?.domain_limit || 5} domains
</p> </p>
{!isProOrHigher && ( {!isProOrHigher && (
<Link <Link
href="/pricing" href="/pricing"
className="flex items-center justify-center gap-2 w-full py-2.5 bg-gradient-to-r from-accent to-accent/80 text-background text-sm font-medium rounded-xl hover:shadow-[0_0_20px_-5px_rgba(16,185,129,0.4)] transition-all" className="flex items-center justify-center gap-2 w-full py-2 bg-accent text-black text-xs font-semibold hover:bg-white transition-colors"
> >
Upgrade Upgrade
<ChevronRight className="w-3.5 h-3.5" /> <ChevronRight className="w-3 h-3" />
</Link> </Link>
)} )}
</div> </div>
@ -270,41 +291,39 @@ export default function SettingsPage() {
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
{/* Profile Tab */} {/* Profile Tab */}
{activeTab === 'profile' && ( {activeTab === 'profile' && (
<div className="relative overflow-hidden rounded-2xl border border-border/40 bg-gradient-to-b from-background-secondary/40 to-background-secondary/20 backdrop-blur-sm p-6"> <div className="border border-white/[0.08] bg-white/[0.01] p-6">
<h2 className="text-lg font-medium text-foreground mb-6">Profile Information</h2> <h2 className="text-sm font-mono text-white/40 tracking-wide mb-6">Profile Information</h2>
<form onSubmit={handleSaveProfile} className="space-y-5"> <form onSubmit={handleSaveProfile} className="space-y-5 max-w-md">
<div> <div>
<label className="block text-sm text-foreground-muted mb-2">Name</label> <label className="block text-xs text-white/50 mb-2">Name</label>
<input <input
type="text" type="text"
value={profileForm.name} value={profileForm.name}
onChange={(e) => setProfileForm({ ...profileForm, name: e.target.value })} onChange={(e) => setProfileForm({ ...profileForm, name: e.target.value })}
placeholder="Your name" placeholder="Your name"
className="w-full h-11 px-4 bg-background border border-border/50 rounded-xl text-foreground className="w-full px-4 py-3 bg-white/5 border border-white/10 text-white placeholder:text-white/25 outline-none focus:border-accent/50"
placeholder:text-foreground-subtle focus:outline-none focus:border-accent/50 transition-all"
/> />
</div> </div>
<div> <div>
<label className="block text-sm text-foreground-muted mb-2">Email</label> <label className="block text-xs text-white/50 mb-2">Email</label>
<input <input
type="email" type="email"
value={profileForm.email} value={profileForm.email}
disabled disabled
className="w-full h-11 px-4 bg-foreground/5 border border-border/50 rounded-xl text-foreground-muted cursor-not-allowed" className="w-full px-4 py-3 bg-white/[0.02] border border-white/10 text-white/40 cursor-not-allowed"
/> />
<p className="text-xs text-foreground-subtle mt-1.5">Email cannot be changed</p> <p className="text-[10px] text-white/30 mt-1">Email cannot be changed</p>
</div> </div>
<button <button
type="submit" type="submit"
disabled={saving} disabled={saving}
className="flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-accent to-accent/80 text-background font-medium rounded-xl className="flex items-center gap-2 px-5 py-2.5 bg-accent text-black text-sm font-semibold hover:bg-white disabled:opacity-50 transition-colors"
hover:shadow-[0_0_20px_-5px_rgba(16,185,129,0.4)] disabled:opacity-50 transition-all"
> >
{saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Check className="w-4 h-4" />} {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Check className="w-4 h-4" />}
Save Changes Save
</button> </button>
</form> </form>
</div> </div>
@ -313,25 +332,25 @@ export default function SettingsPage() {
{/* Notifications Tab */} {/* Notifications Tab */}
{activeTab === 'notifications' && ( {activeTab === 'notifications' && (
<div className="space-y-6"> <div className="space-y-6">
<div className="relative overflow-hidden rounded-2xl border border-border/40 bg-gradient-to-b from-background-secondary/40 to-background-secondary/20 backdrop-blur-sm p-6"> <div className="border border-white/[0.08] bg-white/[0.01] p-6">
<h2 className="text-lg font-medium text-foreground mb-5">Email Preferences</h2> <h2 className="text-sm font-mono text-white/40 tracking-wide mb-5">Email Preferences</h2>
<div className="space-y-3"> <div className="space-y-2 max-w-md">
{[ {[
{ key: 'domain_availability', label: 'Domain Availability', desc: 'Get notified when watched domains become available' }, { key: 'domain_availability', label: 'Domain Availability', desc: 'Get notified when watched domains become available' },
{ key: 'price_alerts', label: 'Price Alerts', desc: 'Get notified when TLD prices change' }, { key: 'price_alerts', label: 'Price Alerts', desc: 'Get notified when TLD prices change' },
{ key: 'weekly_digest', label: 'Weekly Digest', desc: 'Receive a weekly summary of your portfolio' }, { key: 'weekly_digest', label: 'Weekly Digest', desc: 'Receive a weekly summary of your portfolio' },
].map((item) => ( ].map((item) => (
<label key={item.key} className="flex items-center justify-between p-4 bg-foreground/5 border border-border/30 rounded-xl cursor-pointer hover:border-foreground/20 transition-colors"> <label key={item.key} className="flex items-center justify-between p-4 bg-white/[0.02] border border-white/[0.06] cursor-pointer hover:border-white/[0.1] transition-colors">
<div> <div>
<p className="text-sm font-medium text-foreground">{item.label}</p> <p className="text-sm text-white">{item.label}</p>
<p className="text-xs text-foreground-muted">{item.desc}</p> <p className="text-[10px] text-white/40">{item.desc}</p>
</div> </div>
<input <input
type="checkbox" type="checkbox"
checked={notificationPrefs[item.key as keyof typeof notificationPrefs]} checked={notificationPrefs[item.key as keyof typeof notificationPrefs]}
onChange={(e) => setNotificationPrefs({ ...notificationPrefs, [item.key]: e.target.checked })} onChange={(e) => setNotificationPrefs({ ...notificationPrefs, [item.key]: e.target.checked })}
className="w-5 h-5 accent-accent cursor-pointer" className="w-4 h-4 accent-accent cursor-pointer"
/> />
</label> </label>
))} ))}
@ -340,27 +359,26 @@ export default function SettingsPage() {
<button <button
onClick={handleSaveNotifications} onClick={handleSaveNotifications}
disabled={savingNotifications} disabled={savingNotifications}
className="mt-5 flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-accent to-accent/80 text-background font-medium rounded-xl className="mt-5 flex items-center gap-2 px-5 py-2.5 bg-accent text-black text-sm font-semibold hover:bg-white disabled:opacity-50 transition-colors"
hover:shadow-[0_0_20px_-5px_rgba(16,185,129,0.4)] disabled:opacity-50 transition-all"
> >
{savingNotifications ? <Loader2 className="w-4 h-4 animate-spin" /> : <Check className="w-4 h-4" />} {savingNotifications ? <Loader2 className="w-4 h-4 animate-spin" /> : <Check className="w-4 h-4" />}
Save Preferences Save
</button> </button>
</div> </div>
{/* Active Price Alerts */} {/* Active Price Alerts */}
<div className="relative overflow-hidden rounded-2xl border border-border/40 bg-gradient-to-b from-background-secondary/40 to-background-secondary/20 backdrop-blur-sm p-6"> <div className="border border-white/[0.08] bg-white/[0.01] p-6">
<h2 className="text-lg font-medium text-foreground mb-5">Active Price Alerts</h2> <h2 className="text-sm font-mono text-white/40 tracking-wide mb-5">Active Price Alerts</h2>
{loadingAlerts ? ( {loadingAlerts ? (
<div className="py-10 flex items-center justify-center"> <div className="py-10 flex items-center justify-center">
<Loader2 className="w-6 h-6 animate-spin text-accent" /> <Loader2 className="w-6 h-6 animate-spin text-accent" />
</div> </div>
) : priceAlerts.length === 0 ? ( ) : priceAlerts.length === 0 ? (
<div className="py-12 text-center border border-dashed border-border/50 rounded-xl bg-foreground/5"> <div className="py-12 text-center border border-dashed border-white/10">
<Bell className="w-10 h-10 text-foreground-subtle mx-auto mb-4" /> <Bell className="w-8 h-8 text-white/10 mx-auto mb-4" />
<p className="text-foreground-muted mb-3">No price alerts set</p> <p className="text-white/40 text-sm mb-3">No price alerts set</p>
<Link href="/terminal/intel" className="text-accent hover:text-accent/80 text-sm font-medium"> <Link href="/terminal/intel" className="text-accent hover:text-white text-xs font-mono">
Browse TLD prices → Browse TLD prices →
</Link> </Link>
</div> </div>
@ -369,26 +387,21 @@ export default function SettingsPage() {
{priceAlerts.map((alert) => ( {priceAlerts.map((alert) => (
<div <div
key={alert.id} key={alert.id}
className="flex items-center justify-between p-4 bg-foreground/5 border border-border/30 rounded-xl hover:border-foreground/20 transition-colors" className="flex items-center justify-between p-4 bg-white/[0.02] border border-white/[0.06] hover:border-white/[0.1] transition-colors"
> >
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="relative"> <div className={clsx(
<div className={clsx( "w-2 h-2",
"w-2.5 h-2.5 rounded-full", alert.is_active ? "bg-accent" : "bg-white/20"
alert.is_active ? "bg-accent" : "bg-foreground-subtle" )} />
)} />
{alert.is_active && (
<span className="absolute inset-0 rounded-full bg-accent animate-ping opacity-40" />
)}
</div>
<div> <div>
<Link <Link
href={`/tld-pricing/${alert.tld}`} href={`/terminal/intel/${alert.tld}`}
className="text-sm font-mono font-medium text-foreground hover:text-accent transition-colors" className="text-sm font-mono text-white hover:text-accent transition-colors"
> >
.{alert.tld} .{alert.tld}
</Link> </Link>
<p className="text-xs text-foreground-muted"> <p className="text-[10px] text-white/40">
Alert on {alert.threshold_percent}% change Alert on {alert.threshold_percent}% change
{alert.target_price && ` or below $${alert.target_price}`} {alert.target_price && ` or below $${alert.target_price}`}
</p> </p>
@ -397,7 +410,7 @@ export default function SettingsPage() {
<button <button
onClick={() => handleDeletePriceAlert(alert.tld, alert.id)} onClick={() => handleDeletePriceAlert(alert.tld, alert.id)}
disabled={deletingAlertId === alert.id} disabled={deletingAlertId === alert.id}
className="p-2 text-foreground-subtle hover:text-red-400 hover:bg-red-400/10 rounded-lg transition-all" className="p-2 text-white/30 hover:text-red-400 hover:bg-red-400/10 transition-all"
> >
{deletingAlertId === alert.id ? ( {deletingAlertId === alert.id ? (
<Loader2 className="w-4 h-4 animate-spin" /> <Loader2 className="w-4 h-4 animate-spin" />
@ -416,55 +429,55 @@ export default function SettingsPage() {
{/* Billing Tab */} {/* Billing Tab */}
{activeTab === 'billing' && ( {activeTab === 'billing' && (
<div className="space-y-6"> <div className="space-y-6">
{/* Current Plan */} <div className="border border-white/[0.08] bg-white/[0.01] p-6">
<div className="relative overflow-hidden rounded-2xl border border-border/40 bg-gradient-to-b from-background-secondary/40 to-background-secondary/20 backdrop-blur-sm p-6"> <h2 className="text-sm font-mono text-white/40 tracking-wide mb-6">Current Plan</h2>
<h2 className="text-lg font-medium text-foreground mb-6">Your Current Plan</h2>
<div className="p-5 bg-accent/5 border border-accent/20 rounded-xl mb-6"> <div className="p-5 bg-accent/5 border border-accent/20 mb-6">
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
{tierName === 'Tycoon' ? <Crown className="w-6 h-6 text-accent" /> : tierName === 'Trader' ? <TrendingUp className="w-6 h-6 text-accent" /> : <Zap className="w-6 h-6 text-accent" />} {tierName === 'Tycoon' ? <Crown className="w-6 h-6 text-accent" /> :
tierName === 'Trader' ? <TrendingUp className="w-6 h-6 text-accent" /> :
<Zap className="w-6 h-6 text-accent" />}
<div> <div>
<p className="text-xl font-semibold text-foreground">{tierName}</p> <p className="text-lg font-display text-white">{tierName}</p>
<p className="text-sm text-foreground-muted"> <p className="text-xs text-white/40">
{tierName === 'Scout' ? 'Free forever' : tierName === 'Trader' ? '$9/month' : '$29/month'} {tierName === 'Scout' ? 'Free forever' : tierName === 'Trader' ? '$9/month' : '$29/month'}
</p> </p>
</div> </div>
</div> </div>
<span className={clsx( <span className={clsx(
"px-3 py-1.5 text-xs font-medium rounded-full", "px-2 py-1 text-[10px] font-mono",
isProOrHigher ? "bg-accent/10 text-accent" : "bg-foreground/5 text-foreground-muted" isProOrHigher ? "bg-accent/10 text-accent" : "bg-white/5 text-white/40"
)}> )}>
{isProOrHigher ? 'Active' : 'Free'} {isProOrHigher ? 'Active' : 'Free'}
</span> </span>
</div> </div>
{/* Plan Stats */} {/* Plan Stats */}
<div className="grid grid-cols-3 gap-4 p-4 bg-background/50 rounded-xl mb-4"> <div className="grid grid-cols-3 gap-4 p-4 bg-black/30 mb-4">
<div className="text-center"> <div className="text-center">
<p className="text-2xl font-semibold text-foreground">{subscription?.domain_limit || 5}</p> <p className="text-xl font-display text-white">{subscription?.domain_limit || 5}</p>
<p className="text-xs text-foreground-muted">Domains</p> <p className="text-[10px] text-white/40 font-mono">Domains</p>
</div> </div>
<div className="text-center border-x border-border/50"> <div className="text-center border-x border-white/10">
<p className="text-2xl font-semibold text-foreground"> <p className="text-xl font-display text-white">
{subscription?.check_frequency === 'realtime' ? '10m' : {subscription?.check_frequency === 'realtime' ? '10m' :
subscription?.check_frequency === 'hourly' ? '1h' : '24h'} subscription?.check_frequency === 'hourly' ? '1h' : '24h'}
</p> </p>
<p className="text-xs text-foreground-muted">Check Interval</p> <p className="text-[10px] text-white/40 font-mono">Interval</p>
</div> </div>
<div className="text-center"> <div className="text-center">
<p className="text-2xl font-semibold text-foreground"> <p className="text-xl font-display text-white">
{subscription?.portfolio_limit === -1 ? '∞' : subscription?.portfolio_limit || 0} {subscription?.portfolio_limit === -1 ? '∞' : subscription?.portfolio_limit || 0}
</p> </p>
<p className="text-xs text-foreground-muted">Portfolio</p> <p className="text-[10px] text-white/40 font-mono">Portfolio</p>
</div> </div>
</div> </div>
{isProOrHigher ? ( {isProOrHigher ? (
<button <button
onClick={handleOpenBillingPortal} onClick={handleOpenBillingPortal}
className="w-full flex items-center justify-center gap-2 py-3 bg-background text-foreground font-medium rounded-xl border border-border/50 className="w-full flex items-center justify-center gap-2 py-3 bg-black/50 text-white text-sm font-medium border border-white/10 hover:border-white/20 transition-all"
hover:border-foreground/20 transition-all"
> >
<ExternalLink className="w-4 h-4" /> <ExternalLink className="w-4 h-4" />
Manage Subscription Manage Subscription
@ -472,8 +485,7 @@ export default function SettingsPage() {
) : ( ) : (
<Link <Link
href="/pricing" href="/pricing"
className="w-full flex items-center justify-center gap-2 py-3 bg-gradient-to-r from-accent to-accent/80 text-background font-medium rounded-xl className="w-full flex items-center justify-center gap-2 py-3 bg-accent text-black text-sm font-semibold hover:bg-white transition-all"
hover:shadow-[0_0_20px_-5px_rgba(16,185,129,0.4)] transition-all"
> >
<Zap className="w-4 h-4" /> <Zap className="w-4 h-4" />
Upgrade Plan Upgrade Plan
@ -482,7 +494,7 @@ export default function SettingsPage() {
</div> </div>
{/* Plan Features */} {/* Plan Features */}
<h3 className="text-sm font-medium text-foreground mb-3">Your Plan Includes</h3> <h3 className="text-xs font-mono text-white/40 mb-3">Includes</h3>
<ul className="grid grid-cols-2 gap-2"> <ul className="grid grid-cols-2 gap-2">
{[ {[
`${subscription?.domain_limit || 5} Watchlist Domains`, `${subscription?.domain_limit || 5} Watchlist Domains`,
@ -490,9 +502,9 @@ export default function SettingsPage() {
'Email Alerts', 'Email Alerts',
'TLD Price Data', 'TLD Price Data',
].map((feature) => ( ].map((feature) => (
<li key={feature} className="flex items-center gap-2 text-sm"> <li key={feature} className="flex items-center gap-2 text-xs">
<Check className="w-4 h-4 text-accent" /> <Check className="w-3 h-3 text-accent" />
<span className="text-foreground">{feature}</span> <span className="text-white/60">{feature}</span>
</li> </li>
))} ))}
</ul> </ul>
@ -503,52 +515,51 @@ export default function SettingsPage() {
{/* Security Tab */} {/* Security Tab */}
{activeTab === 'security' && ( {activeTab === 'security' && (
<div className="space-y-6"> <div className="space-y-6">
<div className="relative overflow-hidden rounded-2xl border border-border/40 bg-gradient-to-b from-background-secondary/40 to-background-secondary/20 backdrop-blur-sm p-6"> <div className="border border-white/[0.08] bg-white/[0.01] p-6">
<h2 className="text-lg font-medium text-foreground mb-4">Password</h2> <h2 className="text-sm font-mono text-white/40 tracking-wide mb-4">Password</h2>
<p className="text-sm text-foreground-muted mb-5"> <p className="text-xs text-white/40 mb-5">
Change your password or reset it if you've forgotten it. Change your password or reset it if you've forgotten it.
</p> </p>
<Link <Link
href="/forgot-password" href="/forgot-password"
className="inline-flex items-center gap-2 px-5 py-3 bg-foreground/5 border border-border/50 text-foreground font-medium rounded-xl className="inline-flex items-center gap-2 px-4 py-2.5 bg-white/5 border border-white/10 text-white text-sm hover:border-white/20 transition-all"
hover:border-foreground/20 transition-all"
> >
<Key className="w-4 h-4" /> <Key className="w-4 h-4" />
Change Password Change Password
</Link> </Link>
</div> </div>
<div className="relative overflow-hidden rounded-2xl border border-border/40 bg-gradient-to-b from-background-secondary/40 to-background-secondary/20 backdrop-blur-sm p-6"> <div className="border border-white/[0.08] bg-white/[0.01] p-6">
<h2 className="text-lg font-medium text-foreground mb-5">Account Security</h2> <h2 className="text-sm font-mono text-white/40 tracking-wide mb-5">Account Security</h2>
<div className="space-y-3"> <div className="space-y-2">
<div className="flex items-center justify-between p-4 bg-foreground/5 border border-border/30 rounded-xl"> <div className="flex items-center justify-between p-4 bg-white/[0.02] border border-white/[0.06]">
<div> <div>
<p className="text-sm font-medium text-foreground">Email Verified</p> <p className="text-sm text-white">Email Verified</p>
<p className="text-xs text-foreground-muted">Your email address has been verified</p> <p className="text-[10px] text-white/40">Your email has been verified</p>
</div> </div>
<div className="w-8 h-8 bg-accent/10 rounded-lg flex items-center justify-center"> <div className="w-7 h-7 bg-accent/10 flex items-center justify-center">
<Check className="w-4 h-4 text-accent" /> <Check className="w-4 h-4 text-accent" />
</div> </div>
</div> </div>
<div className="flex items-center justify-between p-4 bg-foreground/5 border border-border/30 rounded-xl"> <div className="flex items-center justify-between p-4 bg-white/[0.02] border border-white/[0.06]">
<div> <div>
<p className="text-sm font-medium text-foreground">Two-Factor Authentication</p> <p className="text-sm text-white">Two-Factor Authentication</p>
<p className="text-xs text-foreground-muted">Coming soon</p> <p className="text-[10px] text-white/40">Coming soon</p>
</div> </div>
<span className="text-xs px-2.5 py-1 bg-foreground/5 text-foreground-muted rounded-full border border-border/30">Soon</span> <span className="text-[10px] px-2 py-1 bg-white/5 text-white/40 border border-white/10 font-mono">Soon</span>
</div> </div>
</div> </div>
</div> </div>
<div className="relative overflow-hidden rounded-2xl border border-red-500/20 bg-red-500/5 p-6"> <div className="border border-red-500/20 bg-red-500/5 p-6">
<h2 className="text-lg font-medium text-red-400 mb-2">Danger Zone</h2> <h2 className="text-sm font-mono text-red-400 tracking-wide mb-2">Danger Zone</h2>
<p className="text-sm text-foreground-muted mb-5"> <p className="text-xs text-white/40 mb-5">
Permanently delete your account and all associated data. Permanently delete your account and all associated data.
</p> </p>
<button <button
className="px-5 py-3 bg-red-500 text-white font-medium rounded-xl hover:bg-red-500/90 transition-all" className="px-4 py-2.5 bg-red-500 text-white text-sm font-semibold hover:bg-red-400 transition-all"
> >
Delete Account Delete Account
</button> </button>
@ -557,7 +568,7 @@ export default function SettingsPage() {
)} )}
</div> </div>
</div> </div>
</PageContainer> </section>
</TerminalLayout> </CommandCenterLayout>
) )
} }

49
frontend/src/components/Sidebar.tsx
View File

@ -16,13 +16,12 @@ import {
Crown, Crown,
Zap, Zap,
Shield, Shield,
CreditCard,
Menu, Menu,
X, X,
Sparkles,
Tag, Tag,
Target, Target,
Coins, Coins,
Radar,
} from 'lucide-react' } from 'lucide-react'
import { useState, useEffect } from 'react' import { useState, useEffect } from 'react'
import clsx from 'clsx' import clsx from 'clsx'
@ -36,15 +35,12 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
const pathname = usePathname() const pathname = usePathname()
const { user, logout, subscription, domains } = useStore() const { user, logout, subscription, domains } = useStore()
// Internal state for uncontrolled mode
const [internalCollapsed, setInternalCollapsed] = useState(false) const [internalCollapsed, setInternalCollapsed] = useState(false)
const [mobileOpen, setMobileOpen] = useState(false) const [mobileOpen, setMobileOpen] = useState(false)
// Use controlled or uncontrolled state
const collapsed = controlledCollapsed ?? internalCollapsed const collapsed = controlledCollapsed ?? internalCollapsed
const setCollapsed = onCollapsedChange ?? setInternalCollapsed const setCollapsed = onCollapsedChange ?? setInternalCollapsed
// Load collapsed state from localStorage
useEffect(() => { useEffect(() => {
const saved = localStorage.getItem('sidebar-collapsed') const saved = localStorage.getItem('sidebar-collapsed')
if (saved) { if (saved) {
@ -52,12 +48,10 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
} }
}, []) }, [])
// Close mobile menu on route change
useEffect(() => { useEffect(() => {
setMobileOpen(false) setMobileOpen(false)
}, [pathname]) }, [pathname])
// Save collapsed state
const toggleCollapsed = () => { const toggleCollapsed = () => {
const newState = !collapsed const newState = !collapsed
setCollapsed(newState) setCollapsed(newState)
@ -67,12 +61,17 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
const tierName = subscription?.tier_name || subscription?.tier || 'Scout' const tierName = subscription?.tier_name || subscription?.tier || 'Scout'
const TierIcon = tierName === 'Tycoon' ? Crown : tierName === 'Trader' ? TrendingUp : Zap 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 availableCount = domains?.filter(d => d.is_available).length || 0
const isTycoon = tierName.toLowerCase() === 'tycoon' const isTycoon = tierName.toLowerCase() === 'tycoon'
// SECTION 1: Discover - External market data // SECTION 1: Discover - Radar first, then external market data
const discoverItems = [ const discoverItems = [
{
href: '/terminal/radar',
label: 'RADAR',
icon: Radar,
badge: null,
},
{ {
href: '/terminal/market', href: '/terminal/market',
label: 'MARKET', label: 'MARKET',
@ -95,12 +94,6 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
badge: number | null badge: number | null
tycoonOnly?: boolean tycoonOnly?: boolean
}> = [ }> = [
{
href: '/terminal/radar',
label: 'RADAR',
icon: LayoutDashboard,
badge: null,
},
{ {
href: '/terminal/watchlist', href: '/terminal/watchlist',
label: 'WATCHLIST', label: 'WATCHLIST',
@ -113,15 +106,9 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
icon: Target, icon: Target,
badge: null, badge: null,
}, },
{
href: '/terminal/listing',
label: 'FOR SALE',
icon: Tag,
badge: null,
},
] ]
// SECTION 3: Monetize - Passive income features // SECTION 3: Monetize - Passive income + For Sale
const monetizeItems: Array<{ const monetizeItems: Array<{
href: string href: string
label: string label: string
@ -136,6 +123,12 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
badge: null, badge: null,
isNew: true, isNew: true,
}, },
{
href: '/terminal/listing',
label: 'FOR SALE',
icon: Tag,
badge: null,
},
] ]
const bottomItems = [ const bottomItems = [
@ -159,7 +152,6 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
"relative flex items-center justify-center transition-all duration-300", "relative flex items-center justify-center transition-all duration-300",
collapsed ? "w-8 h-8" : "w-10 h-10" collapsed ? "w-8 h-8" : "w-10 h-10"
)}> )}>
{/* Minimalist Glow */}
<div className="absolute inset-0 bg-accent/20 blur-lg rounded-full opacity-0 group-hover:opacity-100 transition-opacity" /> <div className="absolute inset-0 bg-accent/20 blur-lg rounded-full opacity-0 group-hover:opacity-100 transition-opacity" />
<Image <Image
src="/pounce-puma.png" src="/pounce-puma.png"
@ -370,7 +362,7 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
</Link> </Link>
))} ))}
{/* User Card - Technical */} {/* User Card */}
<div className={clsx( <div className={clsx(
"mt-6 border border-white/[0.08] bg-white/[0.02]", "mt-6 border border-white/[0.08] bg-white/[0.02]",
collapsed ? "p-2 border-none bg-transparent" : "p-4" collapsed ? "p-2 border-none bg-transparent" : "p-4"
@ -404,7 +396,6 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
</div> </div>
</div> </div>
{/* Usage bar - Sharp */}
<div className="space-y-2"> <div className="space-y-2">
<div className="flex items-center justify-between text-[10px] font-mono uppercase tracking-wider text-white/30"> <div className="flex items-center justify-between text-[10px] font-mono uppercase tracking-wider text-white/30">
<span>Usage</span> <span>Usage</span>
@ -450,7 +441,7 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
</button> </button>
</div> </div>
{/* Collapse Toggle - Desktop only */} {/* Collapse Toggle */}
<button <button
onClick={toggleCollapsed} onClick={toggleCollapsed}
className={clsx( className={clsx(
@ -507,10 +498,10 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
<aside <aside
className={clsx( className={clsx(
"hidden lg:flex fixed left-0 top-0 bottom-0 z-40 flex-col", "hidden lg:flex fixed left-0 top-0 bottom-0 z-40 flex-col",
"bg-[#020202] backdrop-blur-xl", // Pitch black "bg-[#020202] backdrop-blur-xl",
"border-r border-white/[0.08]", // Subtle border "border-r border-white/[0.08]",
"transition-all duration-300 ease-out", "transition-all duration-300 ease-out",
collapsed ? "w-[72px]" : "w-[240px]" // Slightly narrower collapsed ? "w-[72px]" : "w-[240px]"
)} )}
> >
<SidebarContent /> <SidebarContent />