From d68c75a82ca47c75ba335e0956e1cf4684cf7780 Mon Sep 17 00:00:00 2001
From: pewdiepie-archdaemon <pewdiepie-archdaemon@users.noreply.github.com>
Date: Sat, 13 Jun 2026 20:03:14 +0900
Subject: [PATCH] Cookbook: auto-fold Direct Download when its header scrolls
 past top

Added a scroll listener on the parent .modal-body / cookbook-content
that folds the Direct Download body once its h2 header has scrolled
above the container's top edge. Frees the viewport for the Scan
section below while leaving the chevron clickable to expand again.

Auto-fold doesn't write to localStorage (only manual clicks do)
so the user's last explicit preference still wins on reload.
---
 static/js/cookbook.js | 32 +++++++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/static/js/cookbook.js b/static/js/cookbook.js
index 3a4437774..ec0466e0f 100644
--- a/static/js/cookbook.js
+++ b/static/js/cookbook.js
@@ -1403,16 +1403,34 @@ function _wireTabEvents(body) {
   const dlFoldBody = document.getElementById('cookbook-dl-tab-fold-body');
   const dlFoldChevron = document.getElementById('cookbook-dl-tab-chevron');
   if (dlFold && dlFoldBody && dlFoldChevron) {
+    const _setFolded = (folded, persist = true) => {
+      dlFoldBody.style.display = folded ? 'none' : '';
+      dlFoldChevron.textContent = folded ? '▸' : '▾';
+      dlFold.classList.toggle('is-folded', folded);
+      if (persist) {
+        try { localStorage.setItem('cookbook_dl_tab_folded_v1', folded ? '1' : '0'); } catch {}
+      }
+    };
     dlFold.addEventListener('click', () => {
       const folded = dlFoldBody.style.display === 'none';
-      dlFoldBody.style.display = folded ? '' : 'none';
-      dlFoldChevron.textContent = folded ? '▾' : '▸';
-      // Toggle is-folded class on the h2 so the line under it only shows when
-      // the section is collapsed (the body's content normally provides
-      // separation; with no body visible, the line gives the h2 definition).
-      dlFold.classList.toggle('is-folded', !folded);
-      try { localStorage.setItem('cookbook_dl_tab_folded_v1', folded ? '0' : '1'); } catch {}
+      _setFolded(!folded);
     });
+    // Auto-fold when the user scrolls past the Direct Download header.
+    // Watches the header element: once its bottom edge passes above the
+    // scroll container's top, fold the body so the scan section below has
+    // the full viewport. Doesn't auto-unfold (user can click ▸ to expand).
+    const _scrollHost = dlFold.closest('.modal-body, .cookbook-content, .doclib-modal-content') || document.scrollingElement || document.body;
+    let _autoFolded = false;
+    const _onScroll = () => {
+      if (dlFoldBody.style.display === 'none') return;
+      const r = dlFold.getBoundingClientRect();
+      const top = (_scrollHost && _scrollHost.getBoundingClientRect) ? _scrollHost.getBoundingClientRect().top : 0;
+      if (r.bottom < top + 4) {
+        _autoFolded = true;
+        _setFolded(true, /* persist */ false);
+      }
+    };
+    _scrollHost.addEventListener('scroll', _onScroll, { passive: true });
   }
   const hfToggle = document.getElementById('cookbook-hf-latest-toggle');
   const hfArrow = document.getElementById('cookbook-hf-latest-arrow');