design changes for profile activity

src/app/profile/[username]/page.tsx

@@ -3,6 +3,7 @@ import { getServerSession } from 'next-auth'
 import { authOptions } from '@/lib/auth'
 import { notFound } from 'next/navigation'
 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'
@@ -248,10 +249,11 @@ export default async function ProfilePage({ params }: Props) {
                 const isLottery = t.type === 'LOTTERY_WIN'
                 const isLiquidation = t.type === 'LIQUIDATE_LONG' || t.type === 'LIQUIDATE_SHORT'
                 return (
-                <div key={t.id} className="flex items-center justify-between px-4 py-3 text-sm">
-                  <div className="flex items-center gap-3">
+                <div key={t.id} className="px-4 py-3 text-sm space-y-1.5">
+                  {/* Primary row: badge · hashtag/label · total */}
+                  <div className="flex items-center gap-2">
                     <span
-                      className={`text-xs font-medium px-2 py-0.5 rounded ${
+                      className={`text-xs font-medium px-2 py-0.5 rounded shrink-0 ${
                         isLiquidation
                           ? 'bg-orange-500/15 text-orange-400'
                           : isLottery
@@ -264,30 +266,30 @@ export default async function ProfilePage({ params }: Props) {
                       {isLiquidation ? 'LIQUIDATED' : t.type.replace(/_/g, ' ')}
                     </span>
                     {isLottery ? (
-                      <span className="text-amber-300">Lucky Dip</span>
+                      <span className="text-amber-300 font-medium flex-1 min-w-0">Lucky Dip</span>
                     ) : (
                       <Link
                         href={`/hashtag/${t.hashtag!.tag}`}
-                        className="hover:text-indigo-300"
+                        className="text-indigo-300 hover:text-indigo-200 font-medium truncate flex-1 min-w-0"
                       >
                         #{t.hashtag!.displayTag}
                       </Link>
                     )}
+                    <span className="shrink-0 font-medium tabular-nums">
+                      {formatCurrency(isLottery ? t.profit : t.total)}
+                    </span>
                   </div>
-                  <div className="text-right">
-                    {isLottery ? (
-                      <p className="text-emerald-400 font-medium">{formatCurrency(t.profit)}</p>
-                    ) : (
-                      <>
-                        <p>{formatNumber(t.shares)} sh @ {formatCurrency(t.price)}</p>
-                        {(t.type === 'SELL_LONG' || t.type === 'SELL_SHORT' || isLiquidation) && (
-                          <p className={`text-xs ${pnlColor(t.profit)}`}>
-                            {formatPnl(t.profit)}
-                          </p>
-                        )}
-                      </>
+                  {/* Secondary row: time (left) · shares @ price (right) */}
+                  <div className="flex items-center justify-between text-xs text-slate-500">
+                    <span>{formatDistanceToNow(t.createdAt, { addSuffix: true })}</span>
+                    {!isLottery && (
+                      <span className="tabular-nums ml-3">{formatNumber(t.shares)} sh @ {formatCurrency(t.price)}</span>
                     )}
                   </div>
+                  {/* PnL: sell and liquidation trades */}
+                  {(t.type === 'SELL_LONG' || t.type === 'SELL_SHORT' || isLiquidation) && (
+                    <div className={`text-xs text-right ${pnlColor(t.profit)}`}>{formatPnl(t.profit)}</div>
+                  )}
                 </div>
                 )
               })}