feat: make playgrounds section collapsible (#1813)

Author: bluwy

app/components/CollapsibleSection.vue

@@ -71,6 +71,7 @@ useHead({
       innerHTML: `
 :root[data-collapsed~='${props.id}'] section[data-anchor-id='${props.id}'] .collapsible-content {
   grid-template-rows: 0fr;
+  overflow: hidden;
 }`,
     },
   ],
@@ -121,7 +122,7 @@ useHead({
 
     <div
       :id="contentId"
-      class="grid ms-6 grid-rows-[1fr] transition-[grid-template-rows] duration-200 ease-in-out collapsible-content overflow-hidden"
+      class="grid ms-6 grid-rows-[1fr] transition-[grid-template-rows] duration-200 ease-in-out collapsible-content"
       :inert="!isOpen"
     >
       <div class="min-h-0 min-w-0">

app/components/Package/Playgrounds.vue

@@ -118,11 +118,11 @@ function focusMenuItem(index: number) {
 </script>
 
 <template>
-  <section v-if="links.length > 0" class="px-1">
-    <h2 id="playgrounds-heading" class="text-xs font-mono text-fg uppercase tracking-wider mb-3">
-      {{ $t('package.playgrounds.title') }}
-    </h2>
-
+  <CollapsibleSection
+    v-if="links.length > 0"
+    id="playgrounds"
+    :title="$t('package.playgrounds.title')"
+  >
     <div ref="dropdownRef" class="relative">
       <!-- Single link: direct button -->
       <TooltipApp v-if="hasSingleLink && firstLink" :text="firstLink.providerName" class="w-full">
@@ -198,5 +198,5 @@ function focusMenuItem(index: number) {
         </div>
       </Transition>
     </div>
-  </section>
+  </CollapsibleSection>
 </template>