Merge branch 'main' into feat/install-command-icons

Author: danielroe

README.md

@@ -21,7 +21,7 @@ The aim of [npmx.dev](https://npmx.dev) is to provide a better browser for the n
 ## Shortcuts
 
 > [!IMPORTANT]  
-> We're keeping the website, repository, and our discord community low-profile until the browser is polished enough. We'll do a formal announcement at that point. Please avoid sharing the website or the invite link to discord on social media directly. The repo is public, so people who care about the project can easily find it and join us. Anyone who wants to help is more than welcome to [join the community](https://chat.npm.dev). If you know others who would be interested, please invite them too!
+> We're keeping the website, repository, and our discord community low-profile until the browser is polished enough. We'll do a formal announcement at that point. Please avoid sharing the website or the invite link to discord on social media directly. The repo is public, so people who care about the project can easily find it and join us. Anyone who wants to help is more than welcome to [join the community](https://chat.npmx.dev). If you know others who would be interested, please invite them too!
 
 - [chat.npmx.dev](https://chat.npmx.dev) - Discord Server
 - [social.npmx.dev](https://social.npmx.dev) - Bluesky Profile

app/pages/search.vue

@@ -89,7 +89,8 @@ const { data: results, status } = useNpmSearch(query, () => ({
 }))
 
 // Keep track of previous results to show while loading
-const previousQuery = ref('')
+// Use useState so the value persists from SSR to client hydration
+const previousQuery = useState('search-previous-query', () => query.value)
 const cachedResults = ref(results.value)
 
 // Update cached results smartly

tests/docs.spec.ts

@@ -141,25 +141,29 @@ test.describe('Version Selector', () => {
 
     await versionButton.click()
 
-    // Find a different version and click it
-    const differentVersion = page.locator('[role="option"]').filter({ hasNotText: '1.6.3' }).first()
+    // Find a version link that's not the current version by checking the href
+    const versionLinks = page.locator('[role="option"] a[href*="/docs/ufo/v/"]')
+    const count = await versionLinks.count()
+
+    // Find first link that doesn't point to 1.6.3
+    let targetHref: string | null = null
+    for (let i = 0; i < count; i++) {
+      const href = await versionLinks.nth(i).getAttribute('href')
+      if (href && !href.includes('/v/1.6.3')) {
+        targetHref = href
+        await versionLinks.nth(i).click()
+        break
+      }
+    }
 
     // Skip if no other versions available
-    if (!(await differentVersion.isVisible())) {
+    if (!targetHref) {
       test.skip()
       return
     }
 
-    const versionText = await differentVersion.textContent()
-    await differentVersion.click()
-
-    // URL should change to the new version
-    if (versionText) {
-      const versionMatch = versionText.match(/\d+\.\d+\.\d+/)
-      if (versionMatch) {
-        await expect(page).toHaveURL(new RegExp(`/docs/ufo/v/${versionMatch[0]}`))
-      }
-    }
+    // URL should match the href we clicked
+    await expect(page).toHaveURL(new RegExp(targetHref.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')))
   })
 
   test('escape key closes version dropdown', async ({ page, goto }) => {

tests/interactions.spec.ts

@@ -12,26 +12,18 @@ test.describe('Search Pages', () => {
     const firstResult = page.locator('[data-result-index="0"]').first()
     await expect(firstResult).toBeVisible()
 
-    // First result is selected by default, Enter navigates to it
-    // URL is /vue not /package/vue (cleaner URLs)
-    await page.keyboard.press('Enter')
-    await expect(page).toHaveURL(/\/vue/)
-
-    await page.goBack()
-    // Wait for search page to be ready
-    await expect(page).toHaveURL(/\/search/)
-    await expect(page.locator('text=/found \\d+/i')).toBeVisible()
-    // Search input is autofocused on mount
-    await expect(searchInput).toBeFocused()
-
     // ArrowDown changes visual selection but keeps focus in input
     await page.keyboard.press('ArrowDown')
     await expect(searchInput).toBeFocused()
 
-    // Enter navigates to the now-selected second result
+    // ArrowUp goes back to first result
+    await page.keyboard.press('ArrowUp')
+    await expect(searchInput).toBeFocused()
+
+    // First result is selected, Enter navigates to it
+    // URL is /vue not /package/vue (cleaner URLs)
     await page.keyboard.press('Enter')
-    // Second result could be vue-router, vuex, etc - just check we navigated away
-    await expect(page).not.toHaveURL(/\/search/)
+    await expect(page).toHaveURL(/\/vue/)
   })
 
   test('/search?q=vue → "/" focuses the search input from results', async ({ page, goto }) => {