Fixed reordering pinned tabs not saving their state

src/browser/base/content/zen-styles/zen-browser-ui.css

@@ -83,6 +83,7 @@
 
 #zen-appcontent-wrapper {
   max-width: 100%;
+  min-width: 1px;
   overflow-x: hidden;
   z-index: 1;
 }

src/browser/base/content/zen-styles/zen-tabs/vertical-tabs-topbar.inc.css

@@ -6,17 +6,18 @@ height: var(--zen-toolbar-height);
     transition-delay: 0.2s;
 
     & > * {
-      transition: transform 0.2s ease-out;
+      transition: opacity 0.2s ease-out;
+      transition-delay: 0.2s;
     }
   }
 
   &:not([zen-has-hover='true']):not([has-popup-menu]):not(:focus-within) {
-    transition-delay: 0.1s;
+    transition-delay: 0.2s;
     height: var(--zen-element-separation);
     overflow: hidden;
     opacity: 0;
     & > * {
-      transform: translateY(-100%);
+      opacity: 0;
       pointer-events: none;
     }
   }

src/browser/base/zen-components/ZenPinnedTabManager.mjs

@@ -2,7 +2,7 @@
   const lazy = {};
 
   class ZenPinnedTabsObserver {
-    static ALL_EVENTS = ['TabPinned', 'TabUnpinned'];
+    static ALL_EVENTS = ['TabPinned', 'TabUnpinned', 'TabMove'];
 
     #listeners = [];
 
@@ -49,7 +49,6 @@
 
       this._zenClickEventListener = this._onTabClick.bind(this);
       ZenWorkspaces.addChangeListeners(this.onWorkspaceChange.bind(this));
-
     }
 
     async onWorkspaceChange(newWorkspace, onInit) {
@@ -271,12 +270,35 @@
             delete tab._zenClickEventListener;
           }
           break;
+        case "TabMove":
+          this._onTabMove(tab);
+          break;
         default:
           console.warn('ZenPinnedTabManager: Unhandled tab event', action);
           break;
       }
     }
 
+    async _onTabMove(tab) {
+      if (!tab.pinned) {
+        return;
+      }
+
+      // Recollect pinned tabs and essentials after a tab move
+      const currentWorkspace = await ZenWorkspaces.getActiveWorkspace();
+
+      tab.position = tab._tPos;
+
+      for (let otherTab of gBrowser.tabs) {
+        if (otherTab.pinned && otherTab._tPos > tab.position) {
+          otherTab.position = otherTab._tPos;
+          await ZenPinnedTabsStorage.savePin(otherTab, false);
+        }
+      }
+
+      await ZenPinnedTabsStorage.savePin(tab);
+    }
+
     _onTabClick(e) {
       const tab = e.target?.closest("tab");
       if (e.button === 1 && tab) {