Combine create + chain into one tabbed page with Add Plot shortcut on story detail

[realproject7]

Context

Currently "create storyline" (/create) and "chain plot" (/chain) are separate pages with separate nav links. This is confusing for writers — they have to figure out which page to use. Combine them into one unified Create page with tab navigation.

Also, add a quick "Add a new Plot" button on the story detail page so writers can chain directly from their story.

Task 1: Combine create + chain into one tabbed page

Design

Under the page title "Create Storyline", add a tab bar:

[ New ]  [ Add Plot ]

• New tab: current /create page form (title, genre, language, content, deadline toggle)
• Add Plot tab: current /chain page form (storyline selector, title, content)

Default tab: New. If navigated with ?tab=chain or ?storyline=123, auto-select Add Plot tab and pre-fill the storyline ID.

Implementation

1. Move both forms into /create/page.tsx as tab content. Extract the current create form and chain form into separate components within the same file (or inline — keep it simple).

2. Delete /chain/page.tsx — no longer needed.

3. Add redirect for backward compat: create src/app/chain/page.tsx that redirects to /create?tab=chain. Or just remove it and update links.

4. Update NavBar (src/components/NavBar.tsx:13): Remove the chain nav link. Keep only create (or rename to write).

5. Update links:

   • src/components/Footer.tsx — /create link stays as-is
   • src/app/page.tsx — "create storyline" link stays as-is
   • Any link pointing to /chain should point to /create?tab=chain

Tab bar style

Same terminal aesthetic as FilterBar tokens:

[ New ]  [ Add Plot ]

Active tab: border-accent text-accent. Inactive: border-border text-muted hover:text-foreground.

Task 2: "Add a new Plot" button on story detail page

On src/app/story/[storylineId]/page.tsx, below the "Next plot due in" countdown timer, show a small button linking to the chain form — only visible when the connected wallet matches the storyline writer.

Design

Next plot due in 6d 23h 57m 54s
[ + Add a new Plot ]

• Button style: outline, small, same as "Read the first Plot" button but smaller text
• Links to /create?tab=chain&storyline={storylineId}
• Only rendered when address === storyline.writer_address (needs useAccount — this section may need to become a client component, or wrap just the button in a client component)

Implementation

Create a small client component AddPlotButton:

"use client";
import { useAccount } from "wagmi";
import Link from "next/link";

export function AddPlotButton({ storylineId, writerAddress }: { storylineId: number; writerAddress: string }) {
  const { address } = useAccount();
  if (!address || address.toLowerCase() !== writerAddress.toLowerCase()) return null;
  return (
    <Link
      href={`/create?tab=chain&storyline=${storylineId}`}
      className="border-accent text-accent hover:bg-accent/10 mt-3 block w-full rounded border py-2 text-center text-xs font-medium transition-colors"
    >
      + Add a new Plot
    </Link>
  );
}

Place it after DeadlineCountdown in the story detail page.

Files to Change

1. src/app/create/page.tsx — add tab UI, incorporate chain form
2. src/app/chain/page.tsx — delete or redirect to /create?tab=chain
3. src/components/NavBar.tsx — remove chain nav link
4. src/app/story/[storylineId]/page.tsx — add AddPlotButton after deadline countdown
5. New: src/components/AddPlotButton.tsx — client component for writer-only button

Acceptance Criteria

• /create page has [New] and [Add Plot] tabs
• New tab has the full create storyline form
• Add Plot tab has the chain plot form with storyline selector
• /create?tab=chain&storyline=123 auto-selects Add Plot tab and pre-fills storyline ID
• /chain no longer exists as a standalone page (redirect or deleted)
• NavBar shows only create link (no separate chain)
• Story detail page shows "Add a new Plot" button only for the connected writer
• Button links to /create?tab=chain&storyline={id}
• npm run build and npm run typecheck pass