feat: also add subheading to chart modal

Author: serhalp

app/components/CollapsibleSection.vue

@@ -103,14 +103,14 @@ useHead({
           />
         </button>
 
-        <div>
+        <span>
           <LinkBase :to="`#${id}`">
             {{ title }}
           </LinkBase>
           <span v-if="subtitle" class="block text-2xs normal-case tracking-normal opacity-70">{{
             subtitle
           }}</span>
-        </div>
+        </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')
@@ -50,9 +51,12 @@ defineExpose({
     >
       <!-- 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" 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/WeeklyDownloadStats.vue

@@ -28,6 +28,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() {
@@ -355,6 +361,7 @@ const config = computed<VueUiSparklineConfig>(() => {
   <PackageChartModal
     v-if="isChartModalOpen && hasWeeklyDownloads"
     :modal-title="modalTitle"
+    :modal-subtitle="modalSubtitle"
     @close="handleModalClose"
     @transitioned="handleModalTransitioned"
   >