fix: correct route query parsing for multiple params

Author: alexdln

app/components/Header/SearchBox.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { debounce } from 'perfect-debounce'
+import { normalizeSearchParam } from '#shared/utils/url'
 
 withDefaults(
   defineProps<{
@@ -22,9 +23,7 @@ const showSearchBar = computed(() => {
 })
 
 // Local input value (updates immediately as user types)
-const searchQuery = shallowRef(
-  (Array.isArray(route.query.q) ? route.query.q[0] : route.query.q) ?? '',
-)
+const searchQuery = shallowRef(normalizeSearchParam(route.query.q))
 
 // Pages that have their own local filter using ?q
 const pagesWithLocalFilter = new Set(['~username', 'org'])
@@ -64,7 +63,7 @@ watch(
     if (pagesWithLocalFilter.has(route.name as string)) {
       return
     }
-    const value = (urlQuery as string) ?? ''
+    const value = normalizeSearchParam(urlQuery)
     if (searchQuery.value !== value) {
       searchQuery.value = value
     }

app/pages/@[org].vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { FilterChip, SortOption } from '#shared/types/preferences'
 import { debounce } from 'perfect-debounce'
+import { normalizeSearchParam } from '#shared/utils/url'
 
 definePageMeta({
   name: 'org',
@@ -51,9 +52,9 @@ const {
 } = useStructuredFilters({
   packages,
   initialFilters: {
-    text: (route.query.q as string) ?? '',
+    text: normalizeSearchParam(route.query.q),
   },
-  initialSort: (route.query.sort as SortOption) ?? 'updated-desc',
+  initialSort: (normalizeSearchParam(route.query.sort) as SortOption) ?? 'updated-desc',
 })
 
 // Pagination state

app/pages/search.vue

@@ -4,6 +4,7 @@ import { onKeyDown } from '@vueuse/core'
 import { debounce } from 'perfect-debounce'
 import { isValidNewPackageName, checkPackageExists } from '~/utils/package-name'
 import { isPlatformSpecificPackage } from '~/utils/platform-packages'
+import { normalizeSearchParam } from '#shared/utils/url'
 
 const route = useRoute()
 const router = useRouter()
@@ -29,7 +30,7 @@ const updateUrlPage = debounce((page: number) => {
 }, 500)
 
 // The actual search query (from URL, used for API calls)
-const query = computed(() => (route.query.q as string) ?? '')
+const query = computed(() => normalizeSearchParam(route.query.q))
 
 // Track if page just loaded (for hiding "Searching..." during view transition)
 const hasInteracted = shallowRef(false)
@@ -53,7 +54,7 @@ const requestedSize = computed(() => {
 
 // Get initial page from URL (for scroll restoration on reload)
 const initialPage = computed(() => {
-  const p = Number.parseInt(route.query.page as string, 10)
+  const p = Number.parseInt(normalizeSearchParam(route.query.page), 10)
   return Number.isNaN(p) ? 1 : Math.max(1, p)
 })
 

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { debounce } from 'perfect-debounce'
+import { normalizeSearchParam } from '#shared/utils/url'
 
 const route = useRoute('~username')
 const router = useRouter()
@@ -13,7 +14,7 @@ const currentPage = shallowRef(1)
 
 // Get initial page from URL (for scroll restoration on reload)
 const initialPage = computed(() => {
-  const p = Number.parseInt(route.query.page as string, 10)
+  const p = Number.parseInt(normalizeSearchParam(route.query.page), 10)
   return Number.isNaN(p) ? 1 : Math.max(1, p)
 })
 
@@ -32,18 +33,16 @@ const updateUrl = debounce((updates: { page?: number; filter?: string; sort?: st
 type SortOption = 'downloads' | 'updated' | 'name-asc' | 'name-desc'
 
 // Filter and sort state (from URL)
-const filterText = shallowRef(
-  (Array.isArray(route.query.q) ? route.query.q[0] : route.query.q) ?? '',
-)
+const filterText = shallowRef(normalizeSearchParam(route.query.q))
 const sortOption = shallowRef<SortOption>(
-  ((Array.isArray(route.query.sort) ? route.query.sort[0] : route.query.sort) as SortOption) ||
-    'downloads',
+  (normalizeSearchParam(route.query.sort) as SortOption) || 'downloads',
 )
 
 // Track if we've loaded all results (one-way flag, doesn't reset)
 // Initialize to true if URL already has filter/sort params
 const hasLoadedAll = shallowRef(
-  Boolean(route.query.q) || (route.query.sort && route.query.sort !== 'downloads'),
+  Boolean(route.query.q) ||
+    (route.query.sort && normalizeSearchParam(route.query.sort) !== 'downloads'),
 )
 
 // Update URL when filter/sort changes (debounced)

shared/utils/url.ts

@@ -1,3 +1,4 @@
+import type { LocationQueryValue } from 'vue-router'
 import { withoutProtocol, withoutTrailingSlash } from 'ufo'
 
 /**
@@ -25,3 +26,11 @@ export function normalizeUrlForComparison(url: string): string {
 export function areUrlsEquivalent(url1: string, url2: string): boolean {
   return normalizeUrlForComparison(url1) === normalizeUrlForComparison(url2)
 }
+
+export function normalizeSearchParam(query?: LocationQueryValue | LocationQueryValue[]): string {
+  if (!query) return ''
+
+  if (typeof query === 'string') return query
+
+  return normalizeSearchParam(query[0])
+}