Skip to content

Rename 18+ to 19+ and redesign NSFW UI (#1209)#1222

Merged
realproject7 merged 3 commits into
mainfrom
task/1209-nsfw-19plus-redesign
May 17, 2026
Merged

Rename 18+ to 19+ and redesign NSFW UI (#1209)#1222
realproject7 merged 3 commits into
mainfrom
task/1209-nsfw-19plus-redesign

Conversation

@realproject7
Copy link
Copy Markdown
Owner

Summary

  • Adds a circled "19" badge on story cards (top-right) replacing the old inline badge
  • Adds a persistent 19+ toggle pill in the NavBar (next to logo) for quick NSFW toggling
  • Removes the redundant inline NSFW toggle from the desktop FilterBar (mobile filter sheet retains it)
  • Renames all user-facing "18+" references to "19+" across create page, terms, filter bar, and edit panel

Test plan

  • All 62 tests pass (including updated NavBar test mock)
  • Typecheck passes
  • Lint passes (0 errors)
  • Visual check: story cards show circled 19 badge top-right for NSFW stories
  • Visual check: NavBar pill toggles NSFW state and persists via localStorage
  • Visual check: FilterBar no longer shows inline NSFW toggle on desktop

🤖 Generated with Claude Code

- Add circled "19" badge on story cards (top-right position)
- Add 19+ toggle pill in NavBar next to logo
- Remove inline NSFW toggle from desktop FilterBar
- Rename all user-facing "18+" text to "19+"
- Fix NavBar test mock for useSearchParams/useRouter

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented May 17, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
plotlink Ignored Ignored May 17, 2026 0:25am

Request Review

Copy link
Copy Markdown
Owner Author

@realproject7 realproject7 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

RE2 Review: ✅ Approve

Well-structured rename + UI redesign. All user-facing 18+ → 19+ references covered.

Highlights:

  • NsfwBadge extracted as a separate component positioned top-right — clean separation from the left-side Badges cluster
  • Circled "19" design is distinctive and visually clear
  • NavBar toggle pill uses localStorage + URL param sync on the home page
  • FilterBar desktop inline toggle properly removed; mobile sheet retains it
  • Test mocks updated for new next/navigation hooks

Minor non-blocking notes:

  1. Indentation on line ~112 of StoryCard.tsx: NsfwBadge has extra indentation vs its sibling Badges (cosmetic only, not functional)
  2. On initial page load, if localStorage has plotlink_nsfw=1 but URL lacks ?nsfw=1, the pill shows active but content may not show NSFW until toggled. This is likely pre-existing behavior from the old system — not introduced by this PR.

No blockers. CI pending at review time.

Copy link
Copy Markdown
Collaborator

@project7-interns project7-interns left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verdict: REQUEST CHANGES

Summary

The rename and discover-card badge work are mostly in place, but #1209 requires the circled 19 badge on the story detail cover as well, and the new global NavBar toggle does not actually apply the NSFW preference outside the home route.

Findings

  • [medium] Story detail cover does not show the circled 19 badge for NSFW stories.

    • File: src/app/story/[storylineId]/page.tsx:373
    • Suggestion: Overlay the same top-right circled 19 badge on the detail cover frame when storyline.is_nsfw is true, for both uploaded covers and fallback covers.
  • [medium] The NavBar 19+ toggle only updates the URL on /, so it does not apply globally as required. For example, public profile story queries still hard-filter is_nsfw = false, and toggling the global pill while on /profile/... only writes localStorage without updating the visible list.

    • File: src/components/NavBar.tsx:26
    • Suggestion: make the shared preference observable by pages that filter NSFW content, or otherwise ensure profile/discover consumers react to the global preference. At minimum, profile story queries should honor the saved 19+ preference for non-owner views.

Decision

Requesting changes because both points are acceptance criteria in #1209. CI was still pending at review time.

#1209)

- Export NsfwBadge and overlay on story detail cover (both uploaded and fallback)
- Profile pages now respect global 19+ localStorage preference for non-owner views
- Include showNsfw in query keys for proper cache invalidation

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Copy link
Copy Markdown
Collaborator

@project7-interns project7-interns left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verdict: REQUEST CHANGES

Summary

The story detail cover badge is fixed, but the global 19+ preference still is not wired in a reactive way for profile pages. Reading localStorage during render and adding it to a query key does not make profile queries update when the NavBar toggle changes localStorage.

Findings

  • [medium] Profile pages still do not react to the global NavBar 19+ toggle while already on a profile route.
    • File: src/app/profile/[address]/page.tsx:709
    • Suggestion: store the 19+ preference in reactive client state and subscribe to a shared event/store, or have the NavBar dispatch an event after writing localStorage that profile tabs listen to and use to update state/query keys. As written, const showNsfw = localStorage.getItem(...) === "1" is only read during renders that profile already happens to perform, so clicking the NavBar pill on /profile/... will not reliably refetch or reveal/hide NSFW stories.

Decision

Requesting changes because the remaining blocker is still part of #1209's “toggle applies globally” acceptance criterion. CI was pending at review time.

- Extract useNsfwPreference hook with custom event dispatch
- NavBar toggle dispatches 'plotlink:nsfw-change' event on state change
- Profile StoriesTab/PortfolioTab subscribe to the event and re-query
- Query keys include showNsfw for proper cache invalidation

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Copy link
Copy Markdown
Collaborator

@project7-interns project7-interns left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verdict: APPROVE

Summary

The requested fixes are in place. The story detail cover now uses the circled 19 badge, and the 19+ preference is reactive across NavBar/profile consumers through the shared useNsfwPreference hook and query keys.

Findings

  • None blocking.

Decision

Approved. The prior RE1 findings are resolved, and both lint-and-typecheck and e2e are green on the updated commit.

Copy link
Copy Markdown
Owner Author

@realproject7 realproject7 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

RE2 Re-review: ✅ Approve (maintained)

Both RE1 findings properly resolved:

  1. Story detail cover now shows circled "19" badge via exported NsfwBadge
  2. useNsfwPreference hook with custom event dispatch makes the toggle fully reactive across pages — profile tabs subscribe and include showNsfw in query keys for proper cache invalidation. Clean pattern.

No new concerns.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants