From f62b01b36128de843c4f3552f456a220788180e9 Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Sat, 10 May 2025 18:13:40 +0300
Subject: [PATCH] Enable floating image for list view.

---
 ui/components/FloatingImage.vue | 22 ++++++++++++----------
 ui/components/History.vue       | 14 ++++++++++++--
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/ui/components/FloatingImage.vue b/ui/components/FloatingImage.vue
index ad69b291..2ab910cd 100644
--- a/ui/components/FloatingImage.vue
+++ b/ui/components/FloatingImage.vue
@@ -1,14 +1,16 @@
 <template>
   <vTooltip @show="loadContent" @hide="stopTimer">
     <slot />
-    <template #popper>
-      <span class="icon" v-if="!url"><i class="fas fa-circle-notch fa-spin"></i></span>
+    <template #popper class="p-0 m-0">
+      <span class="icon" v-if="!url"><i class="fas fa-circle-notch fa-spin" /></span>
       <template v-else>
-        <div>
-          <h1 v-if="props.title" class="is-4">{{ props.title }}</h1>
-          <img :src="url" style="width:720px; height: auto" class="card-image" :alt="props.title" @error="clearCache"
-            :crossorigin="props.privacy ? 'anonymous' : 'use-credentials'"
-            :referrerpolicy="props.privacy ? 'no-referrer' : 'origin'" />
+        <div style="max-width:650px" class="m-1">
+          <div class="is-block" style="word-break: all;" v-text="props.title" v-if="props.title" />
+          <figure class="image is-3by1">
+            <img @load="e => pImg(e)" :src="url" :alt="props.title" @error="clearCache"
+              :crossorigin="props.privacy ? 'anonymous' : 'use-credentials'"
+              :referrerpolicy="props.privacy ? 'no-referrer' : 'origin'" />
+          </figure>
         </div>
       </template>
     </template>
@@ -54,9 +56,7 @@ const defaultLoader = async () => {
       return
     }
 
-    const response = await request('/api/thumbnail?url=' + encodePath(props.image), {
-      signal: cancelRequest.signal,
-    })
+    const response = await request(props.image, { signal: cancelRequest.signal })
 
     if (200 !== response.status) {
       toast.error(`ImageView Request error. ${response.status}: ${response.statusText}`)
@@ -110,4 +110,6 @@ const clearCache = async () => {
   url.value = '';
   return loadContent()
 }
+
+const pImg = e => e.target.naturalHeight > e.target.naturalWidth ? e.target.classList.add('image-portrait') : null
 </script>
diff --git a/ui/components/History.vue b/ui/components/History.vue
index 1821a43c..3e6bb0fe 100644
--- a/ui/components/History.vue
+++ b/ui/components/History.vue
@@ -107,9 +107,19 @@
                   </label>
                 </td>
                 <td class="is-vcentered">
-                  <div class="is-text-overflow" v-tooltip="item.title">
-                    <NuxtLink target="_blank" :href="item.url">{{ item.title }}</NuxtLink>
+                  <div v-if="item.extras.thumbnail">
+                    <FloatingImage :image="'/api/thumbnail?url=' + encodePath(item.extras.thumbnail)"
+                      :title="item.title">
+                      <div class="is-text-overflow">
+                        <NuxtLink target="_blank" :href="item.url">{{ item.title }}</NuxtLink>
+                      </div>
+                    </FloatingImage>
                   </div>
+                  <template v-else>
+                    <div class="is-text-overflow" v-tooltip="item.title">
+                      <NuxtLink target="_blank" :href="item.url">{{ item.title }}</NuxtLink>
+                    </div>
+                  </template>
                   <div v-if="item.error" class="is-text-overflow is-pointer" @click="toggle_class($event)">
                     <span class="has-text-danger">{{ item.error }}</span>
                   </div>