From f09f606bec5430c4e314a8774cbe5c3b6930c4c1 Mon Sep 17 00:00:00 2001
From: pewdiepie-archdaemon <pewdiepie-archdaemon@users.noreply.github.com>
Date: Sat, 13 Jun 2026 20:14:34 +0900
Subject: [PATCH] Cookbook fold: smooth max-height + opacity transition
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

display:none toggle was instant and felt jarring during auto-fold/
auto-expand. Swapped to a CSS class `.is-folded` that transitions
max-height (0 ↔ 1200px) and opacity (0 ↔ 1) over ~280ms with ease,
so both manual chevron clicks and the scroll-driven toggles slide
in/out smoothly.
---
 static/js/cookbook.js | 12 +++++++-----
 static/style.css      | 20 +++++++++++++++++++-
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/static/js/cookbook.js b/static/js/cookbook.js
index ee71300f2..df065930c 100644
--- a/static/js/cookbook.js
+++ b/static/js/cookbook.js
@@ -1404,7 +1404,9 @@ function _wireTabEvents(body) {
   const dlFoldChevron = document.getElementById('cookbook-dl-tab-chevron');
   if (dlFold && dlFoldBody && dlFoldChevron) {
     const _setFolded = (folded, persist = true) => {
-      dlFoldBody.style.display = folded ? 'none' : '';
+      // Toggle via class so CSS transition animates the height/opacity
+      // — display:none was an instant on/off and felt jarring.
+      dlFoldBody.classList.toggle('is-folded', folded);
       dlFoldChevron.textContent = folded ? '▸' : '▾';
       dlFold.classList.toggle('is-folded', folded);
       if (persist) {
@@ -1412,7 +1414,7 @@ function _wireTabEvents(body) {
       }
     };
     dlFold.addEventListener('click', () => {
-      const folded = dlFoldBody.style.display === 'none';
+      const folded = dlFoldBody.classList.contains('is-folded');
       _setFolded(!folded);
     });
     // Auto-fold on any downward scroll inside the cookbook modal,
@@ -1420,11 +1422,11 @@ function _wireTabEvents(body) {
     // top of whichever scroller they're in. The chevron ▸ still
     // toggles manually.
     const _maybeFold = () => {
-      if (dlFoldBody.style.display === 'none') return;
+      if (dlFoldBody.classList.contains('is-folded')) return;
       _setFolded(true, /* persist */ false);
     };
     const _maybeExpand = () => {
-      if (dlFoldBody.style.display !== 'none') return;
+      if (!dlFoldBody.classList.contains('is-folded')) return;
       _setFolded(false, /* persist */ false);
     };
     // Capture phase so scrolls on nested scrollers (.hwfit-list,
@@ -1816,7 +1818,7 @@ function _renderRecipes() {
   html += '<div style="display:flex;align-items:center;gap:8px;margin-bottom:2px;">';
   html += `<h2 id="cookbook-dl-tab-fold" class="${_dlTabFolded ? 'is-folded' : ''}" style="margin:0;padding:0;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none;flex:1;">Direct Download<span id="cookbook-dl-tab-chevron" style="display:inline-block;transition:transform 0.15s;font-size:1.1em;margin-left:8px;opacity:0.85;">${_dlTabFolded ? '▸' : '▾'}</span></h2>`;
   html += '</div>';
-  html += `<div id="cookbook-dl-tab-fold-body" style="${_dlTabFolded ? 'display:none;' : ''}">`;
+  html += `<div id="cookbook-dl-tab-fold-body" class="${_dlTabFolded ? 'is-folded' : ''}">`;
   html += '<p class="memory-desc doclib-desc" style="margin-top:6px;">Download from <a href="https://huggingface.co/models" target="_blank" rel="noopener" style="color:var(--accent,var(--red));text-decoration:none;"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:1px;"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>HuggingFace</a> by pasting model link, or download directly in the Scan section below.</p>';
   html += '<div class="hwfit-container" id="hwfit-container">';
 
diff --git a/static/style.css b/static/style.css
index 54662a3cf..e8ca7ed8d 100644
--- a/static/style.css
+++ b/static/style.css
@@ -10946,7 +10946,7 @@ textarea.memory-add-input {
   border-radius: 4px;
   font-family: inherit;
   font-size: 9px;
-  padding: 2px 3px;
+  padding: 2px 8px;
   cursor: pointer;
   flex-shrink: 0;
 }
@@ -19498,6 +19498,24 @@ body.gallery-selecting .gallery-dl-btn,
   border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent) !important;
   padding-bottom: 6px !important;
 }
+/* Smooth open/close for the Direct Download body — replaces the
+   instant display:none toggle with a max-height + opacity slide so
+   auto-fold and auto-expand don't feel jarring. 1200px is a safe
+   upper bound for the body height; the slide only fires up to the
+   actual content height because content stops there. */
+#cookbook-dl-tab-fold-body {
+  overflow: hidden;
+  max-height: 1200px;
+  opacity: 1;
+  transition: max-height 0.28s ease, opacity 0.18s ease, margin 0.28s ease;
+}
+#cookbook-dl-tab-fold-body.is-folded {
+  max-height: 0;
+  opacity: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  pointer-events: none;
+}
 /* Center the "?" glyph inside the help chip. Without text-align it sits 0.5px
    left of true center because of the character's natural baseline offset. */
 .hwfit-help-chip {