[#1224] Redesign 19+ toggle as round circle icon next to logo

[realproject7]

Summary

• Replaces the text pill "19+" toggle with a compact round circle icon (20×20px) showing "19"
• Active state: red filled circle (bg-red-600) with white text — matches TopToon reference
• Inactive state: muted gray circle (bg-neutral-700) with subtle text
• Adds aria-pressed attribute for accessibility
• Positioned immediately right of the "PlotLink" logo text in NavBar
• Works on both desktop and mobile nav layouts

Test plan

• Verify round "19" icon appears next to PlotLink logo on desktop
• Verify round "19" icon appears next to PlotLink logo on mobile
• Click toggles between gray (off) and red (on) states
• Toggling on homepage updates URL to include ?nsfw=1
• Preference persists in localStorage across page reloads
• No duplicate toggle in FilterBar or elsewhere

Fixes #1224

🤖 Generated with Claude Code

[vercel]

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

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
plotlink	Ignored		May 18, 2026 4:41am

[project7-interns]

Verdict: REQUEST CHANGES

Summary

The visual styling of the toggle is moving in the right direction, but the layout still fails the main placement requirement. The button remains a separate flex child in a justify-between navbar, so it will be spaced away from the logo rather than immediately adjacent to the PlotLink text.

Findings

• [high] The 19 icon is not guaranteed to sit immediately to the right of the PlotLink logo text.
  • File: src/components/NavBar.tsx:69
  • Suggestion: Group the logo link and the 19 button in a left-side flex wrapper, or otherwise make the button part of the logo cluster, so the layout is [P logo] PlotLink [19 circle icon] on both desktop and mobile instead of a separately distributed navbar item.

Decision

Request changes because the PR does not satisfy the acceptance criterion requiring the icon to be positioned immediately right of the PlotLink logo text in the NavBar.

[realproject7]

Reviewer 2 — APPROVE

Clean, minimal diff (7 additions / 6 deletions). Matches the TopToon reference well:

• Circle sizing: h-5 w-5 (20px) with flex-shrink-0 — correct for a compact badge next to the logo. Won't collapse in tight flex layouts.
• Active state: bg-red-600 text-white matches the reference red circle. Intentionally diverges from the green accent — appropriate for a content-warning toggle.
• Inactive state: bg-neutral-700 text-neutral-400 with hover states — matches the muted gray in reference image 1.
• Text: "19" (not "19+") fits the smaller circle and matches the reference.
• Accessibility: aria-pressed addition is a nice touch.
• Patch bump: 1.29.1 → 1.29.2 per versioning policy.

No issues found.

[realproject7]

Reviewer 2 — re-review APPROVE

Fix looks correct: wrapping logo + 19+ button in a shared flex container ensures they stay adjacent under justify-between. No new issues.

[project7-interns]

Verdict: APPROVE

Summary

The follow-up fix groups the PlotLink logo and 19 icon in a shared flex container, so the icon now sits immediately next to the logo text as required. The round gray/off and red/on button styling, click handler, persisted preference path, and lack of duplicate toggle match the issue scope.

Findings

• None.

Decision

Approve. The previous placement blocker is resolved and the PR satisfies the acceptance criteria for issue #1224.