From 6e161ac83ef7e2572e4a69d2eef74dc8e82d78d7 Mon Sep 17 00:00:00 2001
From: octaviusz <50177704+octaviusz@users.noreply.github.com>
Date: Mon, 18 Aug 2025 13:32:19 +0300
Subject: [PATCH] fix: After expanding a folder, has-active folders show extra
 items (#9920)

---
 src/zen/folders/ZenFolders.mjs | 87 +++++++++++++++++++++-------------
 1 file changed, 54 insertions(+), 33 deletions(-)

diff --git a/src/zen/folders/ZenFolders.mjs b/src/zen/folders/ZenFolders.mjs
index 54c3cdcf0..665011f80 100644
--- a/src/zen/folders/ZenFolders.mjs
+++ b/src/zen/folders/ZenFolders.mjs
@@ -251,6 +251,7 @@
       if (activeGroup?.length > 0) {
         for (const folder of activeGroup) {
           folder.removeAttribute('has-active');
+          folder.removeAttribute('selected-tab-id');
           this.collapseVisibleTab(folder);
           this.updateFolderIcon(folder, 'close', false);
         }
@@ -350,6 +351,7 @@
       if (selectedItem) {
         group.setAttribute('has-active', 'true');
         selectedItem.setAttribute('folder-active', 'true');
+        group.setAttribute('selected-tab-id', selectedItem.getAttribute('zen-pin-id'));
         this.setFolderIndentation([selectedItem], group, /* for collapse = */ true);
       }
 
@@ -393,43 +395,48 @@
       const animations = [];
       tabsContainer.style.overflow = 'hidden';
       if (group.hasAttribute('has-active')) {
+        const selectedTabId = group.getAttribute('selected-tab-id');
+        const selectedTab = group?.querySelector(`tab[zen-pin-id="${selectedTabId}"]`);
+        // Since the folder is now expanded, we should remove active attribute
+        // to the tab that was previously visible
+        selectedTab.removeAttribute('folder-active');
+        selectedTab.style.removeProperty('--zen-folder-indent');
         group.removeAttribute('has-active');
+        group.removeAttribute('selected-tab-id');
       }
 
-      // Since the folder is now expanded, we should remove active attribute
-      // to the tab that was previously visible
-      for (const tab of group.tabs) {
-        if (tab.group === group && tab.hasAttribute('folder-active')) {
-          tab.removeAttribute('folder-active');
-        }
-      }
-
-      const groupItems = [];
-      group.childGroupsAndTabs.forEach((item) => {
-        if (gBrowser.isTabGroupLabel(item)) {
-          if (item?.group?.hasAttribute('split-view-group')) {
-            item = item.group;
-          } else {
-            item = item.parentNode;
-          }
-        }
-        // If all the groups above the item are visible, remove the indentation
-        if (gBrowser.isTab(item)) {
-          let isVisible = true;
-          let parent = item.group;
-          while (parent) {
-            if (parent.collapsed && !parent.hasAttribute('has-active')) {
-              isVisible = false;
-              break;
+      const normalizeGroupItems = (items) => {
+        const processed = [];
+        items
+          .filter((item) => !item.hasAttribute('zen-empty-tab'))
+          .forEach((item) => {
+            if (gBrowser.isTabGroupLabel(item)) {
+              if (item?.group?.hasAttribute('split-view-group')) {
+                item = item.group;
+              } else {
+                item = item.parentElement;
+              }
             }
-            parent = parent.group;
-          }
-          if (isVisible) {
-            item.style.removeProperty('--zen-folder-indent');
-          }
+            processed.push(item);
+          });
+        return processed;
+      };
+
+      const activeGroups = group.querySelectorAll('zen-folder[has-active]');
+      const groupItems = normalizeGroupItems(group.childGroupsAndTabs);
+      const itemsToHide = [];
+
+      for (const activeGroup of activeGroups) {
+        let selectedTabId = activeGroup.getAttribute('selected-tab-id');
+        let selectedTab = activeGroup.querySelector(`tab[zen-pin-id="${selectedTabId}"]`);
+        // If the selected tab is in a split view group, we need to get the last tab
+        if (selectedTab?.group?.hasAttribute('split-view-group')) {
+          selectedTab = selectedTab.group.tabs.at(-1);
         }
-        groupItems.push(item);
-      });
+        let index = activeGroup.childGroupsAndTabs.indexOf(selectedTab);
+        let itemsAfter = activeGroup.childGroupsAndTabs.slice(index + 1);
+        itemsToHide.push(...normalizeGroupItems(itemsAfter));
+      }
 
       groupItems.map((item) => {
         animations.push(
@@ -437,7 +444,20 @@
             item,
             {
               opacity: 1,
-              height: 'auto',
+              height: '',
+            },
+            { duration: 0.1, ease: 'easeInOut' }
+          )
+        );
+      });
+
+      itemsToHide.map((item) => {
+        animations.push(
+          gZenUIManager.motion.animate(
+            item,
+            {
+              opacity: 0,
+              height: 0,
             },
             { duration: 0.1, ease: 'easeInOut' }
           )
@@ -1122,6 +1142,7 @@
       }
 
       selectedItem.setAttribute('folder-active', 'true');
+      group.setAttribute('selected-tab-id', selectedItem.getAttribute('zen-pin-id'));
 
       animations.push(...this.updateFolderIcon(group, 'close', false));