feat: highlight active item in package docs sidebar

Author: iiio2

app/pages/package-docs/[...path].vue

@@ -138,6 +138,27 @@ const stickyStyle = computed(() => {
     '--combined-header-height': `${56 + (packageHeaderHeight.value || 44)}px`,
   }
 })
+
+// Track active TOC item based on URL hash
+const tocContainerRef = useTemplateRef('tocContainerRef')
+
+function updateActiveTocLink(hash: string) {
+  const container = tocContainerRef.value
+  if (!container) return
+
+  container.querySelector('a.toc-active')?.classList.remove('toc-active')
+
+  if (hash) {
+    const link = container.querySelector(`a[href="${CSS.escape(hash)}"]`)
+    link?.classList.add('toc-active')
+  }
+}
+
+if (import.meta.client) {
+  watch(() => route.hash, hash => updateActiveTocLink(hash))
+  watch(() => docsData.value?.toc, () => nextTick(() => updateActiveTocLink(route.hash)))
+  onMounted(() => updateActiveTocLink(route.hash))
+}
 </script>
 
 <template>
@@ -162,7 +183,7 @@ const stickyStyle = computed(() => {
             {{ $t('package.docs.contents') }}
           </h2>
           <!-- eslint-disable vue/no-v-html -->
-          <div class="toc-content" v-html="docsData.toc" />
+          <div ref="tocContainerRef" class="toc-content" v-html="docsData.toc" />
         </div>
       </aside>
 
@@ -231,6 +252,10 @@ const stickyStyle = computed(() => {
   @apply text-xs text-fg-subtle hover:text-fg block py-0.5 truncate;
 }
 
+.toc-content a.toc-active {
+  @apply text-fg font-medium;
+}
+
 /* Main docs content container - no max-width to use full space */
 .docs-content {
   @apply max-w-none;