feat(ui): add multi-select and bulk actions for packages by MatteoGabriele · Pull Request #1672 · npmx-dev/npmx.dev

MatteoGabriele · 2026-02-26T15:10:53Z

🔗 Linked issue

resolves #1509

🧭 Context

Added a multi-select feature to the search page that allows users to select multiple packages and perform bulk actions on them. Currently supports comparing selected packages, with the possibility of adding more actions in the future.

📚 Description

Selection UI: Added checkboxes to package cards that appear on hover. Selected cards are visually indicated with a border highlight and checkbox state.
Persistent counter: New "View selected (X)" button in the toolbar shows active selections and navigates to a dedicated view for managing them.
Floating action bar: When items are selected, a floating action bar appears at the bottom with the selection count, primary action (Compare), and clear button.
Selection state management: Uses composable to maintain selections across view changes (card/table/selections view), allowing users to continue browsing while keeping their selections.
Selection view: It's a separate component view that retrieves each saved component similar to the Compare page request logic.
Accessibility: Includes aria-live announcements for selection changes and keyboard shortcuts ("b" key) to focus the action bar.

At the moment, the logic is locked at a maximum of 4 selectable items. This won't scale, but for now, to reduce complexity, it will mimic what's needed by the Compare page, which is the only current functionality available in the multi-select.
My take is to re-think this along the way, when and if another action gets added.

Screen.Recording.2026-02-27.at.18.33.58.mov

vercel · 2026-02-26T15:10:58Z

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 15, 2026 6:36pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 15, 2026 6:36pm
npmx-lunaria	Ignored		Mar 15, 2026 6:36pm

github-actions · 2026-02-26T15:11:39Z

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.
i18n/locales/it-IT.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.

…pmx.dev into feat/action-bar

codecov · 2026-02-27T15:44:34Z

Codecov Report

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

Files with missing lines	Patch %	Lines
app/composables/usePackageSelection.ts	34.21%	19 Missing and 6 partials ⚠️
app/components/Package/ActionBar.vue	47.36%	7 Missing and 3 partials ⚠️
app/components/Package/ListToolbar.vue	50.00%	3 Missing and 1 partial ⚠️
app/router.options.ts	66.66%	2 Missing ⚠️
app/components/Package/TableRow.vue	75.00%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

knowler

Looks good to me from an accessibility perspective. We can always iterate/tweak things later. Others should review the Vue/JS before we merge.

serhalp

This is an awesome feature! It looks and feels great. Just found a few issues.

serhalp · 2026-03-14T23:12:20Z

app/router.options.ts

+    // Don't scroll for other param changes (filters, pagination, etc.)
+    if (to.path === from.path) {
+      return false
+    }


I believe this breaks the hash anchor navigation logic just below this, by returning too early before we can check it.

My hunch is always to add a test for the behaviour that almost broke when this occurs, as it's a sign we're missing valuable coverage!

Navigation with hashes works. I can add tests for the scroll behavior: should I go with e2e or unit tests?

serhalp · 2026-03-14T23:18:18Z

app/composables/usePackageSelection.ts

+  const selectedPackagesParam = useRouteQuery<string>('selection', '', { mode: 'push' })
+  const showSelectionViewParam = useRouteQuery<string>('view', '', { mode: 'push' })
+
+  // Parse URL param into array of package names


🤔 I'm all for the URL-as-source-of-truth-for-state school of thought, but I wonder if selection within search results falls into the ephemeral state bucket that should not be in the URL and consequently in the browser navigation history?

When I play around with it, it admittedly looks cool to hit back and forward across those selections/deselections, but it feels surprising.

I'd be curious to hear other opinions, but my hunch would be not to include it in the URL.

I need to include it in the URL; otherwise, I won't be able to refresh and get the list from your selection. This is especially helpful if you refresh, navigate to other pages, and then come back. It also makes the selection page shareable. I agree that perhaps it shouldn't be pushed into history, but it can be replaced. Let me know what you think.
I have already made this change.

Ah yeah, the selection page feels different to me than the existing search results page with selections.

Is that a good thing or a bad thing?

Sorry, that wasn't very clear. I meant that on the new selection view I agree selections should be part of the URL and navigation history, but on the normal full search results view selection state feels more ephemeral. 🤔

I tried using useState in a previous version, but the saved state felt wrong, and the data would appear when you didn't expect it to. I believe this one is best suited to a URL: I don't think this functionality fits any other storage options that don't require complex babysitting. URL, in a way, is straightforward, managed by navigation, and predictable. You go back and find what you left; you arrive there from another route and see a clean slate. That said, if you have another idea, I'm happy to try it out and see how it feels.

serhalp · 2026-03-14T23:21:08Z

app/composables/usePackageSelection.ts

+    },
+  })
+
+  const isMaxSelected = computed(() => selectedPackages.value.length >= MAX_PACKAGE_SELECTION)


nit: this is super nitpicky but (especially since it's exported) this could be more expressive of the intent rather than the implementation, something like:

Suggested change

const isMaxSelected = computed(() => selectedPackages.value.length >= MAX_PACKAGE_SELECTION)

const shouldDisableSelection = computed(() => selectedPackages.value.length >= MAX_PACKAGE_SELECTION)

I can change it, but I disagree with this one. This is a composable property that tells the component that the maximum selectable items have been reached (perhaps the name could be tweaked), but it is not the job of the composable to tell you that it is disabled, since other parts of the UI might be bound to a completely different functionality or state. Ex: one component disables a checkbox, another component simply displays a tooltip.

I can see that. Maybe canSelectMore?

serhalp · 2026-03-14T23:23:37Z

app/composables/usePackageSelection.ts

+  function isPackageSelected(packageName: string): boolean {
+    return selectedPackages.value.includes(String(packageName).trim())


nit: the type says packageName is a string but we're casting it to a string. Is the type wrong or the cast unnecessary?

Good catch! Those are leftovers from when I was trying to hack some stuff around 👍

serhalp · 2026-03-14T23:23:47Z

app/composables/usePackageSelection.ts

+  function togglePackageSelection(packageName: string) {
+    const safeName = String(packageName).trim()


same nit here

serhalp · 2026-03-14T23:30:24Z

app/components/Package/SelectionView.vue

+      selectedPackages.value.map(name =>
+        $fetch(`/api/registry/package-meta/${encodeURIComponent(name)}`)
+          .then(response => ({ package: response }))
+          .catch(() => []),


This fallback's type is incorrect.

Suggested change

.catch(() => []),

.catch(() => ({})),

This may be another good case for test coverage!

btw we can type this a little closer to the fetch response by passing a generic: https://npmx.dev/package/ofetch#user-content-type-friendly

serhalp · 2026-03-14T23:36:12Z

app/components/Package/ActionBar.vue

+          <button
+            @click="clearSelectedPackages"
+            class="flex items-center ms-1 text-fg-muted hover:(text-fg bg-accent/10) p-1.5 rounded-lg transition-colors"
+            aria-label="Close action bar"


⚠️ this string needs to be internationalized

feat(ui): add action bar

a880463

vercel bot deployed to Preview – npmx.dev February 26, 2026 15:14 View deployment

Merge branch 'main' into feat/action-bar

3a12c63

vercel bot deployed to Preview – docs.npmx.dev February 26, 2026 15:23 View deployment

vercel bot deployed to Preview – npmx.dev February 26, 2026 15:23 View deployment

feat: add selection page ui

9c8a88c

vercel bot deployed to Preview – npmx.dev February 26, 2026 15:42 View deployment

MatteoGabriele added 2 commits February 26, 2026 22:29

feat: add packages in route query

ed13532

chore: clean composable

812f685

vercel bot deployed to Preview – npmx.dev February 27, 2026 09:05 View deployment

Merge branch 'main' into feat/action-bar

3d244a0

vercel bot deployed to Preview – docs.npmx.dev February 27, 2026 10:59 View deployment

vercel bot deployed to Preview – npmx.dev February 27, 2026 11:00 View deployment

feat: add back button and fix keys

287a4a7

vercel bot deployed to Preview – npmx.dev February 27, 2026 13:44 View deployment

refactor: copy

8743c79

vercel bot deployed to Preview – npmx.dev February 27, 2026 14:06 View deployment

feat: add table selection

7700125

vercel bot deployed to Preview – npmx.dev February 27, 2026 14:29 View deployment

Merge branch 'main' into feat/action-bar

1ee8c67

vercel bot deployed to Preview – npmx.dev February 27, 2026 15:24 View deployment

MatteoGabriele added 2 commits February 27, 2026 16:42

feat: add label

bab24a2

Merge branch 'feat/action-bar' of https://github.com/MatteoGabriele/n…

a96417e

…pmx.dev into feat/action-bar

vercel bot deployed to Preview – npmx.dev February 27, 2026 15:44 View deployment

test: add a11y check

481fc12

vercel bot deployed to Preview – npmx.dev February 27, 2026 17:06 View deployment

fix: types

5e926ab

fix: remove unused icon

3f74834

vercel bot had a problem deploying to Preview – npmx.dev March 7, 2026 14:44 Failure

Merge branch 'main' into feat/action-bar

edc3f5b

vercel bot deployed to Preview – docs.npmx.dev March 8, 2026 10:17 View deployment

vercel bot deployed to Preview – npmx.dev March 8, 2026 10:18 View deployment

Merge branch 'main' into feat/action-bar

6a00a57

vercel bot deployed to Preview – docs.npmx.dev March 12, 2026 08:25 View deployment

vercel bot deployed to Preview – npmx.dev March 12, 2026 08:26 View deployment

Merge branch 'main' into feat/action-bar

a25ecc0

vercel bot deployed to Preview – npmx.dev March 12, 2026 08:30 View deployment

Merge branch 'main' into feat/action-bar

4233da1

vercel bot deployed to Preview – npmx.dev March 12, 2026 09:01 View deployment

serhalp self-requested a review March 14, 2026 19:16

MatteoGabriele added 2 commits March 14, 2026 23:02

refactor(a11y): move focus on section and highlight div

3a8406a

Merge branch 'main' into feat/action-bar

924fb89

vercel bot deployed to Preview – docs.npmx.dev March 14, 2026 22:06 View deployment

vercel bot deployed to Preview – npmx.dev March 14, 2026 22:06 View deployment

knowler approved these changes Mar 14, 2026

View reviewed changes

serhalp reviewed Mar 14, 2026

View reviewed changes

MatteoGabriele added 3 commits March 15, 2026 10:47

refactor: don't add checked packages in history

a75e449

refactor: remove string casting of strings

2e1d3e8

refactor: filter and remove casting

b6f7235

vercel bot deployed to Preview – npmx.dev March 15, 2026 10:25 View deployment

feat: add copy for button aria label

647b49d

vercel bot deployed to Preview – npmx.dev March 15, 2026 10:35 View deployment

feat: rename composable property

7590c65

vercel bot deployed to Preview – npmx.dev March 15, 2026 14:57 View deployment

MatteoGabriele added 2 commits March 15, 2026 19:32

Merge branch 'main' into feat/action-bar

4878863

Merge branch 'main' into feat/action-bar

813e40e

vercel bot deployed to Preview – npmx.dev March 15, 2026 18:36 View deployment

	const isMaxSelected = computed(() => selectedPackages.value.length >= MAX_PACKAGE_SELECTION)
	const shouldDisableSelection = computed(() => selectedPackages.value.length >= MAX_PACKAGE_SELECTION)

		function isPackageSelected(packageName: string): boolean {
		return selectedPackages.value.includes(String(packageName).trim())

		function togglePackageSelection(packageName: string) {
		const safeName = String(packageName).trim()

Uh oh!

Conversation

MatteoGabriele commented Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔗 Linked issue

🧭 Context

📚 Description

Uh oh!

vercel bot commented Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Lunaria Status Overview

Tracked Files

Uh oh!

codecov bot commented Feb 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

knowler left a comment

Choose a reason for hiding this comment

Uh oh!

serhalp left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MatteoGabriele Mar 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

serhalp Mar 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

MatteoGabriele commented Feb 26, 2026 •

edited

Loading

vercel bot commented Feb 26, 2026 •

edited

Loading

github-actions bot commented Feb 26, 2026 •

edited

Loading

codecov bot commented Feb 27, 2026 •

edited

Loading

MatteoGabriele Mar 15, 2026 •

edited

Loading

serhalp Mar 14, 2026 •

edited

Loading