[#158] Show donation stats prominently, clarify deadline wording

src/app/dashboard/writer/page.tsx

@@ -2,7 +2,9 @@
 
 import { useAccount } from "wagmi";
 import { useQuery } from "@tanstack/react-query";
+import { formatUnits } from "viem";
 import { supabase, type Storyline } from "../../../../lib/supabase";
+import { getTokenTVL } from "../../../../lib/price";
 import { DeadlineCountdown } from "../../../components/DeadlineCountdown";
 import { ClaimRoyalties } from "../../../components/ClaimRoyalties";
 import { WriterTradingStats } from "../../../components/WriterTradingStats";
@@ -119,11 +121,12 @@ function StorylineDetail({ storyline, writerAddress }: { storyline: Storyline; w
         </div>
         <div>
           <span className="block text-[10px] uppercase tracking-wider">
-            Deadline
-          </span>
-          <span className="text-foreground">
-            {storyline.has_deadline ? "72h" : "none"}
+            Donations
           </span>
+          {storyline.token_address
+            ? <DonationCount storylineId={storyline.storyline_id} tokenAddress={storyline.token_address} />
+            : <span className="text-foreground">—</span>
+          }
         </div>
       </div>
 
@@ -146,3 +149,38 @@ function StorylineDetail({ storyline, writerAddress }: { storyline: Storyline; w
     </div>
   );
 }
+
+function DonationCount({ storylineId, tokenAddress }: { storylineId: number; tokenAddress: string }) {
+  const { data } = useQuery({
+    queryKey: ["donation-count", storylineId, tokenAddress],
+    queryFn: async () => {
+      const [tvlData, rows] = await Promise.all([
+        getTokenTVL(tokenAddress as Address),
+        supabase
+          ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            (supabase.from("donations") as any)
+              .select("amount")
+              .eq("storyline_id", storylineId)
+              .then((r: { data: { amount: string }[] | null }) => r.data)
+          : null,
+      ]);
+      const decimals = tvlData?.decimals ?? 18;
+      if (!rows || rows.length === 0) return { total: BigInt(0), count: 0, decimals };
+      const total = (rows as { amount: string }[]).reduce(
+        (sum, d) => sum + BigInt(d.amount),
+        BigInt(0),
+      );
+      return { total, count: rows.length, decimals };
+    },
+  });
+
+  if (!data || data.count === 0) {
+    return <span className="text-foreground">—</span>;
+  }
+
+  return (
+    <span className="text-foreground">
+      {formatUnits(data.total, data.decimals)} <span className="text-muted">({data.count})</span>
+    </span>
+  );
+}

src/components/DeadlineCountdown.tsx

@@ -19,9 +19,8 @@ export function DeadlineCountdown({ lastPlotTime }: { lastPlotTime: string }) {
   if (remaining === null) {
     return (
       <div className="border-border bg-surface mt-4 rounded border px-3 py-2 text-xs">
-        <span className="text-muted">Deadline: </span>
+        <span className="text-muted">Next plot due in </span>
         <span className="text-accent font-medium">--:--:--</span>
-        <span className="text-muted ml-1">remaining</span>
       </div>
     );
   }
@@ -40,12 +39,11 @@ export function DeadlineCountdown({ lastPlotTime }: { lastPlotTime: string }) {
 
   return (
     <div className="border-border bg-surface mt-4 rounded border px-3 py-2 text-xs">
-      <span className="text-muted">Deadline: </span>
+      <span className="text-muted">Next plot due in </span>
       <span className="text-accent font-medium">
         {String(hours).padStart(2, "0")}:{String(minutes).padStart(2, "0")}:
         {String(seconds).padStart(2, "0")}
       </span>
-      <span className="text-muted ml-1">remaining</span>
     </div>
   );
 }

src/components/WriterTradingStats.tsx

@@ -100,8 +100,7 @@ export function WriterTradingStats({ storyline }: WriterTradingStatsProps) {
             : "—"}
         </span>
         <span className="text-muted block text-[10px]">
-          {donationsTotal !== undefined && decimals !== undefined && `D: ${formatUnits(donationsTotal, decimals)}`}
-          {royaltyData && decimals !== undefined && ` R: ${formatUnits(royaltyData.unclaimed, decimals)}`}
+          {royaltyData && decimals !== undefined && `Royalties: ${formatUnits(royaltyData.unclaimed, decimals)}`}
         </span>
       </div>
       <div>