hooked up all items on the list settings section

app/pages/lists/[id].vue

@@ -4,6 +4,7 @@ import {type Movie} from "~/types/movie";
 import {type MovieList} from "~/types/movie-list";
 import MovieDetails from "~/components/panels/movie-details.vue";
 import MovieSearch from "~/components/panels/movie-search.vue";
+import type {ResourceResponse} from "~/types/api";
 
 const route = useRoute();
 
@@ -15,65 +16,78 @@ const toggleMovieSearch = () => movieSearchActive.value = !movieSearchActive.val
 
 const selectedMovie = ref<Movie | null>(null);
 
-const {data: list} = await useApiData<MovieList>(`/api/movielists/${movieListId}`);
+const {data: listResponse} = await useApiData<ResourceResponse<MovieList>>(`/api/movielists/${movieListId}`, {
+  onResponseError: (error) => {
+    if (error.response.status === 401) {
+      navigateTo('/auth/login')
+    }
+
+    if (error.response.status === 403 || error.response.status === 404) {
+      navigateTo('/lists')
+    }
+  }
+});
+
+const refreshList = (updatedList: MovieList) => {
+  listResponse.value = {data: updatedList};
+}
 
 const updateList = (updatedList: MovieList) => {
-  list.value = updatedList;
+  $api<ResourceResponse<MovieList>>(`/api/movielists/${route.params.id}`, {
+    method: "PUT",
+    body: updatedList
+  }).then((response) => {
+    listResponse.value = {data: response.data};
+  }).catch((error) => {
+    alert(error.message)
+  });
+
 }
 
 const removeMovieFromList = (movieId: number) => {
-  $api<MovieList>(`/api/movielists/${list.value.id}/movies/${movieId}`, {
+  $api<ResourceResponse<MovieList>>(`/api/movielists/${listResponse.value.data.id}/movies/${movieId}`, {
     method: "DELETE"
-  }).then((data) => {
+  }).then((response) => {
     selectedMovie.value = null;
-    list.value = data;
+    listResponse.value.data = response.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 v-if="list">
+  <div v-if="listResponse" class="content">
     <div class="page-header">
-      <PageTitle :title="list.name"/>
+      <PageTitle :title="listResponse.data.name"/>
       <Icon class="settings-icon" name="solar:settings-bold" @click="toggleSettings"/>
     </div>
 
     <ListSettings
         v-if="settingsActive"
-        :list="list"
-        v-on:back-to-list="toggleSettings"
+        :list="listResponse.data"
+        @back-to-list="toggleSettings"
+        @update-list="updateList"
     />
 
     <MovieList
         v-else
-        :movies="list.movies"
+        :movies="listResponse.data.movies"
         @movie-clicked="selectedMovie = $event"
         @add-movie="toggleMovieSearch"
     />
   </div>
 
+  <!-- MOVIE DETAILS SLIDEOUT -->
   <SlideoutPanel :open="!!selectedMovie" @close="selectedMovie = null">
     <MovieDetails v-if="selectedMovie" :selectedMovie="selectedMovie" @remove-movie="removeMovieFromList"/>
   </SlideoutPanel>
 
+  <!-- MOVIE SEARCH SLIDEOUT -->
   <SlideoutPanel :open="movieSearchActive"
                  @close="movieSearchActive = false">
-    <MovieSearch v-if="movieListId" :movie-list-id="movieListId" @add-movie="updateList"/>
+    <MovieSearch v-if="movieListId" :movie-list-id="movieListId" @add-movie="refreshList"/>
   </SlideoutPanel>
 
 </template>

app/pages/lists/index.vue

@@ -2,9 +2,10 @@
 
 import PageTitle from "~/components/common/page-title.vue";
 import CreateListForm from "~/components/forms/create-list-form.vue";
-import type {MovieList} from "~/types/movie-list";
+import Card from "~/components/common/card.vue";
+import type {MovieListGroup} from "~/types/movie-list-group";
 
-const {data: lists, refresh, error} = await useApiData<MovieList[]>("/api/movielists")
+const {data: listGroup, refresh, error} = await useApiData<MovieListGroup>("/api/movielists")
 if (error.value) {
   alert(error.value)
 }
@@ -16,54 +17,62 @@ const refreshLists = () => {
 </script>
 
 <template>
-  <PageTitle title="Lists"/>
-
   <div class="content">
-    <CreateListForm @refreshLists="refreshLists"/>
+    <PageTitle title="Lists"/>
+    <Card class="card">
+      <CreateListForm @refreshLists="refreshLists"/>
 
-    <div class="w-full flex flex-col gap-5">
-      <h2 class="text-2xl font-bold">Your Lists</h2>
-      <ul class="movie-list">
-        <li v-for="list in lists"
-            :key="list.id"
-        >
-          <NuxtLink :to="`/lists/${list.id}`" class="movielist-details">
-            <span>{{ list.name }}</span>
-            <span>{{ list.is_public ? 'Public' : 'Private' }}</span>
-          </NuxtLink>
-        </li>
-      </ul>
-    </div>
+      <div class="w-full flex flex-col gap-5">
+        <h2 class="text-2xl font-bold">Your Lists</h2>
+        <span v-if="!listGroup?.movie_lists?.length" class="not-found-message">No lists found.</span>
+        <ul v-else class="movie-list">
+          <li v-for="list in listGroup?.movie_lists"
+              :key="list.id"
+          >
+            <NuxtLink :to="`/lists/${list.id}`" class="movielist-details">
+              <span>{{ list.name }}</span>
+              <span>{{ list.is_public ? 'Public' : 'Private' }}</span>
+            </NuxtLink>
+          </li>
+        </ul>
+      </div>
 
-    <!-- <div class="w-full flex flex-col gap-5">
-      <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 MovieList</NuxtLink>
-        </li>
-      </ul>
-    </div>
-    -->
+      <div class="w-full flex flex-col gap-5">
+        <h2 class="text-2xl font-bold">Shared With You</h2>
+        <span v-if="!listGroup?.shared_lists?.length" class="not-found-message">No shared lists found.</span>
+        <ul v-else class="movie-list">
+          <li v-for="list in listGroup?.shared_lists"
+              :key="list.id"
+          >
+            <NuxtLink :to="`/lists/${list.id}`" class="movielist-details">
+              <span>{{ list.name }}</span>
+              <span>{{ list.is_public ? 'Public' : 'Private' }}</span>
+            </NuxtLink>
+          </li>
+        </ul>
+      </div>
+    </Card>
   </div>
 
 </template>
 
 <style scoped>
-.content {
+.card {
   display: flex;
   flex-direction: column;
-  gap: 2rem;
+  gap: 1rem;
 }
 
 .movie-list {
   display: grid;
-  gap: 1rem;
 }
 
 .movie-list li {
   display: flex;
   justify-content: space-between;
-  padding: 1rem 0;
+  margin: 0 -1rem;
+  border-radius: 0.5rem;
+  padding: 1rem;
 }
 
 .movielist-details {
@@ -75,8 +84,11 @@ const refreshLists = () => {
 
 .movie-list li:hover {
   background-color: #eee;
-  padding: 1rem 0;
-  border-radius: 0.5rem;
+}
+
+.not-found-message {
+  display: block;
+  padding: 1em 0;
 }
 
 </style>