Update Topics page header navigation

[marcellamaki]

Summary

• Updates tabs for consistency, and updates routes to support <HeaderTabs /> usage
• Tabs fix shifting hover state
• Ensures no thumbnail <> tab overlay on mobile (desktop already fixed)

References

Fixes #8630

Reviewer guidance

• Any problems/unhandled edge cases with the routing/redirect that I missed?

---

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Critical and brittle code paths are covered by unit tests

PR process

• PR has the correct target branch and milestone
• PR has 'needs review' or 'work-in-progress' label
• If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• If this is an important user-facing change, PR or related issue has a 'changelog' label
• If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[indirectlylit]

Glad this was a straight-forward drop-in replacement!

Preferably we'd move this to core API spec (to avoid cross-plugin references) or even KDS (to make this component fully documented and reusable across products)

I'll let you and @rtibbles decide whether that should happen now or later

[rtibbles]

I'm going to vote for later. Thanks to our updated string machinery, cross plugin imports like this are less of a concern, but the long import paths are not great.

Also good to think about the contrast between code used in common between apps vs things we want to expose as a common API.

I think most of our core API spec is the former at the moment, whereas it should be exclusively the latter.

[indirectlylit]

This is a big improvement, nice job!

The only thing I'm noticing (aside from #8627) is that the header tabs behave a little strangely. At smaller sizes the 'Search' tab launches the side panel which seems incorrect:

The tabs also initially start out with neither selected:

I'm happy to open a follow-up issue for this if you'd like

[rtibbles]

I think there's a related issue here: #8847

[indirectlylit]

updated that issue