Manually removed changes that should not have been included in this PR.

client/components/modals/item/tabs/Cover.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="w-full h-full overflow-hidden overflow-y-auto px-2 sm:px-4 py-6 relative">
     <div class="flex flex-col sm:flex-row mb-4">
-      <!-- Current book cover -->
       <div class="relative self-center md:self-start">
         <covers-preview-cover :src="coverUrl" :width="120" :book-cover-aspect-ratio="bookCoverAspectRatio" />
         <!-- book cover overlay -->
@@ -15,9 +14,7 @@
         </div>
       </div>
 
-      <!-- Contains Upload new cover and local covers -->
       <div class="grow sm:pl-2 md:pl-6 sm:pr-2 mt-6 md:mt-0">
-        <!-- Upload new cover -->
         <div class="flex items-center">
           <div v-if="userCanUpload" class="w-10 md:w-40 pr-2 md:min-w-32">
             <ui-file-input ref="fileInput" @change="fileUploadSelected">
@@ -32,7 +29,6 @@
           </form>
         </div>
 
-        <!-- Locaal covers -->
         <div v-if="localCovers.length" class="mb-4 mt-6 border-t border-b border-white/10">
           <div class="flex items-center justify-center py-2">
             <p>{{ localCovers.length }} local image{{ localCovers.length !== 1 ? 's' : '' }}</p>
@@ -53,7 +49,6 @@
       </div>
     </div>
 
-    <!-- Search Cover Form -->
     <form @submit.prevent="submitSearchForm">
       <div class="flex flex-wrap sm:flex-nowrap items-center justify-start -mx-1">
         <div class="w-48 grow p-1">
@@ -69,63 +64,13 @@
       </div>
     </form>
 
-    <!-- Cover Search Results -->
+    <div v-if="hasSearched" class="flex items-center flex-wrap justify-center sm:max-h-80 sm:overflow-y-scroll mt-2 max-w-full">
-    <div v-if="hasSearched" class="flex flex-col items-center sm:max-h-80 sm:overflow-y-scroll mt-2 max-w-full">
       <p v-if="!coversFound.length">{{ $strings.MessageNoCoversFound }}</p>
 
-      <!-- Conditional Rendering Based on bookCoverAspectRatio -->
+      <template v-for="cover in coversFound">
-      <template v-if="bookCoverAspectRatio === 1">
+        <div :key="cover" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover === coverPath ? 'border-yellow-300' : ''" @click="updateCover(cover)">
-        <!-- Square Covers First -->
+          <covers-preview-cover :src="cover" :width="80" show-open-new-tab :book-cover-aspect-ratio="bookCoverAspectRatio" />
-        <template v-if="squareCovers.length">
+        </div>
-          <div class="flex items-center flex-wrap justify-center">
-            <template v-for="cover in squareCovers">
-              <div :key="cover.src" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover.src === coverPath ? 'border-yellow-300' : ''" @click="updateCover(cover.src)">
-                <covers-preview-cover :src="cover.src" :width="80" show-open-new-tab :book-cover-aspect-ratio="bookCoverAspectRatio" />
-              </div>
-            </template>
-          </div>
-        </template>
-
-        <!-- Divider if there are rectangle covers -->
-        <div v-if="rectangleCovers.length" class="w-full border-b border-white/10 my-4"></div>
-
-        <!-- Rectangle Covers -->
-        <template v-if="rectangleCovers.length">
-          <div class="flex items-center flex-wrap justify-center">
-            <template v-for="cover in rectangleCovers">
-              <div :key="cover.src" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover.src === coverPath ? 'border-yellow-300' : ''" @click="updateCover(cover.src)">
-                <covers-preview-cover :src="cover.src" :width="80" show-open-new-tab :book-cover-aspect-ratio="bookCoverAspectRatio" />
-              </div>
-            </template>
-          </div>
-        </template>
-      </template>
-
-      <template v-else>
-        <!-- Rectangle Covers First -->
-        <template v-if="rectangleCovers.length">
-          <div class="flex items-center flex-wrap justify-center">
-            <template v-for="cover in rectangleCovers">
-              <div :key="cover.src" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover.src === coverPath ? 'border-yellow-300' : ''" @click="updateCover(cover.src)">
-                <covers-preview-cover :src="cover.src" :width="80" show-open-new-tab :book-cover-aspect-ratio="bookCoverAspectRatio" />
-              </div>
-            </template>
-          </div>
-        </template>
-
-        <!-- Divider if there are square covers -->
-        <div v-if="squareCovers.length" class="w-full border-b border-white/10 my-4"></div>
-
-        <!-- Square Covers -->
-        <template v-if="squareCovers.length">
-          <div class="flex items-center flex-wrap justify-center">
-            <template v-for="cover in squareCovers">
-              <div :key="cover.src" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover.src === coverPath ? 'border-yellow-300' : ''" @click="updateCover(cover.src)">
-                <covers-preview-cover :src="cover.src" :width="80" show-open-new-tab :book-cover-aspect-ratio="bookCoverAspectRatio" />
-              </div>
-            </template>
-          </div>
-        </template>
       </template>
     </div>
 
@@ -150,9 +95,7 @@ export default {
     libraryItem: {
       type: Object,
       default: () => {}
-    },
+    }
-    coversFound: { type: Array, default: () => [] },
-    coverPath: { type: String, default: '' }
   },
   data() {
     return {
@@ -165,8 +108,7 @@ export default {
       showLocalCovers: false,
       previewUpload: null,
       selectedFile: null,
-      provider: 'google',
+      provider: 'google'
-      sortedCovers: []
     }
   },
   watch: {
@@ -247,12 +189,6 @@ export default {
           _file.localPath = `${process.env.serverUrl}/api/items/${this.libraryItemId}/file/${file.ino}?token=${this.userToken}`
           return _file
         })
-    },
-    squareCovers() {
-      return this.sortedCovers.filter((cover) => cover.width === cover.height)
-    },
-    rectangleCovers() {
-      return this.sortedCovers.filter((cover) => cover.width !== cover.height)
     }
   },
   methods: {
@@ -371,9 +307,7 @@ export default {
           console.error('Failed', error)
           return []
         })
-
       this.coversFound = results
-      const images = await this.resolveImages()
 
       this.isProcessing = false
       this.hasSearched = true
@@ -389,29 +323,6 @@ export default {
         .finally(() => {
           this.isProcessing = false
         })
-    },
-    async resolveImages() {
-      const resolvedImages = await Promise.all(
-        this.coversFound.map((cover) => {
-          return new Promise((resolve) => {
-            const img = new Image()
-            img.src = cover
-            img.onload = () => {
-              resolve({ src: cover, width: img.width, height: img.height })
-            }
-          })
-        })
-      )
-      // Sort images: squares first, then rectangles by area
-      this.sortedCovers = resolvedImages.sort((a, b) => {
-        // Prioritize square images (-1 for square, 1 for non-square)
-        const squareComparison = (b.width === b.height) - (a.width === a.height)
-        if (squareComparison !== 0) return squareComparison
-
-        // Sub-sort by width (ascending order)
-        return a.width - b.width
-      })
-      return this.sortedCovers
     }
   }
 }