fix: package code page improvements

[alex-key]

🔗 Linked issue

Resolves#1942

🧭 Context

Code page has multiple minor issues (including mobile view). Also we want to align with existing Figma mocks.

📚 Description

• added container toggle button (standard / full-width)
• separated two components for better code maintenance: CodeHeader, CodeSkeletonLoader
• all buttons with text replaced with icon buttons
• mobile: breadcrumbs (file path) now has dropdown with all segments except the last one
• loading state fixed not to shoe empty state in page load
• other minor visual fixes

Screenshots

[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 10:31pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Apr 1, 2026 10:31pm
npmx-lunaria	Ignored		Apr 1, 2026 10:31pm

[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/ar.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/az-AZ.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/bg-BG.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/bn-IN.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/cs-CZ.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/de.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/en.json	Source changed, localizations will be marked as outdated.
i18n/locales/es.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/fr-FR.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/hi-IN.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/hu-HU.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/id-ID.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/it-IT.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/ja-JP.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/kn-IN.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/mr-IN.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/nb-NO.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/ne-NP.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/pl-PL.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/pt-BR.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/ru-RU.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/ta-IN.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/te-IN.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/tr-TR.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/uk-UA.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/vi-VN.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/zh-CN.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/zh-TW.json	Localization changed, will be marked as complete. 🔄️

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

❌ Patch coverage is 71.91011% with 25 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/Code/Header.vue	69.86%	19 Missing and 3 partials ⚠️
app/composables/useSettings.ts	66.66%	2 Missing ⚠️
app/components/Code/MobileTreeDrawer.vue	50.00%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

This pull request refactors the package code page UI by extracting header logic (breadcrumbs, clipboard actions, markdown view mode toggles, raw file links) into a new CodeHeader component. It introduces CodeSkeletonLoader for pending file-load states, adds fullscreen container toggle functionality via useCodeContainer composable, exposes a toggle method on MobileTreeDrawer for programmatic control, adds a flex-split UnoCSS shortcut, and removes "root" and "raw" localisation keys whilst adding new action-specific labels (copy_content, toggle_container, open_raw_file, open_path_dropdown) across all i18n locales and schema.

Possibly related PRs

• fix: clickable rows & mobile scrollbar overflow & dynamic line width #1080: Modifies the same Code component files (DirectoryListing.vue, Viewer.vue) and package-code page with overlapping UI/layout changes.
• fix(ui): resolve dropdown double arrow and icon stacking issues #1387: Modifies Code/MobileTreeDrawer.vue with header z-index adjustments related to mobile drawer rendering.
• fix(i18n): add missing translations for hi-IN #2254: Updates i18n/locales/hi-IN.json with additional translation key changes affecting the same locale file.

Suggested labels

front

Suggested reviewers

• alexdln
• ghostdevv
• graphieros

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	❓ Inconclusive	The PR includes extensive i18n locale file changes (removing code.root and code.raw keys) and hi-IN.json with broader restructuring that appear tangential to the primary #1942 objectives, though related to UI label alignment.	Clarify whether the widespread i18n changes (especially hi-IN.json restructuring and brand/logo_menu additions) are necessary for #1942 or represent separate refactoring work that should be split into a distinct PR.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description is clearly related to the changeset, detailing added components, container toggle, mobile breadcrumb dropdown, loading state fixes, and icon button replacements.
Linked Issues check	✅ Passed	The PR addresses all primary objectives from issue #1942: added container toggle (standard/full-width), replaced text buttons with icon buttons, implemented mobile breadcrumb dropdown, fixed loading state to show skeleton loaders instead of empty state, and separated components.

_{✏️ 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]

Actionable comments posted: 5

🧹 Nitpick comments (1)

app/components/Code/Header.vue (1)

212-216: Drop the inline focus-visible utility from these tab buttons.

This override fights the shared button focus treatment the repo already applies globally.

Suggested fix

- class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 focus-visible:outline-accent/70 inline-flex items-center gap-1.5"+ class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 inline-flex items-center gap-1.5"

Based on learnings, focus-visible styling for buttons and selects is applied globally via main.css with button:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 3e125d40-6732-4e45-bc29-aec26bc64cb9

📥 Commits

Reviewing files that changed from the base of the PR and between 7f2fc1a and dfd662e.

📒 Files selected for processing (9)

• app/components/Code/DirectoryListing.vue
• app/components/Code/Header.vue
• app/components/Code/MobileTreeDrawer.vue
• app/components/Code/SkeletonLoader.vue
• app/components/Code/Viewer.vue
• app/composables/useSettings.ts
• app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
• i18n/locales/en.json
• uno.config.ts

[ghostdevv]

(gonna mark as draft as you work on it, feel free to mark as ready when you want a review!)

[coderabbitai]

Actionable comments posted: 1

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 67cb48ea-c1f8-4b52-9336-96c0ac934347

📥 Commits

Reviewing files that changed from the base of the PR and between dfd662e and 40071d0.

📒 Files selected for processing (4)

• app/components/Code/Header.vue
• app/composables/useSettings.ts
• i18n/locales/en.json
• test/nuxt/a11y.spec.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• app/components/Code/Header.vue

[alex-key]

@alexdln appreciate a review from you

[coderabbitai]

Actionable comments posted: 5

🧹 Nitpick comments (2)

test/nuxt/a11y.spec.ts (1)

1163-1191: Add one loading-state a11y case for CodeHeader.

This test covers the loaded file state well; adding a loading: true scenario would better guard the loading UX changes in this PR.

As per coding guidelines "Write unit tests for core functionality using vitest."

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

336-336: Consider documenting the height calculation.

The h-[calc(100vh-10.5rem)] relies on a specific header height. If header dimensions change, this could break. A brief comment explaining the calculation basis (e.g., /* 10.5rem = sticky header + tabs */) would aid future maintenance.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 22686175-ed49-465f-a24a-b56f1fdc9dea

📥 Commits

Reviewing files that changed from the base of the PR and between 40071d0 and 1d9e72a.

📒 Files selected for processing (32)

• app/components/Code/Header.vue
• app/components/Code/SkeletonLoader.vue
• app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
• i18n/locales/ar.json
• i18n/locales/az-AZ.json
• i18n/locales/bg-BG.json
• i18n/locales/bn-IN.json
• i18n/locales/cs-CZ.json
• i18n/locales/de-DE.json
• i18n/locales/en.json
• i18n/locales/es.json
• i18n/locales/fr-FR.json
• i18n/locales/hi-IN.json
• i18n/locales/hu-HU.json
• i18n/locales/id-ID.json
• i18n/locales/it-IT.json
• i18n/locales/ja-JP.json
• i18n/locales/kn-IN.json
• i18n/locales/mr-IN.json
• i18n/locales/nb-NO.json
• i18n/locales/ne-NP.json
• i18n/locales/pl-PL.json
• i18n/locales/pt-BR.json
• i18n/locales/ru-RU.json
• i18n/locales/ta-IN.json
• i18n/locales/te-IN.json
• i18n/locales/tr-TR.json
• i18n/locales/uk-UA.json
• i18n/locales/zh-CN.json
• i18n/locales/zh-TW.json
• i18n/schema.json
• test/nuxt/a11y.spec.ts

✅ Files skipped from review due to trivial changes (2)

• i18n/locales/en.json
• app/components/Code/SkeletonLoader.vue

🚧 Files skipped from review as they are similar to previous changes (1)

• app/components/Code/Header.vue

[alex-key]

@ghostdevv Why is it draft again?

[alex-key]

Screen.Recording.2026-03-28.111509.mp4
the frame rate doesn't show it properly, but it's every time from a narrow container to a wide one (looks like in video it's clear only twice)

Fixed

[alexdln]

lgtm, thanks ❤️