Bug fixes

movie-group-8/src/views/FilmDetails.vue

@@ -30,7 +30,16 @@
           ></iframe>
         </div>
 
-        <WatchlistButton :movie="movie" class="mt-4" />
+        <button
+          type="button"
+          @click="toggleWatchlist"
+          class="mt-4 px-4 py-2 rounded text-white transition"
+          :class="isInWatchlist
+            ? 'bg-red-600 hover:bg-red-700'
+            : 'bg-green-600 hover:bg-green-700'"
+        >
+          {{ isInWatchlist ? 'Remove from Watchlist' : 'Add to Watchlist' }}
+        </button>
 
         <RouterLink
           :to="{ name: 'ReviewFilm', params: { id: movie.id } }"
@@ -60,7 +69,6 @@
 import { ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { useWatchlist } from '@/composables/useWatchlist.js'
-import WatchlistButton from '@/components/WatchlistButton.vue'
 import { getAuth } from 'firebase/auth'
 import { getFirestore, doc, getDoc } from 'firebase/firestore'
 import { getAllReviews }  from '@/composables/useReviews.js'
@@ -71,7 +79,7 @@ const trailerUrl = ref('')
 const loading = ref(true)
 const error = ref('')
 const movieId = ref(route.params.id)
-const { isInWatchlist } = useWatchlist(movieId, movie)
+const { isInWatchlist, toggleWatchlist } = useWatchlist(movieId, movie)
 const reviews = ref([])
 const reviewsLoading = ref(true)
 

movie-group-8/src/views/Home.vue

 <template>
-    <div class="h-full bg-neutral-900 p-6">
+    <div class="h-screen bg-neutral-900 p-6">
       <div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto dark">
         <div class="relative p-6 md:p-16">
           <div class="relative z-10 lg:grid lg:grid-cols-12 lg:gap-16 lg:items-center">