fix: close manage movie sidebar without back reopening

[john-fletcher]

Fix media manage sidebar history handling so closing it does not create extra browser history entries that reopen the panel when clicking the back button. Use router.replace when dismissing the movie/TV manage slide panel, add replace support to shared badge links, and have status badge manage links use replace only when already on the same media details page. Added a Cypress regression test that verifies opening ?manage=1, closing the panel, and pressing the back button keeps the panel closed instead of reopening it.

AI Disclaimer:
I used GPT 5.3-Codex in order to gain context of the project. I had it come up with a plan to fix the bug I have encountered. I then verified, implemented, and tested

Description

Updated the ManageSlideOver component in Movie/TVDetails to use router.replace so it does not add the ?manage=1 query parameter to history. This is better as opening the slide over is more of a component state change and not a navigation change.

Added a new replace prop to the Badge component in order to prevent duplicate same page history entries when toggling manage from a status badge on the same page. This can be done from Deleted or Requested tag. This was needed in order to make the back button act intuitively where pressing it once actually navigated to the previous page.

Added a new cypress test to ensure proper states.

How Has This Been Tested?

Tested manually by going to a specific movie (ex: http://localhost:5055/movie/1387382). Requested the movie and clicked the requested badge to open the slide over. Closed it and pressed back to go back to previous page without re-opening the slide over.

Added Cypress Test.

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

• Bug Fixes
  • Manager panel now correctly maintains closed state when navigating back in browser history
  • Improved navigation behavior when closing content management interfaces to prevent unexpected reopening
• Tests
  • Added integration test to verify manager panel behavior is consistent during back navigation

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0d40a42 and 14a596f.

📒 Files selected for processing (5)

• cypress/e2e/movie-details.cy.ts
• src/components/Common/Badge/index.tsx
• src/components/MovieDetails/index.tsx
• src/components/StatusBadge/index.tsx
• src/components/TvDetails/index.tsx

---

📝 Walkthrough

Walkthrough

These changes implement a navigation replacement strategy for the manager panel closing behavior across movie and TV details pages. The Badge component and StatusBadge component are updated to support link replacement, and navigation handlers in MovieDetails and TvDetails now use router.replace instead of router.push. A new Cypress test verifies the panel doesn't reopen after closing and back-navigating.

Changes

Cohort / File(s)	Summary
Navigation Core Changes src/components/MovieDetails/index.tsx, src/components/TvDetails/index.tsx	Changed ManageSlideOver close handlers from router.push to router.replace to prevent history stack growth when closing the manager panel.
Badge Component Updates src/components/Common/Badge/index.tsx, src/components/StatusBadge/index.tsx	Added optional replace prop to Badge component and StatusBadge. StatusBadge computes mediaLinkReplace by comparing current router path with target media link path, enabling conditional link replacement behavior.
E2E Test Addition cypress/e2e/movie-details.cy.ts	Added test case verifying that the manager panel remains closed after navigation back, confirming URL search parameters are cleared and close button is absent post-closure.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A panel closes with a gentle sway,
Replace the path, don't push away,
No reopening tricks when back we go,
The history flows so smooth and slow. 🌙✨

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: fixing history handling so closing the manage sidebar doesn't reopen it on back navigation.

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

---

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

[Copilot]

Pull request overview

Fixes browser history behavior around the Movie/TV “Manage” slide-over so closing the panel doesn’t add a history entry that causes the panel to reopen when users press the back button.

Changes:

• Use router.replace (instead of router.push) when closing ManageSlideOver on Movie and TV details pages.
• Add a replace?: boolean prop to the shared Badge component and use it from StatusBadge to avoid same-page duplicate history entries when opening ?manage=1.
• Add a Cypress regression test covering open ?manage=1 → close → back navigation behavior.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/components/TvDetails/index.tsx	Close handler now uses router.replace to prevent “back reopens panel” behavior.
src/components/MovieDetails/index.tsx	Same as TV details: replace on close to avoid extra history entries.
src/components/StatusBadge/index.tsx	Uses Badge replace when linking to manage on the same details page to prevent duplicate same-page history entries.
src/components/Common/Badge/index.tsx	Adds replace prop passthrough to Next.js Link.
cypress/e2e/movie-details.cy.ts	Adds regression coverage for closing manager panel and using browser back.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[gauthier-th]

I find this implementation very messy.

You could have done that in a much easier way, with only a few changes:

• Set showManager as false by default here:

  const [showManager, setShowManager] = useState(false);

• Modify the useEffect hook to show the sidebar here only when query.manage === '1', and then remove this query param with router.replace.

  useEffect(() => {
    if (router.query.manage === '1') {
      setShowManager(true);
    }
    router.replace({
      pathname: router.pathname,
      query: { movieId: router.query.movieId },
    });
  }, [router.query.manage]);

Same thing in TvDetails, and that's it.