Merge branch 'dev' of https://github.com/zen-browser/desktop into dev

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

@@ -103,25 +103,23 @@
 
 <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">
+    <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-current-window-text"></h3>
+          <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>
-        <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>
+      <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">

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

@@ -49,7 +49,7 @@
       content: '';
       display: block;
       height: 1px;
-      
+
       margin: 0 auto;
       width: 80%;
       left: 50%;
@@ -58,7 +58,6 @@
       bottom: calc(-1 * var(--zen-toolbox-padding));
     }
 
-
     @media (-moz-bool-pref: 'zen.view.show-bottom-border') {
       &::after {
         background: color-mix(in srgb, var(--zen-colors-border) 70%, transparent 30%);
@@ -174,10 +173,12 @@
     ) {
     --zen-toolbox-min-width: fit-content;
     padding: var(--zen-toolbox-padding);
+    padding-left: 0 !important;
     padding-top: 0;
 
     & #titlebar {
       min-width: 150px;
+      padding-left: var(--zen-toolbox-padding);
     }
 
     & #zen-workspaces-button {

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);
 
@@ -268,6 +262,7 @@
 
   display: flex;
   align-items: center;
+  position: relative;
 
   &:first-child {
     margin-top: 10px;
@@ -303,28 +298,66 @@
     font-weight: normal;
   }
 
-  & .zen-workspace-actions {
+  & .zen-workspace-actions, .zen-workspace-actions-reorder-icon {
     display: none;
     margin: 0;
     margin-left: auto !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;
+  }
+}
+
+.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;
+}
+
+#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-actions-reorder-icon {
+    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;