implemented individual list functionality

app/pages/lists/[id].vue

@@ -1,9 +1,13 @@
 <script lang="ts" setup>
 import PageTitle from "~/components/common/page-title.vue";
 import {type Movie} from "~/types/movie";
-import {type List} from "~/types/list";
+import {type MovieList} from "~/types/movie-list";
 import MovieDetails from "~/components/panels/movie-details.vue";
+import MovieSearch from "~/components/panels/movie-search.vue";
 
+const route = useRoute();
+
+const movieListId = route.params.id as string;
 const settingsActive = ref(false);
 const movieSearchActive = ref(false);
 const toggleSettings = () => settingsActive.value = !settingsActive.value
@@ -11,47 +15,65 @@ const toggleMovieSearch = () => movieSearchActive.value = !movieSearchActive.val
 
 const selectedMovie = ref<Movie | null>(null);
 
-const list: List = {
-  id: 1,
-  name: 'List Name',
-  isPublic: true,
-  listSettings: {
-    listName: 'List Name',
-    isPublic: true,
-    collaborators: [],
-    roles: []
-  }
-};
+const {data: list} = await useApiData<MovieList>(`/api/movielists/${movieListId}`);
+
+const updateList = (updatedList: MovieList) => {
+  list.value = updatedList;
+}
+
+const removeMovieFromList = (movieId: number) => {
+  $api<MovieList>(`/api/movielists/${list.value.id}/movies/${movieId}`, {
+    method: "DELETE"
+  }).then((data) => {
+    selectedMovie.value = null;
+    list.value = data;
+  }).catch((error) => {
+    alert(error.message)
+  });
+}
+///const list: MovieList = {
+///  id: 1,
+///  name: 'MovieList Name',
+///  isPublic: true,
+///  listSettings: {
+///    listName: 'MovieList Name',
+///    isPublic: true,
+///    collaborators: [],
+///    roles: []
+///  }
+///};
 
 const movies: Movie[] = []
 </script>
 
 <template>
-  <div class="page-header">
-    <PageTitle title="List Name"/>
-    <Icon class="settings-icon" name="solar:settings-bold" @click="toggleSettings"/>
+  <div v-if="list">
+    <div class="page-header">
+      <PageTitle :title="list.name"/>
+      <Icon class="settings-icon" name="solar:settings-bold" @click="toggleSettings"/>
+    </div>
+
+    <ListSettings
+        v-if="settingsActive"
+        :list="list"
+        v-on:back-to-list="toggleSettings"
+    />
+
+    <MovieList
+        v-else
+        :movies="list.movies"
+        @movie-clicked="selectedMovie = $event"
+        @add-movie="toggleMovieSearch"
+    />
   </div>
 
-  <ListSettings
-      v-if="settingsActive"
-      :list="list"
-      v-on:back-to-list="toggleSettings"
-  />
-
-  <MovieList
-      v-else
-      :movies="movies"
-      @movie-clicked="selectedMovie = $event"
-      @add-movie="toggleMovieSearch"
-  />
-
   <SlideoutPanel :open="!!selectedMovie" @close="selectedMovie = null">
-    <MovieDetails v-if="selectedMovie" :selectedMovie="selectedMovie"/>
+    <MovieDetails v-if="selectedMovie" :selectedMovie="selectedMovie" @remove-movie="removeMovieFromList"/>
   </SlideoutPanel>
 
-  <SlideoutPanel :open="movieSearchActive" class="movie-search-panel"
+  <SlideoutPanel :open="movieSearchActive"
                  @close="movieSearchActive = false">
-    <p>Movie Search</p>
+    <MovieSearch v-if="movieListId" :movie-list-id="movieListId" @add-movie="updateList"/>
   </SlideoutPanel>
 
 </template>

app/pages/lists/index.vue

@@ -2,9 +2,12 @@
 
 import PageTitle from "~/components/common/page-title.vue";
 import CreateListForm from "~/components/forms/create-list-form.vue";
-import type {List} from "~/types/list";
+import type {MovieList} from "~/types/movie-list";
 
-const {data: lists, refresh} = await useApiData<List[]>("/api/movielists")
+const {data: lists, refresh, error} = await useApiData<MovieList[]>("/api/movielists")
+if (error.value) {
+  alert(error.value)
+}
 
 const refreshLists = () => {
   refresh()
@@ -20,11 +23,14 @@ const refreshLists = () => {
 
     <div class="w-full flex flex-col gap-5">
       <h2 class="text-2xl font-bold">Your Lists</h2>
-      <ul class="w-full flex flex-col gap-3">
+      <ul class="movie-list">
         <li v-for="list in lists"
             :key="list.id"
-            class="flex justify-between items-center p-4 bg-gray-700/50 rounded-lg hover:bg-gray-600/50 transition-colors">
-          <NuxtLink :to="`lists/${list.id}`">{{ list.name }}</NuxtLink>
+        >
+          <NuxtLink :to="`/lists/${list.id}`" class="movielist-details">
+            <span>{{ list.name }}</span>
+            <span>{{ list.is_public ? 'Public' : 'Private' }}</span>
+          </NuxtLink>
         </li>
       </ul>
     </div>
@@ -33,7 +39,7 @@ const refreshLists = () => {
       <h2 class="text-2xl font-bold">Shared With You</h2>
       <ul class="w-full flex flex-col gap-3">
         <li class="flex justify-between items-center p-4 bg-gray-700/50 rounded-lg hover:bg-gray-600/50 transition-colors">
-          <NuxtLink to="lists/2">Bob's List</NuxtLink>
+          <NuxtLink to="lists/2">Bob's MovieList</NuxtLink>
         </li>
       </ul>
     </div>
@@ -49,4 +55,28 @@ const refreshLists = () => {
   gap: 2rem;
 }
 
+.movie-list {
+  display: grid;
+  gap: 1rem;
+}
+
+.movie-list li {
+  display: flex;
+  justify-content: space-between;
+  padding: 1rem 0;
+}
+
+.movielist-details {
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.movie-list li:hover {
+  background-color: #eee;
+  padding: 1rem 0;
+  border-radius: 0.5rem;
+}
+
 </style>