fix: fix regression with no-dependency column

Author: serhalp

app/components/Compare/PackageSelector.vue

@@ -57,7 +57,16 @@ function addPackage(name: string) {
   if (packages.value.length >= maxPackages.value) return
   if (packages.value.includes(name)) return
 
-  packages.value = [...packages.value, name]
+  // Keep NO_DEPENDENCY_ID always last
+  if (name === NO_DEPENDENCY_ID) {
+    packages.value = [...packages.value, name]
+  } else if (packages.value.includes(NO_DEPENDENCY_ID)) {
+    // Insert before the no-dep entry
+    const withoutNoDep = packages.value.filter(p => p !== NO_DEPENDENCY_ID)
+    packages.value = [...withoutNoDep, name, NO_DEPENDENCY_ID]
+  } else {
+    packages.value = [...packages.value, name]
+  }
   inputValue.value = ''
 }
 

app/pages/compare.vue

@@ -43,9 +43,10 @@ const showNoDependency = computed(() => packages.value.includes(NO_DEPENDENCY_ID
 // Build column definitions for real packages only (no-dep is handled separately by the grid)
 const gridColumns = computed(() =>
   packages.value
-    .filter(pkg => pkg !== NO_DEPENDENCY_ID)
-    .map((pkg, i) => {
-      const data = packagesData.value?.[i]
+    .map((pkg, i) => ({ pkg, originalIndex: i }))
+    .filter(({ pkg }) => pkg !== NO_DEPENDENCY_ID)
+    .map(({ pkg, originalIndex }) => {
+      const data = packagesData.value?.[originalIndex]
       const header = data
         ? data.package.version
           ? `${data.package.name}@${data.package.version}`

test/e2e/interactions.spec.ts

@@ -1,5 +1,54 @@
 import { expect, test } from './test-utils'
 
+test.describe('Compare Page', () => {
+  test('no-dep column renders separately from package columns', async ({ page, goto }) => {
+    await goto('/compare?packages=vue,__no_dependency__', { waitUntil: 'hydration' })
+
+    const grid = page.locator('.comparison-grid')
+    await expect(grid).toBeVisible({ timeout: 15000 })
+
+    // Should have the no-dep column with special styling
+    const noDepColumn = grid.locator('.comparison-cell-nodep')
+    await expect(noDepColumn).toBeVisible()
+
+    // The no-dep column should not contain a link
+    await expect(noDepColumn.locator('a')).toHaveCount(0)
+  })
+
+  test('no-dep column is always last even when packages are added after', async ({
+    page,
+    goto,
+  }) => {
+    // Start with vue and no-dep
+    await goto('/compare?packages=vue,__no_dependency__', { waitUntil: 'hydration' })
+
+    const grid = page.locator('.comparison-grid')
+    await expect(grid).toBeVisible({ timeout: 15000 })
+
+    // Add another package via the input
+    const input = page.locator('#package-search')
+    await input.fill('nuxt')
+
+    // Wait for search results and click on nuxt
+    const nuxtOption = page.locator('button:has-text("nuxt")').first()
+    await expect(nuxtOption).toBeVisible({ timeout: 10000 })
+    await nuxtOption.click()
+
+    // URL should have no-dep at the end, not in the middle
+    await expect(page).toHaveURL(/packages=vue,nuxt,__no_dependency__/)
+
+    // Verify column order in the grid: vue, nuxt, then no-dep
+    const headerLinks = grid.locator('.comparison-cell-header a.truncate')
+    await expect(headerLinks).toHaveCount(2)
+    await expect(headerLinks.nth(0)).toContainText('vue')
+    await expect(headerLinks.nth(1)).toContainText('nuxt')
+
+    // No-dep should still be visible as the last column
+    const noDepColumn = grid.locator('.comparison-cell-nodep')
+    await expect(noDepColumn).toBeVisible()
+  })
+})
+
 test.describe('Search Pages', () => {
   test('/search?q=vue → keyboard navigation (arrow keys + enter)', async ({ page, goto }) => {
     await goto('/search?q=vue', { waitUntil: 'hydration' })