From ed88aafdc1a70a0c19969ce182f3a22639f74d6e Mon Sep 17 00:00:00 2001
From: Marcus Bergo <marcusbergo@gmail.com>
Date: Wed, 16 Apr 2025 00:50:41 -0300
Subject: [PATCH] Fix workspace position dragging on Linux (Fixes #7542)

This commit fixes an issue where dragging workspaces to change their position doesn't work on Linux platforms.

The main changes include:
1. Added Linux-specific drag and drop handling with a transparent drag image
2. Enhanced dragover event handling for better visual feedback on Linux
3. Improved CSS styles for drag and drop elements on Linux
4. Added clearer comments to explain the reorder mode behavior

The issue was that the drag and drop functionality wasn't working properly on Linux due to platform-specific behavior differences. This fix ensures that workspace reordering works consistently across all platforms.
---
 src/zen/workspaces/ZenWorkspaces.mjs  | 26 ++++++++++++++++++++++++++
 src/zen/workspaces/zen-workspaces.css | 24 ++++++++++++++++++++++++
 2 files changed, 50 insertions(+)

diff --git a/src/zen/workspaces/ZenWorkspaces.mjs b/src/zen/workspaces/ZenWorkspaces.mjs
index 2619f129a..c873d8761 100644
--- a/src/zen/workspaces/ZenWorkspaces.mjs
+++ b/src/zen/workspaces/ZenWorkspaces.mjs
@@ -1018,6 +1018,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
           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');
         }
@@ -1028,6 +1029,15 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
               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();
@@ -1041,6 +1051,15 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
             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.ZenWorkspaces)
         );
@@ -1150,6 +1169,11 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
             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.ZenWorkspaces)
         );
@@ -1259,6 +1283,8 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     // 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 {
diff --git a/src/zen/workspaces/zen-workspaces.css b/src/zen/workspaces/zen-workspaces.css
index af6d57541..94d9b4bf3 100644
--- a/src/zen/workspaces/zen-workspaces.css
+++ b/src/zen/workspaces/zen-workspaces.css
@@ -365,10 +365,34 @@
   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;
 }