From 682c76128c5b537092bdc03959a713c7b0a363c1 Mon Sep 17 00:00:00 2001
From: Mike Johnston <mike@nervesocket.com>
Date: Fri, 20 Mar 2026 14:29:20 -0400
Subject: [PATCH] fix: update balance display to indicate negative values in
 TradePanel, ResetAccountForm, ProfilePage, and Navbar

---
 src/app/hashtag/[tag]/TradePanel.tsx          | 16 +++++++++------
 .../profile/[username]/ResetAccountForm.tsx   |  2 +-
 src/app/profile/[username]/page.tsx           | 20 +++++++++++++++++--
 src/components/Navbar.tsx                     |  2 +-
 4 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/app/hashtag/[tag]/TradePanel.tsx b/src/app/hashtag/[tag]/TradePanel.tsx
index 50f8ef4..6823d10 100644
--- a/src/app/hashtag/[tag]/TradePanel.tsx
+++ b/src/app/hashtag/[tag]/TradePanel.tsx
@@ -32,7 +32,7 @@ export function TradePanel({ hashtag, balance, longPosition, shortPosition, fund
   const remainingShareCap = Math.max(0, maxPositionShares - existingBuyShares)
   const remainingValueCap = Math.max(0, maxPositionValue - existingBuyShares * hashtag.currentPrice)
   const sharesFromValueCap = hashtag.currentPrice > 0 ? remainingValueCap / hashtag.currentPrice : 0
-  const sharesFromBalance  = hashtag.currentPrice > 0 ? balance / hashtag.currentPrice : 0
+  const sharesFromBalance  = hashtag.currentPrice > 0 ? Math.max(0, balance) / hashtag.currentPrice : 0
   const maxBuyShares = Math.floor(Math.min(remainingShareCap, sharesFromValueCap, sharesFromBalance) * 100) / 100
 
   const maxSellShares =
@@ -75,7 +75,7 @@ export function TradePanel({ hashtag, balance, longPosition, shortPosition, fund
       <div className="flex items-center justify-between">
         <h2 className="font-semibold">Trade #{hashtag.displayTag}</h2>
         <span className="text-sm text-slate-400">
-          Balance: <span className="text-white font-medium">{formatCurrency(balance)}</span>
+          Balance: <span className={`font-medium ${balance < 0 ? 'text-red-400' : 'text-white'}`}>{formatCurrency(balance)}</span>
         </span>
       </div>
 
@@ -137,10 +137,14 @@ export function TradePanel({ hashtag, balance, longPosition, shortPosition, fund
                 : String(maxSellShares)
             )}
           >
-            Max
-            {(tab === 'BUY_LONG' || tab === 'BUY_SHORT') && maxBuyShares === 0
-              ? ' (limit reached)'
-              : null}
+            {(tab === 'BUY_LONG' || tab === 'BUY_SHORT')
+              ? balance <= 0
+                ? <span className="text-red-400">Balance is negative</span>
+                : maxBuyShares === 0
+                  ? 'Max (limit reached)'
+                  : 'Max'
+              : 'Max'
+            }
           </button>
         </div>
         <input
diff --git a/src/app/profile/[username]/ResetAccountForm.tsx b/src/app/profile/[username]/ResetAccountForm.tsx
index 60e500d..97fcd9a 100644
--- a/src/app/profile/[username]/ResetAccountForm.tsx
+++ b/src/app/profile/[username]/ResetAccountForm.tsx
@@ -45,7 +45,7 @@ export default function ResetAccountForm({ username }: Props) {
   }
 
   return (
-    <section className="bg-surface-card border border-amber-500/20 rounded-xl p-6">
+    <section id="reset" className="bg-surface-card border border-amber-500/20 rounded-xl p-6">
       <button
         onClick={() => { setOpen((v) => !v); setError(''); setConfirm(''); setDone(false) }}
         className="flex items-center gap-2 text-sm font-medium text-amber-400 hover:text-amber-300 transition-colors"
diff --git a/src/app/profile/[username]/page.tsx b/src/app/profile/[username]/page.tsx
index 6415830..d003906 100644
--- a/src/app/profile/[username]/page.tsx
+++ b/src/app/profile/[username]/page.tsx
@@ -6,7 +6,7 @@ import { formatCurrency, formatNumber, pnlColor, formatPnl } from '@/lib/utils'
 import { formatDistanceToNow } from 'date-fns'
 import { getBalanceTier } from '@/lib/pricing'
 import Link from 'next/link'
-import { TrendingUp, TrendingDown, Coins, Building2 } from 'lucide-react'
+import { TrendingUp, TrendingDown, Coins, Building2, AlertTriangle } from 'lucide-react'
 import ChangePasswordForm from './ChangePasswordForm'
 import AccountSettingsForm from './AccountSettingsForm'
 import CloseAccountForm from './CloseAccountForm'
@@ -131,7 +131,7 @@ export default async function ProfilePage({ params }: Props) {
           )}
         </div>
         <div className="text-right">
-          <p className="text-3xl font-bold">{formatCurrency(totalValue)}</p>
+          <p className={`text-3xl font-bold ${totalValue < 0 ? 'text-red-400' : ''}`}>{formatCurrency(totalValue)}</p>
           <p className="text-sm text-slate-400">total portfolio value</p>
           {lotteryCount > 0 && (
             <p className="text-xs text-amber-400 mt-1">
@@ -157,6 +157,22 @@ export default async function ProfilePage({ params }: Props) {
         />
       </div>
 
+      {/* Bankruptcy warning — only shown to profile owner when cash balance is negative */}
+      {isOwn && user.balance < 0 && (
+        <div className="bg-red-500/10 border border-red-500/30 rounded-xl p-4 flex gap-3">
+          <AlertTriangle className="h-5 w-5 text-red-400 shrink-0 mt-0.5" />
+          <div>
+            <p className="text-sm font-medium text-red-400 mb-1">You&apos;re in the red</p>
+            <p className="text-sm text-slate-400">
+              Your cash balance is negative — you won&apos;t be able to buy any positions until it recovers.
+              If you want to start fresh, you can{' '}
+              <a href="#reset" className="text-amber-400 hover:text-amber-300 underline underline-offset-2">reset your account</a>{' '}
+              back to $2,000.
+            </p>
+          </div>
+        </div>
+      )}
+
       {/* Portfolio value chart */}
       {portfolioHistory.length > 0 && (
         <div className="bg-surface-card border border-surface-border rounded-xl p-4">
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index ffad177..98c2cfe 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -188,7 +188,7 @@ function BalanceBadge({ userId }: { userId: string }) {
   if (balance === null) return null
 
   return (
-    <span className="text-emerald-400 text-sm font-medium hidden md:block">
+    <span className={`text-sm font-medium hidden md:block ${balance < 0 ? 'text-red-400' : 'text-emerald-400'}`}>
       {formatCurrency(balance)}
     </span>
   )