Feature: Post page redesign (Content Studio with always-visible editor)

[hellno]

Summary

Redesign the /post page ("Content Studio") to provide a dedicated content management experience. The page should always show an editor (never an empty state), have clear information architecture, and share components with the composer modal.

Current Problems

Problem 1: Triple Redundancy

"New draft" button appears in THREE places:

• Header (top right)
• Left sidebar
• Center empty state card

Problem 2: Empty State Paradox

• "Writing" tab is selected
• But center shows "New draft" card instead of an editor
• User must click a button to get an editor
• Violates: "Always be ready to write" principle (Typefully, Notion, Linear)

Problem 3: Confusing Tabs

• "Writing" implies active work but shows a list
• Tab placement in sidebar feels buried
• No clear visual hierarchy

Design Principles

Always be ready to write. Never show an empty editor state.

When user lands on /post:

• If no drafts → Create new draft, show editor
• If drafts exist → Select most recent, show editor
• Editor is ALWAYS visible in center panel

Proposed Layout

┌────────────────────────────────────────────────────────────────────┐
│  ◀ Back    Content Studio                        [@hellno ▾]       │
├──────────────────────┬─────────────────────────────────────────────┤
│                      │                                             │
│  ┌────────────────┐  │  ┌────┐                                     │
│  │ + New Draft    │  │  │ 🧑 │  Start typing a new cast...         │
│  └────────────────┘  │  │    │  |                                  │
│                      │  └────┘                                     │
│  ──────────────────  │                                             │
│  ALL DRAFTS          │         (editor area - same as modal)       │
│  ──────────────────  │                                             │
│                      │  ┌──────────────────────────────────┐       │
│  ┌────────────────┐  │  │  [Embedded content preview]      │       │
│  │ Draft 1...     │  │  └──────────────────────────────────┘       │
│  │ 2 mins ago     │  │                                             │
│  └────────────────┘  │  ────────────────────────────────────────── │
│                      │                                             │
│  ┌────────────────┐  │  [🏠▾] [📷] [😊] [📅]    ○ 280   [+] [Cast] │
│  │ Draft 2...     │  │                                             │
│  │ 1 hour ago     │  │                                             │
│  └────────────────┘  │                                             │
│                      │                                             │
│  ──────────────────  ├─────────────────────────────────────────────┤
│  SCHEDULED (3)       │  ┌─────────────────────────────────────────┐│
│  ──────────────────  │  │  Queue Preview (optional)               ││
│                      │  │  Today: 2 posts | Tomorrow: 1 post      ││
│  ┌────────────────┐  │  └─────────────────────────────────────────┘│
│  │ 📅 Post 3...   │  │                                             │
│  │ Today 2:00 PM  │  │                                             │
│  └────────────────┘  │                                             │
│                      │                                             │
│  ──────────────────  │                                             │
│  PUBLISHED           │                                             │
│  ──────────────────  │                                             │
│                      │                                             │
└──────────────────────┴─────────────────────────────────────────────┘
     280px fixed              Flexible (fill remaining)

Key Changes

1. Remove Tabs, Use Collapsible Sections

• Replace: Writing | Scheduled | Published tabs
• With: ALL DRAFTS, SCHEDULED (3), PUBLISHED collapsible sections
• Each section shows count and can expand/collapse

2. Editor Always Visible

• Center panel ALWAYS shows editor
• Selecting a draft loads it into editor
• URL updates: /post?draft=<uuid>

3. Single "New Draft" Button

• Remove from header and center card
• Keep only in sidebar (above draft list)

4. Shared Components with Modal

Reuse these from #670 (Composer modal):

• ComposerEditor - Avatar + TipTap editor
• ComposerToolbar - Icon toolbar
• ComposerCharCount - Circular progress
• ComposerEmbedPreview - Embed display

Component Architecture

app/(app)/post/
├── page.tsx                        # Page orchestration
├── components/
│   ├── ContentStudioLayout.tsx     # Two/three column layout
│   ├── ContentStudioSidebar.tsx    # Left panel with sections
│   ├── DraftSectionGroup.tsx       # Collapsible section
│   ├── QueuePreviewPanel.tsx       # Optional right panel
│   └── MobileSidebarSheet.tsx      # Mobile navigation

Mobile Layout

On screens < 1024px:

• Sidebar becomes hamburger menu → slide-out sheet
• Editor takes full width
• Toolbar at bottom (thumb-friendly)

┌────────────────────────────┐
│  Content Studio    [≡]     │  ← Hamburger opens sidebar
├────────────────────────────┤
│                            │
│  ┌────┐                    │
│  │ 🧑 │  Start typing...   │
│  └────┘                    │
│                            │
│  (full-width editor)       │
│                            │
├────────────────────────────┤
│  [🏠▾] [📷] [😊] [📅]      │
│              ○ 280  [Cast] │
└────────────────────────────┘

Acceptance Criteria

Layout

• Editor always visible (no empty state in center)
• Sidebar with collapsible sections: ALL DRAFTS, SCHEDULED, PUBLISHED
• Single "New Draft" button in sidebar
• URL updates on draft selection (/post?draft=<uuid>)

Behavior

• Selecting draft loads it into editor
• New draft button creates and selects draft
• Deleting selected draft selects next draft (or creates new)
• Changes auto-save to draft

Mobile

• Sidebar becomes slide-out sheet
• Editor takes full width
• Hamburger menu toggles sidebar

Shared Components

• Uses ComposerEditor from Feature: Composer modal redesign #670
• Uses ComposerToolbar from Feature: Composer modal redesign #670
• Uses ComposerCharCount from Feature: Composer modal redesign #670

Dependencies

• Depends on Bug: Draft store issues causing data loss and race conditions #667 (Draft store bug fixes)
• Depends on Refactor: Extract useComposerState hook for UI state management #669 (useComposerState hook) - optional, for consistency
• Depends on Feature: Composer modal redesign #670 (Composer modal) - for shared components

Related Issues

• Enables Feature: Thread composer with drag-and-drop reordering #666 (Thread composer) - will integrate thread mode into this page