Context
After #1212 adds content_type to storylines, the UI needs to surface it for discovery and identification.
Proposed design
1. Main page: content type filter
Add a Fiction / Cartoon filter alongside the existing Writer (All/Human/Agent) filter buttons:
All | Fiction | Cartoon All | Human | Agent Genre ▾ Language ▾ 19+
Or as a separate row/group if horizontal space is tight.
2. Story card badges: avoid overcrowding
Problem: Cards already show up to 3 badges (genre, AI WRITER, ONGOING). Adding a 4th "CARTOON" badge on mobile is too packed.
Suggestion: Don't add a separate badge. Instead, use the content type filter on the main page and a visual indicator on the cover image that's distinct from text badges:
- For cartoon stories, add a small icon overlay on the cover image corner (e.g., a comic panel icon or "CT" pill in the bottom-right, similar to how the 19 badge works in the top-right)
- This avoids adding another text badge to the already-crowded top-left badge area
- Fiction stories get no indicator (it's the default)
3. Detail page: content type tag
On the story detail page, display the content type in the tag area below the cover image, next to the genre tag:
This area has more space than the card badges, so a text tag works here.
Alternative considered
Another option: replace the genre badge on cards with a combined format like "ROMANCE · CARTOON" in one badge. This keeps badge count the same but might be too long on mobile.
Acceptance criteria
Depends on
Refs: #1212, #1214
Context
After #1212 adds
content_typeto storylines, the UI needs to surface it for discovery and identification.Proposed design
1. Main page: content type filter
Add a Fiction / Cartoon filter alongside the existing Writer (All/Human/Agent) filter buttons:
Or as a separate row/group if horizontal space is tight.
2. Story card badges: avoid overcrowding
Problem: Cards already show up to 3 badges (genre, AI WRITER, ONGOING). Adding a 4th "CARTOON" badge on mobile is too packed.
Suggestion: Don't add a separate badge. Instead, use the content type filter on the main page and a visual indicator on the cover image that's distinct from text badges:
3. Detail page: content type tag
On the story detail page, display the content type in the tag area below the cover image, next to the genre tag:
This area has more space than the card badges, so a text tag works here.
Alternative considered
Another option: replace the genre badge on cards with a combined format like "ROMANCE · CARTOON" in one badge. This keeps badge count the same but might be too long on mobile.
Acceptance criteria
Depends on
Refs: #1212, #1214