feat: Implement new workspace management, b=no-bug, c=common, workspaces

src/zen/workspaces/ZenWorkspace.mjs

@@ -7,7 +7,7 @@
       return `
         <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>
+          <hbox class="zen-current-workspace-indicator-name" flex="1"></hbox>
           <toolbarbutton class="toolbarbutton-1 chromeclass-toolbar-additional zen-workspaces-actions" context="zenWorkspaceMoreActions"></toolbarbutton>
         </vbox>
         <arrowscrollbox orient="vertical" class="workspace-arrowscrollbox">

src/zen/workspaces/ZenWorkspaces.mjs

@@ -21,7 +21,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
   _lastScrollTime = 0;
 
   #workspaceCreationArgs = {};
-  
+
   bookmarkMenus = [
     'PlacesToolbar',
     'bookmarks-menu-button',
@@ -467,7 +467,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
             workspaceWrapper.pinnedTabsContainer,
             tabs
           );
-          this.initIndicatorContextMenu(workspaceWrapper.indicator);
           resolve();
         },
         { once: true }
@@ -991,13 +990,32 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     }
   }
 
-  initIndicatorContextMenu(indicator) {
-    const th = (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      this.openWorkspacesDialog(event);
-    };
-    indicator.addEventListener('contextmenu', th);
+  changeWorkspaceIcon() {
+    const anchor = this.activeWorkspaceIndicator?.querySelector(
+      '.zen-current-workspace-indicator-icon'
+    );
+    if (!anchor) {
+      return;
+    }
+    const hasNoIcon = anchor.hasAttribute('no-icon');
+    anchor.removeAttribute('no-icon');
+    gZenEmojiPicker
+      .open(anchor)
+      .then(async (emoji) => {
+        const workspace = this.getActiveWorkspaceFromCache();
+        if (!workspace) {
+          console.warn('No active workspace found to change icon');
+          return;
+        }
+        workspace.icon = emoji;
+        await this.saveWorkspace(workspace);
+      })
+      .catch((error) => {
+        console.warn('Error changing workspace icon:', error);
+        if (hasNoIcon) {
+          anchor.setAttribute('no-icon', 'true');
+        }
+      });
   }
 
   shouldCloseWindow() {
@@ -1525,7 +1543,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     if (!this.workspaceEnabled || this.isPrivateWindow) {
       return;
     }
-    let target = event.target.closest('.zen-current-workspace-indicator');
+    let target = this.activeWorkspaceIndicator || event.target;
     let panel = document.getElementById('PanelUI-zen-workspaces');
     await this._propagateWorkspaceData({
       ignoreStrip: true,
@@ -1797,10 +1815,11 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
 
     if (this.workspaceHasIcon(currentWorkspace)) {
       indicatorIcon.removeAttribute('no-icon');
+      indicatorIcon.textContent = this.getWorkspaceIcon(currentWorkspace);
     } else {
       indicatorIcon.setAttribute('no-icon', 'true');
+      indicatorIcon.textContent = '';
     }
-    indicatorIcon.textContent = this.getWorkspaceIcon(currentWorkspace);
     indicatorName.textContent = currentWorkspace.name;
   }
 

src/zen/workspaces/zen-workspaces.css

@@ -340,7 +340,7 @@
 
 /* Mark workspaces indicator */
 .zen-current-workspace-indicator {
-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);
@@ -352,6 +352,7 @@ padding: calc(4px + var(--tab-inline-padding) + var(--zen-toolbox-padding));
   width: 100%;
   font-size: small;
   padding-right: 10px;
+  -moz-window-dragging: no-drag;
 
   &::before {
     border-radius: var(--border-radius-medium);
@@ -376,8 +377,23 @@ padding: calc(4px + var(--tab-inline-padding) + var(--zen-toolbox-padding));
   }
 
   & .zen-current-workspace-indicator-icon {
-    font-size: 12px;
-    line-height: 1;
+    position: relative;
+    width: 16px;
+    height: 16px;
+    justify-content: center;
+    align-items: center;
+
+    &[zen-emoji-open='true']::before {
+      border: 1px dashed light-dark(rgba(0, 0, 0, .5), rgba(255, 255, 255, .5));
+      border-radius: 6px;
+      width: calc(100% + 6px);
+      height: calc(100% + 6px);
+      content: '';
+      position: absolute;
+      top: -4px;
+      left: -4px;
+      pointer-events: none;
+    }
   }
 
   .zen-current-workspace-indicator-name {
@@ -386,16 +402,20 @@ padding: calc(4px + var(--tab-inline-padding) + var(--zen-toolbox-padding));
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-cursor: text;
+    cursor: text;
   }
 
-    .zen-workspaces-actions {
+  .zen-workspaces-actions {
     --toolbarbutton-inner-padding: 4px;
     margin-left: auto !important;
     opacity: 0;
     visibility: collapse;
     transition: opacity 0.1s;
     order: 5;
+
+    :root[zen-renaming-tab='true'] & {
+      display: none;
+    }
   }
 
   :root:not([zen-private-window]) &:hover .zen-workspaces-actions,