Skip to content

fix: package comparison broken on org and user pages#2758

Merged
graphieros merged 2 commits into
npmx-dev:mainfrom
MatteoGabriele:fix/comparison-broken-on-org-and-user-pages
May 17, 2026
Merged

fix: package comparison broken on org and user pages#2758
graphieros merged 2 commits into
npmx-dev:mainfrom
MatteoGabriele:fix/comparison-broken-on-org-and-user-pages

Conversation

@MatteoGabriele
Copy link
Copy Markdown
Member

🔗 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
Copy link
Copy Markdown
Contributor

vercel Bot commented May 16, 2026

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

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

Request Review

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 16, 2026

Review Change Stack

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

Comment @coderabbitai help to get the list of available commands and usage tips.

@codecov
Copy link
Copy Markdown

codecov Bot commented May 16, 2026

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!

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment thread app/components/Package/Table.vue
Copy link
Copy Markdown
Contributor

@gameroman gameroman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good overall ✅

Might make sense to add some tests to prevent future regressions

The coderabbit suggestions should be addressed probably too

Copy link
Copy Markdown
Contributor

@graphieros graphieros left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 🌿

@serhalp serhalp added this pull request to the merge queue May 16, 2026
@github-merge-queue github-merge-queue Bot removed this pull request from the merge queue due to failed status checks May 16, 2026
@graphieros graphieros added this pull request to the merge queue May 17, 2026
Merged via the queue into npmx-dev:main with commit dfa8658 May 17, 2026
24 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Package comparison UI is nonfunctional on org and user pages

3 participants