Skip to content

Cartoon UX: page-by-page cleanup of workflow chrome and action hierarchy #502

Description

@realproject7

Problem

A page-by-page review of the cartoon routes shows the same global workflow chrome appearing on pages with different jobs. This makes each page feel less specific and wastes vertical space.

Observed routes on http://localhost:7777/ with 신의 세포:

  • Progress: top workflow nav plus persistent-looking top Next Action card, then the actual progress sections.
  • Story Info: top Next Action card pushes the metadata form down, even though the page's primary task is editing metadata and cover info.
  • Whitepaper: same cartoon nav/header structure before document reading/editing.
  • Genesis / Ep 1: top action card plus repeated technical/help/finish blocks before the cut work area.
  • Episodes: top Next Action card consumes space above the sparse episode list.
  • Publish: top Next Action card duplicates publish/readiness CTAs; publish checklist and readiness cards repeat state already shown elsewhere.

Goal

Give each cartoon page a page-specific information hierarchy while keeping one consistent bottom-right Next Action CTA.

Route-Specific Expectations

Progress

[Story title + compact status]
[Production timeline/checklist overview]
[Issues needing attention]
                         [Next Action CTA bottom-right]

Story Info

[Story metadata form starts near top]
[Cover controls near metadata]
[Save Story Info]
                         [Next Action CTA bottom-right if useful]

Whitepaper / Genesis Text Preview

[Document toolbar: Back · file · status · chars]
[Preview/Edit tabs]
[Document content]
                         [Next Action CTA bottom-right]

Episodes

[Episode list / sequence controls]
[Episode readiness summaries]
                         [Next Action CTA bottom-right]

Publish

[Publish readiness blockers]
[Preview / publish controls]
[Technical details collapsed]
                         [Next Action CTA bottom-right]

Requirements

  • Audit all cartoon routes for duplicated global workflow chrome.
  • Keep page-specific primary actions near the content they affect.
  • Collapse technical/debug controls by default on user-facing workflow pages.
  • Ensure each route has one obvious primary action and no competing duplicated action cards.
  • Verify route behavior at laptop-sized viewport, not only large desktop.

Acceptance Criteria

  • Each cartoon route has a clear first-screen primary purpose.
  • The global top Next Action card is gone or replaced by a non-intrusive bottom-right CTA.
  • Technical/debug sections are collapsed by default unless the user explicitly opens them.
  • Publish page no longer duplicates the same production checklist already shown in Progress/Cuts except through an expandable details view.
  • Visual QA notes are attached to the implementation PR with screenshots or measured viewport positions for the main cartoon routes.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions