feat(watchlist): add tabs for Watching vs My Portfolio
Some checks failed
CI / Frontend Lint & Type Check (push) Has been cancelled
CI / Frontend Build (push) Has been cancelled
CI / Backend Lint (push) Has been cancelled
CI / Backend Tests (push) Has been cancelled
CI / Docker Build (push) Has been cancelled
CI / Security Scan (push) Has been cancelled
Deploy / Build & Push Images (push) Has been cancelled
Deploy / Deploy to Server (push) Has been cancelled
Deploy / Notify (push) Has been cancelled

- Sidebar: treat Portfolio as sub-view of WATCHLIST instead of separate nav item
- WATCHLIST header: add tab switcher (Watching ↔ My Portfolio) to match Terminal concept
- PORTFOLIO header: mirror the same tabs so users can jump back to Watchlist
This commit is contained in:
2025-12-12 06:52:42 +01:00
parent c17e233990
commit 930bbc27f7
3 changed files with 76 additions and 29 deletions

View File

@ -392,21 +392,47 @@ export default function PortfolioPage() {
<h1 className="text-3xl font-bold tracking-tight text-white">Portfolio</h1> <h1 className="text-3xl font-bold tracking-tight text-white">Portfolio</h1>
</div> </div>
<p className="text-zinc-400 max-w-lg"> <p className="text-zinc-400 max-w-lg">
Track your domain investments, valuations, and ROI. Your personal domain asset manager. Track your owned domains, valuations, and ROI. Switch back to your Watchlist anytime.
</p> </p>
</div> </div>
{canUsePortfolio && ( <div className="flex flex-col items-end gap-3">
<button {/* View Tabs: Watching vs My Portfolio */}
onClick={() => { <div className="flex items-center gap-1 bg-white/5 p-1 rounded-lg">
setFormData({ domain: '', purchase_date: '', purchase_price: '', registrar: '', renewal_date: '', renewal_cost: '', notes: '', tags: '' }) <Link
setShowAddModal(true) href="/terminal/watchlist"
}} className={clsx(
className="px-4 py-2 bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-400 transition-all shadow-lg shadow-blue-500/20 flex items-center gap-2" "px-3 py-1.5 rounded-md text-xs font-medium transition-all flex items-center gap-2 text-zinc-400 hover:text-zinc-200 hover:bg-white/5"
> )}
<Plus className="w-4 h-4" /> Add Domain >
</button> <Eye className="w-3.5 h-3.5" />
)} Watching
</Link>
<button
type="button"
className={clsx(
"px-3 py-1.5 rounded-md text-xs font-medium transition-all",
"flex items-center gap-2",
"bg-zinc-800 text-white shadow-sm"
)}
>
<Shield className="w-3.5 h-3.5" />
My Portfolio
</button>
</div>
{canUsePortfolio && (
<button
onClick={() => {
setFormData({ domain: '', purchase_date: '', purchase_price: '', registrar: '', renewal_date: '', renewal_cost: '', notes: '', tags: '' })
setShowAddModal(true)
}}
className="px-4 py-2 bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-400 transition-all shadow-lg shadow-blue-500/20 flex items-center gap-2"
>
<Plus className="w-4 h-4" /> Add Domain
</button>
)}
</div>
</div> </div>
{/* Messages */} {/* Messages */}

View File

@ -376,21 +376,48 @@ export default function WatchlistPage() {
<h1 className="text-3xl font-bold tracking-tight text-white">Watchlist</h1> <h1 className="text-3xl font-bold tracking-tight text-white">Watchlist</h1>
</div> </div>
<p className="text-zinc-400 max-w-lg"> <p className="text-zinc-400 max-w-lg">
Monitor availability, health, and expiration dates for your tracked domains. Monitor external domains you care about and manage your own portfolio in one place.
</p> </p>
</div> </div>
{/* Quick Stats Pills */} {/* Tabs + Quick Stats */}
<div className="flex gap-2"> <div className="flex flex-col items-end gap-3">
{stats.available > 0 && ( {/* View Tabs: Watching vs My Portfolio */}
<div className="px-3 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 flex items-center gap-2 text-xs font-medium text-emerald-400 animate-pulse"> <div className="flex items-center gap-1 bg-white/5 p-1 rounded-lg">
<Sparkles className="w-3.5 h-3.5" /> <Link
{stats.available} Available! href="/terminal/watchlist"
className={clsx(
"px-3 py-1.5 rounded-md text-xs font-medium transition-all",
"flex items-center gap-2",
"bg-zinc-800 text-white shadow-sm"
)}
>
<Eye className="w-3.5 h-3.5" />
Watching
</Link>
<Link
href="/terminal/portfolio"
className={clsx(
"px-3 py-1.5 rounded-md text-xs font-medium transition-all flex items-center gap-2 text-zinc-400 hover:text-zinc-200 hover:bg-white/5"
)}
>
<Shield className="w-3.5 h-3.5" />
My Portfolio
</Link>
</div> </div>
)}
<div className="px-3 py-1.5 rounded-full bg-white/5 border border-white/10 flex items-center gap-2 text-xs font-medium text-zinc-300"> {/* Quick Stats Pills */}
<Activity className="w-3.5 h-3.5 text-blue-400" /> <div className="flex gap-2">
Auto-Monitoring {stats.available > 0 && (
<div className="px-3 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 flex items-center gap-2 text-xs font-medium text-emerald-400 animate-pulse">
<Sparkles className="w-3.5 h-3.5" />
{stats.available} Available!
</div>
)}
<div className="px-3 py-1.5 rounded-full bg-white/5 border border-white/10 flex items-center gap-2 text-xs font-medium text-zinc-300">
<Activity className="w-3.5 h-3.5 text-blue-400" />
Auto-Monitoring
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -106,12 +106,6 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
icon: Eye, icon: Eye,
badge: availableCount || null, badge: availableCount || null,
}, },
{
href: '/terminal/portfolio',
label: 'PORTFOLIO',
icon: Briefcase,
badge: null,
},
{ {
href: '/terminal/listing', href: '/terminal/listing',
label: 'FOR SALE', label: 'FOR SALE',