From ff9fd6a061d262f934256750f181dc0517425794 Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Wed, 7 Jan 2026 17:16:47 +0300
Subject: [PATCH] refactor: change how global buttons are rendered

---
 ui/app/components/History.vue      | 79 +++++++++++++-----------------
 ui/app/components/Queue.vue        | 58 +++++++++++-----------
 ui/app/pages/browser/[...slug].vue | 50 +++++++++----------
 ui/app/pages/tasks.vue             | 48 +++++++++---------
 4 files changed, 111 insertions(+), 124 deletions(-)

diff --git a/ui/app/components/History.vue b/ui/app/components/History.vue
index 71a2f8db..187ec73f 100644
--- a/ui/app/components/History.vue
+++ b/ui/app/components/History.vue
@@ -1,64 +1,48 @@
 <template>
-  <div class="columns is-multiline is-mobile has-text-centered" v-if="hasItems">
-    <div class="column is-half-mobile">
-      <button type="button" class="button is-fullwidth is-ghost is-inverted"
-        @click="masterSelectAll = !masterSelectAll">
-        <span v-if="selectedElms.length > 0" class="mr-2 tag is-danger">
-          {{ selectedElms.length }}
+  <div class="columns is-multiline is-mobile has-text-centered is-justify-content-flex-end" v-if="hasItems">
+    <div class="column is-narrow">
+      <button type="button" class="button is-fullwidth" @click="masterSelectAll = !masterSelectAll"
+        :class="{ 'has-text-primary': !masterSelectAll, 'has-text-danger': masterSelectAll }">
+        <span class="icon">
+          <i :class="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" />
         </span>
-        <span class="icon-text is-block">
-          <span class="icon">
-            <i :class="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" />
-          </span>
-          <span v-if="!masterSelectAll">Select All</span>
-          <span v-else>Unselect All</span>
+        <span v-if="!masterSelectAll">Select</span>
+        <span v-else>Unselect</span>
+        <span v-if="selectedElms.length > 0">
+          &nbsp;(<u class="has-text-danger">{{ selectedElms.length }}</u>)
         </span>
       </button>
     </div>
-    <div class="column is-half-mobile">
-      <button type="button" class="button is-fullwidth is-link" @click="downloadSelected"
-        :disabled="!hasDownloaded || !hasSelected"
-        v-tooltip="!hasSelected || !hasDownloaded ? '' : 'Download items as zip'">
-        <span class="icon-text is-block">
+    <div class="column is-2-tablet is-5-mobile">
+      <Dropdown label="Actions" icons="fa-solid fa-list">
+        <a class="dropdown-item has-text-link" @click="(hasDownloaded && hasSelected) ? downloadSelected() : null"
+          :style="{ opacity: (!hasDownloaded || !hasSelected) ? 0.5 : 1, cursor: (!hasDownloaded || !hasSelected) ? 'not-allowed' : 'pointer' }"
+          v-tooltip="!hasSelected || !hasDownloaded ? '' : 'Download items as zip'">
           <span class="icon"><i class="fa-solid fa-compress-alt" /></span>
           <span>Download</span>
-        </span>
-      </button>
-    </div>
-    <div class="column is-half-mobile">
-      <button type="button" class="button is-fullwidth is-danger" @click="deleteSelectedItems" :disabled="!hasSelected">
-        <span class="icon-text is-block">
+        </a>
+        <a class="dropdown-item has-text-danger" @click="hasSelected ? deleteSelectedItems() : null"
+          :style="{ opacity: !hasSelected ? 0.5 : 1, cursor: !hasSelected ? 'not-allowed' : 'pointer' }">
           <span class="icon"><i class="fa-solid fa-trash-can" /></span>
           <span>{{ config.app.remove_files ? 'Remove' : 'Clear' }}</span>
-        </span>
-      </button>
-    </div>
-    <div class="column is-half-mobile" v-if="hasCompleted">
-      <button type="button" class="button is-fullwidth is-primary is-inverted" @click="clearCompleted">
-        <span class="icon-text is-block">
+        </a>
+        <hr class="dropdown-divider" v-if="hasCompleted || hasIncomplete">
+        <a v-if="hasCompleted" class="dropdown-item has-text-primary" @click="clearCompleted">
           <span class="icon"><i class="fa-solid fa-circle-check" /></span>
           <span>Clear Completed</span>
-        </span>
-      </button>
-    </div>
-    <div class="column is-half-mobile" v-if="hasIncomplete">
-      <button type="button" class="button is-fullwidth is-info is-inverted" @click="clearIncomplete">
-        <span class="icon-text is-block">
+        </a>
+        <a v-if="hasIncomplete" class="dropdown-item has-text-info" @click="clearIncomplete">
           <span class="icon"><i class="fa-solid fa-circle-xmark" /></span>
           <span>Clear Incomplete</span>
-        </span>
-      </button>
-    </div>
-    <div class="column is-half-mobile" v-if="hasIncomplete">
-      <button type="button" class="button is-fullwidth is-warning is-inverted" @click="retryIncomplete">
-        <span class="icon-text is-block">
+        </a>
+        <a v-if="hasIncomplete" class="dropdown-item has-text-warning" @click="retryIncomplete">
           <span class="icon"><i class="fa-solid fa-rotate-right" /></span>
           <span>Retry Incomplete</span>
-        </span>
-      </button>
+        </a>
+      </Dropdown>
     </div>
-    <div class="column is-1-tablet">
-      <button type="button" class="button is-fullwidth" @click="direction = direction === 'desc' ? 'asc' : 'desc'">
+    <div class="column is-narrow">
+      <button type="button" class="button" @click="direction = direction === 'desc' ? 'asc' : 'desc'">
         <span class="icon-text is-block">
           <span class="icon">
             <i class="fa-solid" :class="direction === 'desc' ? 'fa-arrow-down-a-z' : 'fa-arrow-up-a-z'" />
@@ -725,7 +709,10 @@ const clearCompleted = async () => {
     return
   }
   selectedElms.value = []
-  await stateStore.deleteItems('history', { status: 'finished', removeFile: false })
+  Promise.all([
+    stateStore.deleteItems('history', { status: 'finished', removeFile: false }),
+    stateStore.deleteItems('history', { status: 'skip', removeFile: false })
+  ])
 }
 
 const clearIncomplete = async () => {
diff --git a/ui/app/components/Queue.vue b/ui/app/components/Queue.vue
index adc84d61..4d1ba748 100644
--- a/ui/app/components/Queue.vue
+++ b/ui/app/components/Queue.vue
@@ -1,37 +1,37 @@
 <template>
-  <div class="columns is-multiline is-mobile has-text-centered" v-if="filteredItems.length > 0">
-    <div class="column is-half-mobile">
-      <button type="button" class="button is-fullwidth is-ghost" @click="masterSelectAll = !masterSelectAll">
-        <span v-if="selectedElms.length > 0" class="mr-2 tag is-danger">
-          {{ selectedElms.length }}
+  <div class="columns is-multiline is-mobile has-text-centered is-justify-content-flex-end"
+    v-if="filteredItems.length > 0">
+    <div class="column is-narrow">
+      <button type="button" class="button" @click="masterSelectAll = !masterSelectAll"
+        :class="{ 'has-text-primary': !masterSelectAll, 'has-text-danger': masterSelectAll }">
+        <span class="icon">
+          <i :class="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" />
         </span>
-        <span class="icon-text is-block">
-          <span class="icon">
-            <i class="fas" :class="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" />
-          </span>
-          <span v-if="!masterSelectAll">Select All</span>
-          <span v-else> Unselect All</span>
+        <span v-if="!masterSelectAll">Select</span>
+        <span v-else>Unselect</span>
+        <span v-if="selectedElms.length > 0">
+          &nbsp;(<u class="has-text-danger">{{ selectedElms.length }}</u>)
         </span>
       </button>
     </div>
-    <div class="column is-half-mobile" v-if="hasManualStart">
-      <button type="button" class="button is-fullwidth is-success" :disabled="!hasSelected" @click="startItems">
-        <span class="icon"><i class="fa-solid fa-circle-play" /></span>
-        <span>Start</span>
-      </button>
-    </div>
-    <div class="column is-half-mobile" v-if="hasPausable">
-      <button type="button" class="button is-fullwidth is-warning is-background-warning-85" :disabled="!hasSelected"
-        @click="pauseSelected">
-        <span class="icon"><i class="fa-solid fa-pause" /></span>
-        <span>Pause</span>
-      </button>
-    </div>
-    <div class="column is-half-mobile">
-      <button type="button" class="button is-fullwidth is-warning" :disabled="!hasSelected" @click="cancelSelected">
-        <span class="icon"><i class="fa-solid fa-eject" /></span>
-        <span>Cancel</span>
-      </button>
+    <div class="column is-2-tablet is-5-mobile">
+      <Dropdown label="Actions" icons="fa-solid fa-list">
+        <a v-if="hasManualStart" class="dropdown-item has-text-success" @click="hasSelected ? startItems() : null"
+          :style="{ opacity: !hasSelected ? 0.5 : 1, cursor: !hasSelected ? 'not-allowed' : 'pointer' }">
+          <span class="icon"><i class="fa-solid fa-circle-play" /></span>
+          <span>Start</span>
+        </a>
+        <a v-if="hasPausable" class="dropdown-item has-text-warning" @click="hasSelected ? pauseSelected() : null"
+          :style="{ opacity: !hasSelected ? 0.5 : 1, cursor: !hasSelected ? 'not-allowed' : 'pointer' }">
+          <span class="icon"><i class="fa-solid fa-pause" /></span>
+          <span>Pause</span>
+        </a>
+        <a class="dropdown-item has-text-warning" @click="hasSelected ? cancelSelected() : null"
+          :style="{ opacity: !hasSelected ? 0.5 : 1, cursor: !hasSelected ? 'not-allowed' : 'pointer' }">
+          <span class="icon"><i class="fa-solid fa-eject" /></span>
+          <span>Cancel</span>
+        </a>
+      </Dropdown>
     </div>
   </div>
 
diff --git a/ui/app/pages/browser/[...slug].vue b/ui/app/pages/browser/[...slug].vue
index 64f934aa..f5cb0d9a 100644
--- a/ui/app/pages/browser/[...slug].vue
+++ b/ui/app/pages/browser/[...slug].vue
@@ -105,36 +105,36 @@
       </div>
     </div>
 
-    <div class="columns is-mobile is-multiline" v-if="config.app.browser_control_enabled && items && items.length > 0">
-      <div class="column is-12-mobile">
-        <button type="button" class="button is-fullwidth is-ghost is-inverted"
-          @click="masterSelectAll = !masterSelectAll" :disabled="isLoading || items.length < 1">
-          <span class="icon-text is-block">
-            <span class="icon">
-              <i :class="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" />
-            </span>
-            <span v-if="!masterSelectAll">Select All</span>
-            <span v-else>Unselect All</span>
+    <div class="columns is-mobile is-multiline is-justify-content-flex-end" v-if="config.app.browser_control_enabled && items && items.length > 0">
+      <div class="column is-narrow">
+        <button type="button" class="button" @click="masterSelectAll = !masterSelectAll"
+          :class="{ 'has-text-primary': !masterSelectAll, 'has-text-danger': masterSelectAll }"
+          :disabled="isLoading || items.length < 1">
+          <span class="icon">
+            <i :class="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" />
+          </span>
+          <span v-if="!masterSelectAll">Select</span>
+          <span v-else>Unselect</span>
+          <span v-if="selectedElms.length > 0">
+            &nbsp;(<u class="has-text-danger">{{ selectedElms.length }}</u>)
           </span>
         </button>
       </div>
-      <div class="column is-half-mobile">
-        <button type="button" class="button is-fullwidth is-danger" @click="deleteSelected"
-          :disabled="selectedElms.length < 1 || isLoading || items.length < 1">
-          <span class="icon-text is-block">
+      <div class="column is-2-tablet is-5-mobile">
+        <Dropdown label="Actions" icons="fa-solid fa-list">
+          <a class="dropdown-item has-text-danger"
+            @click="(selectedElms.length > 0 && !isLoading) ? deleteSelected() : null"
+            :style="{ opacity: (selectedElms.length < 1 || isLoading) ? 0.5 : 1, cursor: (selectedElms.length < 1 || isLoading) ? 'not-allowed' : 'pointer' }">
             <span class="icon"><i class="fa-solid fa-trash-can" /></span>
-            <span>Delete {{ selectedElms.length > 0 ? selectedElms.length : '' }} items</span>
-          </span>
-        </button>
-      </div>
-      <div class="column is-half-mobile">
-        <button type="button" class="button is-fullwidth is-link" @click="moveSelected"
-          :disabled="selectedElms.length < 1 || isLoading || items.length < 1">
-          <span class="icon-text is-block">
+            <span>Delete{{ selectedElms.length > 0 ? ` (${selectedElms.length})` : '' }}</span>
+          </a>
+          <a class="dropdown-item has-text-link"
+            @click="(selectedElms.length > 0 && !isLoading) ? moveSelected() : null"
+            :style="{ opacity: (selectedElms.length < 1 || isLoading) ? 0.5 : 1, cursor: (selectedElms.length < 1 || isLoading) ? 'not-allowed' : 'pointer' }">
             <span class="icon"><i class="fa-solid fa-arrows-alt" /></span>
-            <span>Move {{ selectedElms.length > 0 ? selectedElms.length : '' }} items</span>
-          </span>
-        </button>
+            <span>Move{{ selectedElms.length > 0 ? ` (${selectedElms.length})` : '' }}</span>
+          </a>
+        </Dropdown>
       </div>
     </div>
 
diff --git a/ui/app/pages/tasks.vue b/ui/app/pages/tasks.vue
index c48111a3..5fd3bef5 100644
--- a/ui/app/pages/tasks.vue
+++ b/ui/app/pages/tasks.vue
@@ -72,36 +72,36 @@
       </div>
     </div>
 
-    <div class="columns is-multiline is-mobile" v-if="!toggleForm && filteredTasks && filteredTasks.length > 0">
-      <div class="column">
-        <button type="button" class="button is-fullwidth is-ghost is-inverted"
-          @click="masterSelectAll = !masterSelectAll">
-          <span class="icon-text is-block">
-            <span class="icon">
-              <i :class="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" />
-            </span>
-            <span v-if="!masterSelectAll">Select All</span>
-            <span v-else>Unselect All</span>
+    <div class="columns is-multiline is-mobile is-justify-content-flex-end" v-if="!toggleForm && filteredTasks && filteredTasks.length > 0">
+      <div class="column is-narrow">
+        <button type="button" class="button" @click="masterSelectAll = !masterSelectAll"
+          :class="{ 'has-text-primary': !masterSelectAll, 'has-text-danger': masterSelectAll }">
+          <span class="icon">
+            <i :class="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" />
+          </span>
+          <span v-if="!masterSelectAll">Select</span>
+          <span v-else>Unselect</span>
+          <span v-if="selectedElms.length > 0">
+            &nbsp;(<u class="has-text-danger">{{ selectedElms.length }}</u>)
           </span>
         </button>
       </div>
 
-      <div class="column">
-        <button class="button is-purple is-fullwidth" @click="runConfirm()"
-          :disabled="selectedElms.length < 1 || massRun" :class="{ 'is-loading': massRun }">
-          <span class="icon"><i class="fa-solid fa-up-right-from-square" /></span>
-          <span>Run Selected</span>
-        </button>
-      </div>
-
-      <div class="column">
-        <button type="button" class="button is-fullwidth is-danger" @click="deleteConfirm()"
-          :disabled="selectedElms.length < 1 || massDelete" :class="{ 'is-loading': massDelete }">
-          <span class="icon-text is-block">
+      <div class="column is-2-tablet is-5-mobile">
+        <Dropdown label="Actions" icons="fa-solid fa-list">
+          <a class="dropdown-item has-text-purple"
+            @click="(selectedElms.length > 0 && !massRun) ? runConfirm() : null"
+            :style="{ opacity: (selectedElms.length < 1 || massRun) ? 0.5 : 1, cursor: (selectedElms.length < 1 || massRun) ? 'not-allowed' : 'pointer' }">
+            <span class="icon"><i class="fa-solid fa-up-right-from-square" /></span>
+            <span>Run Selected</span>
+          </a>
+          <a class="dropdown-item has-text-danger"
+            @click="(selectedElms.length > 0 && !massDelete) ? deleteConfirm() : null"
+            :style="{ opacity: (selectedElms.length < 1 || massDelete) ? 0.5 : 1, cursor: (selectedElms.length < 1 || massDelete) ? 'not-allowed' : 'pointer' }">
             <span class="icon"><i class="fa-solid fa-trash-can" /></span>
             <span>Remove Selected</span>
-          </span>
-        </button>
+          </a>
+        </Dropdown>
       </div>
     </div>