index.vue

<script setup lang="ts">
import { formatNumber } from '#imports'
import { debounce } from 'perfect-debounce'

const route = useRoute('~username')
const router = useRouter()

const username = computed(() => route.params.username)

// Infinite scroll state
const pageSize = 50
const maxResults = 250 // npm API hard limit
const loadedPages = ref(1)
const isLoadingMore = ref(false)

// Get initial page from URL (for scroll restoration on reload)
const initialPage = computed(() => {
  const p = Number.parseInt(route.query.page as string, 10)
  return Number.isNaN(p) ? 1 : Math.max(1, p)
})

// Debounced URL update for page and filter/sort
const updateUrl = debounce((updates: { page?: number; filter?: string; sort?: string }) => {
  router.replace({
    query: {
      ...route.query,
      page: updates.page && updates.page > 1 ? updates.page : undefined,
      q: updates.filter || undefined,
      sort: updates.sort && updates.sort !== 'downloads' ? updates.sort : undefined,
    },
  })
}, 300)

type SortOption = 'downloads' | 'updated' | 'name-asc' | 'name-desc'

// Filter and sort state (from URL)
const filterText = ref((route.query.q as string) ?? '')
const sortOption = ref<SortOption>((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 = ref(
  Boolean(route.query.q) || (route.query.sort && route.query.sort !== 'downloads'),
)

// Update URL when filter/sort changes (debounced)
const debouncedUpdateUrl = debounce((filter: string, sort: string) => {
  updateUrl({ filter, sort })
}, 300)

watch([filterText, sortOption], ([filter, sort]) => {
  // Once user interacts with filter/sort, load all results
  if (!hasLoadedAll.value && (filter !== '' || sort !== 'downloads')) {
    hasLoadedAll.value = true
  }
  debouncedUpdateUrl(filter, sort)
})

// Search for packages by this maintainer
const searchQuery = computed(() => `maintainer:${username.value}`)

// Request size: load all if user has interacted with filter/sort, otherwise paginate
const requestSize = computed(() => (hasLoadedAll.value ? maxResults : pageSize * loadedPages.value))

const {
  data: results,
  status,
  error,
} = useNpmSearch(searchQuery, () => ({
  size: requestSize.value,
}))

// Initialize loaded pages from URL on mount
onMounted(() => {
  if (initialPage.value > 1) {
    loadedPages.value = initialPage.value
  }
})

// Get the base packages list
const packages = computed(() => results.value?.objects ?? [])

const packageCount = computed(() => packages.value.length)

// Apply client-side filter and sort
const filteredAndSortedPackages = computed(() => {
  let pkgs = [...packages.value]

  // Apply text filter
  if (filterText.value) {
    const search = filterText.value.toLowerCase()
    pkgs = pkgs.filter(
      pkg =>
        pkg.package.name.toLowerCase().includes(search) ||
        pkg.package.description?.toLowerCase().includes(search),
    )
  }

  // Apply sort
  switch (sortOption.value) {
    case 'updated':
      pkgs.sort((a, b) => {
        const dateA = a.updated || a.package.date || ''
        const dateB = b.updated || b.package.date || ''
        return dateB.localeCompare(dateA)
      })
      break
    case 'name-asc':
      pkgs.sort((a, b) => a.package.name.localeCompare(b.package.name))
      break
    case 'name-desc':
      pkgs.sort((a, b) => b.package.name.localeCompare(a.package.name))
      break
    case 'downloads':
    default:
      pkgs.sort((a, b) => (b.downloads?.weekly ?? 0) - (a.downloads?.weekly ?? 0))
      break
  }

  return pkgs
})

const filteredCount = computed(() => filteredAndSortedPackages.value.length)

// Check if there are potentially more results
const hasMore = computed(() => {
  if (!results.value) return false
  // Don't show "load more" when we've already loaded all
  if (hasLoadedAll.value) return false

  // npm search API returns max 250 results, but we paginate for faster initial load
  return (
    results.value.objects.length >= pageSize * loadedPages.value &&
    loadedPages.value * pageSize < maxResults
  )
})

function loadMore() {
  if (isLoadingMore.value || !hasMore.value) return

  isLoadingMore.value = true
  loadedPages.value++

  nextTick(() => {
    isLoadingMore.value = false
  })
}

// Update URL when page changes from scrolling
function handlePageChange(page: number) {
  updateUrl({ page, filter: filterText.value, sort: sortOption.value })
}

// Reset state when username changes
watch(username, () => {
  loadedPages.value = 1
  filterText.value = ''
  sortOption.value = 'downloads'
  hasLoadedAll.value = false
})

useSeoMeta({
  title: () => `@${username.value} - npmx`,
  description: () => `npm packages maintained by ${username.value}`,
})

defineOgImageComponent('Default', {
  title: () => `@${username.value}`,
  description: () => (results.value ? `${results.value.total} packages` : 'npm user profile'),
})
</script>

<template>
  <main class="container py-8 sm:py-12 w-full">
    <!-- Header -->
    <header class="mb-8 pb-8 border-b border-border">
      <div class="flex items-center gap-4 mb-4">
        <!-- Avatar placeholder -->
        <div
          class="w-16 h-16 rounded-full bg-bg-muted border border-border flex items-center justify-center"
          aria-hidden="true"
        >
          <span class="text-2xl text-fg-subtle font-mono">{{
            username.charAt(0).toUpperCase()
          }}</span>
        </div>
        <div>
          <h1 class="font-mono text-2xl sm:text-3xl font-medium">@{{ username }}</h1>
          <p v-if="results?.total" class="text-fg-muted text-sm mt-1">
            {{ formatNumber(results.total) }} public package{{ results.total === 1 ? '' : 's' }}
          </p>
        </div>
      </div>

      <!-- Link to npmjs.com profile -->
      <nav aria-label="External links">
        <a
          :href="`https://www.npmjs.com/~${username}`"
          target="_blank"
          rel="noopener noreferrer"
          class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
        >
          <span class="i-carbon-cube w-4 h-4" />
          view on npm
        </a>
      </nav>
    </header>

    <!-- Loading state -->
    <LoadingSpinner v-if="status === 'pending' && loadedPages === 1" text="Loading packages..." />

    <!-- Error state -->
    <div v-else-if="status === 'error'" role="alert" class="py-12 text-center">
      <p class="text-fg-muted mb-4">
        {{ error?.message ?? 'Failed to load user packages' }}
      </p>
      <NuxtLink to="/" class="btn"> Go back home </NuxtLink>
    </div>

    <!-- Empty state -->
    <div v-else-if="results && results.total === 0" class="py-12 text-center">
      <p class="text-fg-muted font-mono">
        No public packages found for <span class="text-fg">@{{ username }}</span>
      </p>
      <p class="text-fg-subtle text-sm mt-2">This user may not exist or has no public packages.</p>
    </div>

    <!-- Package list -->
    <section v-else-if="results && packages.length > 0" aria-label="User packages">
      <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-4">Packages</h2>

      <!-- Filter and sort controls -->
      <PackageListControls
        v-model:filter="filterText"
        v-model:sort="sortOption"
        :placeholder="`Filter ${packageCount} packages...`"
        :total-count="packageCount"
        :filtered-count="filteredCount"
      />

      <!-- No results after filtering -->
      <p
        v-if="filteredAndSortedPackages.length === 0"
        class="text-fg-muted py-8 text-center font-mono"
      >
        No packages match "<span class="text-fg">{{ filterText }}</span
        >"
      </p>

      <PackageList
        v-else
        :results="filteredAndSortedPackages"
        :has-more="hasMore"
        :is-loading="isLoadingMore || (status === 'pending' && loadedPages > 1)"
        :page-size="pageSize"
        :initial-page="initialPage"
        @load-more="loadMore"
        @page-change="handlePageChange"
      />
    </section>
  </main>
</template>