[Docs]: Add version selector to VersionBadge

[modulareverything]

Adds dropdown functionality to the VersionBadge, allowing the user to select between versions.

Uses DOCS_LATEST_VERSION, DOCS_VERSIONS from @/utils/global-data

I added a SUFFIX key to the VersionType for "latest" and "stable". This is optional and could be removed if it's gonna F with anything else on the site I'm unaware of, but it does give us an easy way of giving the user more context around the releases (v8 = "stable").

This is my first PR, so let me know if you'd like me to change anything here. Otherwise, it's pretty straightforward and follows a common pattern.

[davidjerleke]

Thanks a lot for your contribution @modulareverything — it's really appreciated, and contributions like this are much needed in this project 🙌.

I have a few minor comments and suggestions, but overall this is a great step forward.

One thing I’m not entirely sure about is whether using a <select> element for navigation is fully acceptable from an accessibility standpoint. That said, this is still a solid improvement since it allows users to easily switch between documentation versions, which wasn’t possible before.

Also, some pages won’t have a 1:1 mapping between versions and may result in a 404. For example, /docs/plugins/accessibility doesn’t exist in /docs/v8/plugins/accessibility since v8 doesn’t include that plugin. You can decide whether to handle that in this PR or leave it for a follow-up — either way works, as this is definitely a step in the right direction.

Again, thanks!

[davidjerleke]

Suggested change

	padding: 0.6rem ${SPACINGS.THREE};
	padding: ${SPACINGS.ONE} ${SPACINGS.THREE};

[davidjerleke]

Let’s start loading the route here to maintain the strong INP score the website currently has 🙂:

Suggested change

	if (nextPathname === pathname) return
	if (nextPathname === pathname) return
	dispatch(setRoutesLoading(true))

[davidjerleke]

We could reuse existing helpers to achieve the same result—see prefixSlugWithDocs() and joinSlugs.

function getVersionPathname(pathname = '', major: number): string {
  const versionPrefix = major === DOCS_LATEST_VERSION.MAJOR ? '' : `v${major}`
  const versionAndSubPath =  joinSlugs(versionPrefix, ...getDocsSubPath(pathname))
  return prefixSlugWithDocs(versionAndSubPath)
}

[davidjerleke]

An alternative approach is to use a regex like this. There’s no need to change it, though — feel free to choose whichever option you find more readable.

const DOCS_WITH_VERSION_REGEX = /^\/docs(?:\/v\d+)?/

function getDocsSubPath(pathname = ''): string[] {
  if (!pathname.startsWith('/docs')) return []
  return pathname
    .replace(DOCS_WITH_VERSION_REGEX, '')
    .split('/')
    .filter(Boolean)
}