feat: polish package search and org packages UX

- Add relevance sort option for search page and disable other options for now
- Hide filters on search page for now
- Fix search result "Updated" date to actually work... and respect 'relative'
  pref... and respect i18n
- Add "all" page size option with YOLO label
- Table view now forces pagination mode and card view forces infinite scroll
- Show appropriate count display per mode:
  - Infinite: "X packages" or "Found X packages"
  - Paginated: "X of Y packages"

Author: serhalp

app/components/PackageList.vue

@@ -58,14 +58,21 @@ const listRef = useTemplateRef<WindowVirtualizerHandle>('listRef')
 // View mode and columns
 const viewMode = computed(() => props.viewMode ?? 'cards')
 const columns = computed(() => props.columns ?? DEFAULT_COLUMNS)
-const paginationMode = computed(() => props.paginationMode ?? 'infinite')
+// Table view forces pagination mode (no virtualization for tables)
+const paginationMode = computed(() =>
+  viewMode.value === 'table' ? 'paginated' : (props.paginationMode ?? 'infinite'),
+)
 const currentPage = computed(() => props.currentPage ?? 1)
 
 // Compute paginated results for paginated mode
 const displayedResults = computed(() => {
   if (paginationMode.value === 'infinite') {
     return props.results
   }
+  // 'all' page size means show everything (YOLO)
+  if (pageSize.value === 'all') {
+    return props.results
+  }
   const start = (currentPage.value - 1) * pageSize.value
   const end = start + pageSize.value
   return props.results.slice(start, end)

app/components/PackageListToolbar.vue

@@ -32,6 +32,8 @@ const props = defineProps<{
   filteredCount: number
   availableKeywords?: string[]
   activeFilters: FilterChip[]
+  /** When true, shows search-specific UI (relevance sort, no filters) */
+  searchContext?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -62,6 +64,21 @@ const showingFiltered = computed(() => props.filteredCount !== props.totalCount)
 // Parse current sort option into key and direction
 const currentSort = computed(() => parseSortOption(props.sortOption))
 
+// Get available sort keys based on context
+const availableSortKeys = computed(() => {
+  if (props.searchContext) {
+    // In search context: show relevance (enabled) and others (disabled)
+    return SORT_KEYS.filter(k => !k.searchOnly || k.key === 'relevance').map(k =>
+      Object.assign({}, k, {
+        disabled: k.key !== 'relevance',
+        disabledReason: k.key !== 'relevance' ? 'Coming soon' : undefined,
+      }),
+    )
+  }
+  // In org/user context: hide search-only sorts
+  return SORT_KEYS.filter(k => !k.searchOnly)
+})
+
 // Handle sort key change from dropdown
 function handleSortKeyChange(event: Event) {
   const target = event.target as HTMLSelectElement
@@ -79,6 +96,7 @@ function handleToggleDirection() {
 
 // Map sort key to i18n key
 const sortKeyLabelKeys: Record<SortKey, string> = {
+  'relevance': 'filters.sort.relevance',
   'downloads-week': 'filters.sort.downloads_week',
   'downloads-day': 'filters.sort.downloads_day',
   'downloads-month': 'filters.sort.downloads_month',
@@ -100,8 +118,11 @@ function getSortKeyLabelKey(key: SortKey): string {
   <div class="space-y-3 mb-6">
     <!-- Main toolbar row -->
     <div class="flex flex-col sm:flex-row sm:items-center gap-3">
-      <!-- Count display -->
-      <div class="text-sm font-mono text-fg-muted">
+      <!-- Count display (infinite scroll mode only) -->
+      <div
+        v-if="viewMode === 'cards' && paginationMode === 'infinite' && !searchContext"
+        class="text-sm font-mono text-fg-muted"
+      >
         <template v-if="showingFiltered">
           {{
             $t('filters.count.showing_filtered', {
@@ -115,6 +136,19 @@ function getSortKeyLabelKey(key: SortKey): string {
         </template>
       </div>
 
+      <!-- Count display (paginated/table mode only) -->
+      <div
+        v-if="(viewMode === 'table' || paginationMode === 'paginated') && !searchContext"
+        class="text-sm font-mono text-fg-muted"
+      >
+        {{
+          $t('filters.count.showing_paginated', {
+            pageSize: pageSize === 'all' ? filteredCount : pageSize,
+            total: filteredCount.toLocaleString(),
+          })
+        }}
+      </div>
+
       <div class="flex-1" />
 
       <div class="flex flex-wrap items-center gap-3">
@@ -138,7 +172,7 @@ function getSortKeyLabelKey(key: SortKey): string {
               @change="handleSortKeyChange"
             >
               <option
-                v-for="keyConfig in SORT_KEYS"
+                v-for="keyConfig in availableSortKeys"
                 :key="keyConfig.key"
                 :value="keyConfig.key"
                 :disabled="keyConfig.disabled"
@@ -184,8 +218,9 @@ function getSortKeyLabelKey(key: SortKey): string {
       </div>
     </div>
 
-    <!-- Filter panel -->
+    <!-- Filter panel (hidden in search context) -->
     <FilterPanel
+      v-if="!searchContext"
       :filters="filters"
       :available-keywords="availableKeywords"
       @update:text="emit('update:text', $event)"
@@ -196,8 +231,9 @@ function getSortKeyLabelKey(key: SortKey): string {
       @toggle-keyword="emit('toggleKeyword', $event)"
     />
 
-    <!-- Active filter chips -->
+    <!-- Active filter chips (hidden in search context) -->
     <FilterChips
+      v-if="!searchContext"
       :chips="activeFilters"
       @remove="emit('clearFilter', $event)"
       @clear-all="emit('clearAllFilters')"

app/components/PackageTableRow.vue

@@ -17,37 +17,16 @@ const emit = defineEmits<{
 const pkg = computed(() => props.result.package)
 const score = computed(() => props.result.score)
 
+// Get the best available date: prefer result.updated (from packument), fall back to package.date
+const updatedDate = computed(() => props.result.updated ?? props.result.package.date)
+
 function formatDownloads(count?: number): string {
   if (count === undefined) return '-'
   if (count >= 1_000_000) return `${(count / 1_000_000).toFixed(1)}M`
   if (count >= 1_000) return `${(count / 1_000).toFixed(1)}K`
   return count.toString()
 }
 
-function formatDate(dateStr?: string): string {
-  if (!dateStr) return '-'
-  const date = new Date(dateStr)
-  if (Number.isNaN(date.getTime())) return '-'
-  const now = new Date()
-  const diffMs = now.getTime() - date.getTime()
-  const diffSeconds = Math.floor(diffMs / 1000)
-  const diffMinutes = Math.floor(diffSeconds / 60)
-  const diffHours = Math.floor(diffMinutes / 60)
-  const diffDays = Math.floor(diffHours / 24)
-  const diffWeeks = Math.floor(diffDays / 7)
-  const diffMonths = Math.floor(diffDays / 30)
-  const diffYears = Math.floor(diffDays / 365)
-
-  const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' })
-
-  if (diffDays === 0) return rtf.format(0, 'day')
-  if (diffDays === 1) return rtf.format(-1, 'day')
-  if (diffDays < 7) return rtf.format(-diffDays, 'day')
-  if (diffDays < 30) return rtf.format(-diffWeeks, 'week')
-  if (diffDays < 365) return rtf.format(-diffMonths, 'month')
-  return rtf.format(-diffYears, 'year')
-}
-
 function formatScore(value?: number): string {
   if (value === undefined || value === 0) return '-'
   return Math.round(value * 100).toString()
@@ -105,7 +84,14 @@ const allMaintainersText = computed(() => {
 
     <!-- Updated -->
     <td v-if="isColumnVisible('updated')" class="py-2 px-3 font-mono text-xs text-fg-muted">
-      {{ formatDate(result.updated ?? pkg.date) }}
+      <DateTime
+        v-if="updatedDate"
+        :datetime="updatedDate"
+        year="numeric"
+        month="short"
+        day="numeric"
+      />
+      <span v-else>-</span>
     </td>
 
     <!-- Maintainers -->

app/components/PaginationControls.vue

@@ -1,27 +1,50 @@
 <script setup lang="ts">
-import type { PageSize, PaginationMode } from '#shared/types/preferences'
+import type { PageSize, PaginationMode, ViewMode } from '#shared/types/preferences'
 import { PAGE_SIZE_OPTIONS } from '#shared/types/preferences'
 
 const props = defineProps<{
   mode: PaginationMode
   pageSize: PageSize
   currentPage: number
   totalItems: number
+  /** When in table view, force pagination mode (no infinite scroll for tables) */
+  viewMode?: ViewMode
 }>()
 
+// Whether we should show pagination controls (table view always uses pagination)
+const shouldShowControls = computed(() => props.viewMode === 'table' || props.mode === 'paginated')
+
+// Table view forces pagination mode, otherwise use the provided mode
+const effectiveMode = computed<PaginationMode>(() =>
+  shouldShowControls.value ? 'paginated' : 'infinite',
+)
+
 const emit = defineEmits<{
   'update:mode': [mode: PaginationMode]
   'update:pageSize': [size: PageSize]
   'update:currentPage': [page: number]
 }>()
 
-const totalPages = computed(() => Math.ceil(props.totalItems / props.pageSize))
-
-const startItem = computed(() =>
-  props.totalItems === 0 ? 0 : (props.currentPage - 1) * props.pageSize + 1,
+// When 'all' is selected, there's only 1 page with everything
+const isShowingAll = computed(() => props.pageSize === 'all')
+const effectivePageSize = computed(() => (isShowingAll.value ? props.totalItems : props.pageSize))
+const totalPages = computed(() =>
+  isShowingAll.value ? 1 : Math.ceil(props.totalItems / (props.pageSize as number)),
 )
 
-const endItem = computed(() => Math.min(props.currentPage * props.pageSize, props.totalItems))
+// Whether to show the mode toggle (hidden in table view since table always uses pagination)
+const showModeToggle = computed(() => props.viewMode !== 'table')
+
+const startItem = computed(() => {
+  if (props.totalItems === 0) return 0
+  if (isShowingAll.value) return 1
+  return (props.currentPage - 1) * (props.pageSize as number) + 1
+})
+
+const endItem = computed(() => {
+  if (isShowingAll.value) return props.totalItems
+  return Math.min(props.currentPage * (props.pageSize as number), props.totalItems)
+})
 
 const canGoPrev = computed(() => props.currentPage > 1)
 const canGoNext = computed(() => props.currentPage < totalPages.value)
@@ -86,19 +109,26 @@ const visiblePages = computed(() => {
 
 function handlePageSizeChange(event: Event) {
   const target = event.target as HTMLSelectElement
-  const newSize = Number(target.value) as PageSize
+  const value = target.value
+  // Handle 'all' as a special string value, otherwise parse as number
+  const newSize = (value === 'all' ? 'all' : Number(value)) as PageSize
   emit('update:pageSize', newSize)
   // Reset to page 1 when changing page size
   emit('update:currentPage', 1)
 }
 </script>
 
 <template>
-  <div class="flex flex-wrap items-center justify-between gap-4 py-4 border-t border-border mt-6">
+  <!-- Only show when in paginated mode (table view or explicit paginated mode) -->
+  <div
+    v-if="shouldShowControls"
+    class="flex flex-wrap items-center justify-between gap-4 py-4 border-t border-border mt-6"
+  >
     <!-- Left: Mode toggle and page size -->
     <div class="flex items-center gap-4">
-      <!-- Pagination mode toggle -->
+      <!-- Pagination mode toggle (hidden in table view - tables always use pagination) -->
       <div
+        v-if="showModeToggle"
         class="inline-flex rounded-md border border-border p-0.5 bg-bg-subtle"
         role="group"
         :aria-label="$t('filters.pagination.mode_label')"
@@ -123,8 +153,8 @@ function handlePageSizeChange(event: Event) {
         </button>
       </div>
 
-      <!-- Page size (paginated mode only) -->
-      <div v-if="mode === 'paginated'" class="relative shrink-0">
+      <!-- Page size (shown when paginated or table view) -->
+      <div v-if="effectiveMode === 'paginated'" class="relative shrink-0">
         <label for="page-size" class="sr-only">{{ $t('filters.pagination.items_per_page') }}</label>
         <select
           id="page-size"
@@ -133,7 +163,11 @@ function handlePageSizeChange(event: Event) {
           @change="handlePageSizeChange"
         >
           <option v-for="size in PAGE_SIZE_OPTIONS" :key="size" :value="size">
-            {{ size }}
+            {{
+              size === 'all'
+                ? $t('filters.pagination.all_yolo')
+                : $t('filters.pagination.per_page', { count: size })
+            }}
           </option>
         </select>
         <div
@@ -146,7 +180,7 @@ function handlePageSizeChange(event: Event) {
     </div>
 
     <!-- Right: Page info and navigation (paginated mode only) -->
-    <div v-if="mode === 'paginated' && totalItems > 0" class="flex items-center gap-4">
+    <div v-if="effectiveMode === 'paginated'" class="flex items-center gap-4">
       <!-- Showing X-Y of Z -->
       <span class="text-sm font-mono text-fg-muted">
         {{

app/composables/usePackageListPreferences.ts

@@ -77,7 +77,7 @@ export function usePackageListPreferences() {
   }
 
   function resetColumns() {
-    preferences.value.columns = DEFAULT_COLUMNS.map(col => ({ ...col }))
+    preferences.value.columns = DEFAULT_COLUMNS.map(col => Object.assign({}, col))
     save()
   }
 

app/composables/useStructuredFilters.ts

@@ -114,6 +114,22 @@ interface UseStructuredFiltersOptions {
   initialSort?: SortOption
 }
 
+// Pure filter predicates (no closure dependencies)
+function matchesKeywords(pkg: NpmSearchResult, keywords: string[]): boolean {
+  if (keywords.length === 0) return true
+  const pkgKeywords = new Set((pkg.package.keywords ?? []).map(k => k.toLowerCase()))
+  // AND logic: package must have ALL selected keywords (case-insensitive)
+  return keywords.every(k => pkgKeywords.has(k.toLowerCase()))
+}
+
+function matchesSecurity(pkg: NpmSearchResult, security: SecurityFilter): boolean {
+  if (security === 'all') return true
+  const hasWarnings = (pkg.flags?.insecure ?? 0) > 0
+  if (security === 'secure') return !hasWarnings
+  if (security === 'warnings') return hasWarnings
+  return true
+}
+
 /**
  * Composable for structured filtering and sorting of package lists
  */
@@ -224,21 +240,6 @@ export function useStructuredFilters(options: UseStructuredFiltersOptions) {
     return true
   }
 
-  function matchesKeywords(pkg: NpmSearchResult, keywords: string[]): boolean {
-    if (keywords.length === 0) return true
-    const pkgKeywords = new Set((pkg.package.keywords ?? []).map(k => k.toLowerCase()))
-    // AND logic: package must have ALL selected keywords (case-insensitive)
-    return keywords.every(k => pkgKeywords.has(k.toLowerCase()))
-  }
-
-  function matchesSecurity(pkg: NpmSearchResult, security: SecurityFilter): boolean {
-    if (security === 'all') return true
-    const hasWarnings = (pkg.flags?.insecure ?? 0) > 0
-    if (security === 'secure') return !hasWarnings
-    if (security === 'warnings') return hasWarnings
-    return true
-  }
-
   function matchesUpdatedWithin(pkg: NpmSearchResult, within: UpdatedWithin): boolean {
     if (within === 'any') return true
     const config = UPDATED_WITHIN_OPTIONS.find(o => o.value === within)
@@ -298,6 +299,10 @@ export function useStructuredFilters(options: UseStructuredFiltersOptions) {
       case 'score':
         diff = (a.score?.final ?? 0) - (b.score?.final ?? 0)
         break
+      case 'relevance':
+        // Relevance preserves server order (already sorted by search relevance)
+        diff = 0
+        break
       default:
         diff = 0
     }

app/pages/@[org].vue

@@ -271,6 +271,7 @@ defineOgImageComponent('Default', {
           :page-size="pageSize"
           :current-page="currentPage"
           :total-items="sortedPackages.length"
+          :view-mode="viewMode"
           @update:mode="paginationMode = $event"
           @update:page-size="pageSize = $event"
           @update:current-page="currentPage = $event"