From 27fca4ca1919155b665cce13198dcf4c2eed7aea Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Sat, 21 Mar 2026 20:51:02 +0000
Subject: [PATCH] Fix white surfaces, restore original filter bar, ruled paper
 on create page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- --bg-surface: #FFFFFF → #F0EBE1 (light beige, blends with page)
- FilterBar: restore original shape (rounded, no bg fill, no rounded-full)
- Remove "New & Noteworthy" section heading from home page
- Create page: apply ruled-paper class to genesis and plot content textareas

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/create/page.tsx      | 4 ++--
 src/app/globals.css          | 2 +-
 src/app/page.tsx             | 6 ------
 src/components/FilterBar.tsx | 4 ++--
 4 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/app/create/page.tsx b/src/app/create/page.tsx
index 7602f445..c9ff2403 100644
--- a/src/app/create/page.tsx
+++ b/src/app/create/page.tsx
@@ -344,7 +344,7 @@ function CreatePage() {
                 disabled={newBusy}
                 rows={12}
                 placeholder="Write the genesis plot (500\u201310,000 characters)"
-                className="border-border bg-surface text-foreground placeholder:text-muted w-full resize-y rounded border px-3 py-2 text-sm leading-relaxed focus:border-accent focus:outline-none disabled:opacity-50"
+                className="ruled-paper border-border text-foreground placeholder:text-muted w-full resize-y rounded border focus:border-accent focus:outline-none disabled:opacity-50"
               />
               <div className="mt-1 flex justify-between text-xs">
                 <span className={newContent.length > 0 && !newValid ? "text-error" : "text-muted"}>
@@ -461,7 +461,7 @@ function CreatePage() {
                 disabled={chainBusy || noStoryline}
                 rows={12}
                 placeholder={noStoryline ? "Select a storyline above to chain a plot" : "Write the next plot (500\u201310,000 characters)"}
-                className="border-border bg-surface text-foreground placeholder:text-muted w-full resize-y rounded border px-3 py-2 text-sm leading-relaxed focus:border-accent focus:outline-none disabled:opacity-50"
+                className="ruled-paper border-border text-foreground placeholder:text-muted w-full resize-y rounded border focus:border-accent focus:outline-none disabled:opacity-50"
               />
               <div className="mt-1 text-xs">
                 <span className={chainContent.length > 0 && !chainValid ? "text-error" : "text-muted"}>
diff --git a/src/app/globals.css b/src/app/globals.css
index 1a073040..b87011a6 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2,7 +2,7 @@
 
 :root {
   --bg: #E8DFD0;
-  --bg-surface: #FFFFFF;
+  --bg-surface: #F0EBE1;
   --bg-shelf: #DDD3C2;
   --shelf-shadow: rgba(44, 24, 16, 0.08);
   --text: #2C1810;
diff --git a/src/app/page.tsx b/src/app/page.tsx
index fdc702ce..03da49b4 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -52,12 +52,6 @@ export default async function Home({
         </p>
       </header>
 
-      {/* Section heading + filter bar */}
-      <div className="mb-2">
-        <h2 className="font-body text-base font-normal italic text-[var(--text-muted)]">
-          {tab === "trending" ? "Trending" : "New & Noteworthy"}
-        </h2>
-      </div>
       <FilterBar writer={writer} genre={genre} lang={lang} tab={tab} />
 
       {/* Story grid — batched multicall for price/TVL */}
diff --git a/src/components/FilterBar.tsx b/src/components/FilterBar.tsx
index 572ac841..0c6a3c14 100644
--- a/src/components/FilterBar.tsx
+++ b/src/components/FilterBar.tsx
@@ -64,7 +64,7 @@ export function FilterBar({ writer, genre, lang, tab }: FilterBarProps) {
 
   return (
     <div ref={barRef}>
-      <div className="flex min-w-0 items-center gap-x-2 rounded-full border border-[var(--border)] bg-[var(--bg-shelf)]/50 px-4 py-2 text-xs">
+      <div className="border-border flex min-w-0 items-center gap-x-3 rounded border px-3 py-2 text-xs">
         {/* Writer token + dropdown */}
         <div className="relative min-w-0">
           <Token
@@ -196,7 +196,7 @@ function Token({
   return (
     <button
       onClick={onClick}
-      className={`whitespace-nowrap rounded-full px-2.5 py-0.5 transition-colors hover:bg-[var(--accent)]/10 ${active ? "bg-[var(--accent)]/10" : ""}`}
+      className={`whitespace-nowrap px-1 py-0.5 transition-colors hover:bg-[var(--border)]/30 ${active ? "bg-[var(--accent)]/10" : ""}`}
     >
       <span className="text-[var(--text-muted)] sm:hidden">{shortLabel}:</span>
       <span className="text-[var(--text-muted)] hidden sm:inline">{label}:</span>