add more P&L visuals

src/app/hashtag/[tag]/TradePanel.tsx

@@ -102,23 +102,35 @@ export function TradePanel({ hashtag, balance, longPosition, shortPosition, fund
       <div className="grid grid-cols-2 gap-3 text-sm">
         <div className="bg-surface rounded-lg p-3">
           <p className="text-slate-500 text-xs mb-1">LONG position</p>
-          {longPosition ? (
+          {longPosition ? (() => {
+            const pnl = (hashtag.currentPrice - longPosition.avgBuyPrice) * longPosition.shares
+            return (
               <>
                 <p className="font-medium">{formatNumber(longPosition.shares)} shares</p>
                 <p className="text-slate-400 text-xs">avg {formatCurrency(longPosition.avgBuyPrice)}</p>
+                <p className={`text-xs font-medium mt-1 ${pnl >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
+                  {pnl >= 0 ? '+' : ''}{formatCurrency(pnl)}
+                </p>
               </>
-          ) : (
+            )
+          })() : (
             <p className="text-slate-600">None</p>
           )}
         </div>
         <div className="bg-surface rounded-lg p-3">
           <p className="text-slate-500 text-xs mb-1">SHORT position</p>
-          {shortPosition ? (
+          {shortPosition ? (() => {
+            const pnl = (shortPosition.avgBuyPrice - hashtag.currentPrice) * shortPosition.shares
+            return (
               <>
                 <p className="font-medium">{formatNumber(shortPosition.shares)} shares</p>
                 <p className="text-slate-400 text-xs">avg {formatCurrency(shortPosition.avgBuyPrice)}</p>
+                <p className={`text-xs font-medium mt-1 ${pnl >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
+                  {pnl >= 0 ? '+' : ''}{formatCurrency(pnl)}
+                </p>
               </>
-          ) : (
+            )
+          })() : (
             <p className="text-slate-600">None</p>
           )}
         </div>