fix: merge in improvements from #399 and #399

Co-authored-by: Florian Heuberger <fh@flogersoft.de>
Co-authored-by: cullophid <andreas.moller@gmail.com>

Author: 3 people

app/components/AppHeader.vue

@@ -30,7 +30,9 @@ function expandMobileSearch() {
   })
 }
 
-watch(isOnSearchPage, () => {
+watch(isOnSearchPage, visible => {
+  if (!visible) return
+
   searchBoxRef.value?.focus()
   nextTick(() => {
     searchBoxRef.value?.focus()

app/components/SearchBox.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { debounce } from 'perfect-debounce'
 
-const isMobile = useIsMobile()
-
 withDefaults(
   defineProps<{
     inputClass?: string
@@ -107,7 +105,6 @@ defineExpose({ focus })
           <input
             id="header-search"
             ref="inputRef"
-            :autofocus="!isMobile"
             v-model="searchQuery"
             type="search"
             name="q"

app/pages/index.vue

@@ -5,8 +5,6 @@ const searchQuery = shallowRef('')
 const searchInputRef = useTemplateRef('searchInputRef')
 const { focused: isSearchFocused } = useFocus(searchInputRef)
 
-const isMobile = useIsMobile()
-
 async function search() {
   const query = searchQuery.value.trim()
   await navigateTo({
@@ -90,7 +88,6 @@ defineOgImageComponent('Default', {
                 name="q"
                 :placeholder="$t('search.placeholder')"
                 v-bind="noCorrect"
-                :autofocus="!isMobile"
                 class="w-full bg-bg-subtle border border-border rounded-lg ps-8 pe-24 py-4 font-mono text-base text-fg placeholder:text-fg-subtle transition-border-color duration-300 focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
                 @input="handleInput"
               />

test/e2e/interactions.spec.ts

@@ -35,6 +35,26 @@ test.describe('Search Pages', () => {
     await expect(page.locator('input[type="search"]')).toBeFocused()
   })
 
+  test('/ (homepage) → search, keeps focus on search input', async ({ page, goto }) => {
+    await goto('/', { waitUntil: 'domcontentloaded' })
+
+    const homeSearchInput = page.locator('#home-search')
+    await homeSearchInput.click()
+    await page.keyboard.type('vue')
+
+    // Wait for navigation to /search (debounce is 250ms)
+    await expect(page).toHaveURL(/\/search/, { timeout: 10000 })
+    await expect(page.locator('text=/found \\d+/i')).toBeVisible({ timeout: 15000 })
+
+    // Home search input should be gone (we're on /search now)
+    await expect(homeSearchInput).not.toBeVisible()
+
+    // Header search input should now exist and be focused
+    const headerSearchInput = page.locator('#header-search')
+    await expect(headerSearchInput).toBeVisible()
+    await expect(headerSearchInput).toBeFocused()
+  })
+
   test('/settings → search, keeps focus on search input', async ({ page, goto }) => {
     await goto('/settings', { waitUntil: 'domcontentloaded' })