Restructured reordering to be based on dragging.

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

@@ -262,6 +262,7 @@
 
   display: flex;
   align-items: center;
+  position: relative;
 
   &:first-child {
     margin-top: 10px;
@@ -297,23 +298,12 @@
     font-weight: normal;
   }
 
-  & .zen-workspace-actions, .zen-workspace-reorder-button  {
+  & .zen-workspace-actions, .zen-workspace-actions-reorder-icon {
     display: none;
     margin: 0;
     margin-left: auto !important;
   }
 
-  &:first-child {
-    & .zen-workspace-order-up {
-      display: none !important;
-    }
-  }
-
-  &:last-child {
-    & .zen-workspace-order-down {
-      display: none !important;
-    }
-  }
 
   &.zen-workspace-button[active='true'] {
     position: relative;
@@ -331,6 +321,20 @@
   }
 }
 
+.zen-workspace-button.dragging {
+  opacity: 0.5;
+}
+
+.zen-workspace-button.dragover::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  background-color: var(--toolbarbutton-icon-fill-attention);
+  border-radius: 5px;
+}
 
 #PanelUI-zen-workspaces-reorder-mode[active='true'] {
   color: var(--toolbarbutton-icon-fill-attention) !important;
@@ -344,7 +348,7 @@
 }
 
 #PanelUI-zen-workspaces-list[reorder-mode="true"] toolbarbutton {
-  .zen-workspace-reorder-button {
+  .zen-workspace-actions-reorder-icon {
     display: flex;
   }
 }

src/browser/themes/shared/zen-icons/drag-indicator.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6.5 6C7.32843 6 8 5.32843 8 4.5C8 3.67157 7.32843 3 6.5 3C5.67157 3 5 3.67157 5 4.5C5 5.32843 5.67157 6 6.5 6ZM6.5 11C7.32843 11 8 10.3284 8 9.5C8 8.67157 7.32843 8 6.5 8C5.67157 8 5 8.67157 5 9.5C5 10.3284 5.67157 11 6.5 11ZM8 14.5C8 15.3284 7.32843 16 6.5 16C5.67157 16 5 15.3284 5 14.5C5 13.6716 5.67157 13 6.5 13C7.32843 13 8 13.6716 8 14.5ZM13.5 6C14.3284 6 15 5.32843 15 4.5C15 3.67157 14.3284 3 13.5 3C12.6716 3 12 3.67157 12 4.5C12 5.32843 12.6716 6 13.5 6ZM15 9.5C15 10.3284 14.3284 11 13.5 11C12.6716 11 12 10.3284 12 9.5C12 8.67157 12.6716 8 13.5 8C14.3284 8 15 8.67157 15 9.5ZM13.5 16C14.3284 16 15 15.3284 15 14.5C15 13.6716 14.3284 13 13.5 13C12.6716 13 12 13.6716 12 14.5C12 15.3284 12.6716 16 13.5 16Z" fill="currentColor"/>
+</svg>

src/browser/themes/shared/zen-icons/icons.css

@@ -359,14 +359,18 @@
   list-style-image: url('new-tab-image.svg') !important;
 }
 
-.findbar-find-previous, #zen-workspace-actions-order-up-icon {
+.findbar-find-previous {
   list-style-image: url('arrow-up.svg') !important;
 }
 
-.findbar-find-next, #zen-workspace-actions-order-down-icon {
+.findbar-find-next {
   list-style-image: url('arrow-down.svg') !important;
 }
 
+.zen-workspace-actions-reorder-icon {
+  list-style-image: url('drag-indicator.svg') !important;
+}
+
 #protections-popup-mainView .subviewbutton-nav:not(.notFound)::after,
 #identity-popup-mainView .subviewbutton-nav::after,
 .widget-overflow-list .subviewbutton-nav::after,