feat: add sidebar toggle to package code browser

[jfernsio]

🔗 Linked issue

Resolves #2058

🧭 Context

The package code browser previously had a fixed file tree sidebar that took up space even when not needed. This change adds a simple toggle to show/hide the sidebar, giving users better control over screen space on the code page

📚 Description

I implemented a sidebar toggle for the package code browser instead of full resizability. The toggle is simple, persistent, and matches the existing UI patterns.

Changes made:

• Added a reactive computed property that integrates with settings.sidebar.collapsed to remember the user's sidebar visibility preference across visits.
• Added a toggle button in the code page header (visible on medium screens and up, where the sidebar normally appears).
• Updated the sidebar to use v-show for conditional visibility based on the toggle state.
• Used Lucide icons: sidebar-open when collapsed, sidebar-close when expanded.
• Added translation keys for "Show sidebar" and "Hide sidebar" in the English locale file.

Before :

After :

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Apr 1, 2026 9:20am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Apr 1, 2026 9:20am
npmx-lunaria	Ignored		Apr 1, 2026 9:20am

[github-actions]

Hello! Thank you for opening your first PR to npmx, @jfernsio! 🚀

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.

[github-actions]

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the ignoreKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

File	Note
i18n/locales/en.json	Source changed, localizations will be marked as outdated.

Warnings reference

Icon	Description
🔄️	The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.

[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]

📝 Walkthrough

Walkthrough

This pull request implements a sidebar toggle feature for the package code viewer. The Vue component now manages sidebar visibility state through computed properties linked to user settings, with a new button in the header to toggle between collapsed and expanded states. The button includes dynamic icons and translations based on the sidebar state. Supporting translation entries for "Show sidebar" and "Hide sidebar" have been added to the English locale file.

Suggested labels

front

Suggested reviewers

• serhalp
• danielroe
• alexdln

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description clearly relates to the changeset, explaining the sidebar toggle implementation with context, changes made, and before/after screenshots.
Linked Issues check	✅ Passed	The PR successfully addresses issue #2058 by implementing sidebar toggle functionality, allowing users to show/hide the file tree sidebar and control screen space.
Out of Scope Changes check	✅ Passed	All changes are directly related to implementing the sidebar toggle feature: sidebar state management, UI toggle button, conditional rendering, and translation keys.

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

✨ 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 and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue (1)

389-390: Use global focus-visible styling for this button instead of inline utility classes.

On Line 389, focus-visible:outline-accent/70 should be removed to follow the project’s shared button/select focus pattern.

Suggested diff

-              class="hidden md:flex items-center justify-center w-8 h-8 text-fg-subtle hover:text-fg transition-colors focus-visible:outline-accent/70 rounded"
+              class="hidden md:flex items-center justify-center w-8 h-8 text-fg-subtle hover:text-fg transition-colors rounded"

Based on learnings, focus-visible styling for button/select should be applied globally via app/assets/main.css, not per-element utility classes.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 21d559b3-820f-46e9-91d7-648a9ccb385a

📥 Commits

Reviewing files that changed from the base of the PR and between 8d9fa5c and 60a722b.

📒 Files selected for processing (2)

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