Improve flow between components

src/components/MediaCard.vue

@@ -8,6 +8,11 @@ const props = defineProps<{
   media: MediaType
 }>()
 
+const emit = defineEmits<{
+  'add-media': [media: MediaType]
+  'remove-media': [mediaId: number]
+}>()
+
 const store = useMediaStore()
 
 const alreadyAdded = computed(() => store.mediaList.some((media) => media.Id === props.media.Id))
@@ -48,7 +53,7 @@ const alreadyAdded = computed(() => store.mediaList.some((media) => media.Id ===
           v-motion-fade-visible-once
           v-if="!alreadyAdded"
           class="btn btn-sm px-4 bg-linear-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300 hover:text-gray-900 transition"
-          @click="store.addMedia(props.media)"
+          @click="$emit('add-media', props.media)"
         >
           Add
         </button>
@@ -56,7 +61,7 @@ const alreadyAdded = computed(() => store.mediaList.some((media) => media.Id ===
           v-motion-fade-visible-once
           v-else
           class="btn btn-sm px-4 bg-linear-to-r from-red-50 to-red-100 border border-red-200 text-red-600 hover:from-red-100 hover:to-red-200 hover:text-red-700 transition"
-          @click="store.removeMedia(props.media.Id)"
+          @click="$emit('remove-media', props.media.Id)"
         >
           Remove
         </button>

src/components/MediaList.vue

@@ -9,7 +9,12 @@ const props = defineProps<{
   isSearch: boolean
 }>()
 
-const emit = defineEmits<{ (e: 'loaded', id: string): void; (e: 'loadMore'): void }>()
+const emit = defineEmits<{ 
+  (e: 'loaded', id: string): void; 
+  (e: 'loadMore'): void;
+  (e: 'add-media', media: MediaType): void;
+  (e: 'remove-media', mediaId: number): void;
+}>()
 </script>
 
 <template>
@@ -30,7 +35,11 @@ const emit = defineEmits<{ (e: 'loaded', id: string): void; (e: 'loadMore'): voi
       class="grid gap-4 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5"
     >
       <li v-for="media in props.medias" :key="media.Id" v-auto-animate>
-        <MediaCard :media="media" />
+        <MediaCard 
+          :media="media" 
+          @add-media="$emit('add-media', $event)"
+          @remove-media="$emit('remove-media', $event)"
+        />
       </li>
       <li v-if="!props.isSearch">
         <AddMoreCard />

src/views/AddView.vue

@@ -5,7 +5,7 @@ import SearchBar from '@/components/SearchBar.vue'
 import MediaList from '@/components/MediaList.vue'
 import type { MediaType } from '@/types/Media'
 import ErrorAlert from '@/components/alerts/ErrorAlert.vue'
-import { useSearchPageStore } from '@/stores/media'
+import { useSearchPageStore, useMediaStore } from '@/stores/media'
 
 const medias = ref<MediaType[]>()
 const seachError = ref<string>('')
@@ -15,6 +15,15 @@ const isSearching = ref(false)
 const isLoadingMore = ref(false)
 
 const state = useSearchPageStore()
+const store = useMediaStore()
+
+const handleAddMedia = (media: MediaType) => {
+  store.addMedia(media)
+}
+
+const handleRemoveMedia = (mediaId: number) => {
+  store.removeMedia(mediaId)
+}
 
 async function searchMovie() {
   try {
@@ -108,6 +117,8 @@ watch(searchQuery, () => {
       :loading-more="isLoadingMore"
       @loadMore="loadMore"
       :is-search="true"
+      @add-media="handleAddMedia"
+      @remove-media="handleRemoveMedia"
     />
 
     <!-- Empty state -->

src/views/ListView.vue

@@ -1,8 +1,17 @@
 <script setup lang="ts">
 import { useMediaStore } from '@/stores/media'
 import MediaList from '@/components/MediaList.vue'
+import type { MediaType } from '@/types/Media'
 
 const store = useMediaStore()
+
+const handleAddMedia = (media: MediaType) => {
+  store.addMedia(media)
+}
+
+const handleRemoveMedia = (mediaId: number) => {
+  store.removeMedia(mediaId)
+}
 </script>
 
 <template>
@@ -18,6 +27,8 @@ const store = useMediaStore()
       :medias="store.mediaList"
       :loading-more="false"
       :is-search="false"
+      @add-media="handleAddMedia"
+      @remove-media="handleRemoveMedia"
     />
   </div>
 </template>