From d35444bdc8de7c9b61ec3c55dd58b8ada0c7708e Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Wed, 18 Mar 2026 11:38:36 +0000
Subject: [PATCH] [#304] Add floating bottom bar for Trade/Donate/Rate on
 mobile

- New MobileActionBar component: fixed bottom bar with bottom sheet
- Sidebar hidden on mobile (lg:block), story content is primary
- Tapping Trade/Donate/Rate opens corresponding widget in slide-up
- Share to Farcaster moved inline on mobile, kept in sidebar on desktop
- Bottom padding (pb-24) prevents footer from hiding behind bar

Fixes #304

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/story/[storylineId]/page.tsx | 38 +++++++++++++--
 src/components/MobileActionBar.tsx   | 72 ++++++++++++++++++++++++++++
 2 files changed, 107 insertions(+), 3 deletions(-)
 create mode 100644 src/components/MobileActionBar.tsx

diff --git a/src/app/story/[storylineId]/page.tsx b/src/app/story/[storylineId]/page.tsx
index 6e4dfca7..1902b0d0 100644
--- a/src/app/story/[storylineId]/page.tsx
+++ b/src/app/story/[storylineId]/page.tsx
@@ -17,6 +17,7 @@ import { AgentBadge } from "../../../components/AgentBadge";
 import { WriterIdentity } from "../../../components/WriterIdentity";
 import { ViewCount, ViewTracker } from "../../../components/ViewCount";
 import { CommentSection } from "../../../components/CommentSection";
+import { MobileActionBar } from "../../../components/MobileActionBar";
 
 type Params = Promise<{ storylineId: string }>;
 
@@ -130,7 +131,7 @@ export default async function StoryPage({ params }: { params: Params }) {
     : null;
 
   return (
-    <div className="mx-auto max-w-5xl px-6 py-10">
+    <div className="mx-auto max-w-5xl px-6 py-10 pb-24 lg:pb-10">
       <ViewTracker storylineId={id} />
       <StoryHeader storyline={storyline} priceInfo={priceInfo} />
 
@@ -152,10 +153,15 @@ export default async function StoryPage({ params }: { params: Params }) {
               chapters={chapters}
             />
           )}
+
+          {/* Share — visible on mobile (sidebar hidden) */}
+          <div className="mt-6 lg:hidden">
+            <ShareToFarcaster storylineId={id} title={sl.title} />
+          </div>
         </main>
 
-        {/* Sidebar — engagement widgets */}
-        <aside className="order-first space-y-4 lg:order-none">
+        {/* Sidebar — desktop only */}
+        <aside className="hidden space-y-4 lg:block">
           {sl.token_address && priceInfo && (
             <PriceChart
               tokenAddress={sl.token_address as Address}
@@ -173,6 +179,32 @@ export default async function StoryPage({ params }: { params: Params }) {
           <ShareToFarcaster storylineId={id} title={sl.title} />
         </aside>
       </div>
+
+      {/* Mobile floating bottom bar */}
+      <MobileActionBar
+        tradeContent={
+          sl.token_address ? (
+            <>
+              {priceInfo && (
+                <PriceChart
+                  tokenAddress={sl.token_address as Address}
+                  totalSupplyRaw={priceInfo.totalSupplyRaw}
+                  currentPriceRaw={priceInfo.priceRaw}
+                />
+              )}
+              <TradingWidget tokenAddress={sl.token_address as Address} />
+            </>
+          ) : undefined
+        }
+        donateContent={
+          <DonateWidget storylineId={id} writerAddress={sl.writer_address} />
+        }
+        rateContent={
+          sl.token_address ? (
+            <RatingWidget storylineId={id} tokenAddress={sl.token_address} />
+          ) : undefined
+        }
+      />
     </div>
   );
 }
diff --git a/src/components/MobileActionBar.tsx b/src/components/MobileActionBar.tsx
new file mode 100644
index 00000000..7d6060db
--- /dev/null
+++ b/src/components/MobileActionBar.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+
+type Panel = "trade" | "donate" | "rate" | null;
+
+export function MobileActionBar({
+  tradeContent,
+  donateContent,
+  rateContent,
+}: {
+  tradeContent?: ReactNode;
+  donateContent: ReactNode;
+  rateContent?: ReactNode;
+}) {
+  const [open, setOpen] = useState<Panel>(null);
+
+  const buttons: { key: Panel; label: string; content?: ReactNode }[] = [
+    { key: "trade", label: "Trade", content: tradeContent },
+    { key: "donate", label: "Donate", content: donateContent },
+    { key: "rate", label: "Rate", content: rateContent },
+  ].filter((b) => b.content != null) as { key: Panel; label: string; content: ReactNode }[];
+
+  return (
+    <div className="lg:hidden">
+      {/* Backdrop */}
+      {open && (
+        <div
+          className="fixed inset-0 z-40 bg-black/60"
+          onClick={() => setOpen(null)}
+        />
+      )}
+
+      {/* Bottom sheet */}
+      {open && (
+        <div className="fixed inset-x-0 bottom-0 z-50 max-h-[80vh] overflow-y-auto rounded-t-lg border-t border-[var(--border)] bg-[var(--bg)] p-4">
+          <div className="mb-3 flex items-center justify-between">
+            <span className="text-foreground text-sm font-medium capitalize">
+              {open}
+            </span>
+            <button
+              onClick={() => setOpen(null)}
+              className="text-muted hover:text-foreground text-xs transition-colors"
+            >
+              [close]
+            </button>
+          </div>
+          <div className="space-y-4">
+            {buttons.find((b) => b.key === open)?.content}
+          </div>
+        </div>
+      )}
+
+      {/* Fixed bottom bar */}
+      <div className="fixed inset-x-0 bottom-0 z-30 grid grid-cols-3 gap-2 border-t border-[var(--border)] bg-[var(--bg)]/95 p-3 backdrop-blur-sm">
+        {buttons.map(({ key, label }) => (
+          <button
+            key={key}
+            onClick={() => setOpen(open === key ? null : key)}
+            className={`rounded border px-3 py-2 text-xs transition-colors ${
+              open === key
+                ? "border-accent text-accent"
+                : "border-[var(--border)] text-muted hover:text-foreground"
+            }`}
+          >
+            {label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}