feat: allow filtering user/team packages

Author: danielroe

app/components/PackageCard.vue

@@ -10,14 +10,6 @@ defineProps<{
   showPublisher?: boolean
   prefetch?: boolean
 }>()
-
-function formatDate(dateStr: string): string {
-  return new Date(dateStr).toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-  })
-}
 </script>
 
 <template>
@@ -68,7 +60,12 @@ function formatDate(dateStr: string): string {
           <div v-if="result.package.date" class="flex items-center gap-1.5">
             <dt class="sr-only">Updated</dt>
             <dd>
-              <time :datetime="result.package.date">{{ formatDate(result.package.date) }}</time>
+              <NuxtTime
+                :datetime="result.package.date"
+                year="numeric"
+                month="short"
+                day="numeric"
+              />
             </dd>
           </div>
         </dl>

app/components/PackageListControls.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+export type SortOption = 'downloads' | 'updated' | 'name-asc' | 'name-desc'
+
+const props = defineProps<{
+  /** Current search/filter text */
+  filter: string
+  /** Current sort option */
+  sort: SortOption
+  /** Placeholder text for the search input */
+  placeholder?: string
+  /** Total count of packages (before filtering) */
+  totalCount?: number
+  /** Filtered count of packages */
+  filteredCount?: number
+}>()
+
+const emit = defineEmits<{
+  'update:filter': [value: string]
+  'update:sort': [value: SortOption]
+}>()
+
+const filterValue = computed({
+  get: () => props.filter,
+  set: value => emit('update:filter', value),
+})
+
+const sortValue = computed({
+  get: () => props.sort,
+  set: value => emit('update:sort', value),
+})
+
+const sortOptions = [
+  { value: 'downloads', label: 'Most downloaded' },
+  { value: 'updated', label: 'Recently updated' },
+  { value: 'name-asc', label: 'Name (A-Z)' },
+  { value: 'name-desc', label: 'Name (Z-A)' },
+] as const
+
+// Show filter count when filtering is active
+const showFilteredCount = computed(() => {
+  return (
+    props.filter &&
+    props.filteredCount !== undefined &&
+    props.totalCount !== undefined &&
+    props.filteredCount !== props.totalCount
+  )
+})
+</script>
+
+<template>
+  <div class="flex flex-col sm:flex-row gap-3 mb-6">
+    <!-- Filter input -->
+    <div class="flex-1 relative">
+      <label for="package-filter" class="sr-only">Filter packages</label>
+      <span
+        class="absolute left-3 top-1/2 -translate-y-1/2 text-fg-subtle pointer-events-none"
+        aria-hidden="true"
+      >
+        <span class="i-carbon-search inline-block w-4 h-4" />
+      </span>
+      <input
+        id="package-filter"
+        v-model="filterValue"
+        type="search"
+        :placeholder="placeholder ?? 'Filter packages...'"
+        autocomplete="off"
+        class="w-full bg-bg-subtle border border-border rounded-lg pl-9 pr-4 py-2 font-mono text-sm text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:(border-border-hover outline-none)"
+      />
+    </div>
+
+    <!-- Sort select -->
+    <div class="relative shrink-0">
+      <label for="package-sort" class="sr-only">Sort packages</label>
+      <select
+        id="package-sort"
+        v-model="sortValue"
+        class="appearance-none bg-bg-subtle border border-border rounded-lg pl-3 pr-8 py-2 font-mono text-sm text-fg cursor-pointer transition-colors duration-200 focus:(border-border-hover outline-none) hover:border-border-hover"
+      >
+        <option v-for="option in sortOptions" :key="option.value" :value="option.value">
+          {{ option.label }}
+        </option>
+      </select>
+      <span
+        class="absolute right-3 top-1/2 -translate-y-1/2 text-fg-subtle pointer-events-none"
+        aria-hidden="true"
+      >
+        <span class="i-carbon-chevron-down w-4 h-4" />
+      </span>
+    </div>
+  </div>
+
+  <!-- Filtered count indicator -->
+  <p v-if="showFilteredCount" class="text-fg-subtle text-xs font-mono mb-4">
+    Showing {{ filteredCount }} of {{ totalCount }} packages
+  </p>
+</template>

app/composables/useNpmRegistry.ts

@@ -3,7 +3,9 @@ import type {
   PackumentVersion,
   SlimPackument,
   NpmSearchResponse,
+  NpmSearchResult,
   NpmDownloadCount,
+  NpmPerson,
 } from '#shared/types'
 
 const NPM_REGISTRY = 'https://registry.npmjs.org'
@@ -216,3 +218,111 @@ export function useNpmSearch(
     { default: () => lastSearch || emptySearchResponse },
   )
 }
+
+/**
+ * Fetch all package names in an npm organization
+ * Uses the /-/org/{org}/package endpoint
+ */
+async function fetchOrgPackageNames(orgName: string): Promise<string[]> {
+  const data = await $fetch<Record<string, string>>(
+    `${NPM_REGISTRY}/-/org/${encodeURIComponent(orgName)}/package`,
+  )
+  return Object.keys(data)
+}
+
+/**
+ * Minimal packument data needed for package cards
+ */
+interface MinimalPackument {
+  'name': string
+  'description'?: string
+  'dist-tags': Record<string, string>
+  'time': Record<string, string>
+  'maintainers'?: NpmPerson[]
+}
+
+/**
+ * Fetch minimal packument data for a single package
+ */
+async function fetchMinimalPackument(name: string): Promise<MinimalPackument | null> {
+  try {
+    const encoded = encodePackageName(name)
+    return await $fetch<MinimalPackument>(`${NPM_REGISTRY}/${encoded}`, {
+      // Only fetch the fields we need using Accept header
+      // Note: npm registry doesn't support field filtering, so we get full packument
+      // but we only use what we need
+    })
+  } catch {
+    // Package might not exist or be private
+    return null
+  }
+}
+
+/**
+ * Convert packument to search result format for display
+ */
+function packumentToSearchResult(pkg: MinimalPackument): NpmSearchResult {
+  const latestVersion = pkg['dist-tags'].latest || Object.values(pkg['dist-tags'])[0] || ''
+  const modified = pkg.time.modified || pkg.time[latestVersion] || ''
+
+  return {
+    package: {
+      name: pkg.name,
+      version: latestVersion,
+      description: pkg.description,
+      date: pkg.time[latestVersion] || modified,
+      links: {
+        npm: `https://www.npmjs.com/package/${pkg.name}`,
+      },
+      maintainers: pkg.maintainers,
+    },
+    score: { final: 0, detail: { quality: 0, popularity: 0, maintenance: 0 } },
+    searchScore: 0,
+    updated: modified,
+  }
+}
+
+/**
+ * Fetch all packages for an npm organization
+ * Returns search-result-like objects for compatibility with PackageList
+ */
+export function useOrgPackages(orgName: MaybeRefOrGetter<string>) {
+  return useLazyAsyncData(
+    () => `org-packages:${toValue(orgName)}`,
+    async () => {
+      const org = toValue(orgName)
+      if (!org) {
+        return emptySearchResponse
+      }
+
+      // Get all package names in the org
+      const packageNames = await fetchOrgPackageNames(org)
+
+      if (packageNames.length === 0) {
+        return emptySearchResponse
+      }
+
+      // Fetch packuments in parallel (with concurrency limit)
+      const concurrency = 10
+      const results: NpmSearchResult[] = []
+
+      for (let i = 0; i < packageNames.length; i += concurrency) {
+        const batch = packageNames.slice(i, i + concurrency)
+        const packuments = await Promise.all(batch.map(name => fetchMinimalPackument(name)))
+
+        for (const pkg of packuments) {
+          if (pkg) {
+            results.push(packumentToSearchResult(pkg))
+          }
+        }
+      }
+
+      return {
+        objects: results,
+        total: results.length,
+        time: new Date().toISOString(),
+      } satisfies NpmSearchResponse
+    },
+    { default: () => emptySearchResponse },
+  )
+}