Merge branch 'main' into userquin/feat-add-browser-locale-support

Author: graphieros

app/components/CollapsibleSection.vue

@@ -4,6 +4,7 @@ import { LinkBase } from '#components'
 
 interface Props {
   title: string
+  subtitle?: string
   isLoading?: boolean
   headingLevel?: `h${number}`
   id: string
@@ -81,7 +82,8 @@ useHead({
     <div class="flex items-center justify-between mb-3 px-1">
       <component
         :is="headingLevel"
-        class="group text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-2"
+        class="group text-xs text-fg-subtle uppercase tracking-wider flex gap-2"
+        :class="subtitle ? 'items-start' : 'items-center'"
       >
         <button
           :id="buttonId"
@@ -101,9 +103,14 @@ useHead({
           />
         </button>
 
-        <LinkBase :to="`#${id}`">
-          {{ title }}
-        </LinkBase>
+        <span>
+          <LinkBase :to="`#${id}`">
+            {{ title }}
+          </LinkBase>
+          <span v-if="subtitle" class="block text-2xs normal-case tracking-normal">{{
+            subtitle
+          }}</span>
+        </span>
       </component>
 
       <!-- Actions slot for buttons or other elements -->

app/components/Modal.client.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const props = defineProps<{
   modalTitle: string
+  modalSubtitle?: string
 }>()
 
 const dialogRef = useTemplateRef('dialogRef')
@@ -14,6 +15,12 @@ const modalTitleId = computed(() => {
   return id ? `${id}-title` : undefined
 })
 
+const modalSubtitleId = computed(() => {
+  if (!props.modalSubtitle) return undefined
+  const id = getCurrentInstance()?.attrs.id
+  return id ? `${id}-subtitle` : undefined
+})
+
 function handleModalClose() {
   dialogRef.value?.close()
 }
@@ -45,14 +52,20 @@ defineExpose({
       closedby="any"
       class="w-[calc(100%-2rem)] bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain m-0 m-auto p-6 text-fg focus-visible:outline focus-visible:outline-accent/70"
       :aria-labelledby="modalTitleId"
+      :aria-describedby="modalSubtitleId"
       v-bind="$attrs"
       @transitionend="onDialogTransitionEnd"
     >
       <!-- Modal top header section -->
       <div class="flex items-center justify-between mb-6">
-        <h2 :id="modalTitleId" class="font-mono text-lg font-medium">
-          {{ modalTitle }}
-        </h2>
+        <div>
+          <h2 :id="modalTitleId" class="font-mono text-lg font-medium">
+            {{ modalTitle }}
+          </h2>
+          <p v-if="modalSubtitle" :id="modalSubtitleId" class="text-xs text-fg-subtle">
+            {{ modalSubtitle }}
+          </p>
+        </div>
         <ButtonBase
           type="button"
           :aria-label="$t('common.close')"

app/components/Package/ChartModal.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const props = defineProps<{
   modalTitle?: string
+  modalSubtitle?: string
 }>()
 
 const emit = defineEmits<{
@@ -11,6 +12,7 @@ const emit = defineEmits<{
 <template>
   <Modal
     :modalTitle="modalTitle ?? $t('package.trends.title')"
+    :modalSubtitle="modalSubtitle"
     id="chart-modal"
     class="h-full sm:h-min sm:border sm:border-border sm:rounded-lg shadow-xl sm:max-h-[90vh] sm:max-w-3xl"
     @transitioned="emit('transitioned')"

app/components/Package/LikeCard.vue

@@ -71,9 +71,9 @@ const likeAction = async () => {
 
 <template>
   <NuxtLink :to="packageRoute(name)">
-    <BaseCard class="font-mono flex justify-between">
-      {{ name }}
-      <div class="flex items-center gap-4 justify-between">
+    <BaseCard class="font-mono flex justify-between min-w-0">
+      <span class="truncate min-w-0" :title="name">{{ name }}</span>
+      <div class="flex items-center gap-4 justify-between shrink-0">
         <ClientOnly>
           <TooltipApp
             :text="likesData?.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')"

app/components/Package/TrendsChart.vue

@@ -219,6 +219,9 @@ function formatXyDataset(
     color: accent.value,
     temperatureColors,
     useArea: true,
+    dashIndices: dataset
+      .map((item, index) => (item.hasAnomaly ? index : -1))
+      .filter(index => index !== -1),
   }
 
   if (selectedGranularity === 'weekly' && isWeeklyDataset(dataset)) {
@@ -275,19 +278,26 @@ function formatXyDataset(
 function extractSeriesPoints(
   selectedGranularity: ChartTimeGranularity,
   dataset: EvolutionData,
-): Array<{ timestamp: number; value: number }> {
+): Array<{ timestamp: number; value: number; hasAnomaly: boolean }> {
   if (selectedGranularity === 'weekly' && isWeeklyDataset(dataset)) {
-    return dataset.map(d => ({ timestamp: d.timestampEnd, value: d.value }))
+    return dataset.map(d => ({
+      timestamp: d.timestampEnd,
+      value: d.value,
+      hasAnomaly: !!d.hasAnomaly,
+    }))
   }
   if (
     (selectedGranularity === 'daily' && isDailyDataset(dataset)) ||
     (selectedGranularity === 'monthly' && isMonthlyDataset(dataset)) ||
     (selectedGranularity === 'yearly' && isYearlyDataset(dataset))
   ) {
-    return (dataset as Array<{ timestamp: number; value: number }>).map(d => ({
-      timestamp: d.timestamp,
-      value: d.value,
-    }))
+    return (dataset as Array<{ timestamp: number; value: number; hasAnomaly?: boolean }>).map(
+      d => ({
+        timestamp: d.timestamp,
+        value: d.value,
+        hasAnomaly: !!d.hasAnomaly,
+      }),
+    )
   }
   return []
 }
@@ -380,6 +390,11 @@ const isEstimationGranularity = computed(
 const supportsEstimation = computed(
   () => isEstimationGranularity.value && selectedMetric.value !== 'contributors',
 )
+
+const hasDownloadAnomalies = computed(() =>
+  normalisedDataset.value?.some(datapoint => !!datapoint.dashIndices.length),
+)
+
 const shouldRenderEstimationOverlay = computed(() => !pending.value && supportsEstimation.value)
 
 const startDate = usePermalink<string>('start', '', {
@@ -955,11 +970,13 @@ const effectiveDataSingle = computed<EvolutionData>(() => {
         granularity: displayedGranularity.value,
       })
     }
+
     return applyDataCorrection(
       data as Array<{ value: number }>,
       settings.value.chartFilter,
     ) as EvolutionData
   }
+
   return data
 })
 
@@ -991,7 +1008,10 @@ const chartData = computed<{
   const granularity = displayedGranularity.value
 
   const timestampSet = new Set<number>()
-  const pointsByPackage = new Map<string, Array<{ timestamp: number; value: number }>>()
+  const pointsByPackage = new Map<
+    string,
+    Array<{ timestamp: number; value: number; hasAnomaly?: boolean }>
+  >()
 
   for (const pkg of names) {
     let data = state.evolutionsByPackage[pkg] ?? []
@@ -1005,6 +1025,7 @@ const chartData = computed<{
       ) as EvolutionData
     }
     const points = extractSeriesPoints(granularity, data)
+
     pointsByPackage.set(pkg, points)
     for (const p of points) timestampSet.add(p.timestamp)
   }
@@ -1014,15 +1035,23 @@ const chartData = computed<{
 
   const dataset: VueUiXyDatasetItem[] = names.map(pkg => {
     const points = pointsByPackage.get(pkg) ?? []
-    const map = new Map<number, number>()
-    for (const p of points) map.set(p.timestamp, p.value)
+    const valueByTimestamp = new Map<number, number>()
+    const anomalyTimestamps = new Set<number>()
+    for (const p of points) {
+      valueByTimestamp.set(p.timestamp, p.value)
+      if (p.hasAnomaly) anomalyTimestamps.add(p.timestamp)
+    }
 
-    const series = dates.map(t => map.get(t) ?? 0)
+    const series = dates.map(t => valueByTimestamp.get(t) ?? 0)
+    const dashIndices = dates
+      .map((t, index) => (anomalyTimestamps.has(t) ? index : -1))
+      .filter(index => index !== -1)
 
     const item: VueUiXyDatasetItem = {
       name: pkg,
       type: 'line',
       series,
+      dashIndices,
     } as VueUiXyDatasetItem
 
     if (isListedFramework(pkg)) {
@@ -1045,6 +1074,7 @@ const normalisedDataset = computed(() => {
     return {
       ...d,
       series: [...d.series.slice(0, -1), projectedLastValue],
+      dashIndices: d.dashIndices ?? [],
     }
   })
 })
@@ -1408,7 +1438,10 @@ function drawSvgPrintLegend(svg: Record<string, any>) {
   })
 
   // Inject the estimation legend item when necessary
-  if (supportsEstimation.value && !isEndDateOnPeriodEnd.value && !isZoomed.value) {
+  if (
+    (supportsEstimation.value && !isEndDateOnPeriodEnd.value && !isZoomed.value) ||
+    hasDownloadAnomalies.value
+  ) {
     seriesNames.push(`
         <line
           x1="${svg.drawingArea.left + 12}"
@@ -1955,7 +1988,10 @@ watch(selectedMetric, value => {
                 </template>
 
                 <!-- Estimation extra legend item -->
-                <div class="flex gap-1 place-items-center" v-if="supportsEstimation">
+                <div
+                  class="flex gap-1 place-items-center"
+                  v-if="supportsEstimation || hasDownloadAnomalies"
+                >
                   <svg viewBox="0 0 20 2" width="20">
                     <line
                       x1="0"

app/components/Package/WeeklyDownloadStats.vue

@@ -29,6 +29,12 @@ const modalTitle = computed(() => {
   return $t('package.trends.items.downloads')
 })
 
+const modalSubtitle = computed(() => {
+  const facet = route.query.facet as string | undefined
+  if (facet === 'likes' || facet === 'contributors') return undefined
+  return $t('package.downloads.subtitle')
+})
+
 const isChartModalOpen = shallowRef<boolean>(false)
 
 function handleModalClose() {
@@ -285,7 +291,11 @@ const config = computed<VueUiSparklineConfig>(() => {
 
 <template>
   <div class="space-y-8">
-    <CollapsibleSection id="downloads" :title="$t('package.downloads.title')">
+    <CollapsibleSection
+      id="downloads"
+      :title="$t('package.downloads.title')"
+      :subtitle="$t('package.downloads.subtitle')"
+    >
       <template #actions>
         <ButtonBase
           v-if="hasWeeklyDownloads"
@@ -355,6 +365,7 @@ const config = computed<VueUiSparklineConfig>(() => {
   <PackageChartModal
     v-if="isChartModalOpen && hasWeeklyDownloads"
     :modal-title="modalTitle"
+    :modal-subtitle="modalSubtitle"
     @close="handleModalClose"
     @transitioned="handleModalTransitioned"
   >

app/components/diff/ViewerPanel.vue

@@ -2,6 +2,8 @@
 import type { FileDiffResponse, FileChange } from '#shared/types'
 import { onClickOutside } from '@vueuse/core'
 
+const bytesFormatter = useBytesFormatter()
+
 const props = defineProps<{
   packageName: string
   fromVersion: string
@@ -20,9 +22,21 @@ onClickOutside(optionsDropdownRef, () => {
   showOptions.value = false
 })
 
-const apiUrl = computed(
-  () =>
-    `/api/registry/compare-file/${props.packageName}/v/${props.fromVersion}...${props.toVersion}/${props.file.path}`,
+// Maximum file size we'll try to load (250KB) - must match server
+const MAX_FILE_SIZE = 250 * 1024
+const isFilesTooLarge = computed(() => {
+  const newSize = props.file?.newSize
+  const oldSize = props.file?.oldSize
+  return (
+    (newSize !== undefined && newSize > MAX_FILE_SIZE) ||
+    (oldSize !== undefined && oldSize > MAX_FILE_SIZE)
+  )
+})
+
+const apiUrl = computed(() =>
+  isFilesTooLarge.value
+    ? null
+    : `/api/registry/compare-file/${props.packageName}/v/${props.fromVersion}...${props.toVersion}/${props.file.path}`,
 )
 
 const apiQuery = computed(() => ({
@@ -36,7 +50,7 @@ const {
   data: diff,
   status,
   error: loadError,
-} = useFetch<FileDiffResponse>(apiUrl, {
+} = useFetch<FileDiffResponse>(() => apiUrl.value!, {
   query: apiQuery,
   timeout: 15000,
 })
@@ -69,13 +83,6 @@ const changeRatioPercent = computed(() => calcPercent(maxChangeRatio.value, 0, 1
 const diffDistancePercent = computed(() => calcPercent(maxDiffDistance.value, 1, 60))
 const charEditPercent = computed(() => calcPercent(inlineMaxCharEdits.value, 0, 10))
 
-function formatBytes(bytes: number | undefined): string {
-  if (bytes === undefined) return ''
-  if (bytes < 1024) return `${bytes} B`
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
-}
-
 // Build code browser URL
 function getCodeUrl(version: string): string {
   return `/package-code/${props.packageName}/v/${version}/${props.file.path}`
@@ -117,13 +124,14 @@ function getCodeUrl(version: string): string {
         <!-- File sizes -->
         <span v-if="file.oldSize || file.newSize" class="text-xs text-fg-subtle shrink-0">
           <template v-if="file.type === 'modified'">
-            {{ formatBytes(file.oldSize) }} → {{ formatBytes(file.newSize) }}
+            {{ bytesFormatter.format(file.oldSize ?? 0) }} →
+            {{ bytesFormatter.format(file.newSize ?? 0) }}
           </template>
           <template v-else-if="file.type === 'added'">
-            {{ formatBytes(file.newSize) }}
+            {{ bytesFormatter.format(file.newSize ?? 0) }}
           </template>
           <template v-else>
-            {{ formatBytes(file.oldSize) }}
+            {{ bytesFormatter.format(file.oldSize ?? 0) }}
           </template>
         </span>
       </div>
@@ -295,8 +303,20 @@ function getCodeUrl(version: string): string {
 
     <!-- Content -->
     <div class="flex-1 overflow-auto relative">
+      <!-- File too large warning -->
+      <div v-if="isFilesTooLarge" class="py-20 text-center">
+        <div class="i-lucide:file-text w-12 h-12 mx-auto text-fg-subtle mb-4" />
+        <p class="text-fg-muted mb-2">{{ $t('compare.file_too_large') }}</p>
+        <p class="text-fg-subtle text-sm mb-4">
+          {{
+            $t('compare.file_size_warning', {
+              size: bytesFormatter.format(Math.max(file.newSize ?? 0, file.oldSize ?? 0)),
+            })
+          }}
+        </p>
+      </div>
       <!-- Loading state -->
-      <div v-if="status === 'pending'" class="py-12 text-center">
+      <div v-else-if="status === 'pending'" class="py-12 text-center">
         <div class="i-svg-spinners-ring-resize w-6 h-6 mx-auto text-fg-muted" />
         <p class="mt-2 text-sm text-fg-muted">Loading diff...</p>
       </div>