Merge branch 'main' into refactor/generalize-i18n-downloads

serhalp · serhalp · commit 8f810a0e82f8 · 2026-02-07T20:07:26.000-05:00
diff --git a/app/components/Header/AccountMenu.server.vue b/app/components/Header/AccountMenu.server.vue
@@ -1,6 +1,10 @@
 <template>
-  <div class="flex items-center justify-end gap-2 px-2 py-1.5 min-w-24">
-    <span class="font-mono text-sm text-fg-muted">{{ $t('account_menu.connect') }}</span>
-    <span class="i-carbon-chevron-down w-3 h-3 text-fg-muted" aria-hidden="true" />
+  <div class="relative flex min-w-24 justify-end">
+    <div
+      class="inline-flex gap-x-1 items-center justify-center font-mono border border-border rounded-md text-sm px-4 py-2 bg-transparent text-fg border-none"
+    >
+      <span class="font-mono text-sm text-fg-muted">{{ $t('account_menu.connect') }}</span>
+      <span class="i-carbon-chevron-down w-3 h-3 text-fg-muted" aria-hidden="true" />
+    </div>
   </div>
 </template>
diff --git a/app/components/Header/MobileMenu.client.vue b/app/components/Header/MobileMenu.client.vue
@@ -99,28 +99,84 @@ onUnmounted(deactivate)
               </button>
             </div>
 
-            <!-- Navigation links -->
-            <div class="flex-1 overflow-y-auto overscroll-contain py-2">
-              <!-- Main navigation -->
-              <div class="px-2 py-2">
-                <NuxtLink
-                  :to="{ name: 'about' }"
-                  class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
-                  @click="closeMenu"
+            <!-- Account section -->
+            <div class="px-2 py-2">
+              <span
+                class="px-3 py-2 block font-mono text-xs text-fg-subtle uppercase tracking-wider"
+              >
+                {{ $t('account_menu.account') }}
+              </span>
+
+              <!-- npm CLI connection status (only show if connected) -->
+              <button
+                v-if="isConnected && npmUser"
+                type="button"
+                class="w-full flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200 text-start"
+                @click="handleShowConnector"
+              >
+                <img
+                  v-if="npmAvatar"
+                  :src="npmAvatar"
+                  :alt="npmUser"
+                  width="20"
+                  height="20"
+                  class="w-5 h-5 rounded-full object-cover"
+                />
+                <span
+                  v-else
+                  class="w-5 h-5 rounded-full bg-bg-muted flex items-center justify-center"
                 >
-                  <span class="i-carbon:information w-5 h-5 text-fg-muted" aria-hidden="true" />
-                  {{ $t('footer.about') }}
-                </NuxtLink>
+                  <span class="i-carbon-terminal w-3 h-3 text-fg-muted" aria-hidden="true" />
+                </span>
+                <span class="flex-1">~{{ npmUser }}</span>
+                <span class="w-2 h-2 rounded-full bg-green-500" aria-hidden="true" />
+              </button>
 
-                <NuxtLink
-                  :to="{ name: 'privacy' }"
-                  class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
-                  @click="closeMenu"
+              <!-- Atmosphere connection status -->
+              <button
+                v-if="atprotoUser"
+                type="button"
+                class="w-full flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200 text-start"
+                @click="handleShowAuth"
+              >
+                <img
+                  v-if="atprotoUser.avatar"
+                  :src="atprotoUser.avatar"
+                  :alt="atprotoUser.handle"
+                  width="20"
+                  height="20"
+                  class="w-5 h-5 rounded-full object-cover"
+                />
+                <span
+                  v-else
+                  class="w-5 h-5 rounded-full bg-bg-muted flex items-center justify-center"
                 >
-                  <span class="i-carbon:security w-5 h-5 text-fg-muted" aria-hidden="true" />
-                  {{ $t('privacy_policy.title') }}
-                </NuxtLink>
+                  <span class="i-carbon-cloud w-3 h-3 text-fg-muted" aria-hidden="true" />
+                </span>
+                <span class="flex-1 truncate">@{{ atprotoUser.handle }}</span>
+              </button>
 
+              <!-- Connect Atmosphere button (show if not connected) -->
+              <button
+                v-else
+                type="button"
+                class="w-full flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200 text-start"
+                @click="handleShowAuth"
+              >
+                <span class="w-5 h-5 rounded-full bg-bg-muted flex items-center justify-center">
+                  <span class="i-carbon-cloud w-3 h-3 text-fg-muted" aria-hidden="true" />
+                </span>
+                <span class="flex-1">{{ $t('account_menu.connect_atmosphere') }}</span>
+              </button>
+            </div>
+
+            <!-- Divider -->
+            <div class="mx-4 my-2 border-t border-border" />
+
+            <!-- Navigation links -->
+            <div class="flex-1 overflow-y-auto overscroll-contain py-2">
+              <!-- App navigation -->
+              <div class="px-2 py-2">
                 <NuxtLink
                   :to="{ name: 'compare' }"
                   class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
@@ -164,7 +220,31 @@ onUnmounted(deactivate)
               <!-- Divider -->
               <div class="mx-4 my-2 border-t border-border" />
 
-              <!-- External links (from footer) -->
+              <!-- Informational links -->
+              <div class="px-2 py-2">
+                <NuxtLink
+                  :to="{ name: 'about' }"
+                  class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
+                  @click="closeMenu"
+                >
+                  <span class="i-carbon:information w-5 h-5 text-fg-muted" aria-hidden="true" />
+                  {{ $t('footer.about') }}
+                </NuxtLink>
+
+                <NuxtLink
+                  :to="{ name: 'privacy' }"
+                  class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
+                  @click="closeMenu"
+                >
+                  <span class="i-carbon:security w-5 h-5 text-fg-muted" aria-hidden="true" />
+                  {{ $t('privacy_policy.title') }}
+                </NuxtLink>
+              </div>
+
+              <!-- Divider -->
+              <div class="mx-4 my-2 border-t border-border" />
+
+              <!-- External links -->
               <div class="px-2 py-2">
                 <span class="px-3 py-2 font-mono text-xs text-fg-subtle uppercase tracking-wider">
                   {{ $t('nav.links') }}
@@ -227,80 +307,6 @@ onUnmounted(deactivate)
                 </a>
               </div>
             </div>
-
-            <!-- Divider -->
-            <div class="mx-4 my-2 border-t border-border" />
-
-            <!-- Account section -->
-            <div class="px-2 py-2">
-              <span
-                class="px-3 py-2 block font-mono text-xs text-fg-subtle uppercase tracking-wider"
-              >
-                {{ $t('account_menu.account') }}
-              </span>
-
-              <!-- npm CLI connection status (only show if connected) -->
-              <button
-                v-if="isConnected && npmUser"
-                type="button"
-                class="w-full flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200 text-start"
-                @click="handleShowConnector"
-              >
-                <img
-                  v-if="npmAvatar"
-                  :src="npmAvatar"
-                  :alt="npmUser"
-                  width="20"
-                  height="20"
-                  class="w-5 h-5 rounded-full object-cover"
-                />
-                <span
-                  v-else
-                  class="w-5 h-5 rounded-full bg-bg-muted flex items-center justify-center"
-                >
-                  <span class="i-carbon-terminal w-3 h-3 text-fg-muted" aria-hidden="true" />
-                </span>
-                <span class="flex-1">~{{ npmUser }}</span>
-                <span class="w-2 h-2 rounded-full bg-green-500" aria-hidden="true" />
-              </button>
-
-              <!-- Atmosphere connection status -->
-              <button
-                v-if="atprotoUser"
-                type="button"
-                class="w-full flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200 text-start"
-                @click="handleShowAuth"
-              >
-                <img
-                  v-if="atprotoUser.avatar"
-                  :src="atprotoUser.avatar"
-                  :alt="atprotoUser.handle"
-                  width="20"
-                  height="20"
-                  class="w-5 h-5 rounded-full object-cover"
-                />
-                <span
-                  v-else
-                  class="w-5 h-5 rounded-full bg-bg-muted flex items-center justify-center"
-                >
-                  <span class="i-carbon-cloud w-3 h-3 text-fg-muted" aria-hidden="true" />
-                </span>
-                <span class="flex-1 truncate">@{{ atprotoUser.handle }}</span>
-              </button>
-
-              <!-- Connect Atmosphere button (show if not connected) -->
-              <button
-                v-else
-                type="button"
-                class="w-full flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200 text-start"
-                @click="handleShowAuth"
-              >
-                <span class="w-5 h-5 rounded-full bg-bg-muted flex items-center justify-center">
-                  <span class="i-carbon-cloud w-3 h-3 text-fg-muted" aria-hidden="true" />
-                </span>
-                <span class="flex-1">{{ $t('account_menu.connect_atmosphere') }}</span>
-              </button>
-            </div>
           </nav>
         </Transition>
       </div>
diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
@@ -12,15 +12,6 @@ const chartModal = useModal('chart-modal')
 const hasChartModalTransitioned = shallowRef(false)
 const isChartModalOpen = shallowRef(false)
 
-async function openChartModal() {
-  isChartModalOpen.value = true
-  hasChartModalTransitioned.value = false
-  // ensure the component renders before opening the dialog
-  await nextTick()
-  await nextTick()
-  chartModal.open()
-}
-
 function handleModalClose() {
   isChartModalOpen.value = false
   hasChartModalTransitioned.value = false
@@ -96,10 +87,24 @@ const pulseColor = computed(() => {
 })
 
 const weeklyDownloads = shallowRef<WeeklyDownloadPoint[]>([])
+const isLoadingWeeklyDownloads = shallowRef(true)
+const hasWeeklyDownloads = computed(() => weeklyDownloads.value.length > 0)
+
+async function openChartModal() {
+  if (!hasWeeklyDownloads.value) return
+
+  isChartModalOpen.value = true
+  hasChartModalTransitioned.value = false
+  // ensure the component renders before opening the dialog
+  await nextTick()
+  await nextTick()
+  chartModal.open()
+}
 
 async function loadWeeklyDownloads() {
   if (!import.meta.client) return
 
+  isLoadingWeeklyDownloads.value = true
   try {
     const result = await fetchPackageDownloadEvolution(
       () => props.packageName,
@@ -109,6 +114,8 @@ async function loadWeeklyDownloads() {
     weeklyDownloads.value = (result as WeeklyDownloadPoint[]) ?? []
   } catch {
     weeklyDownloads.value = []
+  } finally {
+    isLoadingWeeklyDownloads.value = false
   }
 }
 
@@ -212,6 +219,7 @@ const config = computed(() => {
     <CollapsibleSection id="downloads" :title="$t('package.downloads.title')">
       <template #actions>
         <ButtonBase
+          v-if="hasWeeklyDownloads"
           type="button"
           @click="openChartModal"
           class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 focus-visible:outline-accent/70 rounded"
@@ -223,44 +231,53 @@ const config = computed(() => {
       </template>
 
       <div class="w-full overflow-hidden">
-        <ClientOnly>
-          <VueUiSparkline class="w-full max-w-xs" :dataset :config>
-            <template #skeleton>
-              <!-- This empty div overrides the default built-in scanning animation on load -->
-              <div />
-            </template>
-          </VueUiSparkline>
-          <template #fallback>
-            <!-- Skeleton matching sparkline layout: title row + chart with data label -->
-            <div class="min-h-[75.195px]">
-              <!-- Title row: date range (24px height) -->
-              <div class="h-6 flex items-center ps-3">
-                <SkeletonInline class="h-3 w-36" />
-              </div>
-              <!-- Chart area: data label left, sparkline right -->
-              <div class="aspect-[500/80] flex items-center">
-                <!-- Data label (covers ~42% width) -->
-                <div class="w-[42%] flex items-center ps-0.5">
-                  <SkeletonInline class="h-7 w-24" />
+        <template v-if="isLoadingWeeklyDownloads || hasWeeklyDownloads">
+          <ClientOnly>
+            <VueUiSparkline class="w-full max-w-xs" :dataset :config>
+              <template #skeleton>
+                <!-- This empty div overrides the default built-in scanning animation on load -->
+                <div />
+              </template>
+            </VueUiSparkline>
+            <template #fallback>
+              <!-- Skeleton matching sparkline layout: title row + chart with data label -->
+              <div class="min-h-[75.195px]">
+                <!-- Title row: date range (24px height) -->
+                <div class="h-6 flex items-center ps-3">
+                  <SkeletonInline class="h-3 w-36" />
                 </div>
-                <!-- Sparkline area (~58% width) -->
-                <div class="flex-1 flex items-end gap-0.5 h-4/5 pe-3">
-                  <SkeletonInline
-                    v-for="i in 16"
-                    :key="i"
-                    class="flex-1 rounded-sm"
-                    :style="{ height: `${25 + ((i * 7) % 50)}%` }"
-                  />
+                <!-- Chart area: data label left, sparkline right -->
+                <div class="aspect-[500/80] flex items-center">
+                  <!-- Data label (covers ~42% width) -->
+                  <div class="w-[42%] flex items-center ps-0.5">
+                    <SkeletonInline class="h-7 w-24" />
+                  </div>
+                  <!-- Sparkline area (~58% width) -->
+                  <div class="flex-1 flex items-end gap-0.5 h-4/5 pe-3">
+                    <SkeletonInline
+                      v-for="i in 16"
+                      :key="i"
+                      class="flex-1 rounded-sm"
+                      :style="{ height: `${25 + ((i * 7) % 50)}%` }"
+                    />
+                  </div>
                 </div>
               </div>
-            </div>
-          </template>
-        </ClientOnly>
+            </template>
+          </ClientOnly>
+        </template>
+        <p v-else class="py-2 text-sm font-mono text-fg-subtle">
+          {{ $t('package.downloads.no_data') }}
+        </p>
       </div>
     </CollapsibleSection>
   </div>
 
-  <PackageChartModal @close="handleModalClose" @transitioned="handleModalTransitioned">
+  <PackageChartModal
+    v-if="isChartModalOpen && hasWeeklyDownloads"
+    @close="handleModalClose"
+    @transitioned="handleModalTransitioned"
+  >
     <!-- The Chart is mounted after the dialog has transitioned -->
     <!-- This avoids flaky behavior that hides the chart's minimap half of the time -->
     <Transition name="opacity" mode="out-in">
diff --git a/app/components/Settings/AccentColorPicker.vue b/app/components/Settings/AccentColorPicker.vue
@@ -10,6 +10,13 @@ onPrehydrate(el => {
     const input = el.querySelector<HTMLInputElement>(`input[value="${id}"]`)
     if (input) {
       input.checked = true
+      input.setAttribute('checked', '')
+    }
+    // Remove checked from the server-default (clear button, value="")
+    const clearInput = el.querySelector<HTMLInputElement>('input[value=""]')
+    if (clearInput) {
+      clearInput.checked = false
+      clearInput.removeAttribute('checked')
     }
   }
 })
diff --git a/app/components/Settings/BgThemePicker.vue b/app/components/Settings/BgThemePicker.vue
@@ -5,9 +5,10 @@ onPrehydrate(el => {
   const settings = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
   const id = settings.preferredBackgroundTheme
   if (id) {
-    const input = el.querySelector<HTMLInputElement>(`input[value="${id || 'neutral'}"]`)
+    const input = el.querySelector<HTMLInputElement>(`input[value="${id}"]`)
     if (input) {
       input.checked = true
+      input.setAttribute('checked', '')
     }
   }
 })
diff --git a/app/components/Settings/Toggle.server.vue b/app/components/Settings/Toggle.server.vue
diff --git a/test/nuxt/components/PackageWeeklyDownloadStats.spec.ts b/test/nuxt/components/PackageWeeklyDownloadStats.spec.ts

Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,13 @@ onPrehydrate(el => {`
`10`	`10`	const input = el.querySelector<HTMLInputElement>(`input[value="${id}"]`)
`11`	`11`	`if (input) {`
`12`	`12`	`input.checked = true`
	`13`	`+ input.setAttribute('checked', '')`
	`14`	`+ }`
	`15`	`+ // Remove checked from the server-default (clear button, value="")`
	`16`	`+ const clearInput = el.querySelector<HTMLInputElement>('input[value=""]')`
	`17`	`+ if (clearInput) {`
	`18`	`+ clearInput.checked = false`
	`19`	`+ clearInput.removeAttribute('checked')`
`13`	`20`	`}`
`14`	`21`	`}`
`15`	`22`	`})`
Original file line number	Diff line number	Diff line change
`@@ -5,9 +5,10 @@ onPrehydrate(el => {`
`5`	`5`	`const settings = JSON.parse(localStorage.getItem('npmx-settings') \|\| '{}')`
`6`	`6`	`const id = settings.preferredBackgroundTheme`
`7`	`7`	`if (id) {`
`8`		- const input = el.querySelector<HTMLInputElement>(`input[value="${id \|\| 'neutral'}"]`)
	`8`	+ const input = el.querySelector<HTMLInputElement>(`input[value="${id}"]`)
`9`	`9`	`if (input) {`
`10`	`10`	`input.checked = true`
	`11`	`+ input.setAttribute('checked', '')`
`11`	`12`	`}`
`12`	`13`	`}`
`13`	`14`	`})`