Added type badge to the mediacard

src/components/MediaCard.vue

@@ -3,6 +3,7 @@ import { useMediaStore } from '@/stores/media'
 import { computed } from 'vue'
 import type { MediaType } from '@/types/Media'
 import ImageWithFallback from './ImageWithFallback.vue'
+import ScoreRing from './ScoreRing.vue'
 
 const props = defineProps<{
   media: MediaType
@@ -20,7 +21,7 @@ const alreadyAdded = computed(() => store.mediaList.some((media) => media.Id ===
 
 <template>
   <div
-    class="card relative w-full h-full overflow-hidden bg-white/70 backdrop-blur-md border border-gray-200/60 shadow-md hover:shadow-xl transition-all duration-300"
+    class="card relative w-full h-full overflow-hidden bg-white/70 backdrop-blur-md border border-gray-200/60 shadow-xs hover:shadow-xl transition-all duration-300"
     v-motion-fade-visible-once
   >
     <!-- Poster wrapper with fixed aspect -->
@@ -38,51 +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="radial-progress bg-primary text-primary-content border-primary border-4 font-bold flex items-center justify-center"
-          :style="{
-            '--value': props.media.VoteAverage * 10,
-            '--size': '2rem',
-            '--thickness': '3px',
-          }"
-          :aria-valuenow="props.media.VoteAverage"
-          role="progressbar"
-        >
-          <span class="flex items-baseline text-[0.7em]">
-            {{ props.media.VoteAverage === 0 ? '?' : (props.media.VoteAverage * 10).toFixed(0) }}
-            <span class="text-[0.5em] relative -top-1 ml-0.5">%</span>
-          </span>
-        </div>
+      <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).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))
+            }).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"
@@ -128,4 +131,5 @@ const alreadyAdded = computed(() => store.mediaList.some((media) => media.Id ===
         </div>
       </div>
     </div>
+  </div>
 </template>

src/components/ScoreRing.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const props = defineProps<{ VoteAverage: number }>()
+</script>
+
+<template>
+  <div
+    class="radial-progress bg-primary text-primary-content border-primary border-4 font-bold flex items-center justify-center"
+    :style="{
+      '--value': props.VoteAverage * 10,
+      '--size': '2rem',
+      '--thickness': '3px',
+    }"
+    :aria-valuenow="props.VoteAverage"
+    role="progressbar"
+  >
+    <span class="flex items-baseline text-[0.7em]">
+      {{ props.VoteAverage === 0 ? '?' : (props.VoteAverage * 10).toFixed(0) }}
+      <span class="text-[0.5em] relative -top-1 ml-0.5">%</span>
+    </span>
+  </div>
+</template>

src/lib/api.ts

@@ -41,7 +41,7 @@ export const loadMedia = async (
   const responses = await Promise.all(requests)
 
   // If only one type was requested, handle that directly
-  if (filters.onlyMovies) {
+  if (filters.onlyMovies && !filters.onlySeries) {
     const movieSearch = responses[0]
     if (movieSearch.status !== 200) {
       return {
@@ -62,7 +62,7 @@ export const loadMedia = async (
     }
   }
 
-  if (filters.onlySeries) {
+  if (filters.onlySeries && !filters.onlyMovies) {
     const tvSearch = responses[0]
     if (tvSearch.status !== 200) {
       return {

src/stores/media.ts

@@ -41,7 +41,6 @@ export const useSearchPageStore = defineStore('searchPage', () => {
     searchQuery.value = query
     mediaList.value = medias
     searchFilters.value = filters
-    console.log('setState', page, query, medias, filters)
   }
   return { searchPage, searchQuery, mediaList, searchFilters, setState }
 })