Persist accordion open/closed state separately for main view and Animate All

Main view defaults to collapsed, Animate All defaults to expanded.
Each context saves independently to localStorage so toggling in one
doesn't affect the other.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/ui/interface.py

@@ -129,7 +129,7 @@ def _build_left_column(c):
 
 def _build_animation_settings(c):
     """Build the animation settings accordion."""
-    with gr.Accordion("Animation Settings", open=True, elem_id="anim-settings-accordion"):
+    with gr.Accordion("Animation Settings", open=False, elem_id="anim-settings-accordion"):
         with gr.Row(elem_id="anim-style-row"):
             c.anim_granularity_radio = gr.Radio(
                 choices=ANIM_GRANULARITIES,

src/ui/static/animate-all.js

@@ -933,6 +933,15 @@ function stopAnimateAll() {
         } else {
             animateAllState.accordionParent.appendChild(animAccordion);
         }
+        // Restore main-context accordion state (default: closed)
+        window._animateAllActive = false;
+        var _s = loadAnimSettings();
+        var wantOpen = _s && _s.accordionOpenMain === true;
+        var isOpen = animAccordion.classList.contains('open');
+        if (wantOpen !== isOpen) {
+            var btn = animAccordion.querySelector(':scope > .label-wrap');
+            if (btn) btn.click();
+        }
     }
     // Reset button
     if (animateAllState.btn) {
@@ -1049,6 +1058,15 @@ function toggleAnimateAll(btn) {
         animateAllState.accordionNextSibling = animAccordion.nextElementSibling;
         var container = document.querySelector('.segments-container');
         if (container) container.parentNode.insertBefore(animAccordion, container);
+        // Restore mega-context accordion state (default: open)
+        window._animateAllActive = true;
+        var _s = loadAnimSettings();
+        var wantOpen = !_s || _s.accordionOpenMega !== false;
+        var isOpen = animAccordion.classList.contains('open');
+        if (wantOpen !== isOpen) {
+            var btn = animAccordion.querySelector(':scope > .label-wrap');
+            if (btn) btn.click();
+        }
     }
     var container = document.querySelector('.segments-container');
     // Add tip callout above the mega card

src/ui/static/animation-core.js

@@ -65,7 +65,11 @@ function saveAnimSettings() {
         }
         s.playbackRate = window.ANIM_PLAYBACK_RATE || 1;
         var accEl = document.getElementById('anim-settings-accordion');
-        if (accEl) s.accordionOpen = accEl.classList.contains('open');
+        if (accEl) {
+            var accOpen = accEl.classList.contains('open');
+            if (window._animateAllActive) s.accordionOpenMega = accOpen;
+            else s.accordionOpenMain = accOpen;
+        }
         localStorage.setItem(_ANIM_STORAGE_KEY, JSON.stringify(s));
     } catch(e) {}
 }
@@ -106,11 +110,12 @@ if (_saved) {
 }
 window.ANIM_PLAYBACK_RATE = (_saved && _saved.playbackRate) ? _saved.playbackRate : 1;
 
-// --- Accordion open/close persistence ---
-if (_saved && _saved.accordionOpen === false) {
+// --- Accordion open/close persistence (main view only; mega handled by animate-all.js) ---
+window._animateAllActive = false;
+if (_saved && _saved.accordionOpenMain === true) {
     requestAnimationFrame(function() {
         var acc = document.getElementById('anim-settings-accordion');
-        if (acc && acc.classList.contains('open')) {
+        if (acc && !acc.classList.contains('open')) {
             var btn = acc.querySelector(':scope > .label-wrap');
             if (btn) btn.click();
         }