chore: remove sidebar outline and improve ux

Author: vinnymac

app/components/ReadmeToc.vue

@@ -124,40 +124,49 @@ export function useActiveTocItem(toc: Ref<TocItem[]>) {
       behavior: 'smooth',
     })
 
-    // Monitor scroll until it settles, THEN update URL hash
-    let lastScrollY = window.scrollY
-    let stableFrames = 0
-    let rafId: number | null = null
-    const STABLE_THRESHOLD = 5 // Number of frames with no movement to consider settled
-
-    const checkScrollSettled = () => {
-      const currentScrollY = window.scrollY
-
-      if (Math.abs(currentScrollY - lastScrollY) < 1) {
-        stableFrames++
-        if (stableFrames >= STABLE_THRESHOLD) {
-          // Scroll has settled - NOW update URL hash (won't trigger native scroll)
-          history.replaceState(null, '', `#${id}`)
-          setupObserver()
-          scrollCleanup = null
-          return
+    const handleScrollEnd = () => {
+      history.replaceState(null, '', `#${id}`)
+      setupObserver()
+      scrollCleanup = null
+    }
+
+    // Check for scrollend support (Chrome 114+, Firefox 109+, Safari 18+)
+    const supportsScrollEnd = 'onscrollend' in window
+
+    if (supportsScrollEnd) {
+      window.addEventListener('scrollend', handleScrollEnd, { once: true })
+      scrollCleanup = () => window.removeEventListener('scrollend', handleScrollEnd)
+    } else {
+      // Fallback: use RAF polling for older browsers
+      let lastScrollY = window.scrollY
+      let stableFrames = 0
+      let rafId: number | null = null
+      const STABLE_THRESHOLD = 5 // Number of frames with no movement to consider settled
+
+      const checkScrollSettled = () => {
+        const currentScrollY = window.scrollY
+
+        if (Math.abs(currentScrollY - lastScrollY) < 1) {
+          stableFrames++
+          if (stableFrames >= STABLE_THRESHOLD) {
+            handleScrollEnd()
+            return
+          }
+        } else {
+          stableFrames = 0
         }
-      } else {
-        stableFrames = 0
+
+        lastScrollY = currentScrollY
+        rafId = requestAnimationFrame(checkScrollSettled)
       }
 
-      lastScrollY = currentScrollY
       rafId = requestAnimationFrame(checkScrollSettled)
-    }
 
-    // Start monitoring
-    rafId = requestAnimationFrame(checkScrollSettled)
-
-    // Store cleanup function
-    scrollCleanup = () => {
-      if (rafId !== null) {
-        cancelAnimationFrame(rafId)
-        rafId = null
+      scrollCleanup = () => {
+        if (rafId !== null) {
+          cancelAnimationFrame(rafId)
+          rafId = null
+        }
       }
     }
 
@@ -169,7 +178,7 @@ export function useActiveTocItem(toc: Ref<TocItem[]>) {
         history.replaceState(null, '', `#${id}`)
         setupObserver()
       }
-    }, 1500)
+    }, 1000)
   }
 
   // Set up observer when TOC changes

app/composables/useActiveTocItem.ts

@@ -940,14 +940,12 @@ function handleClick(event: MouseEvent) {
               />
             </a>
           </h2>
-          <!-- Mobile TOC dropdown (shown only on smaller screens) -->
           <ClientOnly>
             <ReadmeTocDropdown
-              v-if="readmeData?.toc?.length"
+              v-if="readmeData?.toc && readmeData.toc.length > 1"
               :toc="readmeData.toc"
               :active-id="activeTocId"
               :scroll-to-heading="scrollToHeading"
-              class="xl:hidden"
             />
           </ClientOnly>
         </div>
@@ -1013,17 +1011,6 @@ function handleClick(event: MouseEvent) {
             :links="readmeData.playgroundLinks"
           />
 
-          <!-- Table of Contents (desktop only - hidden on lg and below) -->
-          <ClientOnly>
-            <ReadmeToc
-              v-if="readmeData?.toc?.length"
-              :toc="readmeData.toc"
-              :active-id="activeTocId"
-              :scroll-to-heading="scrollToHeading"
-              class="hidden xl:block"
-            />
-          </ClientOnly>
-
           <section
             id="compatibility"
             v-if="