From ac9ad41d86637baac692358d46257901dd0e466e Mon Sep 17 00:00:00 2001
From: Yves Gugger <guggeryves@hotmail.com>
Date: Wed, 17 Dec 2025 08:59:08 +0100
Subject: [PATCH] Inbox: Hunt-style tabs + Yield: Coming soon banner

---
 frontend/src/app/terminal/inbox/page.tsx | 113 +++++++++++++++--------
 frontend/src/app/terminal/yield/page.tsx |  22 ++++-
 2 files changed, 98 insertions(+), 37 deletions(-)

diff --git a/frontend/src/app/terminal/inbox/page.tsx b/frontend/src/app/terminal/inbox/page.tsx
index 1af3b1d..6063475 100644
--- a/frontend/src/app/terminal/inbox/page.tsx
+++ b/frontend/src/app/terminal/inbox/page.tsx
@@ -75,6 +75,12 @@ type Message = {
 
 type InboxTab = 'buying' | 'selling'
 
+// Tab config like Hunt page
+const TABS: Array<{ key: InboxTab; label: string; shortLabel: string; icon: any; color: string }> = [
+  { key: 'buying', label: 'Buying', shortLabel: 'Buying', icon: ShoppingCart, color: 'accent' },
+  { key: 'selling', label: 'Selling', shortLabel: 'Selling', icon: Tag, color: 'blue' },
+]
+
 export default function InboxPage() {
   const { user, subscription, logout, checkAuth } = useStore()
   const searchParams = useSearchParams()
@@ -294,43 +300,78 @@ export default function InboxPage() {
           </div>
         </section>
 
-        {/* TABS */}
+        {/* TABS - Hunt page style */}
         <section className="px-4 lg:px-10 pb-4">
-          <div className="flex border border-white/[0.08] bg-white/[0.02]">
-            <button
-              type="button"
-              onClick={() => setActiveTab('buying')}
-              className={clsx(
-                'flex-1 py-3 flex items-center justify-center gap-2 text-xs font-mono uppercase tracking-wider transition-all border-b-2',
-                activeTab === 'buying'
-                  ? 'bg-accent/10 text-accent border-accent'
-                  : 'text-white/40 hover:text-white border-transparent'
-              )}
-            >
-              <ShoppingCart className="w-4 h-4" />
-              Buying
-              {buyerThreads.length > 0 && (
-                <span className="ml-1 px-1.5 py-0.5 bg-white/10 text-[10px]">{buyerThreads.length}</span>
-              )}
-            </button>
-            {isSeller && (
-              <button
-                type="button"
-                onClick={() => setActiveTab('selling')}
-                className={clsx(
-                  'flex-1 py-3 flex items-center justify-center gap-2 text-xs font-mono uppercase tracking-wider transition-all border-b-2',
-                  activeTab === 'selling'
-                    ? 'bg-accent/10 text-accent border-accent'
-                    : 'text-white/40 hover:text-white border-transparent'
-                )}
-              >
-                <Tag className="w-4 h-4" />
-                Selling
-                {sellerUnread > 0 && (
-                  <span className="ml-1 px-1.5 py-0.5 bg-accent text-black text-[10px] font-bold">{sellerUnread}</span>
-                )}
-              </button>
-            )}
+          {/* Desktop Tabs */}
+          <div className="hidden lg:flex gap-2">
+            {TABS.filter(t => t.key === 'buying' || isSeller).map((t) => {
+              const isActive = activeTab === t.key
+              const count = t.key === 'buying' ? buyerThreads.length : sellerUnread
+              return (
+                <button
+                  key={t.key}
+                  onClick={() => setActiveTab(t.key)}
+                  className={clsx(
+                    'flex items-center gap-2 px-4 py-2.5 border transition-all',
+                    isActive
+                      ? t.color === 'accent'
+                        ? 'border-accent/40 bg-accent/10 text-accent'
+                        : 'border-blue-500/40 bg-blue-500/10 text-blue-400'
+                      : 'border-white/[0.08] bg-white/[0.02] text-white/50 hover:text-white hover:border-white/20'
+                  )}
+                >
+                  <t.icon className="w-4 h-4" />
+                  <span className="text-xs font-mono uppercase tracking-wider">{t.label}</span>
+                  {count > 0 && (
+                    <span className={clsx(
+                      'min-w-[18px] h-[18px] flex items-center justify-center text-[10px] font-bold rounded-full',
+                      isActive 
+                        ? t.color === 'accent' ? 'bg-accent text-black' : 'bg-blue-500 text-white'
+                        : 'bg-white/10 text-white/60'
+                    )}>
+                      {count > 99 ? '99+' : count}
+                    </span>
+                  )}
+                </button>
+              )
+            })}
+          </div>
+
+          {/* Mobile Tabs - Scrollable */}
+          <div className="lg:hidden -mx-4 px-4 overflow-x-auto">
+            <div className="flex gap-1 min-w-max pb-1">
+              {TABS.filter(t => t.key === 'buying' || isSeller).map((t) => {
+                const isActive = activeTab === t.key
+                const count = t.key === 'buying' ? buyerThreads.length : sellerUnread
+                return (
+                  <button
+                    key={t.key}
+                    onClick={() => setActiveTab(t.key)}
+                    className={clsx(
+                      'flex items-center gap-1.5 px-3 py-2 border transition-all shrink-0',
+                      isActive
+                        ? t.color === 'accent'
+                          ? 'border-accent/40 bg-accent/10 text-accent'
+                          : 'border-blue-500/40 bg-blue-500/10 text-blue-400'
+                        : 'border-white/[0.08] bg-white/[0.02] text-white/40'
+                    )}
+                  >
+                    <t.icon className="w-4 h-4" />
+                    <span className="text-[11px] font-mono uppercase tracking-wide">{t.shortLabel}</span>
+                    {count > 0 && (
+                      <span className={clsx(
+                        'min-w-[16px] h-[16px] flex items-center justify-center text-[9px] font-bold rounded-full',
+                        isActive 
+                          ? t.color === 'accent' ? 'bg-accent text-black' : 'bg-blue-500 text-white'
+                          : 'bg-white/10 text-white/50'
+                      )}>
+                        {count > 9 ? '9+' : count}
+                      </span>
+                    )}
+                  </button>
+                )
+              })}
+            </div>
           </div>
         </section>
 
diff --git a/frontend/src/app/terminal/yield/page.tsx b/frontend/src/app/terminal/yield/page.tsx
index 3001ec4..ecbf653 100644
--- a/frontend/src/app/terminal/yield/page.tsx
+++ b/frontend/src/app/terminal/yield/page.tsx
@@ -418,8 +418,28 @@ export default function YieldPage() {
           </div>
         </header>
 
+        {/* COMING SOON BANNER */}
+        <section className="px-4 lg:px-10 pt-4 lg:pt-10">
+          <div className="bg-amber-400/5 border border-amber-400/20 p-4 flex items-start gap-4">
+            <div className="w-10 h-10 bg-amber-400/10 border border-amber-400/20 flex items-center justify-center shrink-0">
+              <Sparkles className="w-5 h-5 text-amber-400" />
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-2 mb-1">
+                <h3 className="text-sm font-bold text-amber-400">Feature in Development</h3>
+                <span className="px-2 py-0.5 bg-amber-400/20 text-amber-400 text-[9px] font-mono uppercase tracking-wider">Coming Soon</span>
+              </div>
+              <p className="text-xs text-white/50 font-mono leading-relaxed">
+                We're building an automated yield system for your parked domains. 
+                Soon you'll be able to monetize idle domains with intelligent traffic routing. 
+                Stay tuned for updates!
+              </p>
+            </div>
+          </div>
+        </section>
+
         {/* DESKTOP HEADER */}
-        <section className="hidden lg:block px-10 pt-10 pb-6">
+        <section className="hidden lg:block px-10 pt-6 pb-6">
           <div className="flex items-end justify-between gap-6">
             <div className="space-y-3">
               <div className="flex items-center gap-2">