From b25ee6dad85df38c95e33af3a72e961e7559fa14 Mon Sep 17 00:00:00 2001
From: ArabCoders <admin@arabcoders.org>
Date: Fri, 3 Jan 2025 20:02:19 +0300
Subject: [PATCH] some facelift

---
 ui/components/History.vue | 27 +++++++++++++++------------
 ui/components/Queue.vue   | 30 +++++++++---------------------
 2 files changed, 24 insertions(+), 33 deletions(-)

diff --git a/ui/components/History.vue b/ui/components/History.vue
index 9527b3fd..7f4c4fec 100644
--- a/ui/components/History.vue
+++ b/ui/components/History.vue
@@ -85,12 +85,9 @@
             </div>
 
             <div class="card-header-icon">
-              <a :href="makeDownload(config, item)" :download="item.filename?.split('/').reverse()[0]"
-                class="has-text-primary" v-tooltip="'Download item.'"
-                v-if="item.filename && item.status === 'finished'">
-                <span class="icon"><i class="fa-solid fa-download" /></span>
+              <a :href="item.url" class="has-text-primary" v-tooltip="'Copy url.'" @click.prevent="copyText(item.url)">
+                <span class="icon"><i class="fa-solid fa-copy" /></span>
               </a>
-
               <button @click="hideThumbnail = !hideThumbnail">
                 <span class="icon"><i class="fa-solid"
                     :class="{ 'fa-arrow-down': hideThumbnail, 'fa-arrow-up': !hideThumbnail, }" /></span>
@@ -173,14 +170,18 @@
             <div class="columns is-mobile is-multiline">
               <div class="column is-half-mobile" v-if="item.status != 'finished'">
                 <a class="button is-warning is-fullwidth" v-tooltip="'Re-queue item.'" @click="reQueueItem(item)">
-                  <span class="icon"><i class="fa-solid fa-rotate-right" /></span>
-                  <span class="is-hidden-mobile">Re-queue</span>
+                  <span class="icon-text is-block">
+                    <span class="icon"><i class="fa-solid fa-rotate-right" /></span>
+                    <span>Re-queue</span>
+                  </span>
                 </a>
               </div>
               <div class="column is-half-mobile">
                 <a class="button is-danger is-fullwidth" @click="removeItem(item)">
-                  <span class="icon"><i class="fa-solid fa-trash-can" /></span>
-                  <span class="is-hidden-mobile">Remove</span>
+                  <span class="icon-text is-block">
+                    <span class="icon"><i class="fa-solid fa-trash-can" /></span>
+                    <span>Remove</span>
+                  </span>
                 </a>
               </div>
               <div class="column is-half-mobile" v-if="config.app?.keep_archive && item.status != 'finished'">
@@ -188,15 +189,17 @@
                   @click="archiveItem(item)">
                   <span class="icon-text is-block">
                     <span class="icon"><i class="fa-solid fa-box-archive" /></span>
-                    <span class="is-hidden-mobile">Archive</span>
+                    <span>Archive</span>
                   </span>
                 </a>
               </div>
               <div class="column is-half-mobile" v-if="item.filename && item.status === 'finished'">
                 <a class="button is-link is-fullwidth" :href="makeDownload(config, item)"
                   :download="item.filename?.split('/').reverse()[0]">
-                  <span class="icon"><i class="fa-solid fa-download" /></span>
-                  <span class="is-hidden-mobile">Download</span>
+                  <span class="icon-text is-block">
+                    <span class="icon"><i class="fa-solid fa-download" /></span>
+                    <span>Download</span>
+                  </span>
                 </a>
               </div>
             </div>
diff --git a/ui/components/Queue.vue b/ui/components/Queue.vue
index 2734aed8..91af9588 100644
--- a/ui/components/Queue.vue
+++ b/ui/components/Queue.vue
@@ -37,11 +37,14 @@
       <LateLoader :unrender="true" :min-height="265" class="column is-6" v-for="item in stateStore.queue"
         :key="item._id">
         <div class="card">
-          <header class="card-header has-tooltip" v-tooltip="item.title">
-            <div class="card-header-title has-text-centered is-text-overflow is-block">
-              {{ item.title }}
+          <header class="card-header">
+            <div class="card-header-title is-text-overflow is-block" v-tooltip="item.title">
+              <NuxtLink target="_blank" :href="item.url">{{ item.title }}</NuxtLink>
             </div>
             <div class="card-header-icon">
+              <a :href="item.url" class="has-text-primary" v-tooltip="'Copy url.'" @click.prevent="copyText(item.url)">
+                <span class="icon"><i class="fa-solid fa-copy" /></span>
+              </a>
               <button @click="hideThumbnail = !hideThumbnail">
                 <span class="icon"><i class="fa-solid"
                     :class="{ 'fa-arrow-down': hideThumbnail, 'fa-arrow-up': !hideThumbnail, }" /></span>
@@ -50,16 +53,11 @@
           </header>
           <div v-if="false === hideThumbnail" class="card-image">
             <figure class="image is-3by1" v-if="item.extras?.thumbnail">
-              <NuxtLink v-tooltip="item.title" :href="item.url" target="_blank">
-                <img
-                  :src="config.app.url_host + config.app.url_prefix + 'api/thumbnail?url=' + encodePath(item.extras.thumbnail)"
-                  :alt="item.title" />
-              </NuxtLink>
+              <img :alt="item.title"
+                :src="config.app.url_host + config.app.url_prefix + 'api/thumbnail?url=' + encodePath(item.extras.thumbnail)" />
             </figure>
             <figure class="image is-3by1" v-else>
-              <NuxtLink target="_blank" :href="item.url" v-tooltip="`Open: ${item.title} link`">
-                <img :src="config.app.url_host + config.app.url_prefix + 'images/placeholder.png'" :alt="item.title" />
-              </NuxtLink>
+              <img :src="config.app.url_host + config.app.url_prefix + 'images/placeholder.png'" />
             </figure>
           </div>
           <div class="card-content">
@@ -104,16 +102,6 @@
                   </span>
                 </button>
               </div>
-              <div class="column is-half-mobile">
-                <a referrerpolicy="no-referrer" class="button is-link is-fullwidth" target="_blank" :href="item.url">
-                  <span class="icon-text is-block">
-                    <span class="icon">
-                      <i class="fa-solid fa-up-right-from-square" />
-                    </span>
-                    <span>Visit Link</span>
-                  </span>
-                </a>
-              </div>
             </div>
           </div>
         </div>