From 7a02ea364ff9b5e8d26f95c485f65d16fe1ae6e5 Mon Sep 17 00:00:00 2001
From: Yves Gugger <guggeryves@hotmail.com>
Date: Fri, 12 Dec 2025 06:52:42 +0100
Subject: [PATCH] feat(watchlist): add tabs for Watching vs My Portfolio
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 frontend/src/app/terminal/portfolio/page.tsx | 50 +++++++++++++++-----
 frontend/src/app/terminal/watchlist/page.tsx | 49 ++++++++++++++-----
 frontend/src/components/Sidebar.tsx          |  6 ---
 3 files changed, 76 insertions(+), 29 deletions(-)

diff --git a/frontend/src/app/terminal/portfolio/page.tsx b/frontend/src/app/terminal/portfolio/page.tsx
index 39b6dbb..7c881f4 100644
--- a/frontend/src/app/terminal/portfolio/page.tsx
+++ b/frontend/src/app/terminal/portfolio/page.tsx
@@ -392,21 +392,47 @@ export default function PortfolioPage() {
                 <h1 className="text-3xl font-bold tracking-tight text-white">Portfolio</h1>
               </div>
               <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>
             </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 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 && (
+                <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>
 
           {/* Messages */}
diff --git a/frontend/src/app/terminal/watchlist/page.tsx b/frontend/src/app/terminal/watchlist/page.tsx
index 511a03e..c613afa 100755
--- a/frontend/src/app/terminal/watchlist/page.tsx
+++ b/frontend/src/app/terminal/watchlist/page.tsx
@@ -376,21 +376,48 @@ export default function WatchlistPage() {
                 <h1 className="text-3xl font-bold tracking-tight text-white">Watchlist</h1>
               </div>
               <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>
             </div>
             
-            {/* Quick Stats Pills */}
-            <div className="flex gap-2">
-              {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!
+            {/* 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>
-              )}
-              <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
+
+              {/* Quick Stats Pills */}
+              <div className="flex gap-2">
+                {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>
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 2df82f4..497ec18 100755
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -106,12 +106,6 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
       icon: Eye,
       badge: availableCount || null,
     },
-    { 
-      href: '/terminal/portfolio', 
-      label: 'PORTFOLIO', 
-      icon: Briefcase,
-      badge: null,
-    },
     { 
       href: '/terminal/listing', 
       label: 'FOR SALE',