feat: implement server-side cover dimension detection and update badge thresholds

client/components/cards/LazyBookCard.vue

@@ -122,6 +122,11 @@
             <span class="material-symbols text-black" :style="{ fontSize: 0.875 + 'em' }">folder_open</span>
           </button>
         </ui-tooltip>
+
+        <!-- Cover Size Badge -->
+        <div v-if="coverBadge" class="absolute rounded-sm text-white font-bold pointer-events-none z-20" :class="coverBadge.color" :style="{ bottom: 0.375 + 'em', right: 0.375 + 'em', padding: `0.1em 0.25em`, fontSize: 0.6 + 'em', lineHeight: 0.8 + 'em' }">
+          {{ coverBadge.text }}
+        </div>
       </div>
     </div>
 
@@ -176,7 +181,9 @@ export default {
       isSelectionMode: false,
       displayTitleTruncated: false,
       displaySubtitleTruncated: false,
-      showCoverBg: false
+      showCoverBg: false,
+      naturalWidth: 0,
+      naturalHeight: 0
     }
   },
   watch: {
@@ -250,6 +257,18 @@ export default {
       if (this.collapsedSeries?.name) return this.collapsedSeries.name
       return this.series?.name || null
     },
+    coverBadge() {
+      const width = this.media?.coverWidth || this.coverWidth
+      const height = this.media?.coverHeight || this.coverHeight
+      if (!width || !height) return null
+      if (width >= 1200 || height >= 1200) {
+        return { text: 'BIG', color: 'bg-success' }
+      }
+      if (width >= 450 || height >= 450) {
+        return { text: 'MED', color: 'bg-info' }
+      }
+      return { text: 'SML', color: 'bg-warning' }
+    },
     seriesSequence() {
       return this.series?.sequence || null
     },
@@ -1148,6 +1167,8 @@ export default {
 
       if (this.$refs.cover && this.bookCoverSrc !== this.placeholderUrl) {
         var { naturalWidth, naturalHeight } = this.$refs.cover
+        this.naturalWidth = naturalWidth
+        this.naturalHeight = naturalHeight
         var aspectRatio = naturalHeight / naturalWidth
         var arDiff = Math.abs(aspectRatio - this.bookCoverAspectRatio)
 

client/components/covers/BookCover.vue

@@ -22,6 +22,11 @@
       </div>
     </div>
 
+    <!-- Cover Size Badge -->
+    <div v-if="coverBadge" class="absolute bottom-1 right-1 px-1 rounded-sm text-white font-bold pointer-events-none z-20" :class="coverBadge.color" :style="{ fontSize: (0.6 * sizeMultiplier) + 'rem', lineHeight: (0.8 * sizeMultiplier) + 'rem' }">
+      {{ coverBadge.text }}
+    </div>
+
     <div v-if="!hasCover" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full flex items-center justify-center z-10" :style="{ padding: placeholderCoverPadding + 'rem' }">
       <div>
         <p class="text-center" style="color: rgb(247 223 187)" :style="{ fontSize: titleFontSize + 'rem' }">{{ titleCleaned }}</p>
@@ -52,7 +57,9 @@ export default {
       loading: true,
       imageFailed: false,
       showCoverBg: false,
-      imageReady: false
+      imageReady: false,
+      naturalWidth: 0,
+      naturalHeight: 0
     }
   },
   watch: {
@@ -133,6 +140,18 @@ export default {
     },
     resolution() {
       return `${this.naturalWidth}x${this.naturalHeight}px`
+    },
+    coverBadge() {
+      const width = this.media?.coverWidth || this.naturalWidth
+      const height = this.media?.coverHeight || this.naturalHeight
+      if (!width || !height) return null
+      if (width >= 1200 || height >= 1200) {
+        return { text: 'BIG', color: 'bg-success' }
+      }
+      if (width >= 450 || height >= 450) {
+        return { text: 'MED', color: 'bg-info' }
+      }
+      return { text: 'SML', color: 'bg-warning' }
     }
   },
   methods: {
@@ -154,6 +173,8 @@ export default {
 
       if (this.$refs.cover && this.cover !== this.placeholderUrl) {
         var { naturalWidth, naturalHeight } = this.$refs.cover
+        this.naturalWidth = naturalWidth
+        this.naturalHeight = naturalHeight
         var aspectRatio = naturalHeight / naturalWidth
         var arDiff = Math.abs(aspectRatio - this.bookCoverAspectRatio)
 

client/components/modals/libraries/LibraryTools.vue

@@ -49,6 +49,18 @@
         </div>
       </div>
     </div>
+    <div class="w-full border border-black-200 p-4 my-8">
+      <div class="flex flex-wrap items-center">
+        <div>
+          <p class="text-lg">{{ $strings.LabelUpdateCoverDimensions }}</p>
+          <p class="max-w-sm text-sm pt-2 text-gray-300">{{ $strings.LabelUpdateCoverDimensionsHelp }}</p>
+        </div>
+        <div class="grow" />
+        <div>
+          <ui-btn @click.stop="updateCoverDimensionsClick">{{ $strings.ButtonUpdate }}</ui-btn>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -198,6 +210,34 @@ export default {
         .finally(() => {
           this.$emit('update:processing', false)
         })
+    },
+    updateCoverDimensionsClick() {
+      const payload = {
+        message: this.$strings.MessageConfirmUpdateCoverDimensions,
+        persistent: true,
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.updateCoverDimensions()
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
+    updateCoverDimensions() {
+      this.$emit('update:processing', true)
+      this.$axios
+        .$post(`/api/libraries/${this.libraryId}/update-cover-dimensions`)
+        .then((data) => {
+          this.$toast.success(this.$getString('ToastUpdateCoverDimensionsSuccess', [data.updated]))
+        })
+        .catch((error) => {
+          console.error('Failed to update cover dimensions', error)
+          this.$toast.error(this.$strings.ToastUpdateCoverDimensionsFailed)
+        })
+        .finally(() => {
+          this.$emit('update:processing', false)
+        })
     }
   },
   mounted() {}