fix: local filter on user & org page are now back to work (npmx-dev#472)

Author: jycouet

app/components/SearchBox.vue

@@ -26,8 +26,15 @@ const showSearchBar = computed(() => {
 // Local input value (updates immediately as user types)
 const searchQuery = ref((route.query.q as string) ?? '')
 
+// Pages that have their own local filter using ?q
+const pagesWithLocalFilter = new Set(['~username', 'org'])
+
 // Debounced URL update for search query
 const updateUrlQuery = debounce((value: string) => {
+  // Don't navigate away from pages that use ?q for local filtering
+  if (pagesWithLocalFilter.has(route.name as string)) {
+    return
+  }
   if (route.name === 'search') {
     router.replace({ query: { q: value || undefined } })
     return
@@ -53,6 +60,10 @@ watch(searchQuery, value => {
 watch(
   () => route.query.q,
   urlQuery => {
+    // Don't sync from pages that use ?q for local filtering
+    if (pagesWithLocalFilter.has(route.name as string)) {
+      return
+    }
     const value = (urlQuery as string) ?? ''
     if (searchQuery.value !== value) {
       searchQuery.value = value

app/pages/@[org].vue

@@ -139,7 +139,7 @@ defineOgImageComponent('Default', {
   <main class="container flex-1 py-8 sm:py-12 w-full">
     <!-- Header -->
     <header class="mb-8 pb-8 border-b border-border">
-      <div class="flex items-center gap-4 mb-4">
+      <div class="flex items-end gap-4">
         <!-- Org avatar placeholder -->
         <div
           class="w-16 h-16 rounded-lg bg-bg-muted border border-border flex items-center justify-center"
@@ -155,20 +155,21 @@ defineOgImageComponent('Default', {
             {{ $t('org.public_packages', { count: formatNumber(packageCount) }, packageCount) }}
           </p>
         </div>
-      </div>
 
-      <!-- Link to npmjs.com org page -->
-      <nav aria-label="External links">
-        <a
-          :href="`https://www.npmjs.com/org/${orgName}`"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
-        >
-          <span class="i-carbon-cube w-4 h-4" />
-          {{ $t('common.view_on_npm') }}
-        </a>
-      </nav>
+        <!-- Link to npmjs.com org page -->
+        <nav aria-label="External links" class="ms-auto">
+          <a
+            :href="`https://www.npmjs.com/org/${orgName}`"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
+            :title="$t('common.view_on_npm')"
+          >
+            <span class="i-carbon:logo-npm w-4 h-4" aria-hidden="true" />
+            npm
+          </a>
+        </nav>
+      </div>
     </header>
 
     <!-- Admin panels (when connected) -->

app/pages/~[username]/index.vue

@@ -169,7 +169,7 @@ defineOgImageComponent('Default', {
   <main class="container flex-1 py-8 sm:py-12 w-full">
     <!-- Header -->
     <header class="mb-8 pb-8 border-b border-border">
-      <div class="flex items-center gap-4 mb-4">
+      <div class="flex items-end gap-4">
         <!-- Avatar placeholder -->
         <div
           class="w-16 h-16 rounded-full bg-bg-muted border border-border flex items-center justify-center"
@@ -185,20 +185,21 @@ defineOgImageComponent('Default', {
             {{ $t('org.public_packages', { count: formatNumber(results.total) }, results.total) }}
           </p>
         </div>
-      </div>
 
-      <!-- Link to npmjs.com profile -->
-      <nav aria-label="External links">
-        <a
-          :href="`https://www.npmjs.com/~${username}`"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
-        >
-          <span class="i-carbon-cube w-4 h-4" />
-          {{ $t('common.view_on_npm') }}
-        </a>
-      </nav>
+        <!-- Link to npmjs.com profile -->
+        <nav aria-label="External links" class="ms-auto">
+          <a
+            :href="`https://www.npmjs.com/~${username}`"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
+            :title="$t('common.view_on_npm')"
+          >
+            <span class="i-carbon:logo-npm w-4 h-4" aria-hidden="true" />
+            npm
+          </a>
+        </nav>
+      </div>
     </header>
 
     <!-- Loading state -->
@@ -233,7 +234,7 @@ defineOgImageComponent('Default', {
       <PackageListControls
         v-model:filter="filterText"
         v-model:sort="sortOption"
-        :placeholder="$t('user.page.filter_placeholder', { count: packageCount })"
+        :placeholder="$t('user.page.filter_placeholder', { count: results.total })"
         :total-count="packageCount"
         :filtered-count="filteredCount"
       />

tests/interactions.spec.ts

@@ -41,7 +41,7 @@ test.describe('Search Pages', () => {
     const searchInput = page.locator('input[type="search"]')
     await searchInput.fill('vue')
 
-    await page.waitForLoadState('domcontentloaded')
+    await page.waitForURL(/\/search/)
 
     await expect(page.locator('text=/found \\d+/i')).toBeVisible()