Package Version pages

[Oksamies]

Look at the commits for more information

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch 09-18-add_package_version_pages

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

• Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
• Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

---

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.}

[Oksamies]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• Package Version pages #1547 👈 (View in Graphite)
• Update thunderstore-api to match up coming cyberstorm API changes #1542 : 1 other dependent PR (#1543 )
• Add forced currentUser update to settings and teams pages #1535
• Add a option to force currentUser update to getSessionCurrentUser #1541
• Ensure current user is updated #1540
• Fix session revalidation corner case #1539
• Fix setSsion stale value set #1538
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

[graphite-app]

The useEffect hook depends on the version variable but it's not included in the dependency array. This could lead to stale closures if version changes after the initial render. Consider adding version to the dependency array:

}, [version]);

This ensures the effect runs when version changes, keeping the displayed upload time in sync with the current version data.

Suggested change

	useEffect(() => {
	if (!startsHydrated.current && isHydrated) return;
	if (isPromise(version)) {
	version.then((versionData) => {
	setFirstUploaded(
	<RelativeTime
	time={versionData.datetime_created}
	suppressHydrationWarning
	/>
	);
	});
	} else {
	setFirstUploaded(
	<RelativeTime
	time={version.datetime_created}
	suppressHydrationWarning
	/>
	);
	}
	}, []);
	useEffect(() => {
	if (!startsHydrated.current && isHydrated) return;
	if (isPromise(version)) {
	version.then((versionData) => {
	setFirstUploaded(
	<RelativeTime
	time={versionData.datetime_created}
	suppressHydrationWarning
	/>
	);
	});
	} else {
	setFirstUploaded(
	<RelativeTime
	time={version.datetime_created}
	suppressHydrationWarning
	/>
	);
	}
	}, [version]);

Spotted by Diamond



Is this helpful? React 👍 or 👎 to let us know.

[graphite-app]

The title attribute is being used incorrectly on the meta tag. For page titles, use the standard <title> element instead. If using a meta tag for title information, the proper attribute would be name="title".

Consider replacing:

<meta
  title={`${formatToDisplayName(
    resolvedValue[0].full_version_name
  )} | Thunderstore - The ${resolvedValue[1].name} Mod Database`}
/>

with:

<title>
  {formatToDisplayName(resolvedValue[0].full_version_name)} | Thunderstore - The {resolvedValue[1].name} Mod Database
</title>

This ensures proper SEO and browser display of the page title.

Suggested change

	<meta
	title={`${formatToDisplayName(
	resolvedValue[0].full_version_name
	)} | Thunderstore - The ${resolvedValue[1].name} Mod Database`}
	/>
	<title>{`${formatToDisplayName(
	resolvedValue[0].full_version_name
	)} | Thunderstore - The ${resolvedValue[1].name} Mod Database`}</title>

Spotted by Diamond



Is this helpful? React 👍 or 👎 to let us know.