feat(watchlist): add tabs for Watching vs My Portfolio
- 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:
@ -392,10 +392,35 @@ 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>
|
||||||
|
|
||||||
|
<div className="flex flex-col items-end gap-3">
|
||||||
|
{/* View Tabs: Watching vs My Portfolio */}
|
||||||
|
<div className="flex items-center gap-1 bg-white/5 p-1 rounded-lg">
|
||||||
|
<Link
|
||||||
|
href="/terminal/watchlist"
|
||||||
|
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"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<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 && (
|
{canUsePortfolio && (
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
@ -408,6 +433,7 @@ export default function PortfolioPage() {
|
|||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Messages */}
|
{/* Messages */}
|
||||||
{error && (
|
{error && (
|
||||||
|
|||||||
@ -376,10 +376,36 @@ 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>
|
||||||
|
|
||||||
|
{/* Tabs + Quick Stats */}
|
||||||
|
<div className="flex flex-col items-end gap-3">
|
||||||
|
{/* View Tabs: Watching vs My Portfolio */}
|
||||||
|
<div className="flex items-center gap-1 bg-white/5 p-1 rounded-lg">
|
||||||
|
<Link
|
||||||
|
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>
|
||||||
|
|
||||||
{/* Quick Stats Pills */}
|
{/* Quick Stats Pills */}
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
{stats.available > 0 && (
|
{stats.available > 0 && (
|
||||||
@ -394,6 +420,7 @@ export default function WatchlistPage() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Metric Grid */}
|
{/* Metric Grid */}
|
||||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||||
|
|||||||
@ -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',
|
||||||
|
|||||||
Reference in New Issue
Block a user