From 3724f2a759831b51c606b8e73122a971e47ed5ad Mon Sep 17 00:00:00 2001
From: "Mr. M" <mr.m@tuta.com>
Date: Sat, 24 May 2025 17:20:50 +0200
Subject: [PATCH 1/2] feat: Added library, b=(no-bug), c=common, tabs,
 workspaces

---
 .../base/content/browser-box-inc-xhtml.patch  |  12 +-
 src/browser/base/content/zen-assets.inc.xhtml |   2 +
 .../base/content/zen-assets.jar.inc.mn        |   3 +
 .../base/content/zen-keysets.inc.xhtml        |   5 +
 .../base/content/zen-popupset.inc.xhtml       |  68 +-
 .../base/content/zen-sidebar-icons.inc.xhtml  |   1 +
 src/browser/themes/shared/zen-icons/icons.css |  28 +-
 src/zen/common/ZenCustomizableUI.sys.mjs      |   2 +-
 src/zen/common/ZenUIManager.mjs               | 118 +--
 src/zen/common/zen-sets.js                    |   9 +
 src/zen/library/ZenLibrary.mjs                | 270 +++++++
 src/zen/library/zen-library.css               | 103 +++
 src/zen/tabs/zen-tabs/vertical-tabs.css       |   1 +
 src/zen/workspaces/ZenGradientGenerator.mjs   |  12 +-
 src/zen/workspaces/ZenWorkspace.mjs           |  40 +
 src/zen/workspaces/ZenWorkspaces.mjs          | 714 ++----------------
 src/zen/workspaces/zen-workspaces.css         | 341 +--------
 17 files changed, 611 insertions(+), 1118 deletions(-)
 create mode 100644 src/zen/library/ZenLibrary.mjs
 create mode 100644 src/zen/library/zen-library.css

diff --git a/src/browser/base/content/browser-box-inc-xhtml.patch b/src/browser/base/content/browser-box-inc-xhtml.patch
index e272b980..4655af2f 100644
--- a/src/browser/base/content/browser-box-inc-xhtml.patch
+++ b/src/browser/base/content/browser-box-inc-xhtml.patch
@@ -1,8 +1,16 @@
 diff --git a/browser/base/content/browser-box.inc.xhtml b/browser/base/content/browser-box.inc.xhtml
-index 7d7e8697f02f90d4f336c9ab0a73a89848e0c21c..64e950106dd05b443ce72107613ac9cc405d56ea 100644
+index 7d7e8697f02f90d4f336c9ab0a73a89848e0c21c..3819ae72f97900b6d212f8a54550ae569d497741 100644
 --- a/browser/base/content/browser-box.inc.xhtml
 +++ b/browser/base/content/browser-box.inc.xhtml
-@@ -23,7 +23,15 @@
+@@ -3,6 +3,7 @@
+ # file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ 
+ <hbox flex="1" id="browser">
++  <zen-library/>
+   <box context="sidebar-context-menu" id="sidebar-main" hidden="true">
+     <html:sidebar-main flex="1">
+       <box id="vertical-tabs" slot="tabstrip" customizable="true" contextmenu="toolbar-context-menu"></box>
+@@ -23,7 +24,15 @@
      <browser id="sidebar" autoscroll="false" disablehistory="true" disablefullscreen="true" tooltip="aHTMLTooltip"/>
    </vbox>
    <splitter id="sidebar-splitter" class="chromeclass-extrachrome sidebar-splitter" resizebefore="sibling" resizeafter="none" hidden="true"/>
diff --git a/src/browser/base/content/zen-assets.inc.xhtml b/src/browser/base/content/zen-assets.inc.xhtml
index 449855cb..c1dab9aa 100644
--- a/src/browser/base/content/zen-assets.inc.xhtml
+++ b/src/browser/base/content/zen-assets.inc.xhtml
@@ -16,6 +16,7 @@
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-urlbar.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-workspaces.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-decks.css" />
+<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-library.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-folders.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-glance.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-popup.css" />
@@ -42,3 +43,4 @@
 <script src="chrome://browser/content/zen-components/ZenGlanceManager.mjs"></script>
 <script src="chrome://browser/content/zen-components/ZenMediaController.mjs"></script>
 <script src="chrome://browser/content/zen-components/ZenDownloadAnimation.mjs"></script>
+<script src="chrome://browser/content/zen-components/ZenLibrary.mjs"></script>
diff --git a/src/browser/base/content/zen-assets.jar.inc.mn b/src/browser/base/content/zen-assets.jar.inc.mn
index 96ac35a4..75523f23 100644
--- a/src/browser/base/content/zen-assets.jar.inc.mn
+++ b/src/browser/base/content/zen-assets.jar.inc.mn
@@ -39,6 +39,9 @@
         content/browser/zen-components/actors/ZenThemeMarketplaceParent.sys.mjs (../../zen/mods/actors/ZenThemeMarketplaceParent.sys.mjs)
         content/browser/zen-components/actors/ZenThemeMarketplaceChild.sys.mjs  (../../zen/mods/actors/ZenThemeMarketplaceChild.sys.mjs)
 
+        content/browser/zen-components/ZenLibrary.mjs                           (../../zen/library/ZenLibrary.mjs)
+        content/browser/zen-styles/zen-library.css                              (../../zen/library/zen-library.css)
+
         content/browser/zen-components/ZenWorkspaceIcons.mjs                    (../../zen/workspaces/ZenWorkspaceIcons.mjs)
         content/browser/zen-components/ZenWorkspace.mjs                         (../../zen/workspaces/ZenWorkspace.mjs)
         content/browser/zen-components/ZenWorkspaces.mjs                        (../../zen/workspaces/ZenWorkspaces.mjs)
diff --git a/src/browser/base/content/zen-keysets.inc.xhtml b/src/browser/base/content/zen-keysets.inc.xhtml
index 5efa7c2c..edd6219e 100644
--- a/src/browser/base/content/zen-keysets.inc.xhtml
+++ b/src/browser/base/content/zen-keysets.inc.xhtml
@@ -43,6 +43,11 @@
 
   <command id="cmd_zenCopyCurrentURL" />
   <command id="cmd_zenCopyCurrentURLMarkdown" />
+
+  <command id="cmd_zenCtxDeleteWorkspace" />
+  <command id="cmd_zenChangeWorkspaceName" />
+
+  <command id="cmd_zenToggleLibrary" />
 </commandset>
 
 <keyset id="zenKeyset"></keyset>
diff --git a/src/browser/base/content/zen-popupset.inc.xhtml b/src/browser/base/content/zen-popupset.inc.xhtml
index a771e9c3..efdb12cd 100644
--- a/src/browser/base/content/zen-popupset.inc.xhtml
+++ b/src/browser/base/content/zen-popupset.inc.xhtml
@@ -57,67 +57,11 @@
   </panelmultiview>
 </panel>
 
-<panel flip="slide" type="arrow" orient="vertical" id="PanelUI-zen-workspaces" position="bottomright topright" mainview="true" side="left">
-  <panelmultiview id="PanelUI-zen-workspaces-multiview" mainViewId="PanelUI-zen-workspaces-view">
-    <panelview id="PanelUI-zen-workspaces-view" class="PanelUI-subView" role="document" mainview-with-header="true" has-custom-header="true" closemenu="none">
-      <vbox>
-        <hbox>
-          <h3 data-l10n-id="zen-panel-ui-workspaces-text" id="PanelUI-zen-workspaces-header"></h3>
-          <toolbarbutton id="PanelUI-zen-workspaces-reorder-mode" class="subviewbutton">
-            <image></image>
-          </toolbarbutton>
-          <toolbarbutton id="PanelUI-zen-workspaces-new" class="subviewbutton">
-            <image></image>
-          </toolbarbutton>
-        </hbox>
-      </vbox>
-      <html:div id="PanelUI-zen-workspaces-list">
-      </html:div>
-    </panelview>
-    <panelview id="PanelUI-zen-workspaces-create" class="PanelUI-subView" role="document" mainview-with-header="true" has-custom-header="true">
-      <vbox class="PanelUI-zen-workspaces-user-create">
-        <h1 data-l10n-id="zen-panel-ui-workspaces-create-text"></h1>
-        <hbox class="PanelUI-zen-workspaces-creation-wraper">
-          <hbox class="PanelUI-zen-workspaces-icons-container create"></hbox>
-          <html:input autofocus="true" id="PanelUI-zen-workspaces-create-input" type="text" placeholder="Enter workspace name" />
-        </hbox>
-      </vbox>
-      <html:moz-button-group class="panel-footer" id="PanelUI-zen-workspaces-create-footer">
-        <button disabled="true" default="true" slot="primary" id="PanelUI-zen-workspaces-create-save" class="footer-button" data-l10n-id="zen-panel-ui-workspaces-create-save">
-        </button>
-        <button id="PanelUI-zen-workspaces-create-cancel" class="footer-button" data-l10n-id="zen-panel-ui-workspaces-create-cancel">
-        </button>
-      </html:moz-button-group>
-    </panelview>
-    <panelview id="PanelUI-zen-workspaces-edit" class="PanelUI-subView" role="document" mainview-with-header="true" has-custom-header="true">
-      <vbox class="PanelUI-zen-workspaces-user-create">
-        <h1 data-l10n-id="zen-panel-ui-workspaces-edit-text"></h1>
-        <hbox class="PanelUI-zen-workspaces-creation-wraper">
-          <hbox class="PanelUI-zen-workspaces-icons-container edit"></hbox>
-          <html:input autofocus="true" id="PanelUI-zen-workspaces-edit-input" type="text" placeholder="Enter workspace name" />
-        </hbox>
-      </vbox>
-      <html:moz-button-group class="panel-footer" id="PanelUI-zen-workspaces-edit-footer">
-        <button disabled="true" default="true" slot="primary" id="PanelUI-zen-workspaces-edit-save" class="footer-button" data-l10n-id="zen-panel-ui-workspaces-edit-save">
-        </button>
-        <button id="PanelUI-zen-workspaces-edit-cancel" class="footer-button" data-l10n-id="zen-panel-ui-workspaces-edit-cancel">
-        </button>
-      </html:moz-button-group>
-    </panelview>
-    <panelview id="PanelUI-zen-workspaces-icon-picker" class="PanelUI-subView" role="document" mainview-with-header="true" has-custom-header="true">
-      <vbox id="PanelUI-zen-workspaces-icon-picker-wrapper">
-        <html:div id="PanelUI-zen-workspaces-icon-search-bar">
-          <html:input autofocus="true" type="text" id="PanelUI-zen-workspaces-icon-search-input"/>
-        </html:div>
-      </vbox>
-    </panelview>
-  </panelmultiview>
-</panel>
-
-<menupopup id="zenWorkspaceActionsMenu">
-  <menuitem id="context_zenOpenWorkspace" data-l10n-id="zen-workspaces-panel-context-open"/>
-  <menuseparator/>
-  <menuitem id="context_zenEditWorkspace" data-l10n-id="zen-workspaces-panel-context-edit"/>
+<menupopup id="zenWorkspaceMoreActions">
+  <menuitem id="context_zenEditWorkspace" data-l10n-id="zen-workspaces-panel-change-name" command="cmd_zenChangeWorkspaceName"/>
+  <menuitem class="zenToolbarThemePicker"
+          data-l10n-id="zen-workspaces-change-gradient"
+          command="cmd_zenOpenZenThemePicker"/>
   <menu id="context_zenWorkspacesOpenInContainerTab"
     data-l10n-id="zen-workspaces-panel-context-open-in-container-tab"
     selection-type="single"
@@ -127,5 +71,5 @@
     <menupopup />
   </menu>
   <menuseparator/>
-  <menuitem id="context_zenDeleteWorkspace" data-l10n-id="zen-workspaces-panel-context-delete"/>
+  <menuitem id="context_zenDeleteWorkspace" data-l10n-id="zen-workspaces-panel-context-delete" command="cmd_zenCtxDeleteWorkspace"/>
 </menupopup>
diff --git a/src/browser/base/content/zen-sidebar-icons.inc.xhtml b/src/browser/base/content/zen-sidebar-icons.inc.xhtml
index 73575ba1..b6fbc2de 100644
--- a/src/browser/base/content/zen-sidebar-icons.inc.xhtml
+++ b/src/browser/base/content/zen-sidebar-icons.inc.xhtml
@@ -9,5 +9,6 @@
   context="toolbar-context-menu"
   mode="icons">
   <toolbarbutton removable="true" class="chromeclass-toolbar-additional toolbarbutton-1 zen-sidebar-action-button" id="zen-expand-sidebar-button" command="cmd_zenToggleSidebar" data-l10n-id="sidebar-zen-expand"></toolbarbutton>
+  <toolbarbutton removable="true" class="chromeclass-toolbar-additional toolbarbutton-1 zen-sidebar-action-button" id="zen-open-library" command="cmd_zenToggleLibrary"></toolbarbutton>
   <zen-workspace-icons id="zen-workspaces-button" overflows="false" removable="false"></zen-workspace-icons>
 </toolbar>
diff --git a/src/browser/themes/shared/zen-icons/icons.css b/src/browser/themes/shared/zen-icons/icons.css
index 9bdcf40d..7fd9cc6e 100644
--- a/src/browser/themes/shared/zen-icons/icons.css
+++ b/src/browser/themes/shared/zen-icons/icons.css
@@ -60,6 +60,14 @@
   list-style-image: url('sidebars-right.svg') !important;
 }
 
+#zen-library-sidebar-workspaces {
+  list-style-image: url('duplicate-tab.svg');
+}
+
+#zen-library-sidebar-mods {
+  list-style-image: url('edit.svg');
+}
+
 #context_zenSplitTabs {
   --menu-image: url('sidebars-right.svg') !important;
 }
@@ -119,6 +127,7 @@
 
 #PanelUI-menu-button,
 #appMenu-more-button2,
+.zen-workspaces-actions,
 #zen-workspace-actions-menu-icon {
   list-style-image: url('menu.svg') !important;
 }
@@ -173,12 +182,7 @@
   list-style-image: url('open.svg') !important;
 }
 
-#context_zenOpenWorkspace {
-  --menu-image: url('open.svg') !important;
-}
-
-#context_zenEditWorkspace,
-#zenToolbarThemePicker {
+.zenToolbarThemePicker {
   --menu-image: url('edit-theme.svg') !important;
 }
 
@@ -199,16 +203,10 @@
 #appMenu-zoomEnlarge-button2,
 #PanelUI-zen-profiles-newProfile,
 #zen-sidebar-add-panel-button,
-#PanelUI-zen-workspaces-new image,
 #PanelUI-zen-gradient-generator-color-custom-add image {
   list-style-image: url('plus.svg') !important;
 }
 
-#PanelUI-zen-workspaces-reorder-mode image {
-  list-style-image: url('move-tab.svg') !important;
-  rotate: 90deg;
-}
-
 #cut-button {
   list-style-image: url('edit-cut.svg') !important;
 }
@@ -303,7 +301,8 @@
   list-style-image: url('home.svg') !important;
 }
 
-#library-button {
+#library-button,
+#zen-open-library {
   list-style-image: url('library.svg') !important;
 }
 
@@ -980,7 +979,8 @@ menuitem[contexttype='fullscreen'][label*='Exit'] {
 
 menuitem[id='placesContext_show_bookmark:info'],
 menuitem[id='placesContext_show_folder:info'],
-menuitem[id='placesContext_show:info'] {
+menuitem[id='placesContext_show:info'],
+#context_zenEditWorkspace {
   --menu-image: url('edit.svg');
 }
 
diff --git a/src/zen/common/ZenCustomizableUI.sys.mjs b/src/zen/common/ZenCustomizableUI.sys.mjs
index ce2e7513..9eab445b 100644
--- a/src/zen/common/ZenCustomizableUI.sys.mjs
+++ b/src/zen/common/ZenCustomizableUI.sys.mjs
@@ -4,7 +4,7 @@ export var ZenCustomizableUI = new (class {
   constructor() {}
 
   TYPE_TOOLBAR = 'toolbar';
-  defaultSidebarIcons = ['preferences-button', 'zen-workspaces-button', 'downloads-button'];
+  defaultSidebarIcons = ['zen-open-library', 'zen-workspaces-button', 'downloads-button'];
 
   startup(CustomizableUIInternal) {
     CustomizableUIInternal.registerArea(
diff --git a/src/zen/common/ZenUIManager.mjs b/src/zen/common/ZenUIManager.mjs
index 1e0a998b..d3484501 100644
--- a/src/zen/common/ZenUIManager.mjs
+++ b/src/zen/common/ZenUIManager.mjs
@@ -989,43 +989,54 @@ var gZenVerticalTabsManager = {
   async renameTabKeydown(event) {
     event.stopPropagation();
     if (event.key === 'Enter') {
-      let label = this._tabEdited.querySelector('.tab-label-container-editing');
-      let input = this._tabEdited.querySelector('#tab-label-input');
+      const isTab = !!event.target.closest('.tabbrowser-tab');
+      let label = isTab
+        ? this._tabEdited.querySelector('.tab-label-container-editing')
+        : this._tabEdited;
+      let input = document.getElementById('tab-label-input');
       let newName = input.value.trim();
 
-      // Check if name is blank, reset if so
-      // Always remove, so we can always rename and if it's empty,
-      // it will reset to the original name anyway
-      this._tabEdited.removeAttribute('zen-has-static-label');
-      if (newName) {
-        gBrowser._setTabLabel(this._tabEdited, newName);
-        this._tabEdited.setAttribute('zen-has-static-label', 'true');
-        gZenUIManager.showToast('zen-tabs-renamed');
+      document.documentElement.removeAttribute('zen-renaming-tab');
+      input.remove();
+      if (!isTab) {
+        await this._tabEdited.onRenameFinished(newName);
       } else {
-        gBrowser.setTabTitle(this._tabEdited);
-      }
-      if (this._tabEdited.getAttribute('zen-pin-id')) {
-        // Update pin title in storage
-        await gZenPinnedTabManager.updatePinTitle(
+        // Check if name is blank, reset if so
+        // Always remove, so we can always rename and if it's empty,
+        // it will reset to the original name anyway
+        this._tabEdited.removeAttribute('zen-has-static-label');
+        if (newName) {
+          gBrowser._setTabLabel(this._tabEdited, newName);
+          this._tabEdited.setAttribute('zen-has-static-label', 'true');
+          gZenUIManager.showToast('zen-tabs-renamed');
+        } else {
+          gBrowser.setTabTitle(this._tabEdited);
+        }
+        if (this._tabEdited.getAttribute('zen-pin-id')) {
+          // Update pin title in storage
+          await gZenPinnedTabManager.updatePinTitle(
+            this._tabEdited,
+            this._tabEdited.label,
+            !!newName
+          );
+        }
+
+        // Maybe add some confetti here?!?
+        gZenUIManager.motion.animate(
           this._tabEdited,
-          this._tabEdited.label,
-          !!newName
+          {
+            scale: [1, 0.98, 1],
+          },
+          {
+            duration: 0.25,
+          }
         );
       }
-      document.documentElement.removeAttribute('zen-renaming-tab');
 
-      // Maybe add some confetti here?!?
-      gZenUIManager.motion.animate(
-        this._tabEdited,
-        {
-          scale: [1, 0.98, 1],
-        },
-        {
-          duration: 0.25,
-        }
-      );
-
-      this._tabEdited.querySelector('.tab-editor-container').remove();
+      const editorContainer = this._tabEdited.querySelector('.tab-editor-container');
+      if (editorContainer) {
+        editorContainer.remove();
+      }
       label.classList.remove('tab-label-container-editing');
 
       this._tabEdited = null;
@@ -1035,34 +1046,45 @@ var gZenVerticalTabsManager = {
   },
 
   renameTabStart(event) {
+    const isTab = !!event.target.closest('.tabbrowser-tab');
     if (
       this._tabEdited ||
-      !Services.prefs.getBoolPref('zen.tabs.rename-tabs') ||
-      Services.prefs.getBoolPref('browser.tabs.closeTabByDblclick') ||
+      ((!Services.prefs.getBoolPref('zen.tabs.rename-tabs') ||
+        Services.prefs.getBoolPref('browser.tabs.closeTabByDblclick')) &&
+        isTab) ||
       !gZenVerticalTabsManager._prefsSidebarExpanded
     )
       return;
-    this._tabEdited = event.target.closest('.tabbrowser-tab');
+    this._tabEdited =
+      event.target.closest('.tabbrowser-tab') ||
+      event.target.closest('.zen-current-workspace-indicator-name') ||
+      gZenWorkspaces.activeWorkspaceIndicator.querySelector(
+        '.zen-current-workspace-indicator-name'
+      );
     if (
       !this._tabEdited ||
-      !this._tabEdited.pinned ||
-      this._tabEdited.hasAttribute('zen-essential')
+      ((!this._tabEdited.pinned || this._tabEdited.hasAttribute('zen-essential')) && isTab)
     ) {
       this._tabEdited = null;
       return;
     }
+    event.stopPropagation();
     document.documentElement.setAttribute('zen-renaming-tab', 'true');
-    const label = this._tabEdited.querySelector('.tab-label-container');
+    const label = isTab ? this._tabEdited.querySelector('.tab-label-container') : this._tabEdited;
     label.classList.add('tab-label-container-editing');
 
-    const container = window.MozXULElement.parseXULToFragment(`
-      <vbox class="tab-label-container tab-editor-container" flex="1" align="start" pack="center"></vbox>
-    `);
-    label.after(container);
-    const containerHtml = this._tabEdited.querySelector('.tab-editor-container');
+    if (isTab) {
+      const container = window.MozXULElement.parseXULToFragment(`
+        <vbox class="tab-label-container tab-editor-container" flex="1" align="start" pack="center"></vbox>
+      `);
+      label.after(container);
+    }
+    const containerHtml = isTab
+      ? this._tabEdited.querySelector('.tab-editor-container')
+      : this._tabEdited.parentNode;
     const input = document.createElement('input');
     input.id = 'tab-label-input';
-    input.value = this._tabEdited.label;
+    input.value = isTab ? this._tabEdited.label : this._tabEdited.textContent;
     input.addEventListener('keydown', this.renameTabKeydown.bind(this));
 
     containerHtml.appendChild(input);
@@ -1077,8 +1099,16 @@ var gZenVerticalTabsManager = {
       return;
     }
     document.documentElement.removeAttribute('zen-renaming-tab');
-    this._tabEdited.querySelector('.tab-editor-container').remove();
-    const label = this._tabEdited.querySelector('.tab-label-container-editing');
+    const editorContainer = this._tabEdited.querySelector('.tab-editor-container');
+    let input = document.getElementById('tab-label-input');
+    input.remove();
+    if (editorContainer) {
+      editorContainer.remove();
+    }
+    const isTab = !!this._tabEdited.closest('.tabbrowser-tab');
+    const label = isTab
+      ? this._tabEdited.querySelector('.tab-label-container-editing')
+      : this._tabEdited;
     label.classList.remove('tab-label-container-editing');
 
     this._tabEdited = null;
diff --git a/src/zen/common/zen-sets.js b/src/zen/common/zen-sets.js
index 7e1edacc..62e67f87 100644
--- a/src/zen/common/zen-sets.js
+++ b/src/zen/common/zen-sets.js
@@ -73,6 +73,9 @@ document.addEventListener(
               event.sourceEvent.target.getAttribute('zen-workspace-id')
             );
             break;
+          case 'cmd_zenToggleLibrary':
+            gZenLibrary.toggle();
+            break;
           case 'cmd_zenToggleTabsOnRight':
             gZenVerticalTabsManager.toggleTabsOnRight();
             break;
@@ -88,6 +91,12 @@ document.addEventListener(
           case 'cmd_zenRemoveFromEssentials':
             gZenPinnedTabManager.removeEssentials();
             break;
+          case 'cmd_zenCtxDeleteWorkspace':
+            gZenWorkspaces.contextDeleteWorkspace(event);
+            break;
+          case 'cmd_zenChangeWorkspaceName':
+            gZenVerticalTabsManager.renameTabStart(event);
+            break;
           default:
             if (event.target.id.startsWith('cmd_zenWorkspaceSwitch')) {
               const index = parseInt(event.target.id.replace('cmd_zenWorkspaceSwitch', ''), 10) - 1;
diff --git a/src/zen/library/ZenLibrary.mjs b/src/zen/library/ZenLibrary.mjs
new file mode 100644
index 00000000..c9b4f98d
--- /dev/null
+++ b/src/zen/library/ZenLibrary.mjs
@@ -0,0 +1,270 @@
+{
+  class ZenLibraryElement extends MozXULElement {
+    #currentTab = null;
+    #availableTabs = ['workspaces', 'mods'];
+
+    static get markup() {
+      return `
+        <vbox id="zen-library-sidebar">
+          <vbox id="zen-library-sidebar-buttons" flex="1">
+            <toolbarbutton class="toolbarbutton-1 zen-library-sidebar-button" id="zen-library-sidebar-workspaces" data-l10n-id="zen-library-sidebar-workspaces"/>
+            <toolbarbutton class="toolbarbutton-1 zen-library-sidebar-button" id="zen-library-sidebar-mods" data-l10n-id="zen-library-sidebar-mods"/>
+          </vbox>
+          <hbox id="zen-library-sidebar-footer">
+            <toolbarbutton removable="true" class="chromeclass-toolbar-additional toolbarbutton-1 zen-sidebar-action-button" id="zen-open-library" command="cmd_zenToggleLibrary"></toolbarbutton>
+          </hbox>
+        </vbox>
+        <vbox id="zen-library-content">
+          <hbox content="workspaces" size="big">
+          </hbox>
+          <hbox content="mods" size="small"></hbox>
+        </vbox>
+      `;
+    }
+
+    static get inheritedAttributes() {
+      return {
+        '#zen-library-content': 'content,size=content-size',
+        '#zen-library-sidebar': 'content',
+      };
+    }
+
+    constructor() {
+      super();
+    }
+
+    set currentTab(tab) {
+      if (!this.#availableTabs.includes(tab)) {
+        throw new Error(`Tab "${tab}" is not available in Zen Library.`);
+      }
+      this.#currentTab = tab;
+      this.setAttribute('content', tab);
+      // Also set if the size is big or small based on the tab.
+      const element = this.querySelector(`#zen-library-content hbox[content="${tab}"]`);
+      this.setAttribute('content-size', element.getAttribute('size') || 'small');
+      for (const availableTab of this.#availableTabs) {
+        const button = this.querySelector(`#zen-library-sidebar-${availableTab}`);
+        if (availableTab === tab) {
+          button.setAttribute('active', 'true');
+        } else {
+          button.removeAttribute('active');
+        }
+        const contentContainer = this.#getContentContainer(availableTab);
+        if (availableTab === tab) {
+          contentContainer.removeAttribute('hidden');
+        } else {
+          contentContainer.setAttribute('hidden', 'true');
+        }
+      }
+    }
+
+    get currentTab() {
+      return this.#currentTab;
+    }
+
+    set open(value) {
+      if (value) {
+        this.setAttribute('open', 'true');
+        this.onOpen(); // Trigger the onOpen method to populate the content
+      } else {
+        this.removeAttribute('open');
+        this.onClose(); // Trigger the onClose method if needed
+      }
+    }
+
+    get open() {
+      return this.getAttribute('open') === 'true';
+    }
+
+    connectedCallback() {
+      if (this.delayConnectedCallback()) {
+        // If we are not ready yet, or if we have already connected, we
+        // don't need to do anything.
+        return;
+      }
+
+      this.id = 'zen-library';
+      this.appendChild(this.constructor.fragment);
+      this.initializeAttributeInheritance();
+
+      for (const availableTab of this.#availableTabs) {
+        const button = this.querySelector(`#zen-library-sidebar-${availableTab}`);
+        button.addEventListener('command', () => {
+          this.currentTab = availableTab;
+        });
+      }
+
+      window.addEventListener('TabSelect', this);
+
+      this.currentTab = 'workspaces'; // Default tab
+    }
+
+    #getContentContainer(tab) {
+      return this.querySelector(`#zen-library-content hbox[content="${tab}"]`);
+    }
+
+    #createWorkspaceElement(workspace) {
+      const fragment = window.MozXULElement.parseXULToFragment(`
+        <vbox class="zen-workspace-item" zen-workspace-id="${workspace.uuid}">
+          <hbox class="zen-workspace-item-header">
+            <label class="zen-workspace-item-name"></label>
+          </hbox>
+          <vbox class="zen-workspace-item-content">
+          </vbox>
+        </vbox>
+      `);
+
+      const workspaceLabel = fragment.querySelector('.zen-workspace-item-name');
+      workspaceLabel.textContent = workspace.name;
+      workspaceLabel.addEventListener(
+        'click',
+        gZenVerticalTabsManager.renameTabStart.bind(gZenVerticalTabsManager)
+      );
+
+      const workspaceItem = fragment.querySelector('.zen-workspace-item');
+      workspaceItem.style.setProperty(
+        '--zen-workspace-gradient',
+        gZenThemePicker.getGradient(workspace.theme.gradientColors, true, workspace.theme.rotation)
+      );
+
+      // TODO: Not jet! Figure this out
+      //const workspaceElement = gZenWorkspaces.workspaceElement(workspace.uuid);
+      //fragment.querySelector('.zen-workspace-item-content').appendChild(workspaceElement);
+
+      return fragment;
+    }
+
+    async onOpen(event) {
+      const conatainer = this.#getContentContainer('workspaces');
+      conatainer.innerHTML = ''; // Clear the container
+
+      const workspaces = await gZenWorkspaces._workspaces();
+      for (const workspace of workspaces.workspaces) {
+        const workspaceElement = this.#createWorkspaceElement(workspace);
+        conatainer.appendChild(workspaceElement);
+      }
+    }
+
+    async onClose(event) {}
+
+    on_TabSelect(event) {
+      if (!this.open) return;
+      gZenLibrary.close();
+    }
+  }
+
+  customElements.define('zen-library', ZenLibraryElement);
+
+  class ZenLibrary {
+    #animating = false;
+
+    constructor() {
+      ChromeUtils.defineLazyGetter(this, 'wrapper', () => document.getElementById('zen-library'));
+    }
+
+    get isOpen() {
+      return this.wrapper.hasAttribute('open');
+    }
+
+    set isOpen(value) {
+      if (this.#animating) {
+        return; // Prevent multiple animations from running at the same time
+      }
+      this.#animating = true;
+      if (value) {
+        this.wrapper.open = value;
+        this.animateLibrary(false).then(() => {
+          this.#animating = false;
+        });
+      } else {
+        this.animateLibrary(true).then(() => {
+          this.wrapper.open = value;
+          this.#animating = false;
+        });
+      }
+    }
+
+    open() {
+      this.isOpen = true;
+    }
+
+    close() {
+      this.isOpen = false;
+    }
+
+    toggle() {
+      this.isOpen = !this.isOpen;
+    }
+
+    async animateLibrary(open) {
+      window.docShell.treeOwner
+        .QueryInterface(Ci.nsIInterfaceRequestor)
+        .getInterface(Ci.nsIAppWindow)
+        .rollupAllPopups();
+
+      let elementsToAnimate = [gNavToolbox];
+      if (gZenVerticalTabsManager._hasSetSingleToolbar) {
+        elementsToAnimate.push(gURLBar.textbox);
+      }
+      const wrapperWidth = this.wrapper.getBoundingClientRect().width;
+      const appContentWrapper = document.getElementById('zen-appcontent-wrapper');
+      if (open) {
+        await Promise.all([
+          gZenUIManager.motion.animate(
+            elementsToAnimate,
+            {
+              transform: ['translateX(100%)', 'translateX(0)'],
+              opacity: [0, 1],
+            },
+            {
+              duration: 0.2,
+              easing: 'ease-in-out',
+            }
+          ),
+          gZenUIManager.motion.animate(
+            this.wrapper,
+            {
+              marginLeft: ['0px', `${-wrapperWidth}px`],
+              transform: ['translateX(0)', 'translateX(100%)'],
+            },
+            {
+              duration: 0.2,
+              easing: 'ease-in-out',
+            }
+          ),
+        ]);
+        appContentWrapper.style.minWidth = ''; // Reset the min-width after the animation
+        gNavToolbox.style.display = ''; // Hide the toolbox during the animation
+      } else {
+        appContentWrapper.style.minWidth = `${appContentWrapper.getBoundingClientRect().width}px`;
+        await Promise.all([
+          gZenUIManager.motion.animate(
+            elementsToAnimate,
+            {
+              transform: ['translateX(0)', 'translateX(100%)'],
+              opacity: [1, 0],
+            },
+            {
+              duration: 0.2,
+              easing: 'ease-in-out',
+            }
+          ),
+          gZenUIManager.motion.animate(
+            this.wrapper,
+            {
+              marginLeft: [`${-wrapperWidth}px`, '0px'],
+              transform: ['translateX(-100%)', 'translateX(0%)'],
+            },
+            {
+              duration: 0.2,
+              easing: 'ease-in-out',
+            }
+          ),
+        ]);
+        gNavToolbox.style.display = 'none'; // Show the toolbox after the animation
+      }
+    }
+  }
+
+  window.gZenLibrary = new ZenLibrary();
+}
diff --git a/src/zen/library/zen-library.css b/src/zen/library/zen-library.css
new file mode 100644
index 00000000..107f3119
--- /dev/null
+++ b/src/zen/library/zen-library.css
@@ -0,0 +1,103 @@
+#zen-library {
+  order: -1;
+  z-index: 1;
+  pointer-events: none;
+  position: fixed;
+  left: -200%;
+
+  &[open='true'] {
+    display: flex;
+    pointer-events: all;
+    position: relative;
+    left: 0;
+  }
+}
+
+#zen-library-sidebar {
+  height: 100%;
+  background: rgba(255, 255, 255, 0.1);
+  padding: 0.6rem;
+  box-shadow: var(--zen-big-shadow);
+  -moz-window-dragging: drag;
+  border-right: 1px solid var(--zen-colors-border);
+
+  #zen-library-sidebar-buttons {
+    justify-content: center;
+    gap: 12px;
+  }
+
+  & .zen-library-sidebar-button {
+    transition: background-color 0.1s;
+    padding: 0.8rem 0.7rem;
+    border-radius: 6px;
+    background: transparent;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    appearance: none;
+    gap: 0.5rem;
+    border-radius: 6px !important;
+    &:hover,
+    &[active='true'] {
+      background: light-dark(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
+    }
+  }
+
+  #zen-library-sidebar-footer {
+    justify-content: space-between;
+
+    & toolbarbutton {
+      appearance: none;
+    }
+  }
+}
+
+#zen-library-content {
+  transition: width 0.15s;
+  width: 20vw;
+  overflow-x: auto;
+
+  &[size='big'] {
+    width: 60vw;
+  }
+
+  & > * {
+    height: 100%;
+  }
+
+  & > [content='workspaces'] {
+    justify-content: center;
+    align-items: center;
+    gap: 2rem;
+    padding: 6rem;
+
+    & .zen-workspace-item {
+      width: 16rem;
+      padding: 0.7rem;
+      border-radius: var(--zen-border-radius);
+      box-shadow: var(--zen-big-shadow);
+      background: var(--zen-workspace-gradient);
+      border: 1px solid light-dark(
+        rgba(255, 255, 255, 0.2),
+        rgba(0, 0, 0, 0.2)
+      );
+      height: 100%;
+
+      &::before {
+        background-image: url(chrome://browser/content/zen-images/grain-bg.png);
+        opacity: var(--zen-grainy-background-opacity, 0);
+        mix-blend-mode: hard-light;
+        width: 60%;
+        height: 60%;
+        pointer-events: none;
+        top: 50%;
+        border-radius: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 1;
+        content: '';
+        position: absolute;
+      }
+    }
+  }
+}
diff --git a/src/zen/tabs/zen-tabs/vertical-tabs.css b/src/zen/tabs/zen-tabs/vertical-tabs.css
index 4af16fba..70e03ace 100644
--- a/src/zen/tabs/zen-tabs/vertical-tabs.css
+++ b/src/zen/tabs/zen-tabs/vertical-tabs.css
@@ -709,6 +709,7 @@
 
   /* Hide text labels */
   & .zen-current-workspace-indicator-name,
+  & .zen-workspace-actions,
   & zen-workspace .toolbarbutton-text {
     display: none !important;
   }
diff --git a/src/zen/workspaces/ZenGradientGenerator.mjs b/src/zen/workspaces/ZenGradientGenerator.mjs
index 5697c0d0..639dfbfb 100644
--- a/src/zen/workspaces/ZenGradientGenerator.mjs
+++ b/src/zen/workspaces/ZenGradientGenerator.mjs
@@ -73,7 +73,7 @@
 
     initContextMenu() {
       const menu = window.MozXULElement.parseXULToFragment(`
-        <menuitem id="zenToolbarThemePicker"
+        <menuitem class="zenToolbarThemePicker"
                   data-lazy-l10n-id="zen-workspaces-change-gradient"
                   command="cmd_zenOpenZenThemePicker"/>
       `);
@@ -944,7 +944,10 @@
       return `rgba(${color.c[0]}, ${color.c[1]}, ${color.c[2]}, ${this.currentOpacity})`;
     }
 
-    getGradient(colors, forToolbar = false) {
+    getGradient(colors, forToolbar = false, rotation = undefined) {
+      if (typeof rotation === 'undefined') {
+        rotation = this.currentRotation;
+      }
       const themedColors = this.themedColors(colors);
       this.useAlgo = themedColors[0]?.algorithm ?? '';
 
@@ -955,12 +958,12 @@
       } else if (themedColors.length === 1) {
         return this.getSingleRGBColor(themedColors[0], forToolbar);
       } else if (themedColors.length !== 3) {
-        return `linear-gradient(${this.currentRotation}deg, ${themedColors.map((color) => this.getSingleRGBColor(color, forToolbar)).join(', ')})`;
+        return `linear-gradient(${rotation}deg, ${themedColors.map((color) => this.getSingleRGBColor(color, forToolbar)).join(', ')})`;
       } else {
         let color1 = this.getSingleRGBColor(themedColors[2], forToolbar);
         let color2 = this.getSingleRGBColor(themedColors[0], forToolbar);
         let color3 = this.getSingleRGBColor(themedColors[1], forToolbar);
-        return `linear-gradient(${this.currentRotation}deg, ${color1}, ${color2}, ${color3})`;
+        return `linear-gradient(${rotation}deg, ${color1}, ${color2}, ${color3})`;
       }
     }
 
@@ -1122,7 +1125,6 @@
           }
         }
 
-        const appBackground = browser.document.getElementById('zen-browser-background');
         if (!skipUpdate) {
           browser.document.documentElement.style.setProperty(
             '--zen-main-browser-background-old',
diff --git a/src/zen/workspaces/ZenWorkspace.mjs b/src/zen/workspaces/ZenWorkspace.mjs
index 47e37333..ae07ff0f 100644
--- a/src/zen/workspaces/ZenWorkspace.mjs
+++ b/src/zen/workspaces/ZenWorkspace.mjs
@@ -5,6 +5,7 @@
         <vbox class="zen-workspace-tabs-section zen-current-workspace-indicator" flex="1">
           <hbox class="zen-current-workspace-indicator-icon"></hbox>
           <hbox class="zen-current-workspace-indicator-name"></hbox>
+          <toolbarbutton class="toolbarbutton-1 chromeclass-toolbar-additional zen-workspaces-actions" context="zenWorkspaceMoreActions"></toolbarbutton>
         </vbox>
         <arrowscrollbox orient="vertical" tabindex="-1" class="workspace-arrowscrollbox">
           <vbox class="zen-workspace-tabs-section zen-workspace-pinned-tabs-section">
@@ -57,6 +58,13 @@
         false
       );
 
+      this.indicator.querySelector('.zen-current-workspace-indicator-name').onRenameFinished =
+        this.onIndicatorRenameFinished.bind(this);
+
+      this.indicator
+        .querySelector('.zen-workspaces-actions')
+        .addEventListener('click', this.onActionsCommand.bind(this));
+
       this.scrollbox.addEventListener('wheel', this, true);
       this.scrollbox.addEventListener('underflow', this);
       this.scrollbox.addEventListener('overflow', this);
@@ -168,6 +176,38 @@
         gBrowser.tabContainer.handleEvent(event);
       }
     }
+
+    get workspaceUuid() {
+      return this.id;
+    }
+
+    async onIndicatorRenameFinished(newName) {
+      if (newName === '') {
+        return;
+      }
+      let workspaces = (await gZenWorkspaces._workspaces()).workspaces;
+      let workspaceData = workspaces.find((workspace) => workspace.uuid === this.workspaceUuid);
+      workspaceData.name = newName;
+      await gZenWorkspaces.saveWorkspace(workspaceData);
+      this.indicator.querySelector('.zen-current-workspace-indicator-name').textContent = newName;
+      gZenUIManager.showToast('zen-workspace-renamed-toast');
+    }
+
+    onActionsCommand(event) {
+      event.stopPropagation();
+      const popup = document.getElementById('zenWorkspaceMoreActions');
+      event.target.setAttribute('open', 'true');
+      this.indicator.setAttribute('open', 'true');
+      popup.addEventListener(
+        'popuphidden',
+        () => {
+          event.target.removeAttribute('open');
+          this.indicator.removeAttribute('open');
+        },
+        { once: true }
+      );
+      popup.openPopup(event.target, 'after_start');
+    }
   }
 
   customElements.define('zen-workspace', ZenWorkspace);
diff --git a/src/zen/workspaces/ZenWorkspaces.mjs b/src/zen/workspaces/ZenWorkspaces.mjs
index 920184e2..60b1cd17 100644
--- a/src/zen/workspaces/ZenWorkspaces.mjs
+++ b/src/zen/workspaces/ZenWorkspaces.mjs
@@ -42,11 +42,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     this._resolveInitialized = resolve;
   });
 
-  workspaceIndicatorXUL = `
-    <hbox class="zen-current-workspace-indicator-icon"></hbox>
-    <hbox class="zen-current-workspace-indicator-name"></hbox>
-  `;
-
   async waitForPromises() {
     if (this.privateWindowOrDisabled) {
       return;
@@ -842,7 +837,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
 
   async initializeWorkspaces() {
     if (this.workspaceEnabled) {
-      this._initializeWorkspaceCreationIcons();
       this._initializeWorkspaceTabContextMenus();
       await this.workspaceBookmarks();
       window.addEventListener('TabBrowserInserted', this.onTabBrowserInserted.bind(this));
@@ -1066,84 +1060,48 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
   }
 
   addPopupListeners() {
-    const popup = document.getElementById('PanelUI-zen-workspaces');
-    const contextMenu = document.getElementById('zenWorkspaceActionsMenu');
+    const workspaceActions = document.getElementById('zenWorkspaceMoreActions');
+    workspaceActions.addEventListener('popupshowing', this.updateWorkspaceActionsMenu.bind(this));
 
-    popup.addEventListener('popuphidden', this.handlePanelHidden.bind(this));
-    popup.addEventListener('command', this.handlePanelCommand.bind(this));
+    const contextChangeContainerTabMenu = document.getElementById(
+      'context_zenWorkspacesOpenInContainerTab'
+    );
+    contextChangeContainerTabMenu.addEventListener(
+      'popupshowing',
+      this.updateWorkspaceActionsMenuContainer.bind(this)
+    );
+    contextChangeContainerTabMenu.addEventListener(
+      'command',
+      this.contextChangeContainerTab.bind(this)
+    );
+  }
 
-    contextMenu.addEventListener('popuphidden', (event) => {
-      if (event.target === contextMenu) {
-        this.onContextMenuClose(event);
-      }
+  updateWorkspaceActionsMenu(event) {
+    if (event.target.id !== 'zenWorkspaceMoreActions') {
+      return;
+    }
+    const openInContainerMenuItem = document.getElementById(
+      'context_zenWorkspacesOpenInContainerTab'
+    );
+    if (this.shouldShowContainers) {
+      openInContainerMenuItem.removeAttribute('hidden');
+    } else {
+      openInContainerMenuItem.setAttribute('hidden', 'true');
+    }
+  }
+
+  updateWorkspaceActionsMenuContainer(event) {
+    const workspace = this.getActiveWorkspaceFromCache();
+    let containerTabId = workspace.containerTabId;
+    return window.createUserContextMenu(event, {
+      isContextMenu: true,
+      excludeUserContextId: containerTabId,
+      showDefaultTab: true,
     });
-    contextMenu.addEventListener('popupshowing', this.updateContextMenu.bind(this));
-    contextMenu.addEventListener('command', this.handleContextMenuCommand.bind(this));
-
-    const submenu = document.querySelector('#context_zenWorkspacesOpenInContainerTab > menupopup');
-    if (submenu) {
-      submenu.addEventListener('popupshowing', this.createContainerTabMenu.bind(this));
-      submenu.addEventListener('command', this.contextChangeContainerTab.bind(this));
-    }
-
-    const onWorkspaceIconContainerClick = this.onWorkspaceIconContainerClick.bind(this);
-    for (const element of document.querySelectorAll('.PanelUI-zen-workspaces-icons-container')) {
-      element.addEventListener('click', onWorkspaceIconContainerClick);
-    }
-
-    document
-      .getElementById('PanelUI-zen-workspaces-create-input')
-      .addEventListener('input', this.onWorkspaceCreationNameChange.bind(this));
-    document
-      .getElementById('PanelUI-zen-workspaces-edit-input')
-      .addEventListener('input', this.onWorkspaceEditChange.bind(this));
-    document
-      .getElementById('PanelUI-zen-workspaces-icon-search-input')
-      .addEventListener('input', this.conductSearch.bind(this));
   }
 
-  handlePanelCommand(event) {
-    let target = event.target.closest('toolbarbutton');
-    target ??= event.target.closest('button');
-    if (!target) {
-      return;
-    }
-    switch (target.id) {
-      case 'PanelUI-zen-workspaces-reorder-mode':
-        this.toggleReorderMode();
-        break;
-      case 'PanelUI-zen-workspaces-new':
-        this.openSaveDialog();
-        break;
-      case 'PanelUI-zen-workspaces-create-save':
-        this.saveWorkspaceFromCreate();
-        break;
-      case 'PanelUI-zen-workspaces-edit-cancel':
-      case 'PanelUI-zen-workspaces-create-cancel':
-        this.closeWorkspacesSubView();
-        break;
-      case 'PanelUI-zen-workspaces-edit-save':
-        this.saveWorkspaceFromEdit();
-        break;
-    }
-  }
-
-  handleContextMenuCommand(event) {
-    const target = event.target.closest('menuitem');
-    if (!target) {
-      return;
-    }
-    switch (target.id) {
-      case 'context_zenOpenWorkspace':
-        this.openWorkspace();
-        break;
-      case 'context_zenEditWorkspace':
-        this.contextEdit(event);
-        break;
-      case 'context_zenDeleteWorkspace':
-        this.contextDelete(event);
-        break;
-    }
+  async contextDeleteWorkspace() {
+    await this.removeWorkspace(this.activeWorkspace, true);
   }
 
   searchIcons(input, icons) {
@@ -1207,69 +1165,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     return filteredEmojiScores.map((score) => score.emoji);
   }
 
-  resetWorkspaceIconSearch() {
-    let container = document.getElementById('PanelUI-zen-workspaces-icon-picker-wrapper');
-    let searchInput = document.getElementById('PanelUI-zen-workspaces-icon-search-input');
-
-    // Clear the search input field
-    searchInput.value = '';
-    for (let button of container.querySelectorAll('.toolbarbutton-1')) {
-      button.style.display = '';
-    }
-  }
-
-  _initializeWorkspaceCreationIcons() {
-    let container = document.getElementById('PanelUI-zen-workspaces-icon-picker-wrapper');
-    let searchInput = document.getElementById('PanelUI-zen-workspaces-icon-search-input');
-    searchInput.value = '';
-    for (let iconData of this.emojis) {
-      const icon = iconData[0];
-      let button = document.createXULElement('toolbarbutton');
-      button.className = 'toolbarbutton-1 workspace-icon-button';
-      button.setAttribute('label', icon);
-      button.onclick = (event) => {
-        const button = event.target;
-        let wasSelected = button.hasAttribute('selected');
-        for (let button of container.children) {
-          button.removeAttribute('selected');
-        }
-        if (!wasSelected) {
-          button.setAttribute('selected', 'true');
-        }
-        if (this.onIconChangeConnectedCallback) {
-          this.onIconChangeConnectedCallback(icon);
-        } else {
-          this.onWorkspaceIconChangeInner('create', icon);
-        }
-      };
-      container.appendChild(button);
-    }
-  }
-
-  conductSearch() {
-    const container = document.getElementById('PanelUI-zen-workspaces-icon-picker-wrapper');
-    const searchInput = document.getElementById('PanelUI-zen-workspaces-icon-search-input');
-    const query = searchInput.value.toLowerCase();
-
-    if (query === '') {
-      this.resetWorkspaceIconSearch();
-      return;
-    }
-
-    const buttons = Array.from(container.querySelectorAll('.toolbarbutton-1'));
-    buttons.forEach((button) => (button.style.display = 'none'));
-
-    const filteredIcons = this.searchIcons(query, this.emojis);
-
-    filteredIcons.forEach((emoji) => {
-      const matchingButton = buttons.find((button) => button.getAttribute('label') === emoji);
-      if (matchingButton) {
-        matchingButton.style.display = '';
-        container.appendChild(matchingButton);
-      }
-    });
-  }
-
   async saveWorkspace(workspaceData, preventPropagation = false) {
     if (this.privateWindowOrDisabled) {
       return;
@@ -1316,83 +1211,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     );
   }
   // Workspaces dialog UI management
-
-  openSaveDialog() {
-    let parentPanel = document.getElementById('PanelUI-zen-workspaces-multiview');
-
-    // randomly select an icon
-    let icon = this.emojis[Math.floor(Math.random() * (this.emojis.length - 257))][0];
-    this._workspaceCreateInput.textContent = '';
-    this._workspaceCreateInput.value = '';
-    this._workspaceCreateInput.setAttribute('data-initial-value', '');
-    document
-      .querySelectorAll('#PanelUI-zen-workspaces-icon-picker-wrapper toolbarbutton')
-      .forEach((button) => {
-        if (button.label === icon) {
-          button.setAttribute('selected', 'true');
-        } else {
-          button.removeAttribute('selected');
-        }
-      });
-    document.querySelector('.PanelUI-zen-workspaces-icons-container.create').textContent = icon;
-
-    PanelUI.showSubView('PanelUI-zen-workspaces-create', parentPanel);
-  }
-
-  async openEditDialog(workspaceUuid) {
-    this._workspaceEditDialog.setAttribute('data-workspace-uuid', workspaceUuid);
-    document.getElementById('PanelUI-zen-workspaces-edit-save').setAttribute('disabled', 'true');
-    let workspaces = (await this._workspaces()).workspaces;
-    let workspaceData = workspaces.find((workspace) => workspace.uuid === workspaceUuid);
-    this._workspaceEditInput.textContent = workspaceData.name;
-    this._workspaceEditInput.value = workspaceData.name;
-    this._workspaceEditInput.setAttribute('data-initial-value', workspaceData.name);
-    this._workspaceEditIconsContainer.setAttribute('data-initial-value', workspaceData.icon);
-    this.onIconChangeConnectedCallback = (...args) => {
-      this.onWorkspaceIconChangeInner('edit', ...args);
-      this.onWorkspaceEditChange(...args);
-    };
-    document
-      .querySelectorAll('#PanelUI-zen-workspaces-icon-picker-wrapper toolbarbutton')
-      .forEach((button) => {
-        if (button.label === workspaceData.icon) {
-          button.setAttribute('selected', 'true');
-        } else {
-          button.removeAttribute('selected');
-        }
-      });
-    document.querySelector('.PanelUI-zen-workspaces-icons-container.edit').textContent =
-      this.getWorkspaceIcon(workspaceData);
-    let parentPanel = document.getElementById('PanelUI-zen-workspaces-multiview');
-    PanelUI.showSubView('PanelUI-zen-workspaces-edit', parentPanel);
-  }
-
-  onWorkspaceIconChangeInner(type = 'create', icon) {
-    const container = document.querySelector(`.PanelUI-zen-workspaces-icons-container.${type}`);
-    if (container.textContent !== icon) {
-      container.textContent = icon;
-    }
-    this.goToPreviousSubView();
-  }
-
-  onWorkspaceIconContainerClick(event) {
-    event.preventDefault();
-    const parentPanel = document.getElementById('PanelUI-zen-workspaces-edit');
-    PanelUI.showSubView('PanelUI-zen-workspaces-icon-picker', parentPanel);
-
-    const container = parentPanel.parentNode.querySelector('.panel-viewcontainer');
-    setTimeout(() => {
-      if (container) {
-        container.style.minHeight = 'unset';
-      }
-    });
-  }
-
-  goToPreviousSubView() {
-    const parentPanel = document.getElementById('PanelUI-zen-workspaces-multiview');
-    parentPanel.goBack();
-  }
-
   workspaceHasIcon(workspace) {
     return workspace.icon && workspace.icon !== '';
   }
@@ -1426,230 +1244,15 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
         return;
       }
 
-      let workspaceList = browser.document.getElementById('PanelUI-zen-workspaces-list');
-      const createWorkspaceElement = (workspace) => {
-        let element = browser.document.createXULElement('toolbarbutton');
-        element.className = 'subviewbutton zen-workspace-button';
-        element.setAttribute('tooltiptext', workspace.name);
-        element.setAttribute('zen-workspace-id', workspace.uuid);
-        if (this.isWorkspaceActive(workspace)) {
-          element.setAttribute('active', 'true');
-        }
-        let containerGroup = undefined;
-        try {
-          containerGroup = browser.ContextualIdentityService.getPublicIdentities().find(
-            (container) => container.userContextId === workspace.containerTabId
-          );
-        } catch (e) {
-          console.warn('gZenWorkspaces: Error setting container color', e);
-        }
-        if (containerGroup) {
-          element.classList.add('identity-color-' + containerGroup.color);
-          element.setAttribute('data-usercontextid', containerGroup.userContextId);
-        }
-        // Set draggable attribute based on reorder mode
-        if (this.isReorderModeOn(browser)) {
-          element.setAttribute('draggable', 'true');
-        }
-        element.addEventListener(
-          'dragstart',
-          function (event) {
-            if (this.isReorderModeOn(browser)) {
-              this.draggedElement = element;
-              event.dataTransfer.effectAllowed = 'move';
-              event.dataTransfer.setData('text/plain', element.getAttribute('zen-workspace-id'));
-
-              // Create a transparent drag image for Linux
-              if (AppConstants.platform === 'linux') {
-                const dragImage = document.createElement('canvas');
-                dragImage.width = 1;
-                dragImage.height = 1;
-                event.dataTransfer.setDragImage(dragImage, 0, 0);
-              }
-
-              element.classList.add('dragging');
-            } else {
-              event.preventDefault();
-            }
-          }.bind(browser.gZenWorkspaces)
-        );
-
-        element.addEventListener(
-          'dragover',
-          function (event) {
-            if (this.isReorderModeOn(browser) && this.draggedElement) {
-              event.preventDefault();
-              event.dataTransfer.dropEffect = 'move';
-
-              // Ensure the dragover effect is visible on Linux
-              if (AppConstants.platform === 'linux') {
-                const targetId = element.getAttribute('zen-workspace-id');
-                const draggedId = this.draggedElement.getAttribute('zen-workspace-id');
-                if (targetId !== draggedId) {
-                  element.classList.add('dragover');
-                }
-              }
-            }
-          }.bind(browser.gZenWorkspaces)
-        );
-
-        element.addEventListener('dragenter', function (event) {
-          if (this.isReorderModeOn(browser) && this.draggedElement) {
-            element.classList.add('dragover');
-          }
-        });
-
-        element.addEventListener('dragleave', function (event) {
-          element.classList.remove('dragover');
-        });
-
-        element.addEventListener(
-          'drop',
-          async function (event) {
-            event.preventDefault();
-            element.classList.remove('dragover');
-            if (this.isReorderModeOn(browser)) {
-              const draggedWorkspaceId = event.dataTransfer.getData('text/plain');
-              const targetWorkspaceId = element.getAttribute('zen-workspace-id');
-              if (draggedWorkspaceId !== targetWorkspaceId) {
-                await this.moveWorkspace(draggedWorkspaceId, targetWorkspaceId);
-              }
-              if (this.draggedElement) {
-                this.draggedElement.classList.remove('dragging');
-                this.draggedElement = null;
-              }
-            }
-          }.bind(browser.gZenWorkspaces)
-        );
-
-        element.addEventListener(
-          'dragend',
-          function (event) {
-            if (this.draggedElement) {
-              this.draggedElement.classList.remove('dragging');
-              this.draggedElement = null;
-            }
-            const workspaceElements = browser.document.querySelectorAll('.zen-workspace-button');
-            for (const elem of workspaceElements) {
-              elem.classList.remove('dragover');
-            }
-          }.bind(browser.gZenWorkspaces)
-        );
-
-        let childs = browser.MozXULElement.parseXULToFragment(`
-          <div class="zen-workspace-icon">
-          </div>
-          <vbox>
-            <div class="zen-workspace-name">
-            </div>
-            <div class="zen-workspace-container" ${containerGroup ? '' : 'hidden="true"'}>
-            </div>
-          </vbox>
-            <image class="toolbarbutton-icon zen-workspace-actions-reorder-icon" ></image>
-          <toolbarbutton closemenu="none" class="toolbarbutton-1 zen-workspace-actions">
-            <image class="toolbarbutton-icon" id="zen-workspace-actions-menu-icon"></image>
-          </toolbarbutton>
-        `);
-
-        // use text content instead of innerHTML to avoid XSS
-        childs.querySelector('.zen-workspace-icon').textContent =
-          browser.gZenWorkspaces.getWorkspaceIcon(workspace);
-        childs.querySelector('.zen-workspace-name').textContent = workspace.name;
-        if (containerGroup) {
-          childs.querySelector('.zen-workspace-container').textContent =
-            ContextualIdentityService.getUserContextLabel(containerGroup.userContextId);
-        }
-
-        childs.querySelector('.zen-workspace-actions').addEventListener(
-          'command',
-          ((event) => {
-            let button = event.target;
-            this._contextMenuId = button
-              .closest('toolbarbutton[zen-workspace-id]')
-              .getAttribute('zen-workspace-id');
-            const popup = button.ownerDocument.getElementById('zenWorkspaceActionsMenu');
-            popup.openPopup(button, 'after_end');
-          }).bind(browser.gZenWorkspaces)
-        );
-        element.appendChild(childs);
-        element.onclick = (async () => {
-          if (this.isReorderModeOn(browser)) {
-            return; // Return early if reorder mode is on
-          }
-          if (event.target.closest('.zen-workspace-actions')) {
-            return; // Ignore clicks on the actions button
-          }
-          const workspaceId = element.getAttribute('zen-workspace-id');
-          const workspaces = await this._workspaces();
-          const workspace = workspaces.workspaces.find((w) => w.uuid === workspaceId);
-          await this.changeWorkspace(workspace);
-          let panel = this.ownerWindow.document.getElementById('PanelUI-zen-workspaces');
-          PanelMultiView.hidePopup(panel);
-        }).bind(browser.gZenWorkspaces);
-        return element;
-      };
-
-      const createLastPositionDropTarget = () => {
-        const element = browser.document.createXULElement('div');
-        element.className = 'zen-workspace-last-place-drop-target';
-
-        element.addEventListener(
-          'dragover',
-          function (event) {
-            if (this.isReorderModeOn(browser) && this.draggedElement) {
-              event.preventDefault();
-              event.dataTransfer.dropEffect = 'move';
-
-              // Ensure the dragover effect is visible on Linux
-              if (AppConstants.platform === 'linux') {
-                element.classList.add('dragover');
-              }
-            }
-          }.bind(browser.gZenWorkspaces)
-        );
-
-        element.addEventListener(
-          'dragenter',
-          function (event) {
-            if (this.isReorderModeOn(browser) && this.draggedElement) {
-              element.classList.add('dragover');
-            }
-          }.bind(browser.gZenWorkspaces)
-        );
-
-        element.addEventListener(
-          'dragleave',
-          function (event) {
-            element.classList.remove('dragover');
-          }.bind(browser.gZenWorkspaces)
-        );
-
-        element.addEventListener(
-          'drop',
-          async function (event) {
-            event.preventDefault();
-            element.classList.remove('dragover');
-
-            if (this.isReorderModeOn(browser)) {
-              const draggedWorkspaceId = event.dataTransfer.getData('text/plain');
-              await this.moveWorkspaceToEnd(draggedWorkspaceId);
-
-              if (this.draggedElement) {
-                this.draggedElement.classList.remove('dragging');
-                this.draggedElement = null;
-              }
-            }
-          }.bind(browser.gZenWorkspaces)
-        );
-
-        return element;
-      };
-
       if (clearCache) {
         browser.gZenWorkspaces._workspaceCache = null;
         browser.gZenWorkspaces._workspaceBookmarksCache = null;
+        await browser.gZenWorkspaces.workspaceBookmarks();
       }
       let workspaces = await browser.gZenWorkspaces._workspaces();
+      browser.document
+        .getElementById('cmd_zenCtxDeleteWorkspace')
+        .setAttribute('disabled', workspaces.workspaces.length <= 1);
       if (clearCache) {
         browser.dispatchEvent(
           new CustomEvent('ZenWorkspacesUIUpdate', {
@@ -1658,39 +1261,12 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
           })
         );
       }
-      await browser.gZenWorkspaces.workspaceBookmarks();
-      workspaceList.innerHTML = '';
-      workspaceList.parentNode.style.display = 'flex';
-      if (workspaces.workspaces.length <= 0) {
-        workspaceList.innerHTML = 'No workspaces available';
-        workspaceList.setAttribute('empty', 'true');
-      } else {
-        workspaceList.removeAttribute('empty');
-      }
-
-      for (let workspace of workspaces.workspaces) {
-        let workspaceElement = createWorkspaceElement(workspace);
-        workspaceList.appendChild(workspaceElement);
-      }
-
-      workspaceList.appendChild(createLastPositionDropTarget());
-
       if (!ignoreStrip) {
         browser.gZenWorkspaces._fixIndicatorsNames(workspaces);
       }
     });
   }
 
-  handlePanelHidden() {
-    const workspacesList = document.getElementById('PanelUI-zen-workspaces-list');
-    const reorderModeButton = document.getElementById('PanelUI-zen-workspaces-reorder-mode');
-
-    workspacesList?.removeAttribute('reorder-mode');
-    reorderModeButton?.removeAttribute('active');
-    this.resetWorkspaceIconSearch();
-    this.clearEmojis();
-  }
-
   async moveWorkspaceToEnd(draggedWorkspaceId) {
     const workspaces = (await this._workspaces()).workspaces;
     const draggedIndex = workspaces.findIndex((w) => w.uuid === draggedWorkspaceId);
@@ -1701,39 +1277,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     await this._propagateWorkspaceData();
   }
 
-  isReorderModeOn(browser) {
-    return (
-      browser.document
-        .getElementById('PanelUI-zen-workspaces-list')
-        .getAttribute('reorder-mode') === 'true'
-    );
-  }
-
-  toggleReorderMode() {
-    const workspacesList = document.getElementById('PanelUI-zen-workspaces-list');
-    const reorderModeButton = document.getElementById('PanelUI-zen-workspaces-reorder-mode');
-    const isActive = workspacesList.getAttribute('reorder-mode') === 'true';
-    if (isActive) {
-      workspacesList.removeAttribute('reorder-mode');
-      reorderModeButton.removeAttribute('active');
-    } else {
-      workspacesList.setAttribute('reorder-mode', 'true');
-      reorderModeButton.setAttribute('active', 'true');
-    }
-
-    // Update draggable attribute
-    const workspaceElements = document.querySelectorAll('.zen-workspace-button');
-    workspaceElements.forEach((elem) => {
-      // When reorder mode is toggled off, remove draggable attribute
-      // When reorder mode is toggled on, set draggable attribute
-      if (isActive) {
-        elem.removeAttribute('draggable');
-      } else {
-        elem.setAttribute('draggable', 'true');
-      }
-    });
-  }
-
   async moveWorkspace(draggedWorkspaceId, targetWorkspaceId) {
     const workspaces = (await this._workspaces()).workspaces;
     const draggedIndex = workspaces.findIndex((w) => w.uuid === draggedWorkspaceId);
@@ -1745,45 +1288,8 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     await this._propagateWorkspaceData();
   }
 
-  async openWorkspacesDialog(event) {
-    if (!this.workspaceEnabled || this.isPrivateWindow) {
-      return;
-    }
-    let target = event.target.closest('.zen-current-workspace-indicator');
-    let panel = document.getElementById('PanelUI-zen-workspaces');
-    await this._propagateWorkspaceData({
-      ignoreStrip: true,
-      clearCache: false,
-    });
-    PanelMultiView.openPopup(panel, target, {
-      position: 'bottomright topright',
-      triggerEvent: event,
-    }).catch(console.error);
-  }
-
-  closeWorkspacesSubView() {
-    let parentPanel = document.getElementById('PanelUI-zen-workspaces-multiview');
-    parentPanel.goBack(parentPanel);
-  }
-
   // Workspaces management
 
-  get _workspaceCreateInput() {
-    return document.getElementById('PanelUI-zen-workspaces-create-input');
-  }
-
-  get _workspaceEditDialog() {
-    return document.getElementById('PanelUI-zen-workspaces-edit');
-  }
-
-  get _workspaceEditInput() {
-    return document.getElementById('PanelUI-zen-workspaces-edit-input');
-  }
-
-  get _workspaceEditIconsContainer() {
-    return document.getElementById('PanelUI-zen-workspaces-icon-picker');
-  }
-
   _deleteAllTabsInWorkspace(workspaceID) {
     gBrowser.removeTabs(
       Array.from(this.allStoredTabs).filter(
@@ -1849,57 +1355,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     }
   }
 
-  async saveWorkspaceFromCreate() {
-    let workspaceName = this._workspaceCreateInput.value;
-    if (!workspaceName) {
-      return;
-    }
-    this._workspaceCreateInput.value = '';
-    let icon = document.querySelector('#PanelUI-zen-workspaces-icon-picker-wrapper [selected]');
-    icon?.removeAttribute('selected');
-    await this.createAndSaveWorkspace(workspaceName, icon?.label);
-    this.goToPreviousSubView();
-  }
-
-  async saveWorkspaceFromEdit() {
-    let workspaceUuid = this._workspaceEditDialog.getAttribute('data-workspace-uuid');
-    let workspaceName = this._workspaceEditInput.value;
-    if (!workspaceName) {
-      return;
-    }
-    this._workspaceEditInput.value = '';
-    let icon = document.querySelector('#PanelUI-zen-workspaces-icon-picker-wrapper [selected]');
-    icon?.removeAttribute('selected');
-    let workspaces = (await this._workspaces()).workspaces;
-    let workspaceData = workspaces.find((workspace) => workspace.uuid === workspaceUuid);
-    workspaceData.name = workspaceName;
-    workspaceData.icon = icon?.label;
-    await this.saveWorkspace(workspaceData);
-    this.goToPreviousSubView();
-  }
-
-  onWorkspaceCreationNameChange() {
-    let button = document.getElementById('PanelUI-zen-workspaces-create-save');
-    if (this._workspaceCreateInput.value === '') {
-      button.setAttribute('disabled', 'true');
-      return;
-    }
-    button.removeAttribute('disabled');
-  }
-
-  onWorkspaceEditChange(icon) {
-    let button = document.getElementById('PanelUI-zen-workspaces-edit-save');
-    let name = this._workspaceEditInput.value;
-    if (
-      name === this._workspaceEditInput.getAttribute('data-initial-value') &&
-      icon === this._workspaceEditIconsContainer.getAttribute('data-initial-value')
-    ) {
-      button.setAttribute('disabled', 'true');
-      return;
-    }
-    button.removeAttribute('disabled');
-  }
-
   addChangeListeners(func) {
     if (!this._changeListeners) {
       this._changeListeners = [];
@@ -2810,49 +2265,9 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     }
   }
 
-  // Context menu management
-
-  _contextMenuId = null;
-  async updateContextMenu(_) {
-    console.assert(this._contextMenuId, 'No context menu ID set');
-    document
-      .querySelector(
-        `#PanelUI-zen-workspaces [zen-workspace-id="${this._contextMenuId}"] .zen-workspace-actions`
-      )
-      .setAttribute('active', 'true');
-    const workspaces = await this._workspaces();
-    let deleteMenuItem = document.getElementById('context_zenDeleteWorkspace');
-    if (workspaces.workspaces.length <= 1) {
-      deleteMenuItem.setAttribute('disabled', 'true');
-    } else {
-      deleteMenuItem.removeAttribute('disabled');
-    }
-    let openMenuItem = document.getElementById('context_zenOpenWorkspace');
-    if (
-      workspaces.workspaces.find(
-        (workspace) => workspace.uuid === this._contextMenuId && this.isWorkspaceActive(workspace)
-      )
-    ) {
-      openMenuItem.setAttribute('disabled', 'true');
-    } else {
-      openMenuItem.removeAttribute('disabled');
-    }
-    const openInContainerMenuItem = document.getElementById(
-      'context_zenWorkspacesOpenInContainerTab'
-    );
-    if (this.shouldShowContainers) {
-      openInContainerMenuItem.removeAttribute('hidden');
-    } else {
-      openInContainerMenuItem.setAttribute('hidden', 'true');
-    }
-  }
-
   async contextChangeContainerTab(event) {
     this._organizingWorkspaceStrip = true;
-    let workspaces = await this._workspaces();
-    let workspace = workspaces.workspaces.find(
-      (workspace) => workspace.uuid === this._contextMenuId
-    );
+    let workspace = await this.getActiveWorkspace();
     let userContextId = parseInt(event.target.getAttribute('data-usercontextid'));
     workspace.containerTabId = userContextId + 0; // +0 to convert to number
     await this.saveWorkspace(workspace);
@@ -2865,16 +2280,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     }, 0);
   }
 
-  onContextMenuClose() {
-    let target = document.querySelector(
-      `#PanelUI-zen-workspaces [zen-workspace-id="${this._contextMenuId}"] .zen-workspace-actions`
-    );
-    if (target) {
-      target.removeAttribute('active');
-    }
-    this._contextMenuId = null;
-  }
-
   findTabToBlur(tab) {
     if ((!this._shouldChangeToTab(tab) || !tab) && this._emptyTab) {
       return this._emptyTab;
@@ -2882,26 +2287,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     return tab;
   }
 
-  async openWorkspace() {
-    let workspaces = await this._workspaces();
-    let workspace = workspaces.workspaces.find(
-      (workspace) => workspace.uuid === this._contextMenuId
-    );
-    await this.changeWorkspace(workspace);
-  }
-
-  async contextDelete(event) {
-    this.__contextIsDelete = true;
-    event.stopPropagation();
-    await this.removeWorkspace(this._contextMenuId);
-    this.__contextIsDelete = false;
-  }
-
-  async contextEdit(event) {
-    event.stopPropagation();
-    await this.openEditDialog(this._contextMenuId);
-  }
-
   get emojis() {
     if (this._emojis) {
       return this._emojis;
@@ -2941,6 +2326,9 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
   }
 
   _initializeWorkspaceTabContextMenus() {
+    if (this.privateWindowOrDisabled) {
+      return;
+    }
     const menu = document.createXULElement('menu');
     menu.setAttribute('id', 'context-zen-change-workspace-tab');
     menu.setAttribute('data-l10n-id', 'context-zen-change-workspace-tab');
@@ -2977,18 +2365,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     );
   }
 
-  // Tab browser utilities
-  createContainerTabMenu(event) {
-    let window = event.target.ownerGlobal;
-    const workspace = this.getWorkspaceFromId(this._contextMenuId);
-    let containerTabId = workspace.containerTabId;
-    return window.createUserContextMenu(event, {
-      isContextMenu: true,
-      excludeUserContextId: containerTabId,
-      showDefaultTab: true,
-    });
-  }
-
   getContextIdIfNeeded(userContextId, fromExternal, allowInheritPrincipal) {
     if (!this.workspaceEnabled) {
       return [userContextId, false, undefined];
diff --git a/src/zen/workspaces/zen-workspaces.css b/src/zen/workspaces/zen-workspaces.css
index 31f9792b..09bd82e5 100644
--- a/src/zen/workspaces/zen-workspaces.css
+++ b/src/zen/workspaces/zen-workspaces.css
@@ -122,327 +122,9 @@
   }
 }
 
-/* Workspaces Panel UI */
-
-#PanelUI-zen-workspaces {
-  --panel-width: 320px;
-  --panel-padding: 0;
-}
-
-#PanelUI-zen-workspaces > panelmultiview {
-  align-items: flex-start;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
-#PanelUI-zen-workspaces panelmultiview panelview {
-  position: relative;
-  padding: 10px;
-  width: var(--panel-width);
-}
-
-#PanelUI-zen-workspaces-icon-picker toolbarbutton {
-  width: 30px;
-  height: 30px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: 2px solid transparent;
-  border-radius: 7px;
-}
-
-#PanelUI-zen-workspaces-icon-picker toolbarbutton[selected='true'] {
-  border-color: var(--zen-colors-secondary);
-}
-
-#PanelUI-zen-workspaces-icon-picker toolbarbutton .toolbarbutton-icon {
-  display: none;
-}
-
-#PanelUI-zen-workspaces-icon-picker toolbarbutton .toolbarbutton-text {
-  min-width: unset;
-}
-
-#PanelUI-zen-workspaces-icon-picker {
-  padding: 5px !important;
-}
-
-#PanelUI-zen-workspaces-icon-picker-wrapper {
-  overflow-x: hidden;
-  justify-items: center;
-  overflow-y: auto;
-
-  display: flex;
-
-  flex-direction: row;
-  flex-wrap: wrap;
-
-  justify-content: space-between;
-  align-content: space-between;
-  max-height: 250px;
-
-  .workspace-icon-button {
-    min-width: 24px;
-    min-height: 24px;
-    font-size: 16px;
-    margin: 2px;
-    padding: 4px;
-  }
-}
-
-#PanelUI-zen-workspaces-list {
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-}
-
-#PanelUI-zen-workspaces-list[empty='true'] {
-  font-weight: 600;
-  padding: 10px;
-  width: 100%;
-  text-align: start;
-  opacity: 0.5;
-}
-
-.PanelUI-zen-workspaces-user-create {
-  height: 100%;
-
-  .PanelUI-zen-workspaces-creation-wraper {
-    border-radius: 5px;
-    border: 1px solid var(--zen-colors-border);
-
-    margin-top: 10px;
-
-    & .PanelUI-zen-workspaces-icons-container {
-      padding: 10px 0;
-      min-width: 40px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-right: 1px solid var(--zen-colors-border);
-      margin-right: 2px;
-    }
-
-    & html|input {
-      border: none;
-      outline: none !important;
-      width: 100%;
-    }
-  }
-}
-
-/* Workspace icon picker styles */
-#PanelUI-zen-workspaces-icon-picker-wrapper {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  gap: 5px;
-}
-
-#PanelUI-zen-workspaces-icon-search-bar {
-  display: flex;
-  position: sticky;
-  top: 0;
-  background-color: inherit;
-  z-index: 1000;
-  padding: 8px;
-  width: 100%;
-  margin: 0;
-  box-sizing: border-box;
-}
-
-#PanelUI-zen-workspaces-icon-search-input {
-  width: 100%;
-  padding: 8px 12px;
-  font-size: 14px;
-  border: 1px solid var(--panel-separator-color, #ccc);
-  border-radius: 4px;
-  box-sizing: border-box;
-  margin: 0;
-}
-
-#PanelUI-zen-workspaces-list toolbarbutton {
-  padding: 5px;
-  border-radius: var(--zen-button-border-radius);
-
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-
-  display: flex;
-  align-items: center;
-  position: relative;
-
-  &:first-child {
-    margin-top: 10px;
-  }
-
-  & .zen-workspace-icon {
-    position: relative;
-    width: 30px;
-    height: 30px;
-    border-radius: var(--zen-button-border-radius);
-    margin-right: 10px;
-    border: 1px solid var(--zen-colors-border);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-weight: 600;
-    flex-shrink: 0;
-  }
-
-  &[data-usercontextid] .zen-workspace-icon {
-    border-color: color-mix(in srgb, var(--identity-tab-color) 40%, transparent 60%);
-  }
-
-  & > vbox:has(> .zen-workspace-name) {
-    overflow: hidden;
-  }
-
-  & .zen-workspace-name {
-    font-weight: 600;
-    display: inline-block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: 100%;
-  }
-
-  & .zen-workspace-container {
-    font-size: 12px;
-    opacity: 0.5;
-    font-weight: normal;
-  }
-
-  & .zen-workspace-actions,
-  .zen-workspace-actions-reorder-icon {
-    display: none;
-    margin: 0;
-    margin-left: auto !important;
-  }
-
-  &.zen-workspace-button[active='true'] {
-    position: relative;
-  }
-
-  &.zen-workspace-button[active='true'] .zen-workspace-icon::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    left: -2px;
-    width: 2px;
-    height: 16px;
-    background-color: var(--toolbarbutton-icon-fill-attention);
-    border-radius: 5px;
-  }
-}
-
-.zen-workspace-button.dragging {
-  opacity: 0.5;
-}
-
-.zen-workspace-button.dragover::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background-color: var(--toolbarbutton-icon-fill-attention);
-}
-
-/* Enhanced visual feedback for Linux platform */
-@supports (-moz-gtk-csd-available) {
-  .zen-workspace-button.dragover {
-    background-color: color-mix(in srgb, var(--toolbarbutton-icon-fill-attention) 15%, transparent);
-  }
-
-  .zen-workspace-button.dragover::after {
-    height: 3px;
-  }
-}
-
-.zen-workspace-last-place-drop-target.dragover {
-  background-color: var(--toolbarbutton-icon-fill-attention);
-}
-
-/* Enhanced visual feedback for Linux platform */
-@supports (-moz-gtk-csd-available) {
-  .zen-workspace-last-place-drop-target {
-    height: 6px;
-    margin: 4px 0;
-  }
-
-  .zen-workspace-last-place-drop-target.dragover {
-    background-color: var(--toolbarbutton-icon-fill-attention);
-    box-shadow: 0 0 4px var(--toolbarbutton-icon-fill-attention);
-  }
-}
-
-#PanelUI-zen-workspaces-reorder-mode[active='true'] {
-  color: var(--toolbarbutton-icon-fill-attention) !important;
-}
-
-#PanelUI-zen-workspaces-list:not([reorder-mode='true']) toolbarbutton {
-  &:hover .zen-workspace-actions,
-  & .zen-workspace-actions[active='true'] {
-    display: flex;
-  }
-}
-
-#PanelUI-zen-workspaces-list[reorder-mode='true'] toolbarbutton {
-  .zen-workspace-actions-reorder-icon {
-    display: flex;
-  }
-}
-
-#PanelUI-zen-workspaces-list[reorder-mode='true'] .zen-workspace-last-place-drop-target {
-  display: block;
-}
-
-.zen-workspace-last-place-drop-target {
-  display: none;
-  height: 4px;
-  width: 100%;
-  border-radius: 5px;
-}
-
-#PanelUI-zen-workspaces-view > vbox:nth-child(2) {
-  margin-top: 10px;
-}
-
-#PanelUI-zen-workspaces-new,
-#PanelUI-zen-workspaces-reorder-mode,
-#PanelUI-zen-gradient-generator-color-custom-add {
-  min-height: 1px !important;
-  padding: 3px;
-  border-radius: 4px;
-  width: 24px;
-  height: 24px;
-}
-
-#PanelUI-zen-workspaces-create-footer,
-#PanelUI-zen-workspaces-edit-footer {
-  padding-bottom: 0 !important;
-  margin-top: 10px;
-  margin-left: 0;
-  margin-bottom: 0 !important;
-  width: 100%;
-}
-
-#PanelUI-zen-workspaces-create-footer button[default='true'],
-#PanelUI-zen-workspaces-edit-footer button[default='true'] {
-  width: 100%;
-}
-
-#PanelUI-zen-workspaces-header {
-  margin-right: auto;
-}
-
 /* Mark workspaces indicator */
 .zen-current-workspace-indicator {
-  padding: calc(15px + var(--zen-toolbox-padding))
-    calc(4px + var(--tab-inline-padding) + var(--zen-toolbox-padding));
+  padding: calc(4px + var(--tab-inline-padding) + var(--zen-toolbox-padding));
   font-weight: 600;
   position: relative;
   max-height: var(--zen-workspace-indicator-height);
@@ -452,6 +134,8 @@
   flex-direction: row !important;
   max-width: 100%;
   width: 100%;
+  font-size: small;
+  padding-right: 10px;
 
   &::before {
     border-radius: var(--border-radius-medium);
@@ -486,8 +170,23 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    pointer-events: none;
-    font-size: small;
+    cursor: auto;
+  }
+
+  .zen-workspaces-actions {
+    --toolbarbutton-inner-padding: 4px;
+    margin-left: auto !important;
+    opacity: 0;
+    visibility: collapse;
+    transition: opacity 0.1s;
+    order: 5;
+  }
+
+  :root:not([zen-private-window]) &:hover .zen-workspaces-actions,
+  & .zen-workspaces-actions[open='true'] {
+    visibility: visible;
+    pointer-events: auto;
+    opacity: 1;
   }
 }
 

From 11a671be05935b615f4f48fa39a5d39c0048a952 Mon Sep 17 00:00:00 2001
From: "mr. m" <91018726+mauro-balades@users.noreply.github.com>
Date: Sun, 25 May 2025 13:13:27 +0200
Subject: [PATCH 2/2] Discard changes to src/zen/common/ZenUIManager.mjs

---
 src/zen/common/ZenUIManager.mjs | 118 ++++++++++++--------------------
 1 file changed, 44 insertions(+), 74 deletions(-)

diff --git a/src/zen/common/ZenUIManager.mjs b/src/zen/common/ZenUIManager.mjs
index d3484501..1e0a998b 100644
--- a/src/zen/common/ZenUIManager.mjs
+++ b/src/zen/common/ZenUIManager.mjs
@@ -989,54 +989,43 @@ var gZenVerticalTabsManager = {
   async renameTabKeydown(event) {
     event.stopPropagation();
     if (event.key === 'Enter') {
-      const isTab = !!event.target.closest('.tabbrowser-tab');
-      let label = isTab
-        ? this._tabEdited.querySelector('.tab-label-container-editing')
-        : this._tabEdited;
-      let input = document.getElementById('tab-label-input');
+      let label = this._tabEdited.querySelector('.tab-label-container-editing');
+      let input = this._tabEdited.querySelector('#tab-label-input');
       let newName = input.value.trim();
 
-      document.documentElement.removeAttribute('zen-renaming-tab');
-      input.remove();
-      if (!isTab) {
-        await this._tabEdited.onRenameFinished(newName);
+      // Check if name is blank, reset if so
+      // Always remove, so we can always rename and if it's empty,
+      // it will reset to the original name anyway
+      this._tabEdited.removeAttribute('zen-has-static-label');
+      if (newName) {
+        gBrowser._setTabLabel(this._tabEdited, newName);
+        this._tabEdited.setAttribute('zen-has-static-label', 'true');
+        gZenUIManager.showToast('zen-tabs-renamed');
       } else {
-        // Check if name is blank, reset if so
-        // Always remove, so we can always rename and if it's empty,
-        // it will reset to the original name anyway
-        this._tabEdited.removeAttribute('zen-has-static-label');
-        if (newName) {
-          gBrowser._setTabLabel(this._tabEdited, newName);
-          this._tabEdited.setAttribute('zen-has-static-label', 'true');
-          gZenUIManager.showToast('zen-tabs-renamed');
-        } else {
-          gBrowser.setTabTitle(this._tabEdited);
-        }
-        if (this._tabEdited.getAttribute('zen-pin-id')) {
-          // Update pin title in storage
-          await gZenPinnedTabManager.updatePinTitle(
-            this._tabEdited,
-            this._tabEdited.label,
-            !!newName
-          );
-        }
-
-        // Maybe add some confetti here?!?
-        gZenUIManager.motion.animate(
+        gBrowser.setTabTitle(this._tabEdited);
+      }
+      if (this._tabEdited.getAttribute('zen-pin-id')) {
+        // Update pin title in storage
+        await gZenPinnedTabManager.updatePinTitle(
           this._tabEdited,
-          {
-            scale: [1, 0.98, 1],
-          },
-          {
-            duration: 0.25,
-          }
+          this._tabEdited.label,
+          !!newName
         );
       }
+      document.documentElement.removeAttribute('zen-renaming-tab');
 
-      const editorContainer = this._tabEdited.querySelector('.tab-editor-container');
-      if (editorContainer) {
-        editorContainer.remove();
-      }
+      // Maybe add some confetti here?!?
+      gZenUIManager.motion.animate(
+        this._tabEdited,
+        {
+          scale: [1, 0.98, 1],
+        },
+        {
+          duration: 0.25,
+        }
+      );
+
+      this._tabEdited.querySelector('.tab-editor-container').remove();
       label.classList.remove('tab-label-container-editing');
 
       this._tabEdited = null;
@@ -1046,45 +1035,34 @@ var gZenVerticalTabsManager = {
   },
 
   renameTabStart(event) {
-    const isTab = !!event.target.closest('.tabbrowser-tab');
     if (
       this._tabEdited ||
-      ((!Services.prefs.getBoolPref('zen.tabs.rename-tabs') ||
-        Services.prefs.getBoolPref('browser.tabs.closeTabByDblclick')) &&
-        isTab) ||
+      !Services.prefs.getBoolPref('zen.tabs.rename-tabs') ||
+      Services.prefs.getBoolPref('browser.tabs.closeTabByDblclick') ||
       !gZenVerticalTabsManager._prefsSidebarExpanded
     )
       return;
-    this._tabEdited =
-      event.target.closest('.tabbrowser-tab') ||
-      event.target.closest('.zen-current-workspace-indicator-name') ||
-      gZenWorkspaces.activeWorkspaceIndicator.querySelector(
-        '.zen-current-workspace-indicator-name'
-      );
+    this._tabEdited = event.target.closest('.tabbrowser-tab');
     if (
       !this._tabEdited ||
-      ((!this._tabEdited.pinned || this._tabEdited.hasAttribute('zen-essential')) && isTab)
+      !this._tabEdited.pinned ||
+      this._tabEdited.hasAttribute('zen-essential')
     ) {
       this._tabEdited = null;
       return;
     }
-    event.stopPropagation();
     document.documentElement.setAttribute('zen-renaming-tab', 'true');
-    const label = isTab ? this._tabEdited.querySelector('.tab-label-container') : this._tabEdited;
+    const label = this._tabEdited.querySelector('.tab-label-container');
     label.classList.add('tab-label-container-editing');
 
-    if (isTab) {
-      const container = window.MozXULElement.parseXULToFragment(`
-        <vbox class="tab-label-container tab-editor-container" flex="1" align="start" pack="center"></vbox>
-      `);
-      label.after(container);
-    }
-    const containerHtml = isTab
-      ? this._tabEdited.querySelector('.tab-editor-container')
-      : this._tabEdited.parentNode;
+    const container = window.MozXULElement.parseXULToFragment(`
+      <vbox class="tab-label-container tab-editor-container" flex="1" align="start" pack="center"></vbox>
+    `);
+    label.after(container);
+    const containerHtml = this._tabEdited.querySelector('.tab-editor-container');
     const input = document.createElement('input');
     input.id = 'tab-label-input';
-    input.value = isTab ? this._tabEdited.label : this._tabEdited.textContent;
+    input.value = this._tabEdited.label;
     input.addEventListener('keydown', this.renameTabKeydown.bind(this));
 
     containerHtml.appendChild(input);
@@ -1099,16 +1077,8 @@ var gZenVerticalTabsManager = {
       return;
     }
     document.documentElement.removeAttribute('zen-renaming-tab');
-    const editorContainer = this._tabEdited.querySelector('.tab-editor-container');
-    let input = document.getElementById('tab-label-input');
-    input.remove();
-    if (editorContainer) {
-      editorContainer.remove();
-    }
-    const isTab = !!this._tabEdited.closest('.tabbrowser-tab');
-    const label = isTab
-      ? this._tabEdited.querySelector('.tab-label-container-editing')
-      : this._tabEdited;
+    this._tabEdited.querySelector('.tab-editor-container').remove();
+    const label = this._tabEdited.querySelector('.tab-label-container-editing');
     label.classList.remove('tab-label-container-editing');
 
     this._tabEdited = null;