Added type badge to the mediacard

src/components/MediaCard.vue

@@ -39,37 +39,53 @@ const alreadyAdded = computed(() => store.mediaList.some((media) => media.Id ===
       </router-link>
 
       <!-- Radial progress placed on the right edge, centered on the seam between poster and body -->
-      <div class="absolute left-3 bottom-0 z-20 translate-y-1/2" aria-hidden="true">
+      <div class="absolute right-3 bottom-0 z-20 translate-y-1/2" aria-hidden="true">
         <ScoreRing :VoteAverage="props.media.VoteAverage" />
       </div>
     </div>
 
-    <!-- Body: add top padding to ensure title sits below the ring seam -->
+    <!-- Body -->
     <div class="card-body p-4 flex flex-col pt-6">
       <router-link
         :to="{ name: 'details', params: { type: props.media.MediaType, id: props.media.Id } }"
         class="block"
       >
         <h2
-          class="card-title text-base font-semibold bg-linear-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent wrap-break-word"
+          class="card-title text-base font-semibold bg-linear-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent break-words"
         >
           {{ props.media.Title }}
         </h2>
         <time
           class="text-sm text-gray-400"
-          :datetime="new Date(props.media.ReleaseDate === '' ? props.media.FirstAirDate : props.media.ReleaseDate).toISOString()"
+          :datetime="
+            new Date(
+              props.media.ReleaseDate === '' ? props.media.FirstAirDate : props.media.ReleaseDate,
+            ).toISOString()
+          "
         >
           {{
             new Intl.DateTimeFormat('default', {
               year: 'numeric',
               month: 'long',
               day: 'numeric',
-            }).format(new Date(props.media.ReleaseDate === '' ? props.media.FirstAirDate : props.media.ReleaseDate))
+            }).format(
+              new Date(
+                props.media.ReleaseDate === '' ? props.media.FirstAirDate : props.media.ReleaseDate,
+              ),
+            )
           }}
         </time>
       </router-link>
 
-      <div class="card-actions justify-end mt-auto">
+      <!-- Actions row -->
+      <div class="card-actions flex items-center justify-between mt-auto">
+        <!-- Type badge -->
+        <span class="badge badge-outline text-xs font-medium px-2 py-1">
+          {{ props.media.MediaType === 'movie' ? 'Movie' : 'Show' }}
+        </span>
+
+        <!-- Bookmark buttons -->
+        <div class="flex gap-2">
           <button
             v-motion-fade-visible-once
             v-if="!alreadyAdded"
@@ -115,4 +131,5 @@ const alreadyAdded = computed(() => store.mediaList.some((media) => media.Id ===
         </div>
       </div>
     </div>
+  </div>
 </template>