fix(ui): show large-file error on navigation

[farah-bot]

🔗 Linked issue

fixes #3125

🧭 Context

navigating from a previewable file to a file that is too large still showed the previous file until refresh.

📚 Description

clears the previous file content when the file url changes, so the large file error appears immediately during navigation.
tested manually by navigating from README.md to index.d.ts.

before

before.mp4

after

after.mp4

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview	Aug 5, 2026 7:45am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Aug 5, 2026 7:45am
npmx-lunaria	Ignored		Aug 5, 2026 7:45am

[coderabbitai]

📝 Walkthrough

Summary by CodeRabbit

• Bug Fixes
  • File contents are now cleared when navigating between different files, preventing outdated content from being displayed while new content loads.

Walkthrough

The package code page now clears loaded file content when the file URL changes before it fetches the new content.

Changes

File content navigation

Layer / File(s)	Summary
Clear content before fetching app/pages/package-code/.../[...filePath].vue	The file-content fetch exposes clearFileContent, disables automatic URL watching, and retains manual execution. The URL watcher clears existing content before fetching content for the new URL.

Possibly related PRs

• npmx-dev/npmx.dev#3120: Both changes modify file-content loading in the package code page.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The change clears stale file content when the URL changes, so the large-file error can render during navigation as required by issue #3125.
Out of Scope Changes check	✅ Passed	The change is limited to file-preview navigation behaviour and directly supports issue #3125.
Title check	✅ Passed	The title clearly summarises the main change: showing the large-file error during navigation.
Description check	✅ Passed	The description directly explains the navigation issue, the content-clearing fix, and the manual test performed.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[github-actions]

Hello! Thank you for opening your first PR to npmx, @farah-bot! 🚀

Here’s what will happen next:

1. Our GitHub bots will run to check your changes.
   If they spot any issues you will see some error messages on this PR.
   Don’t hesitate to ask any questions if you’re not sure what these mean!

2. In a few minutes, you’ll be able to see a preview of your changes on Vercel

3. One or more of our maintainers will take a look and may ask you to make changes.
   We try to be responsive, but don’t worry if this takes a few days.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[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 `@app/pages/package-code/`[[org]]/[packageName]/v/[version]/[...filePath].vue:
- Around line 179-180: Disable reactive URL watching in the useFetch call that
creates clearFileContent by adding the watch: false option alongside immediate:
false. Preserve the existing explicit watch handler as the sole owner of
clearing and fetching file content.

🪄 Autofix

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: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 79242046-8b5a-4905-ba5b-fa3ecf04ffce

📥 Commits

Reviewing files that changed from the base of the PR and between ae1e982 and 82496b9.

📒 Files selected for processing (1)

• app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue

[ghostdevv]

ty!

[github-actions]

Thanks for your first contribution, @farah-bot! 💪

We'd love to welcome you to the npmx community. Come and say hi on Discord! And once you've joined, visit npmx.wamellow.com to claim the contributor role.