Refactor tab management and styling for improved workspace organization and UI consistency

src/browser/base/content/ZenUIManager.mjs

@@ -685,6 +685,7 @@ var gZenVerticalTabsManager = {
         // Update pin title in storage
         await gZenPinnedTabManager.updatePinTitle(this._tabEdited, this._tabEdited.label, !!newName);
       }
+      document.documentElement.removeAttribute('zen-renaming-tab');
 
       // Maybe add some confetti here?!?
       gZenUIManager.motion.animate(
@@ -714,6 +715,7 @@ var gZenVerticalTabsManager = {
       !gZenVerticalTabsManager._prefsSidebarExpanded
     )
       return;
+    document.documentElement.setAttribute('zen-renaming-tab', 'true');
     this._tabEdited = event.target.closest('.tabbrowser-tab');
     if (!this._tabEdited || !this._tabEdited.pinned || this._tabEdited.hasAttribute('zen-essential')) {
       this._tabEdited = null;
@@ -743,6 +745,7 @@ var gZenVerticalTabsManager = {
     if (document.activeElement === event.target || !this._tabEdited) {
       return;
     }
+    document.documentElement.removeAttribute('zen-renaming-tab');
     this._tabEdited.querySelector('.tab-editor-container').remove();
     const label = this._tabEdited.querySelector('.tab-label-container-editing');
     label.classList.remove('tab-label-container-editing');

src/browser/base/content/zen-styles/zen-compact-mode.css

@@ -139,6 +139,7 @@
     #navigator-toolbox[has-popup-menu],
     #navigator-toolbox[movingtab],
     #navigator-toolbox:has(.tabbrowser-tab:active),
+    &[zen-renaming-tab='true'] #navigator-toolbox,
     #navigator-toolbox:has(
         *:is([panelopen='true'], [open='true'], #urlbar:not([zen-floating-urlbar='true']):focus-within):not(tab):not(.zen-compact-mode-ignore)
       ) {

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

@@ -125,6 +125,7 @@
   --zen-main-browser-background-toolbar: var(--zen-main-browser-background);
 
   --browser-area-z-index-toolbox: 2 !important;
+  --attention-dot-color: transparent !important;
 
   --zen-appcontent-border: 1px solid var(--zen-colors-border);
 

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

@@ -31,7 +31,7 @@
   border-radius: var(--border-radius-medium);
   outline: none !important;
 
-  border: 1px solid hsla(0, 0%, 100%, 0.1) !important;
+  border: none !important;
   margin: 1px;
 
   box-shadow: none !important;
@@ -114,6 +114,7 @@
 
 #urlbar[breakout-extend='true'] #urlbar-background {
   box-shadow: 0px 0px 90px -10px rgba(0, 0, 0, 0.6) !important;
+  border: 1px solid hsla(0, 0%, 100%, 0.1) !important;
   backdrop-filter: none !important;
 }
 

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

@@ -461,11 +461,9 @@
   max-height: var(--zen-workspace-indicator-height);
   min-height: var(--zen-workspace-indicator-height);
   gap: 12px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
   align-items: center;
   flex-direction: row !important;
+  max-width: 100%;
 
   &::before {
     border-radius: var(--border-radius-medium);
@@ -495,6 +493,9 @@
   .zen-current-workspace-indicator-name {
     opacity: 0.5;
     display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 }
 

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

@@ -200,13 +200,17 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       const defaultSelectedContainer = document.querySelector(
         `#tabbrowser-arrowscrollbox .zen-workspace-tabs-section[zen-workspace-id="${this.activeWorkspace}"]`
       );
+      const essentialsContaienr = document.getElementById('zen-essentials-container');
       // New profile with no workspaces does not have a default selected container
       if (defaultSelectedContainer) {
         const pinnedContainer = document.querySelector(
           `#vertical-pinned-tabs-container .zen-workspace-tabs-section[zen-workspace-id="${this.activeWorkspace}"]`
         );
         for (const tab of tabs) {
-          if (tab.pinned) {
+          if (tab.hasAttribute('zen-essential')) {
+            essentialsContaienr.appendChild(tab);
+            continue
+          } else if (tab.pinned) {
             pinnedContainer.insertBefore(tab, pinnedContainer.lastChild);
             continue;
           }
@@ -1923,7 +1927,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       const contaienr = document.querySelector(
         `#vertical-pinned-tabs-container .zen-workspace-tabs-section[zen-workspace-id="${workspaceId}"]`
       );
-      console.log(tab);
       contaienr.insertBefore(tab, contaienr.firstChild);
       changed = true;
     }