feat: Add workspace reorder mode to Workspaces panel

This commit introduces a new reorder mode to the Workspaces panel, allowing users to easily rearrange their workspaces. The following changes were made:

- Added a "reorder mode" toggle button to the Workspaces panel.
- Implemented functionality to enable/disable reorder mode.
- Updated the Workspaces panel to display reorder controls for each workspace when reorder mode is enabled.
- Added visual cues to indicate the current active workspace and reorder mode status.

These changes enhance the usability of the Workspaces panel by providing a convenient way to manage and organize workspaces.

src/browser/base/content/zen-popupset.inc.xhtml

@@ -102,27 +102,24 @@
 </panelview>
 
 <panel flip="slide" type="arrow" orient="vertical" id="PanelUI-zen-workspaces" position="bottomright topright" mainview="true" side="left">
-  <panelmultiview id="PanelUI-zen-workspaces-multiview" mainViewId="PanelUI-zen-workspaces-view">
-    <panelview id="PanelUI-zen-workspaces-view" class="PanelUI-subView" role="document" mainview-with-header="true" has-custom-header="true">
-      <vbox>
-        <hbox>
-          <h3 data-l10n-id="zen-panel-ui-current-window-text"></h3>
-          <hbox class="translations-panel-beta" role="image" aria-label="Beta">
-            <image class="translations-panel-beta-icon"></image>
-          </hbox>
-          <toolbarbutton id="PanelUI-zen-workspaces-new" oncommand="ZenWorkspaces.openSaveDialog();" class="subviewbutton">
-            <image></image>
-          </toolbarbutton>
-        </hbox>
-        <html:div id="PanelUI-zen-workspaces-current-info">
-        </html:div>
-      </vbox>
-      <vbox>
-        <h3 data-l10n-id="zen-panel-ui-workspaces-text"></h3>
-        <html:div id="PanelUI-zen-workspaces-list">
-        </html:div>
-      </vbox>
-    </panelview>
+<panelview id="PanelUI-zen-workspaces-view" class="PanelUI-subView" role="document" mainview-with-header="true" has-custom-header="true" closemenu="none">
+  <vbox>
+    <hbox>
+      <h3 data-l10n-id="zen-panel-ui-workspaces-text"></h3>
+      <hbox class="translations-panel-beta" role="image" aria-label="Beta">
+        <image class="translations-panel-beta-icon"></image>
+      </hbox>
+      <toolbarbutton id="PanelUI-zen-workspaces-reorder-mode" oncommand="ZenWorkspaces.toggleReorderMode();" class="subviewbutton">
+        <image></image>
+      </toolbarbutton>
+      <toolbarbutton id="PanelUI-zen-workspaces-new" oncommand="ZenWorkspaces.openSaveDialog();" class="subviewbutton">
+        <image></image>
+      </toolbarbutton>
+    </hbox>
+  </vbox>
+  <html:div id="PanelUI-zen-workspaces-list">
+  </html:div>
+</panelview>
     <panelview id="PanelUI-zen-workspaces-create" class="PanelUI-subView" role="document" mainview-with-header="true" has-custom-header="true">
       <vbox class="PanelUI-zen-workspaces-user-create">
         <h1 data-l10n-id="zen-panel-ui-workspaces-create-text"></h1>

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

@@ -171,7 +171,6 @@
   position: relative;
   padding: 15px;
   width: var(--panel-width);
-  min-height: 150px;
 }
 
 #PanelUI-zen-workspaces-icon-picker toolbarbutton {
@@ -208,7 +207,7 @@
     padding: 5px;
     display: flex;
     gap: 10px;
-  
+
     flex-wrap: wrap;
   }
 }
@@ -245,7 +244,7 @@
       border-right: 1px solid var(--zen-colors-border);
       margin-right: 2px;
     }
-    
+
     & html|input {
       border: none;
       outline: none !important;
@@ -254,12 +253,7 @@
   }
 }
 
-#PanelUI-zen-workspaces-current-info toolbarbutton:last-child {
-  margin-bottom: 0 !important;
-}
-
-#PanelUI-zen-workspaces-list toolbarbutton,
-#PanelUI-zen-workspaces-current-info toolbarbutton {
+#PanelUI-zen-workspaces-list toolbarbutton{
   padding: 5px;
   border-radius: var(--zen-button-border-radius);
 
@@ -303,28 +297,63 @@
     font-weight: normal;
   }
 
-  & .zen-workspace-actions {
+  & .zen-workspace-actions, .zen-workspace-reorder-button  {
     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;
+  }
+
+  &.zen-workspace-button[active='true']::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -6px;
+    width: 4px;
+    height: 100%;
+    background-color: var(--toolbarbutton-icon-fill-attention);
+    border-radius: 5px;
+  }
+}
+
+
+#PanelUI-zen-workspaces-reorder-mode[active='true'] {
+  color: var(--toolbarbutton-icon-fill-attention) !important;
+}
+
+#PanelUI-zen-workspaces-list:not([reorder-mode="true"]) toolbarbutton {
   &:hover .zen-workspace-actions,
   & .zen-workspace-actions[active='true'] {
     display: flex;
   }
 }
 
-#PanelUI-zen-workspaces-current-info toolbarbutton:first-child {
-  margin-bottom: 10px;
-  margin-top: 5px;
+#PanelUI-zen-workspaces-list[reorder-mode="true"] toolbarbutton {
+  .zen-workspace-reorder-button {
+    display: flex;
+  }
 }
 
 #PanelUI-zen-workspaces-view > vbox:nth-child(2) {
   margin-top: 10px;
 }
 
-#PanelUI-zen-workspaces-new {
+#PanelUI-zen-workspaces-new, #PanelUI-zen-workspaces-reorder-mode {
   margin-left: auto;
   min-height: 1px !important;
   padding: 3px;

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

@@ -185,6 +185,11 @@
   list-style-image: url('plus.svg') !important;
 }
 
+#PanelUI-zen-workspaces-reorder-mode image {
+  list-style-image: url('move-tab.svg') !important;
+  rotate: 90deg;
+}
+
 #cut-button {
   list-style-image: url('edit-cut.svg') !important;
 }