From 2799d3c0d7500dc1a1e6dd1bad26611759f86b2d Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Wed, 3 Sep 2025 22:45:07 +0300
Subject: [PATCH] fixed issue with cards vs grid naming

---
 ui/app/components/History.vue | 26 ++++++++++++++++++++++----
 ui/app/components/Queue.vue   | 10 +++++-----
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/ui/app/components/History.vue b/ui/app/components/History.vue
index 129b6b90..b81367eb 100644
--- a/ui/app/components/History.vue
+++ b/ui/app/components/History.vue
@@ -13,7 +13,7 @@
 
   <div v-if="showCompleted">
     <div class="columns is-multiline is-mobile has-text-centered" v-if="hasItems">
-      <div class="column is-half-mobile" v-if="display_style === 'cards'">
+      <div class="column is-half-mobile" v-if="display_style === 'grid'">
         <button type="button" class="button is-fullwidth is-ghost is-inverted"
           @click="masterSelectAll = !masterSelectAll">
           <span class="icon-text is-block">
@@ -176,7 +176,7 @@
                       </button>
                     </div>
                     <div class="control is-expanded" v-if="item.url && !config.app.basic_mode">
-                      <Dropdown icons="fa-solid fa-cogs" @open_state="s => table_container = !s"
+                      <Dropdown icons="fa-solid fa-cogs" @open_state="(s: boolean) => table_container = !s"
                         :button_classes="'is-small'" label="Actions">
                         <template v-if="'finished' === item.status && item.filename">
                           <NuxtLink @click="playVideo(item)" class="dropdown-item">
@@ -481,7 +481,7 @@ const box = useConfirm()
 const showCompleted = useStorage<boolean>('showCompleted', true)
 const hideThumbnail = useStorage<boolean>('hideThumbnailHistory', false)
 const direction = useStorage<'asc' | 'desc'>('sortCompleted', 'desc')
-const display_style = useStorage<'cards' | 'list'>('display_style', 'cards')
+const display_style = useStorage<'grid' | 'list'>('display_style', 'grid')
 const bg_enable = useStorage<boolean>('random_bg', true)
 const bg_opacity = useStorage<number>('random_bg_opacity', 0.95)
 
@@ -622,6 +622,9 @@ const clearCompleted = async () => {
   for (const key in stateStore.history) {
     if ('finished' === ag(stateStore.get('history', key, {} as StoreItem), 'status')) {
       socket.emit('item_delete', { id: stateStore.history[key]?._id, remove_file: false, })
+      if (selectedElms.value.includes(stateStore.history[key]?._id || '')) {
+        selectedElms.value = selectedElms.value.filter(i => i !== stateStore.history[key]?._id)
+      }
     }
   }
 }
@@ -636,6 +639,11 @@ const clearIncomplete = async () => {
         id: stateStore.history[key]?._id,
         remove_file: false,
       })
+
+      if (selectedElms.value.includes(stateStore.history[key]?._id || '')) {
+        selectedElms.value = selectedElms.value.filter(i => i !== stateStore.history[key]?._id)
+      }
+
     }
   }
 }
@@ -698,7 +706,7 @@ const setStatus = (item: StoreItem) => {
     if (item.extras?.is_premiere) {
       return 'Premiere'
     }
-    return display_style.value === 'cards' ? 'Stream' : 'Live'
+    return display_style.value === 'grid' ? 'Stream' : 'Live'
   }
   if ('skip' === item.status) {
     return 'Skipped'
@@ -754,10 +762,15 @@ const removeItem = async (item: StoreItem) => {
   if (false === (await box.confirm(msg, Boolean(item.filename && config.app.remove_files)))) {
     return false
   }
+
   socket.emit('item_delete', {
     id: item._id,
     remove_file: config.app.remove_files
   })
+
+  if (selectedElms.value.includes(item._id || '')) {
+    selectedElms.value = selectedElms.value.filter(i => i !== item._id)
+  }
 }
 
 const retryItem = (item: StoreItem, re_add = false) => {
@@ -773,6 +786,11 @@ const retryItem = (item: StoreItem, re_add = false) => {
   }
 
   socket.emit('item_delete', { id: item._id, remove_file: false })
+
+  if (selectedElms.value.includes(item._id || '')) {
+    selectedElms.value = selectedElms.value.filter(i => i !== item._id)
+  }
+
   if (true === re_add) {
     toast.info('Cleared the item from history, and added it to the new download form.')
     emitter('add_new', item_req)
diff --git a/ui/app/components/Queue.vue b/ui/app/components/Queue.vue
index d4d21476..3b7212b7 100644
--- a/ui/app/components/Queue.vue
+++ b/ui/app/components/Queue.vue
@@ -12,7 +12,7 @@
 
   <div v-if="showQueue">
     <div class="columns is-multiline is-mobile has-text-centered" v-if="filteredItems.length > 0">
-      <div class="column is-half-mobile" v-if="'cards' === display_style">
+      <div class="column is-half-mobile" v-if="'grid' === display_style">
         <button type="button" class="button is-fullwidth is-ghost" @click="masterSelectAll = !masterSelectAll">
           <span class="icon-text is-block">
             <span class="icon">
@@ -36,7 +36,7 @@
           <span>Pause</span>
         </button>
       </div>
-      <div class="column is-half-mobile" v-if="('cards' === display_style || hasSelected)">
+      <div class="column is-half-mobile" v-if="('grid' === display_style || hasSelected)">
         <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>
@@ -115,7 +115,7 @@
                     :data-datetime="item.datetime" v-rtime="item.datetime" />
                 </td>
                 <td class="is-vcentered is-items-center">
-                  <Dropdown icons="fa-solid fa-cogs" @open_state="s => table_container = !s"
+                  <Dropdown icons="fa-solid fa-cogs" @open_state="(s: boolean) => table_container = !s"
                     :button_classes="'is-small'" label="Actions">
                     <template v-if="isEmbedable(item.url)">
                       <NuxtLink class="dropdown-item has-text-danger"
@@ -265,7 +265,7 @@
                 </button>
               </div>
               <div class="column is-half-mobile">
-                <Dropdown icons="fa-solid fa-cogs" @open_state="s => table_container = !s" label="Actions">
+                <Dropdown icons="fa-solid fa-cogs" @open_state="(s: boolean) => table_container = !s" label="Actions">
                   <template v-if="isEmbedable(item.url)">
                     <NuxtLink class="dropdown-item has-text-danger"
                       @click="embed_url = getEmbedable(item.url) as string">
@@ -337,7 +337,7 @@ const toast = useNotification()
 
 const showQueue = useStorage('showQueue', true)
 const hideThumbnail = useStorage('hideThumbnailQueue', false)
-const display_style = useStorage('display_style', 'cards')
+const display_style = useStorage('display_style', 'grid')
 const bg_enable = useStorage('random_bg', true)
 const bg_opacity = useStorage('random_bg_opacity', 0.95)