feat: Hide keyword tags toggle

[AlexS54]

Description

Keyword Tags in the details page are now toggleable. State is saved in localStorage.
AI was used for the css on the button and for questions about code base conventions.

• Fixes Remove "tags" from UI at a global level? #2651

How Has This Been Tested?

Tested interactively on both Movies and TV. Screenshots attached.

Screenshots / Logs (if applicable)

Checklist:

• I have read and followed the contribution guidelines.
• Disclosed any use of AI (see our policy)
• I have updated the documentation accordingly.
• All new and existing tests passed.
• Successful build pnpm build
• Translation keys pnpm i18n:extract
• Database migration (if required)

Summary by CodeRabbit

• New Features

  • Added toggle functionality to show/hide keyword tags on movie and TV show details pages with persistent user preference.

• Refactor

  • Streamlined keyword display implementation across details components.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR introduces a reusable DetailsKeywordTags component that toggles keyword tag visibility on movie and TV show detail pages. The component persists the user's show/hide preference to localStorage, replacing inline keyword rendering in MovieDetails and TvDetails with a unified implementation. English translations for toggle labels are added.

Changes

Keyword Tags Toggle Component

Layer / File(s)	Summary
DetailsKeywordTags component src/components/DetailsKeywordTags/index.tsx	New React component with props contract, localized toggle button, localStorage-backed state that defaults to showing tags, and conditional rendering of keyword links to /discover/{mediaType}?keywords={keyword.id}.
Integration into MovieDetails and TvDetails src/components/MovieDetails/index.tsx, src/components/TvDetails/index.tsx	Replaces inline keyword-mapping logic in both detail views with DetailsKeywordTags component invocations, updates imports to include the new component.
English translations src/i18n/locale/en.json	Adds components.DetailsKeywordTags.hidekeywords and components.DetailsKeywordTags.showkeywords localization keys.

Sequence Diagram

sequenceDiagram
  participant Client as Client
  participant Component as DetailsKeywordTags
  participant Storage as localStorage
  participant Tags as Keyword Tags
  Client->>Component: Mount component
  Component->>Storage: Load showKeywordTags setting
  Storage-->>Component: showTags value (default true)
  Component->>Component: Initialize showTags state
  Component->>Client: Render toggle button
  Client->>Component: Click toggle button
  Component->>Component: Update showTags state
  Component->>Storage: Persist showTags to storage
  Component->>Tags: Conditionally render tag links
  Tags-->>Client: Display or hide keywords

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A toggle brings keywords to light,
Hide spoilers when they're not quite right,
Remember your choice in the store,
Details now clean, forevermore!

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat: Hide keyword tags toggle' directly summarizes the main change—adding a toggle to hide/show keyword tags on details pages, which is the primary feature in this PR.
Linked Issues check	✅ Passed	The PR successfully addresses issue #2651 by implementing a collapsible toggle for keyword tags with localStorage persistence, allowing users to hide spoilers.
Out of Scope Changes check	✅ Passed	All changes are focused on the keyword tag toggle feature: new component, integration into existing details pages, and translation strings—no unrelated modifications present.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/DetailsKeywordTags/index.tsx`:
- Around line 24-28: The component currently flashes tags because showTags
defaults to true then is corrected in useEffect; change initialization to read
persisted preference synchronously by replacing useState(true) with a lazy
initializer like useState(() => { if (typeof window === 'undefined') return
true; return window.localStorage.getItem('showKeywordTags') !== 'false'; }) in
DetailsKeywordTags, and remove the one-time useEffect that sets showTags (or
keep useEffect only to sync future changes to localStorage); reference the
showTags/setShowTags state and the useEffect in the file when making the change.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: d7d84de3-21b8-45a7-83bd-67f9c86f3c32

📥 Commits

Reviewing files that changed from the base of the PR and between 32169d9 and 24a0419.

📒 Files selected for processing (4)

• src/components/DetailsKeywordTags/index.tsx
• src/components/MovieDetails/index.tsx
• src/components/TvDetails/index.tsx
• src/i18n/locale/en.json