Refactor tab renaming logic to ensure consistent label handling and add animation effect; update CSS for vertical tabs to improve styling

src/browser/base/content/ZenUIManager.mjs

@@ -632,14 +632,23 @@ var gZenVerticalTabsManager = {
       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');
       } else {
-        this._tabEdited.removeAttribute('zen-has-static-label');
         gBrowser.setTabTitle(this._tabEdited);
       }
 
+      // 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');
 

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

@@ -1148,6 +1148,9 @@
   white-space: nowrap;
   overflow-x: scroll;
   margin: 0;
+  background: transparent;
+  border: none;
+  padding: 0;
 }
 
 /* Section: tab workspaces stylings */