chore: convert chart modal to modal route

Author: iiio2

app/components/PackageWeeklyDownloadStats.vue

@@ -7,15 +7,6 @@ const props = defineProps<{
   packageName: string
 }>()
 
-const chartModal = useModal('chart-modal')
-
-const isChartModalOpen = shallowRef(false)
-function openChartModal() {
-  isChartModalOpen.value = true
-  // ensure the component renders before opening the dialog
-  nextTick(() => chartModal.open())
-}
-
 const { data: packument } = usePackage(() => props.packageName)
 const createdIso = computed(() => packument.value?.time?.created ?? null)
 
@@ -199,15 +190,14 @@ const config = computed(() => {
   <div class="space-y-8">
     <CollapsibleSection id="downloads" :title="$t('package.downloads.title')">
       <template #actions>
-        <button
-          type="button"
-          @click="openChartModal"
+        <NuxtLink
+          :to="{ name: 'analytics', params: { package: props.packageName.split('/') } }"
           class="link-subtle font-mono text-sm inline-flex items-center gap-1.5 ms-auto shrink-0 self-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
           :title="$t('package.downloads.analyze')"
         >
           <span class="i-carbon:data-analytics w-4 h-4" aria-hidden="true" />
           <span class="sr-only">{{ $t('package.downloads.analyze') }}</span>
-        </button>
+        </NuxtLink>
       </template>
 
       <div class="w-full overflow-hidden">
@@ -247,15 +237,6 @@ const config = computed(() => {
       </div>
     </CollapsibleSection>
   </div>
-
-  <ChartModal v-if="isChartModalOpen" @close="isChartModalOpen = false">
-    <PackageDownloadAnalytics
-      :weeklyDownloads="weeklyDownloads"
-      :inModal="true"
-      :packageName="props.packageName"
-      :createdIso="createdIso"
-    />
-  </ChartModal>
 </template>
 
 <style>

app/pages/analytics/[...package].vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+definePageMeta({
+  name: 'analytics',
+})
+
+const route = useRoute('analytics')
+const router = useRouter()
+
+// Extract package name from route params (handles scoped packages like @org/pkg)
+const packageName = computed(() => {
+  const params = route.params.package || []
+  return params.join('/')
+})
+
+// Fetch package data to get creation date and check if package exists
+const { data: packument, status: packageStatus } = usePackage(packageName)
+const createdIso = computed(() => packument.value?.time?.created ?? null)
+
+// Determine if package exists (has data after loading)
+const packageExists = computed(() => packageStatus.value === 'success' && !!packument.value)
+
+// Close destination: package page if exists, home otherwise
+const closeDestination = computed(() => (packageExists.value ? `/${packageName.value}` : '/'))
+
+// Fetch weekly downloads for initial display
+const { fetchPackageDownloadEvolution } = useCharts()
+const weeklyDownloads = shallowRef<WeeklyDownloadPoint[]>([])
+
+async function loadWeeklyDownloads() {
+  if (!import.meta.client) return
+  if (!packageName.value) return
+
+  try {
+    const result = await fetchPackageDownloadEvolution(
+      () => packageName.value,
+      () => createdIso.value,
+      () => ({ granularity: 'week' as const, weeks: 52 }),
+    )
+    weeklyDownloads.value = (result as WeeklyDownloadPoint[]) ?? []
+  } catch {
+    weeklyDownloads.value = []
+  }
+}
+
+onMounted(() => {
+  loadWeeklyDownloads()
+})
+
+watch(packageName, () => loadWeeklyDownloads())
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    router.push(closeDestination.value)
+  }
+}
+
+// SEO
+useSeoMeta({
+  title: () => (packageName.value ? `${packageName.value} Downloads - npmx` : 'Downloads - npmx'),
+  description: () => `Download statistics and trends for ${packageName.value}`,
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      class="fixed inset-0 z-50 flex items-center justify-center p-0 sm:p-4"
+      @keydown="handleKeydown"
+    >
+      <!-- Backdrop - clicking navigates back -->
+      <NuxtLink
+        :to="closeDestination"
+        class="absolute inset-0 bg-black/60 cursor-default"
+        :aria-label="$t('common.close_modal')"
+      />
+
+      <div
+        class="relative w-full h-full sm:h-auto bg-bg sm:border sm:border-border sm:rounded-lg shadow-xl sm:max-h-[90vh] overflow-y-auto overscroll-contain sm:max-w-3xl"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="analytics-modal-title"
+      >
+        <div class="p-4 sm:p-6">
+          <div class="flex items-center justify-between mb-4 sm:mb-6">
+            <h1 id="analytics-modal-title" class="font-mono text-lg font-medium">
+              {{ $t('package.downloads.modal_title') }}
+            </h1>
+            <NuxtLink
+              :to="closeDestination"
+              class="text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+              :aria-label="$t('common.close')"
+            >
+              <span class="i-carbon-close block w-5 h-5" aria-hidden="true" />
+            </NuxtLink>
+          </div>
+          <div class="font-mono text-sm">
+            <ClientOnly>
+              <PackageDownloadAnalytics
+                :weeklyDownloads="weeklyDownloads"
+                :inModal="true"
+                :packageName="packageName"
+                :createdIso="createdIso"
+              />
+              <template #fallback>
+                <div class="min-h-[260px] flex items-center justify-center">
+                  <span
+                    class="i-carbon:circle-dash w-6 h-6 motion-safe:animate-spin text-fg-subtle"
+                  />
+                </div>
+              </template>
+            </ClientOnly>
+          </div>
+        </div>
+
+        <!-- Mobile close button -->
+        <div class="sm:hidden flex justify-center pb-4">
+          <NuxtLink
+            :to="closeDestination"
+            class="w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg flex items-center justify-center text-fg-muted hover:text-fg transition-colors"
+            :aria-label="$t('common.close')"
+          >
+            <span class="w-5 h-5 i-carbon:close" aria-hidden="true" />
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>