refactor: Reimplement folder animation logic (#10361)

* refactor: Reimplement folder animation logic

* fix: Tab indent in has-active folder

* fix: Enhance grouping/ungrouping stability and visual consistency

src/browser/components/tabbrowser/content/tab-js.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tab.js b/browser/components/tabbrowser/content/tab.js
-index fd2465046407261e8c29b4cd3d56122d232e701c..937068562975a26834572c408e9a75453bdf49cb 100644
+index fd2465046407261e8c29b4cd3d56122d232e701c..590a86d09b359f75fee12303d963a7ee68fee0f3 100644
 --- a/browser/components/tabbrowser/content/tab.js
 +++ b/browser/components/tabbrowser/content/tab.js
 @@ -21,6 +21,7 @@
@@ -62,7 +62,7 @@ index fd2465046407261e8c29b4cd3d56122d232e701c..937068562975a26834572c408e9a7545
 +      }
 +
 +      // Selected tabs are always visible
-+      if ((this.selected || this.multiselected || this.hasAttribute("folder-active")) && !this.hasAttribute("was-folder-active")) return true;
++      if (this.selected || this.multiselected || this.hasAttribute("folder-active")) return true;
 +      // Recursively check all parent groups
 +      let currentParent = this.group;
 +      while (currentParent) {

src/browser/components/tabbrowser/content/tabgroup-js.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabgroup.js b/browser/components/tabbrowser/content/tabgroup.js
-index c0cb11590d6dfbcf6fa49ef5e10c6d3877191d1f..503e97a4ec87625b154627aa5839fb4f8d050f86 100644
+index c0cb11590d6dfbcf6fa49ef5e10c6d3877191d1f..cd98bd2401e4618b003c184108e8532174e2a7cf 100644
 --- a/browser/components/tabbrowser/content/tabgroup.js
 +++ b/browser/components/tabbrowser/content/tabgroup.js
 @@ -13,10 +13,12 @@
@@ -18,10 +18,18 @@ index c0cb11590d6dfbcf6fa49ef5e10c6d3877191d1f..503e97a4ec87625b154627aa5839fb4f
        <vbox class="tab-group-overflow-count-container" pack="center">
          <label class="tab-group-overflow-count" role="button" />
        </vbox>
-@@ -57,20 +59,28 @@
+@@ -57,20 +59,36 @@
      }
  
      connectedCallback() {
++      if (this._lastGroup && this._lastGroup !== this.group) {
++        this._lastGroup.dispatchEvent(
++          new CustomEvent("FolderUngrouped", {
++            bubbles: true,
++            detail: this,
++          })
++        );
++      }
 +      if (this.group && this._lastGroup != this.group) {
 +        this._lastGroup = this.group;
 +        this.group.dispatchEvent(
@@ -51,7 +59,7 @@ index c0cb11590d6dfbcf6fa49ef5e10c6d3877191d1f..503e97a4ec87625b154627aa5839fb4f
  
        this._initialized = true;
        this.saveOnWindowClose = true;
-@@ -99,11 +109,14 @@
+@@ -99,11 +117,14 @@
  
        this.#labelElement.addEventListener("mouseover", this);
        this.#labelElement.addEventListener("mouseout", this);
@@ -71,7 +79,7 @@ index c0cb11590d6dfbcf6fa49ef5e10c6d3877191d1f..503e97a4ec87625b154627aa5839fb4f
  
        this.#updateLabelAriaAttributes();
        this.#updateCollapsedAriaAttributes();
-@@ -129,6 +142,8 @@
+@@ -129,6 +150,8 @@
        // mounts after getting created by `Tabbrowser.adoptTabGroup`.
        this.#wasCreatedByAdoption = false;
      }
@@ -80,7 +88,7 @@ index c0cb11590d6dfbcf6fa49ef5e10c6d3877191d1f..503e97a4ec87625b154627aa5839fb4f
  
      resetDefaultGroupName = () => {
        this.#defaultGroupName = "";
-@@ -213,7 +228,10 @@
+@@ -213,7 +236,10 @@
            }
          });
        }
@@ -92,7 +100,7 @@ index c0cb11590d6dfbcf6fa49ef5e10c6d3877191d1f..503e97a4ec87625b154627aa5839fb4f
      }
  
      get color() {
-@@ -307,6 +325,9 @@
+@@ -307,6 +333,9 @@
      }
  
      set collapsed(val) {
@@ -102,7 +110,7 @@ index c0cb11590d6dfbcf6fa49ef5e10c6d3877191d1f..503e97a4ec87625b154627aa5839fb4f
        if (!!val == this.collapsed) {
          return;
        }
-@@ -364,7 +385,6 @@
+@@ -364,7 +393,6 @@
            tabGroupName,
          })
          .then(result => {
@@ -110,7 +118,7 @@ index c0cb11590d6dfbcf6fa49ef5e10c6d3877191d1f..503e97a4ec87625b154627aa5839fb4f
          });
      }
  
-@@ -383,7 +403,57 @@
+@@ -383,7 +411,57 @@
       * @returns {MozTabbrowserTab[]}
       */
      get tabs() {
@@ -169,7 +177,7 @@ index c0cb11590d6dfbcf6fa49ef5e10c6d3877191d1f..503e97a4ec87625b154627aa5839fb4f
      }
  
      /**
-@@ -442,7 +512,6 @@
+@@ -442,7 +520,6 @@
      addTabs(tabs, metricsContext) {
        for (let tab of tabs) {
          if (tab.pinned) {
@@ -177,7 +185,7 @@ index c0cb11590d6dfbcf6fa49ef5e10c6d3877191d1f..503e97a4ec87625b154627aa5839fb4f
          }
          let tabToMove =
            this.ownerGlobal === tab.ownerGlobal
-@@ -505,7 +574,7 @@
+@@ -505,7 +582,7 @@
       */
      on_click(event) {
        let isToggleElement =
@@ -186,7 +194,7 @@ index c0cb11590d6dfbcf6fa49ef5e10c6d3877191d1f..503e97a4ec87625b154627aa5839fb4f
          event.target === this.#overflowCountLabel;
        if (isToggleElement && event.button === 0) {
          event.preventDefault();
-@@ -570,5 +639,6 @@
+@@ -570,5 +647,6 @@
      }
    }
  

src/browser/components/tabbrowser/content/tabs-js.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
-index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39cb1923c0 100644
+index c7557dad38db9ef02b981c46de9595df77cb67db..c2001aac234d1575498df82db21da2374efe9697 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
 @@ -44,6 +44,9 @@
@@ -70,7 +70,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
  
            if (collapseTabGroupDuringDrag) {
              tab.group.collapsed = true;
-+          gZenFolders.collapseVisibleTab(tab.group);
++            gZenFolders.animateGroupMove(tab.group);
            }
          }
        }
@@ -85,7 +85,17 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
        if (
          (dropEffect == "move" || dropEffect == "copy") &&
          document == draggedTab.ownerDocument &&
-@@ -1196,6 +1206,18 @@
+@@ -1142,7 +1152,8 @@
+         isTabGroupLabel(draggedTab) &&
+         draggedTab._dragData?.expandGroupOnDrop
+       ) {
+-        draggedTab.group.collapsed = false;
++        draggedTab.group.collapsed = draggedTab.group.hasAttribute("has-active");
++        gZenFolders.animateGroupMove(draggedTab.group, true);
+       }
+     }
+ 
+@@ -1196,6 +1207,18 @@
  
        this._tabDropIndicator.hidden = true;
        event.stopPropagation();
@@ -104,7 +114,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
        if (draggedTab && dropEffect == "copy") {
          let duplicatedDraggedTab;
          let duplicatedTabs = [];
-@@ -1220,8 +1242,9 @@
+@@ -1220,8 +1243,9 @@
          let translateOffsetY = oldTranslateY % tabHeight;
          let newTranslateX = oldTranslateX - translateOffsetX;
          let newTranslateY = oldTranslateY - translateOffsetY;
@@ -116,7 +126,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
  
          if (this.#isContainerVerticalPinnedGrid(draggedTab)) {
            // Update both translate axis for pinned vertical expanded tabs
-@@ -1237,8 +1260,8 @@
+@@ -1237,8 +1261,8 @@
            }
          } else {
            let tabs = this.ariaFocusableItems.slice(
@@ -127,7 +137,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
            );
            let size = this.verticalMode ? "height" : "width";
            let screenAxis = this.verticalMode ? "screenY" : "screenX";
-@@ -1287,11 +1310,13 @@
+@@ -1287,11 +1311,13 @@
            this.dragToPinPromoCard,
          ];
          let shouldPin =
@@ -141,7 +151,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
            isTab(draggedTab) &&
            draggedTab.pinned &&
            this.arrowScrollbox.contains(event.target);
-@@ -1309,6 +1334,7 @@
+@@ -1309,6 +1335,7 @@
              (oldTranslateY && oldTranslateY != newTranslateY);
          } else if (this.verticalMode) {
            shouldTranslate &&= oldTranslateY && oldTranslateY != newTranslateY;
@@ -149,7 +159,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
          } else {
            shouldTranslate &&= oldTranslateX && oldTranslateX != newTranslateX;
          }
-@@ -1503,6 +1529,7 @@
+@@ -1503,6 +1530,7 @@
  
            let nextItem = this.ariaFocusableItems[newIndex];
            let tabGroup = isTab(nextItem) && nextItem.group;
@@ -157,7 +167,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
            gBrowser.loadTabs(urls, {
              inBackground,
              replace,
-@@ -1541,6 +1568,16 @@
+@@ -1541,6 +1569,16 @@
        }
        this.#resetTabsAfterDrop(draggedTab.ownerDocument);
  
@@ -174,7 +184,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
        if (
          dt.mozUserCancelled ||
          dt.dropEffect != "none" ||
-@@ -1707,7 +1744,6 @@
+@@ -1707,7 +1745,6 @@
  
        this.toggleAttribute("overflow", true);
        this._updateCloseButtons();
@@ -182,7 +192,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
  
        document
          .getElementById("tab-preview-panel")
-@@ -1765,7 +1801,7 @@
+@@ -1765,7 +1802,7 @@
      }
  
      get newTabButton() {
@@ -191,7 +201,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
      }
  
      get verticalMode() {
-@@ -1781,6 +1817,7 @@
+@@ -1781,6 +1818,7 @@
      }
  
      get overflowing() {
@@ -199,7 +209,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
        return this.hasAttribute("overflow");
      }
  
-@@ -1789,31 +1826,51 @@
+@@ -1789,31 +1827,51 @@
        if (this.#allTabs) {
          return this.#allTabs;
        }
@@ -267,7 +277,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
      }
  
      /**
-@@ -1880,29 +1937,23 @@
+@@ -1880,29 +1938,23 @@
  
        let elementIndex = 0;
  
@@ -306,7 +316,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
          }
        }
  
-@@ -1914,6 +1965,7 @@
+@@ -1914,6 +1966,7 @@
      _invalidateCachedTabs() {
        this.#allTabs = null;
        this._invalidateCachedVisibleTabs();
@@ -314,7 +324,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
      }
  
      _invalidateCachedVisibleTabs() {
-@@ -1929,8 +1981,8 @@
+@@ -1929,8 +1982,8 @@
      #isContainerVerticalPinnedGrid(tab) {
        return (
          this.verticalMode &&
@@ -325,7 +335,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
          !this.expandOnHover
        );
      }
-@@ -1946,7 +1998,7 @@
+@@ -1946,7 +1999,7 @@
  
        if (node == null) {
          // We have a container for non-tab elements at the end of the scrollbox.
@@ -334,7 +344,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
        }
  
        node.before(tab);
-@@ -2041,7 +2093,7 @@
+@@ -2041,7 +2094,7 @@
            // There are separate "new tab" buttons for horizontal tabs toolbar, vertical tabs and
            // for when the tab strip is overflowed (which is shared by vertical and horizontal tabs);
            // Attach the long click popup to all of them.
@@ -343,7 +353,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
            const newTab2 = this.newTabButton;
            const newTabVertical = document.getElementById(
              "vertical-tabs-newtab-button"
-@@ -2139,8 +2191,10 @@
+@@ -2139,8 +2192,10 @@
       */
      _handleTabSelect(aInstant) {
        let selectedTab = this.selectedItem;
@@ -354,7 +364,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
        selectedTab._notselectedsinceload = false;
      }
  
-@@ -2149,7 +2203,7 @@
+@@ -2149,7 +2204,7 @@
       * @param {boolean} [shouldScrollInstantly=false]
       */
      #ensureTabIsVisible(tab, shouldScrollInstantly = false) {
@@ -363,7 +373,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
        if (arrowScrollbox.overflowing) {
          arrowScrollbox.ensureElementIsVisible(tab, shouldScrollInstantly);
        }
-@@ -2288,6 +2342,16 @@
+@@ -2288,6 +2343,16 @@
        when the tab is first selected to be dragged.
      */
      #updateTabStylesOnDrag(tab) {
@@ -380,7 +390,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
        let isPinned = tab.pinned;
        let numPinned = gBrowser.pinnedTabCount;
        let allTabs = this.ariaFocusableItems;
-@@ -2540,7 +2604,7 @@
+@@ -2540,7 +2605,7 @@
          return;
        }
  
@@ -389,7 +399,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
  
        let directionX = screenX > dragData.animLastScreenX;
        let directionY = screenY > dragData.animLastScreenY;
-@@ -2549,6 +2613,8 @@
+@@ -2549,6 +2614,8 @@
  
        let { width: tabWidth, height: tabHeight } =
          draggedTab.getBoundingClientRect();
@@ -398,7 +408,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
        let shiftSizeX = tabWidth * movingTabs.length;
        let shiftSizeY = tabHeight;
        dragData.tabWidth = tabWidth;
-@@ -2585,8 +2651,8 @@
+@@ -2585,8 +2652,8 @@
        let lastBoundX =
          lastTabInRow.screenX +
          lastTabInRow.getBoundingClientRect().width -
@@ -409,7 +419,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
        translateX = Math.min(Math.max(translateX, firstBoundX), lastBoundX);
        translateY = Math.min(Math.max(translateY, firstBoundY), lastBoundY);
  
-@@ -2743,13 +2809,18 @@
+@@ -2743,13 +2810,18 @@
  
        this.#clearDragOverGroupingTimer();
  
@@ -432,7 +442,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
  
        if (this.#rtlMode) {
          tabs.reverse();
-@@ -2760,7 +2831,7 @@
+@@ -2760,7 +2832,7 @@
        let screenAxis = this.verticalMode ? "screenY" : "screenX";
        let size = this.verticalMode ? "height" : "width";
        let translateAxis = this.verticalMode ? "translateY" : "translateX";
@@ -441,7 +451,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
        let tabSize = this.verticalMode ? tabHeight : tabWidth;
        let translateX = event.screenX - dragData.screenX;
        let translateY = event.screenY - dragData.screenY;
-@@ -2776,6 +2847,12 @@
+@@ -2776,6 +2848,12 @@
        );
        let lastMovingTab = movingTabs.at(-1);
        let firstMovingTab = movingTabs[0];
@@ -454,7 +464,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
        let endEdge = ele => ele[screenAxis] + bounds(ele)[size];
        let lastMovingTabScreen = endEdge(lastMovingTab);
        let firstMovingTabScreen = firstMovingTab[screenAxis];
-@@ -2790,6 +2867,11 @@
+@@ -2790,6 +2868,11 @@
        let endBound = this.#rtlMode
          ? endEdge(this) - lastMovingTabScreen
          : periphery[screenAxis] - 1 - lastMovingTabScreen;
@@ -466,7 +476,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
        translate = Math.min(Math.max(translate, startBound), endBound);
  
        // Center the tab under the cursor if the tab is not under the cursor while dragging
-@@ -2979,6 +3061,8 @@
+@@ -2979,6 +3062,8 @@
        };
  
        let dropElement = getOverlappedElement();
@@ -475,7 +485,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
  
        let newDropElementIndex;
        if (dropElement) {
-@@ -3060,7 +3144,7 @@
+@@ -3060,7 +3145,7 @@
            ? Services.prefs.getIntPref(
                "browser.tabs.dragDrop.moveOverThresholdPercent"
              ) / 100
@@ -484,7 +494,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
          moveOverThreshold = Math.min(1, Math.max(0, moveOverThreshold));
          let shouldMoveOver = overlapPercent > moveOverThreshold;
          if (logicalForward && shouldMoveOver) {
-@@ -3093,6 +3177,7 @@
+@@ -3093,6 +3178,7 @@
          // If dragging a group over another group, don't make it look like it is
          // possible to drop the dragged group inside the other group.
          if (
@@ -492,7 +502,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
            isTabGroupLabel(draggedTab) &&
            dropElement?.group &&
            (!dropElement.group.collapsed ||
-@@ -3119,20 +3204,13 @@
+@@ -3119,20 +3205,13 @@
          let isOutOfBounds = isPinned
            ? dropElement.elementIndex >= numPinned
            : dropElement.elementIndex < numPinned;
@@ -517,7 +527,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
          let groupingDelay = Services.prefs.getIntPref(
            "browser.tabs.dragDrop.createGroup.delayMS"
          );
-@@ -3140,6 +3218,7 @@
+@@ -3140,6 +3219,7 @@
          // When dragging tab(s) over an ungrouped tab, signal to the user
          // that dropping the tab(s) will create a new tab group.
          let shouldCreateGroupOnDrop =
@@ -525,7 +535,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
            !movingTabsSet.has(dropElement) &&
            isTab(dropElement) &&
            !dropElement?.group &&
-@@ -3148,6 +3227,7 @@
+@@ -3148,6 +3228,7 @@
          // When dragging tab(s) over a collapsed tab group label, signal to the
          // user that dropping the tab(s) will add them to the group.
          let shouldDropIntoCollapsedTabGroup =
@@ -533,7 +543,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
            isTabGroupLabel(dropElement) &&
            dropElement.group.collapsed &&
            overlapPercent > dragOverGroupingThreshold;
-@@ -3192,19 +3272,14 @@
+@@ -3192,19 +3273,14 @@
              dropElement = dropElementGroup;
              colorCode = undefined;
            } else if (isTabGroupLabel(dropElement)) {
@@ -561,7 +571,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
            }
            this.#setDragOverGroupColor(colorCode);
            this.toggleAttribute("movingtab-addToGroup", colorCode);
-@@ -3223,11 +3298,11 @@
+@@ -3223,11 +3299,11 @@
        dragData.dropElement = dropElement;
        dragData.dropBefore = dropBefore;
        dragData.animDropElementIndex = newDropElementIndex;
@@ -575,7 +585,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
            continue;
          }
  
-@@ -3346,12 +3421,14 @@
+@@ -3346,12 +3422,14 @@
        element?.removeAttribute("dragover-groupTarget");
      }
  
@@ -592,7 +602,7 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
  
        for (let item of this.ariaFocusableItems) {
          this.#resetGroupTarget(item);
-@@ -3394,7 +3471,7 @@
+@@ -3394,16 +3472,15 @@
          tab.style.left = "";
          tab.style.top = "";
          tab.style.maxWidth = "";
@@ -601,8 +611,9 @@ index c7557dad38db9ef02b981c46de9595df77cb67db..4c5972fceb4cf46718e994200bf48d39
        }
        for (let label of draggedTabDocument.getElementsByClassName(
          "tab-group-label-container"
-@@ -3403,7 +3480,7 @@
+       )) {
-         label.style.height = "";
+         label.style.width = "";
+-        label.style.height = "";
          label.style.left = "";
          label.style.top = "";
 -        label.removeAttribute("dragtarget");

src/zen/folders/ZenFolder.mjs

@@ -163,6 +163,7 @@
     }
 
     async unpackTabs() {
+      this.collapsed = false;
       for (let tab of this.allItems.reverse()) {
         tab = tab.group.hasAttribute('split-view-group') ? tab.group : tab;
         if (tab.hasAttribute('zen-empty-tab')) {
@@ -228,10 +229,21 @@
           tab.setAttribute('folder-active', 'true');
         }
       } else {
+        const folders = new Map();
         for (let tab of this._activeTabs) {
-          tab.removeAttribute('folder-active');
+          const group = tab?.group?.hasAttribute('split-view-group')
+            ? tab?.group?.group
+            : tab?.group;
+          if (!folders.has(group?.id)) {
+            folders.set(group?.id, group?.activeGroups?.at(-1));
+          }
+          let activeGroup = folders.get(group?.id);
+          if (!activeGroup) {
+            tab.removeAttribute('folder-active');
+          }
         }
         this._activeTabs = [];
+        folders.clear();
       }
     }
 

src/zen/folders/zen-folders.css

@@ -348,7 +348,7 @@ zen-folder {
       display: flex;
     }
 
-    & > .tab-group-container {
+    &:not([has-active]) > .tab-group-container {
       overflow-y: clip;
     }
   }

src/zen/tabs/ZenPinnedTabManager.mjs

@@ -821,11 +821,10 @@
                   }, 3000);
                 });
               }
-              await gZenFolders.collapseVisibleTab(
+              const group = selectedTab.group?.hasAttribute('split-view-group')
-                selectedTab.group,
+                ? selectedTab.group.group
-                /* only if active */ true,
+                : selectedTab.group;
-                selectedTab
+              await gZenFolders.animateUnload(group, selectedTab);
-              );
               let tabsToUnload = [selectedTab];
               if (selectedTab.group?.hasAttribute('split-view-group')) {
                 tabsToUnload = selectedTab.group.tabs;
@@ -1251,7 +1250,7 @@
           let isVisible = true;
           let parent = item.group;
           while (parent) {
-            if (parent.collapsed && !parent.hasAttribute('has-active')) {
+            if (!parent.visible) {
               isVisible = false;
               break;
             }