From a03a9bb4ab5c6000d31859c2d1726b4f82e7ea8a Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Tue, 31 Mar 2026 22:43:54 +0100
Subject: [PATCH 1/3] [#685] Update nav links, redirects, and cleanup

- Nav: Replace "Writer" and "Reader" with single "Dashboard" link
- Dashboard links to /profile/[connected-address] when connected,
  falls back to /writer redirect when not connected
- Dashboard highlights when on any /profile/ page
- Update NavBar test to reflect new nav structure + add wagmi mock

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/NavBar.tsx                | 40 +++++++++++++++---------
 src/components/__tests__/NavBar.test.tsx |  8 +++--
 2 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index ed2879ae..a2543462 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -3,20 +3,32 @@
 import { useState } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useAccount } from "wagmi";
 import Image from "next/image";
 import { ConnectWallet } from "./ConnectWallet";
 
-const NAV_LINKS = [
-  { href: "/create", label: "Create" },
-  { href: "/dashboard/writer", label: "Writer" },
-  { href: "/dashboard/reader", label: "Reader" },
-  { href: "/agents", label: "Agents" },
-  { href: "/token", label: "$PLOT" },
-] as const;
-
 export function NavBar() {
   const pathname = usePathname();
   const [mobileOpen, setMobileOpen] = useState(false);
+  const { address, isConnected } = useAccount();
+
+  const dashboardHref = isConnected && address
+    ? `/profile/${address}`
+    : "/dashboard/writer";
+
+  const navLinks = [
+    { href: "/create", label: "Create" },
+    { href: dashboardHref, label: "Dashboard" },
+    { href: "/agents", label: "Agents" },
+    { href: "/token", label: "$PLOT" },
+  ];
+
+  const isActive = (href: string) => {
+    if (href.startsWith("/profile/")) {
+      return pathname.startsWith("/profile/");
+    }
+    return pathname === href || pathname.startsWith(href + "/");
+  };
 
   return (
     <nav className="fixed top-0 right-0 left-0 z-50 border-b border-[var(--border)] bg-[var(--bg)]/95 backdrop-blur-sm">
@@ -40,11 +52,11 @@ export function NavBar() {
 
         {/* Desktop nav links */}
         <div className="hidden items-center gap-1 md:flex">
-          {NAV_LINKS.map(({ href, label }) => {
-            const active = pathname === href || pathname.startsWith(href + "/");
+          {navLinks.map(({ href, label }) => {
+            const active = isActive(href);
             return (
               <Link
-                key={href}
+                key={label}
                 href={href}
                 className={`rounded px-2.5 py-1 text-xs font-medium transition-colors ${
                   active
@@ -96,11 +108,11 @@ export function NavBar() {
       {mobileOpen && (
         <div className="border-t border-[var(--border)] bg-[var(--bg)] px-4 pb-3 pt-2 md:hidden">
           <div className="flex flex-col gap-1">
-            {NAV_LINKS.map(({ href, label }) => {
-              const active = pathname === href || pathname.startsWith(href + "/");
+            {navLinks.map(({ href, label }) => {
+              const active = isActive(href);
               return (
                 <Link
-                  key={href}
+                  key={label}
                   href={href}
                   onClick={() => setMobileOpen(false)}
                   className={`rounded px-2.5 py-1.5 text-xs font-medium transition-colors ${
diff --git a/src/components/__tests__/NavBar.test.tsx b/src/components/__tests__/NavBar.test.tsx
index 44ba1b19..2b346e7b 100644
--- a/src/components/__tests__/NavBar.test.tsx
+++ b/src/components/__tests__/NavBar.test.tsx
@@ -18,6 +18,10 @@ vi.mock("../ConnectWallet", () => ({
   ConnectWallet: () => <button data-testid="connect-wallet">Connect</button>,
 }));
 
+vi.mock("wagmi", () => ({
+  useAccount: () => ({ address: undefined, isConnected: false }),
+}));
+
 describe("NavBar", () => {
   it("renders logo linking to home", () => {
     render(<NavBar />);
@@ -36,7 +40,7 @@ describe("NavBar", () => {
     render(<NavBar />);
     const createLinks = screen.getAllByText("Create");
     expect(createLinks[0].closest("a")).toHaveAttribute("href", "/create");
-    expect(screen.getAllByText("Writer")[0].closest("a")).toHaveAttribute("href", "/dashboard/writer");
-    expect(screen.getAllByText("Reader")[0].closest("a")).toHaveAttribute("href", "/dashboard/reader");
+    expect(screen.getAllByText("Dashboard")[0].closest("a")).toHaveAttribute("href", "/dashboard/writer");
+    expect(screen.getAllByText("Agents")[0].closest("a")).toHaveAttribute("href", "/agents");
   });
 });

From e41b5fb3f9264a2bc212ce4d5862f31ef3d0fb29 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Tue, 31 Mar 2026 22:47:03 +0100
Subject: [PATCH 2/3] [#685] Fix Dashboard active state for disconnected users
 on profile pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Decouple Dashboard highlight from its href — always mark active on
/profile/ and /dashboard/ routes regardless of connection state.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/NavBar.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index a2543462..fb1dd290 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -23,9 +23,9 @@ export function NavBar() {
     { href: "/token", label: "$PLOT" },
   ];
 
-  const isActive = (href: string) => {
-    if (href.startsWith("/profile/")) {
-      return pathname.startsWith("/profile/");
+  const isActive = (href: string, label: string) => {
+    if (label === "Dashboard") {
+      return pathname.startsWith("/profile/") || pathname.startsWith("/dashboard/");
     }
     return pathname === href || pathname.startsWith(href + "/");
   };
@@ -53,7 +53,7 @@ export function NavBar() {
         {/* Desktop nav links */}
         <div className="hidden items-center gap-1 md:flex">
           {navLinks.map(({ href, label }) => {
-            const active = isActive(href);
+            const active = isActive(href, label);
             return (
               <Link
                 key={label}
@@ -109,7 +109,7 @@ export function NavBar() {
         <div className="border-t border-[var(--border)] bg-[var(--bg)] px-4 pb-3 pt-2 md:hidden">
           <div className="flex flex-col gap-1">
             {navLinks.map(({ href, label }) => {
-              const active = isActive(href);
+              const active = isActive(href, label);
               return (
                 <Link
                   key={label}

From c48881d6fede7b3250d1c08ef480f188ad3dabdc Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Tue, 31 Mar 2026 22:53:22 +0100
Subject: [PATCH 3/3] [#685] Remove unused ReaderPortfolio component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Dead code — functionality fully merged into Profile Portfolio tab.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/profile/[address]/page.tsx |   4 +-
 src/components/ReaderPortfolio.tsx | 197 -----------------------------
 2 files changed, 2 insertions(+), 199 deletions(-)
 delete mode 100644 src/components/ReaderPortfolio.tsx

diff --git a/src/app/profile/[address]/page.tsx b/src/app/profile/[address]/page.tsx
index c3ec1daf..4e41f4ad 100644
--- a/src/app/profile/[address]/page.tsx
+++ b/src/app/profile/[address]/page.tsx
@@ -1150,8 +1150,8 @@ function PortfolioTab({ address, isOwnProfile }: { address: string; isOwnProfile
     queryFn: async (): Promise<PortfolioHolding[]> => {
       if (!supabase) return [];
 
-      // Scan all storylines with tokens (matches ReaderPortfolio pattern)
-      // to catch holdings acquired via direct transfers, not just indexed trades
+      // Scan all storylines with tokens to catch holdings acquired via
+      // direct transfers, not just indexed trades
       const { data: storylines } = await supabase
         .from("storylines")
         .select("*")
diff --git a/src/components/ReaderPortfolio.tsx b/src/components/ReaderPortfolio.tsx
deleted file mode 100644
index c3880fa9..00000000
--- a/src/components/ReaderPortfolio.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-"use client";
-
-import { useAccount } from "wagmi";
-import { useQuery } from "@tanstack/react-query";
-import { formatUnits, type Address } from "viem";
-import { formatPrice, formatSupply } from "../../lib/format";
-import { browserClient } from "../../lib/rpc";
-import { erc20Abi, mcv2BondAbi, get24hPriceChange, getTokenTVL } from "../../lib/price";
-import { MCV2_BOND, RESERVE_LABEL, STORY_FACTORY } from "../../lib/contracts/constants";
-import { supabase, type Storyline } from "../../lib/supabase";
-import Link from "next/link";
-import { formatUsdValue } from "../../lib/usd-price";
-
-interface Holding {
-  storyline: Storyline;
-  balance: bigint;
-  price: bigint;
-  value: bigint;
-  priceChange: number | null;
-  reserveDecimals: number;
-}
-
-export function ReaderPortfolio({ plotUsd }: { plotUsd?: number | null }) {
-  const { address, isConnected } = useAccount();
-  const { data: holdings, isLoading } = useQuery({
-    queryKey: ["reader-portfolio", address],
-    queryFn: async (): Promise<Holding[]> => {
-      if (!address || !supabase) return [];
-
-      // Get all non-hidden storylines with token addresses
-      const { data: storylines } = await supabase
-        .from("storylines")
-        .select("*")
-        .eq("hidden", false)
-        .neq("token_address", "")
-        .eq("contract_address", STORY_FACTORY.toLowerCase())
-        .returns<Storyline[]>();
-
-      if (!storylines || storylines.length === 0) return [];
-
-      // Batch all balanceOf checks into a single multicall
-      const balanceCalls = storylines.map((sl) => ({
-        address: sl.token_address as Address,
-        abi: erc20Abi,
-        functionName: "balanceOf" as const,
-        args: [address],
-      }));
-
-      const balanceResults = await browserClient.multicall({ contracts: balanceCalls });
-
-      // Filter to only storylines with non-zero balance
-      const held = storylines
-        .map((sl, i) => ({ sl, balance: balanceResults[i] }))
-        .filter((h) => h.balance.status === "success" && h.balance.result > BigInt(0));
-
-      if (held.length === 0) return [];
-
-      // Fetch price, 24h change, and TVL only for held tokens
-      const results = await Promise.all(
-        held.map(async ({ sl, balance: balanceResult }): Promise<Holding | null> => {
-          const tokenAddr = sl.token_address as Address;
-          const balance = balanceResult.result as bigint;
-          try {
-            const [price, priceChangeResult, tvlResult] = await Promise.all([
-              browserClient.readContract({
-                address: MCV2_BOND,
-                abi: mcv2BondAbi,
-                functionName: "priceForNextMint",
-                args: [tokenAddr],
-              }),
-              get24hPriceChange(tokenAddr, browserClient).catch(() => null),
-              getTokenTVL(tokenAddr, browserClient).catch(() => null),
-            ]);
-
-            const priceBI = BigInt(price);
-            const reserveDecimals = tvlResult?.decimals ?? 18;
-            const value = (balance * priceBI) / BigInt(10 ** 18);
-
-            return {
-              storyline: sl,
-              balance,
-              price: priceBI,
-              value,
-              priceChange: priceChangeResult?.changePercent ?? null,
-              reserveDecimals,
-            };
-          } catch {
-            return null;
-          }
-        }),
-      );
-
-      return results.filter((h): h is Holding => h !== null);
-    },
-    enabled: isConnected && !!address,
-  });
-
-  const totalValue = holdings?.reduce((sum, h) => sum + h.value, BigInt(0)) ?? BigInt(0);
-  const reserveDecimals = holdings && holdings.length > 0 ? holdings[0].reserveDecimals : 18;
-  const bestPick = holdings && holdings.length > 0
-    ? holdings.reduce((best, h) =>
-        (h.priceChange ?? -Infinity) > (best.priceChange ?? -Infinity) ? h : best
-      )
-    : null;
-
-  if (!isConnected) return null;
-
-  return (
-    <section className="border-border mt-8 rounded border px-4 py-4">
-      <h2 className="text-foreground text-sm font-medium">Portfolio</h2>
-
-      {isLoading && (
-        <p className="text-muted mt-2 text-xs">Loading holdings...</p>
-      )}
-
-      {!isLoading && holdings && holdings.length === 0 && (
-        <p className="text-muted mt-2 text-xs">
-          No token holdings found. Buy storyline tokens to build your portfolio.
-        </p>
-      )}
-
-      {holdings && holdings.length > 0 && (
-        <>
-          <div className="text-muted mt-3 grid grid-cols-2 gap-2 text-xs">
-            <div>
-              <span className="block text-[10px] uppercase tracking-wider">
-                Total Value
-              </span>
-              <span className="text-accent text-sm font-medium">
-                {formatPrice(formatUnits(totalValue, reserveDecimals))} {RESERVE_LABEL}
-              </span>
-              {plotUsd && (
-                <span className="text-muted ml-1 text-[10px]">
-                  (≈ {formatUsdValue(parseFloat(formatUnits(totalValue, reserveDecimals)) * plotUsd)})
-                </span>
-              )}
-            </div>
-            {bestPick && bestPick.priceChange !== null && (
-              <div>
-                <span className="block text-[10px] uppercase tracking-wider">
-                  Best Pick (24h)
-                </span>
-                <span className="text-foreground">
-                  {bestPick.storyline.title.slice(0, 20)}
-                  {bestPick.storyline.title.length > 20 ? "..." : ""}{" "}
-                  <span className={bestPick.priceChange >= 0 ? "text-accent" : "text-error"}>
-                    {bestPick.priceChange >= 0 ? "+" : ""}
-                    {bestPick.priceChange.toFixed(1)}%
-                  </span>
-                </span>
-              </div>
-            )}
-          </div>
-
-          <div className="mt-4 space-y-2">
-            {holdings.map((h) => (
-              <div
-                key={h.storyline.id}
-                className="border-border flex items-center justify-between rounded border px-3 py-2 text-xs"
-              >
-                <div>
-                  <Link
-                    href={`/story/${h.storyline.storyline_id}`}
-                    className="text-foreground hover:text-accent transition-colors"
-                  >
-                    {h.storyline.title}
-                  </Link>
-                  <div className="text-muted mt-0.5">
-                    {formatSupply(formatUnits(h.balance, 18))} tokens
-                  </div>
-                </div>
-                <div className="text-right">
-                  <div className="text-foreground">
-                    {formatPrice(formatUnits(h.value, h.reserveDecimals))} {RESERVE_LABEL}
-                    {plotUsd && (
-                      <span className="text-muted ml-1 text-[10px]">
-                        (≈ {formatUsdValue(parseFloat(formatUnits(h.value, h.reserveDecimals)) * plotUsd)})
-                      </span>
-                    )}
-                  </div>
-                  {h.priceChange !== null && (
-                    <div
-                      className={`text-[10px] ${h.priceChange >= 0 ? "text-accent" : "text-error"}`}
-                    >
-                      {h.priceChange >= 0 ? "+" : ""}
-                      {h.priceChange.toFixed(1)}%
-                    </div>
-                  )}
-                </div>
-              </div>
-            ))}
-          </div>
-        </>
-      )}
-    </section>
-  );
-}