fix: package comparison broken on org and user pages

[MatteoGabriele]

🔗 Linked issue

closes#2746

🧭 Context

Selection in org and user pages was enabled, but neither an action bar nor the selected packages page was displayed.

📚 Description

The action bar and selection state are now correctly rendered on the org page, but on the user page, I chose to omit them entirely. The UI differs significantly, and adding the missing toolbar would have required a major refactor. The user page can also be seen as a different type of page, so I think that's not a bad idea. Let me know what you think.

I implemented a default hidden selection state and activated selection only where necessary.
Due to the complex component structure and to avoid excessive prop-drilling, I opted to use the provide/inject pattern for easy access to elements deeper in the component tree.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	May 16, 2026 9:11pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	May 16, 2026 9:11pm
npmx-lunaria	Ignored		May 16, 2026 9:11pm

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: f3861004-22ef-4307-a6f0-83cc37564940

📥 Commits

Reviewing files that changed from the base of the PR and between c57de76 and 5c90c27.

📒 Files selected for processing (1)

• app/components/Package/Table.vue

---

📝 Walkthrough

Summary by CodeRabbit

• New Features
  • Conditional package selection across list, table, table-row and card views.
  • Package lists and tables can enable/disable selection checkboxes dynamically.
  • Unified selection state and selection view behaviour across list, search and organisation pages.

Walkthrough

Adds a provide/inject package-selection context and wires an optional selectable prop on PackageList. Child components read the context to conditionally render selection checkboxes. Org and search pages are updated to enable and manage the selection view and its UI state.

Changes

Package selection context and conditional UI

Layer / File(s)	Summary
Selection context API app/composables/usePackageSelection.ts	Exports PackageSelectionContext with reactive selectable, providePackageSelectionContext() to publish the flag via Vue provide, and usePackageSelectionContext() to consume it with a default false fallback.
List provider and conditional component rendering app/components/Package/List.vue, app/components/Package/Card.vue, app/components/Package/Table.vue, app/components/Package/TableRow.vue	PackageList accepts optional selectable prop and calls providePackageSelectionContext(props.selectable ?? false). Card, Table and TableRow call usePackageSelectionContext() and only render selection checkbox cells/components when selectable is true.
Org page selection view feature app/pages/org/[org].vue	Adds preserveScrollOnQuery meta, uses usePackageSelection() to manage selectedPackages and showSelectionView, closes the selection view when selections clear, toggles PackageActionBar vs PackageSelectionView, wires toolbar toggle-selection to open selection view, and passes selectable to PackageList.
Selection view and search page wiring app/components/Package/SelectionView.vue, app/pages/search.vue	PackageSelectionView and the search results now pass the selectable prop into PackageList to enable selectable behaviour.

Suggested reviewers

• alexdln

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title refers to fixing package comparison on org and user pages, which aligns with the main objective of restoring functional comparison UI on these pages.
Description check	✅ Passed	The description explains the context, scope, and implementation approach for fixing the broken selection state and action bar rendering across org and user pages.
Linked Issues check	✅ Passed	The changes address the core requirements of issue #2746 by implementing functional selection state and action bar rendering on the org page, and providing a reasoned approach for the user page.
Out of Scope Changes check	✅ Passed	All code changes are focused on enabling package selection visibility and functionality across the affected components, with no extraneous modifications detected.

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

[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

🧹 Nitpick comments (1)

app/pages/org/[org].vue (1)

278-279: ⚡ Quick win

Remove inline focus-visible utility from the button class.

Use the shared global button focus-visible styling instead of focus-visible:outline-accent/70 on this button.

Suggested fix

- class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"+ class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded shrink-0"

Based on learnings: "focus-visible styling for button and select elements is implemented globally in app/assets/main.css ... Do not apply per-element inline utility classes like focus-visible:outline-accent/70."

🤖 Prompt for 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.
In `@app/pages/org/`[org].vue around lines 278 - 279, Remove the per-element
focus-visible utility from the clickable element that calls closeSelectionView:
locate the element with `@click`="closeSelectionView" (the inline class string
containing "focus-visible:outline-accent/70") and delete only the
"focus-visible:outline-accent/70" token so the button relies on the shared
global focus-visible styling in app/assets/main.css; do not add any new
per-element focus classes.

🤖 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/components/Package/Table.vue`:
- Around line 108-110: The loading skeleton row currently always renders a
leading skeleton cell which misaligns columns when the selection header is
omitted; update the template so the leading skeleton cell is wrapped with the
same conditional as the header (use the selectable prop) — i.e. make the
skeleton cell render only when selectable is true (the same condition used for
the <th> where getColumnLabel('selection') appears) so the loading row and
header columns stay aligned.
---
Nitpick comments:
In `@app/pages/org/`[org].vue:
- Around line 278-279: Remove the per-element focus-visible utility from the
clickable element that calls closeSelectionView: locate the element with
`@click`="closeSelectionView" (the inline class string containing
"focus-visible:outline-accent/70") and delete only the
"focus-visible:outline-accent/70" token so the button relies on the shared
global focus-visible styling in app/assets/main.css; do not add any new
per-element focus classes.

🪄 Autofix (Beta)

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

Run ID: 12ff42fb-61fc-43cd-8883-7767a34e52c9

📥 Commits

Reviewing files that changed from the base of the PR and between 0439359 and c57de76.

📒 Files selected for processing (8)

• app/components/Package/Card.vue
• app/components/Package/List.vue
• app/components/Package/SelectionView.vue
• app/components/Package/Table.vue
• app/components/Package/TableRow.vue
• app/composables/usePackageSelection.ts
• app/pages/org/[org].vue
• app/pages/search.vue

[gameroman]

Looks good overall ✅

Might make sense to add some tests to prevent future regressions

The coderabbit suggestions should be addressed probably too

[graphieros]

LGTM 🌿