Merge pull request 'movielist-settings' (#4) from movielist-settings into main

Reviewed-on: tiradoe/movie-night-web-nuxt#4

app/app.vue

@@ -14,6 +14,13 @@ body {
   background-color: #f5f5f5;
 }
 
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin: 1rem 0;
+}
+
 /* sm */
 @media (min-width: 640px) {
 }

app/components/common/card.vue

@@ -11,8 +11,10 @@
 
 <style scoped>
 .card {
-  padding: 1rem;
+  padding: 2rem;
   background-color: lightgray;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  border-radius: 0.5rem;
 }
 
 </style>

app/components/common/page-title.vue

@@ -13,6 +13,5 @@ const props = defineProps<{
 h1 {
   font-size: 2rem;
   font-weight: bold;
-  margin-bottom: 1rem;
 }
 </style>

app/components/forms/auth/new-password-form.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  token: string,
+  email: string
+}>();
+
+const {resetPassword} = useAuth();
+const password = ref("");
+const passwordConfirmation = ref("");
+const tokenExpired = ref(false);
+
+const handlePasswordReset = () => {
+  try {
+    resetPassword(password.value, passwordConfirmation.value, props.token, props.email);
+  } catch (error: unknown) {
+    if (error instanceof Error && error.message === "TOKEN_EXPIRED")
+      tokenExpired.value = true;
+  }
+}
+</script>
+
+<template>
+  <p v-show="tokenExpired" class="error">Your password reset token has expired. Please submit a new request.</p>
+  <form class="password-form" @submit.prevent="handlePasswordReset">
+    <div class="form-group">
+      <label for="password">Password</label>
+      <input id="password" v-model="password" type="password"/>
+    </div>
+
+    <div class="form-group">
+      <label for="new-password">Confirm Password</label>
+      <input id="confirm-password" v-model="passwordConfirmation" type="password"/>
+    </div>
+
+    <button type="submit">Submit</button>
+  </form>
+</template>
+
+<style scoped>
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.error {
+  color: red;
+  padding: 2em;
+}
+</style>

app/components/forms/auth/registration-form.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+
+const emits = defineEmits(['registered']);
+const {register} = useAuth();
+
+const username = ref("");
+const email = ref("");
+
+const handleRegistration = () => {
+  register(email.value, username.value);
+}
+
+</script>
+
+<template>
+  <form class="password-form" @submit.prevent="handleRegistration">
+    <div class="form-group">
+      <label for="username">Username</label>
+      <input id="username" v-model="username" type="text"/>
+    </div>
+
+    <div class="form-group">
+      <label for="email">Email</label>
+      <input id="email" v-model="email" type="email"/>
+    </div>
+
+    <button type="submit">Submit</button>
+  </form>
+</template>
+
+<style scoped>
+.password-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 50rem;
+  margin: 0 auto;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+</style>

app/components/forms/create-list-form.vue

@@ -21,7 +21,7 @@ const createList = () => {
 <template>
   <form @submit.prevent="createList">
     <label for="list_name">Add MovieList</label>
-    <div>
+    <div class="form-group">
       <input v-model="listName"
              name="list_name"
              placeholder="MovieList Name"
@@ -31,6 +31,13 @@ const createList = () => {
   </form>
 </template>
 <style scoped>
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
 button {
   background-color: #4caf50;
   color: white;
@@ -46,4 +53,8 @@ input {
   border-radius: 4px 0 0 4px;
 }
 
+label {
+  font-weight: bold;
+}
+
 </style>

app/components/header.vue

@@ -28,7 +28,6 @@
   gap: 1rem;
   font: bold 1.5rem sans-serif;
   justify-content: center;
-  margin-bottom: 2rem;
 }
 
 .links {

app/components/list-settings.vue

@@ -1,32 +1,55 @@
 <script lang="ts" setup>
 import type {MovieList} from "~/types/movie-list";
-import {type MovieListSettings} from "~/types/movie-list-settings";
+import Card from "~/components/common/card.vue";
 
-const emit = defineEmits(['back-to-list'])
+const emit = defineEmits(['back-to-list', 'update-list'])
 const props = defineProps<{
   list: MovieList
 }>()
 
-const listSettings: MovieListSettings = {
+const localName = ref(props.list.name)
-  listName: 'My MovieList',
+
-  isPublic: true,
+const availableRoles = [
-  collaborators: [
+  {id: 1, name: 'viewer'},
-    {id: 1, name: 'Ed', role: 3},
+  {id: 2, name: 'editor'},
-    {id: 2, name: 'Bob', role: 2}
+  {id: 3, name: 'admin'}
-  ],
-  roles: [
-    {id: 1, name: 'Viewer'},
-    {id: 2, name: 'Editor'},
-    {id: 3, name: 'Admin'}
 ]
+
+const collaboratorInvites = ref("");
+const responseMessage = ref("");
+type BasicResponse = {
+  message: string
+}
+const sendInvites = () => {
+  $api<BasicResponse>(`/api/invitations/`, {
+    method: 'POST',
+    body: {
+      emails: collaboratorInvites.value.split(',').map(email => email.trim()),
+      movie_list_id: props.list.id
+    }
+  }).then((response) => {
+    collaboratorInvites.value = "";
+    responseMessage.value = response.message;
+  })
+}
+
+const deleteList = () => {
+  if (!confirm("Are you sure you want to delete this list?")) return
+
+  $api(`/api/movielists/${props.list.id}`, {
+    method: 'DELETE',
+  }).then(() => {
+    navigateTo('/lists')
+  })
 }
 </script>
 
 <template>
+  <Card>
     <div class="settings-header">
       <div @click="$emit('back-to-list')">
         <Icon name="solar:arrow-left-linear"/>
-      <span>Back to MovieList</span>
+        <span class="back-to-list">Back to MovieList</span>
       </div>
     </div>
 
@@ -35,15 +58,14 @@ const listSettings: MovieListSettings = {
         <label for="list-name-input">MovieList Name</label>
 
         <div>
-        <input id="list-name-input" :value="listSettings.listName" type="text"/>
+          <input id="list-name-input" v-model="localName" type="text"/>
-        <button>Save</button>
+          <button @click="$emit('update-list', { ...list, name: localName })">Save</button>
         </div>
       </li>
-    <li class="list-setting">
+      <li class="list-setting-row">
-      <div>
         <label for="make-list-public">Make list public</label>
-        <input id="make-list-public" :checked="listSettings.isPublic" type="checkbox"/>
+        <input id="make-list-public" :checked="list.is_public" type="checkbox"
-      </div>
+               @change="$emit('update-list', { ...list, is_public: ($event.target as HTMLInputElement).checked })"/>
       </li>
       <li class="list-setting collaborator-list">
         <span>Collaborators</span>
@@ -53,7 +75,8 @@ const listSettings: MovieListSettings = {
           <ul>
             <li>Viewer: Can view the list, but cannot make any changes.</li>
             <li>Editor: Can add/remove movies from the list.</li>
-          <li>Admin: Can make any changes to the list including deleting it. Can also invite other users to collaborate
+            <li>Admin: Can make any changes to the list including deleting it. Can also invite other users to
+              collaborate
               on
               this list.
             </li>
@@ -61,12 +84,12 @@ const listSettings: MovieListSettings = {
         </details>
 
         <ul class="collaborators">
-        <li v-for="collaborator in listSettings.collaborators" :key="collaborator.id">
+          <li v-for="collaborator in list.collaborators" :key="collaborator.id">
-          <span>{{ collaborator.name }}</span>
+            <span>{{ collaborator.username }}</span>
             <select v-model="collaborator.role">
               <option
-                v-for="role in listSettings.roles"
+                  v-for="role in availableRoles"
-                :value="role.id"
+                  :value="role.name"
               >
                 {{ role.name }}
               </option>
@@ -75,17 +98,26 @@ const listSettings: MovieListSettings = {
         </ul>
       </li>
       <li class="list-setting">
+        <form class="list-setting" @submit.prevent="sendInvites">
           <label for="invite-collaborators-input">Invite Collaborators</label>
-      <textarea name="invite-collaborators-input" type="text"></textarea>
+          <textarea v-model="collaboratorInvites" name="invite-collaborators-input" type="text"></textarea>
+          <button>Send Invites</button>
+          <span v-if="responseMessage">{{ responseMessage }}</span>
+        </form>
       </li>
       <li class="list-setting">
         <label for="delete-list-button">Delete MovieList</label>
-      <button name="delete-list-button">Delete</button>
+        <button name="delete-list-button" @click="deleteList">Delete</button>
       </li>
     </ul>
+  </Card>
 </template>
 
 <style scoped>
+.back-to-list:hover {
+  text-decoration: underline;
+}
+
 .collaborator-list {
   gap: 1rem;
 }
@@ -101,10 +133,15 @@ const listSettings: MovieListSettings = {
   gap: 1rem;
 }
 
+.list-setting-row {
+  display: flex;
+  gap: 1rem;
+}
+
 .settings-header {
   display: flex;
   justify-content: space-between;
-  padding: 1rem 0;
+  padding-bottom: 1rem;
   cursor: pointer;
 }
 
@@ -121,7 +158,7 @@ const listSettings: MovieListSettings = {
 
 .settings-list > li {
   display: flex;
-  border: gray 1px solid;
+  border: rgba(0, 0, 0, 0.2) 1px solid;
   padding: 1rem;
 }
 

app/components/movie-list.vue

@@ -16,12 +16,11 @@ const emit = defineEmits<{
   'add-movie': []
 }>()
 
-const filteredMovies = ref<Movie[]>(props.movies);
 const searchQuery = ref('');
 const imageErrors = ref<Set<number>>(new Set());
 const sortMenuOpen = ref(false);
 const sortMenuRef = ref<HTMLElement | null>(null);
-const currentSort = ref<SortOption | null>(null);
+const currentSort = ref<SortOption>({field: 'title', direction: 'asc'});
 
 const sortMovies = (movies: Movie[]): Movie[] => {
   if (!currentSort.value) return movies;
@@ -42,6 +41,8 @@ const sortMovies = (movies: Movie[]): Movie[] => {
   });
 }
 
+const filteredMovies = ref<Movie[]>(sortMovies(props.movies));
+
 const applySort = (field: SortField, direction: SortDirection) => {
   currentSort.value = {field, direction};
   filteredMovies.value = sortMovies(filteredMovies.value);
@@ -192,7 +193,8 @@ const isSortActive = (field: SortField, direction: SortDirection): boolean => {
 
 .movie-list {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(max(140px, 20%), 1fr));
+  /*grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));*/
+  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
   gap: 1rem;
 }
 
@@ -212,6 +214,7 @@ const isSortActive = (field: SortField, direction: SortDirection): boolean => {
   object-fit: fill;
   width: 100%;
   height: 100%;
+  max-height: 25rem;
 }
 
 .movie img.movie-poster-error {

app/components/panels/movie-details.vue

@@ -10,13 +10,12 @@ const props = defineProps<{
 const emit = defineEmits(['remove-movie']);
 
 const criticScores = computed(() => {
-  const scores = JSON.parse(props.selectedMovie.critic_scores)
+  const scores: MovieCriticScore[] = []
-  const parsedScores: MovieCriticScore[] = []
+  props.selectedMovie.critic_scores.map((score: MovieCriticScore) => {
-  scores.map((score: MovieCriticScore) => {
+    scores.push({Value: score.Value, Source: score.Source})
-    parsedScores.push({Value: score.Value, Source: score.Source})
   })
 
-  return parsedScores
+  return scores
 })
 </script>
 
@@ -49,10 +48,11 @@ const criticScores = computed(() => {
       </div>
       <div class="movie-detail">
         <dt class="detail-title">Critic Scores:</dt>
-        <div v-for="score in criticScores" :key="score.Source">
+        <div v-for="score in criticScores" v-if="criticScores && criticScores.length > 0" :key="score.Source">
           <dd class="critic-score-source">{{ score.Source }}</dd>
           <dd>{{ score.Value }}</dd>
         </div>
+        <dd v-else>No critic scores available</dd>
       </div>
     </dl>
 
@@ -84,7 +84,8 @@ dt {
 }
 
 .movie-details img {
-  max-width: 15em;
+  max-width: 20em;
+  max-height: 25em;
   margin: 2rem auto;
 }
 
@@ -96,6 +97,7 @@ dt {
   display: flex;
   flex-direction: column;
   gap: 1rem;
+  margin: 2em 0;
 }
 
 

app/components/panels/movie-search.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type {MovieSearchResult} from "~/types/movie-search-results";
 import type {MovieList} from "~/types/movie-list";
+import type {ResourceResponse} from "~/types/api";
 
 const emit = defineEmits(['add-movie']);
 const props = defineProps<{
@@ -21,13 +22,13 @@ const searchMovies = () => {
 }
 
 const addMovieToList = (movie: MovieSearchResult) => {
-  $api<MovieList>(`/api/movielists/${props.movieListId}/movies`, {
+  $api<ResourceResponse<MovieList>>(`/api/movielists/${props.movieListId}/movies`, {
     body: {
       movie: movie
     },
     method: "POST"
   }).then((list) => {
-    emit('add-movie', list);
+    emit('add-movie', list.data);
   }).catch((error) => {
     alert(error.message)
   });
@@ -89,7 +90,7 @@ const addMovieToList = (movie: MovieSearchResult) => {
 
 .movie-result img {
   height: 10rem;
-  max-width: 7rem;
+  width: 10rem;
 }
 
 </style>

app/composables/$api.ts

@@ -13,8 +13,8 @@ export const $api = <T>(
             ...(xsrfToken.value ? {'X-XSRF-TOKEN': xsrfToken.value} : {}),
         },
         onResponseError({response}) {
-            if (response.status === 401) {
+            if (response.status === 401 || response.status === 419) {
-                navigateTo('/auth/login')
+                useAuth().logout()
             }
         },
         ...options,

app/composables/useAuth.ts

@@ -10,10 +10,54 @@ export const useAuth = () => {
         await navigateTo('/')
     }
 
-    const logout = async () => {
+    const register = async (email: string, username: string) => {
-        await $api('/api/logout', {method: 'POST'})
+        await $fetch('/sanctum/csrf-cookie', {
+            baseURL: config.public.apiBase,
+            credentials: 'include',
+        })
+        await $api('/api/register', {method: 'POST', body: {email, username}})
         await navigateTo('/auth/login')
     }
 
-    return {login, logout}
+    const resetPassword = async (password: string, passwordConfirmation: string, token: string, email: string) => {
+        await $fetch('/sanctum/csrf-cookie', {
+            baseURL: config.public.apiBase,
+            credentials: 'include',
+        })
+        await $api('/api/reset-password', {
+            method: 'POST',
+            body: {
+                password,
+                password_confirmation: passwordConfirmation,
+                token,
+                email
+            },
+            onResponseError: (context) => {
+                if (context.response.status === 401) {
+                    throw new Error('TOKEN_EXPIRED')
+                }
+            }
+        })
+        await navigateTo('/lists')
+    }
+
+    const xsrfToken = useCookie('XSRF-TOKEN')
+
+    const logout = async () => {
+        await $fetch('/api/logout', {
+            baseURL: config.public.apiBase,
+            method: 'POST',
+            credentials: 'include',
+            headers: {
+                ...(xsrfToken.value ? {'X-XSRF-TOKEN': xsrfToken.value} : {}),
+            },
+        }).catch(() => {
+            alert("Failed to logout. Please try again.")
+        })
+
+        useCookie('XSRF-TOKEN').value = ''
+        navigateTo('/auth/login')
+    }
+
+    return {login, register, resetPassword, logout}
 }

app/layouts/auth.vue

@@ -10,6 +10,7 @@
   justify-content: center;
   align-items: center;
   min-height: 100vh;
-  padding: 1rem;
+  flex-direction: column;
+  gap: 3rem;
 }
 </style>

app/middleware/auth.global.ts

@@ -1,6 +1,12 @@
 export default defineNuxtRouteMiddleware((to) => {
-    const publicRoutes = ['/auth/login']
+    const publicRoutes = [
-    if (publicRoutes.includes(to.path)) return
+        'auth-login',
+        'auth-register',
+        'auth-reset-password',
+        'invitations-token-accept',
+        'invitations-token-decline',
+    ]
+    if (publicRoutes.includes(String(to.name))) return
 
     const xsrfToken = useCookie('XSRF-TOKEN')
     if (!xsrfToken.value) {

app/pages/account.vue

@@ -6,6 +6,7 @@ import ProfileForm from "~/components/forms/profile-form.vue";
 </script>
 
 <template>
+  <div>
     <PageTitle title="Account Settings"/>
 
     <div class="password-settings settings-section">
@@ -23,6 +24,7 @@ import ProfileForm from "~/components/forms/profile-form.vue";
 
       <ProfileForm/>
     </div>
+  </div>
 
 </template>
 

app/pages/auth/login.vue

@@ -7,10 +7,21 @@ definePageMeta({
 </script>
 
 <template>
+  <div class="content">
+    <h1>Log in</h1>
     <login-form/>
+  </div>
 
 </template>
 
 <style scoped>
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  gap: 2rem;
+}
 
 </style>

app/pages/auth/register.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+
+import RegistrationForm from "~/components/forms/auth/registration-form.vue";
+
+const showForm = ref(true);
+
+definePageMeta({
+  layout: 'auth'
+})
+
+const onRegistered = () => {
+  showForm.value = false;
+}
+</script>
+
+<template>
+  <div class="content">
+    <h1>Register</h1>
+    <registration-form v-if="showForm" @registered="onRegistered"/>
+    <div v-else>Registration successful! Check your email to set your password and log in.</div>
+  </div>
+
+</template>
+
+<style scoped>
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+</style>

app/pages/auth/reset-password/[token].vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import NewPasswordForm from "~/components/forms/auth/new-password-form.vue";
+
+definePageMeta({
+  layout: 'auth'
+})
+
+const route = useRoute();
+
+const passwordResetToken = route.params.token as string;
+const email = route.query.email as string;
+</script>
+
+<template>
+  <div class="content">
+    <h1>Reset Your Password</h1>
+    <new-password-form :email="email" :token="passwordResetToken"/>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100vh;
+  gap: 2rem;
+}
+
+</style>

app/pages/index.vue

@@ -6,9 +6,8 @@ const welcomeMessage = computed(() => `Welcome, ${user}!`)
 </script>
 
 <template>
-  <PageTitle :title="welcomeMessage"/>
-
   <div class="content">
+    <PageTitle :title="welcomeMessage"/>
     <div>
       <h2>Next up</h2>
       <span>Nothing Scheduled :(</span>

app/pages/invitations/[token]/accept.vue

@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+
+const route = useRoute();
+
+const token = route.params.token as string;
+let isAuthorized = ref(false);
+let isProcessed = ref(false);
+let failed = ref(false);
+
+enum InviteStatusEnum {
+  PENDING = "pending",
+  ACCEPTED = "accepted",
+  DECLINED = "declined",
+  NOT_FOUND = "not_found",
+  FAILED = "failed",
+}
+
+type InviteStatus = {
+  message: string
+  status: InviteStatusEnum
+}
+
+// check if the email from the invite has an existing user
+const acceptInvitation = () => {
+  $api<InviteStatus>(`/api/invitations/${token}/accept`, {
+    method: "GET",
+    onResponseError({response}) {
+      if (response.status === 401) {
+        isAuthorized.value = false
+        isProcessed.value = true
+        return;
+      }
+
+      failed.value = true;
+      return;
+    }
+  }).then((invitationStatus) => {
+    navigateTo('/lists')
+  })
+}
+
+acceptInvitation();
+</script>
+
+<template>
+
+  <div v-if="!isAuthorized && !isProcessed  && !failed">
+    <span>Processing...</span>
+  </div>
+  <div v-else-if="!isAuthorized && isProcessed && !failed">
+    <span>You need to <NuxtLink to="/auth/login">log in</NuxtLink> or <NuxtLink
+        to="/auth/register">create an account</NuxtLink></span>
+  </div>
+
+  <div v-show="failed">
+    <span>An error occurred while accepting the request.</span>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

app/pages/invitations/[token]/decline.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>

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"
+        :list="listResponse.data"
-        v-on:back-to-list="toggleSettings"
+        @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,15 +17,16 @@ const refreshLists = () => {
 </script>
 
 <template>
-  <PageTitle title="Lists"/>
-
   <div class="content">
+    <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">
+        <span v-if="!listGroup?.movie_lists?.length" class="not-found-message">No lists found.</span>
-        <li v-for="list in lists"
+        <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">
@@ -35,35 +37,42 @@ const refreshLists = () => {
         </ul>
       </div>
 
-    <!-- <div class="w-full flex flex-col gap-5">
+      <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">
+        <span v-if="!listGroup?.shared_lists?.length" class="not-found-message">No shared lists found.</span>
-        <li class="flex justify-between items-center p-4 bg-gray-700/50 rounded-lg hover:bg-gray-600/50 transition-colors">
+        <ul v-else class="movie-list">
-          <NuxtLink to="lists/2">Bob's MovieList</NuxtLink>
+          <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>

app/types/api.ts

@@ -0,0 +1,2 @@
+export type ResourceResponse<T> = { data: T }
+//export type PaginatedResponse<T> = { data: T[]; meta: PaginationMeta; links: Links }

app/types/collaborator.ts

@@ -1,6 +0,0 @@
-export type Collaborator = {
-    id: number,
-    name: string
-    role: number
-}
-

app/types/movie-list-group.ts

@@ -0,0 +1,7 @@
+import type {MovieList} from "~/types/movie-list";
+
+export type MovieListGroup = {
+    movie_lists: MovieList[]
+    shared_lists: MovieList[]
+}
+

app/types/movie-list-settings.ts

@@ -1,9 +0,0 @@
-import type {Collaborator} from "~/types/collaborator";
-import type {Role} from "~/types/role";
-
-export type MovieListSettings = {
-    listName: string,
-    isPublic: boolean,
-    collaborators: Collaborator[],
-    roles: Role[]
-}

app/types/movie-list.ts

@@ -1,11 +1,13 @@
-import {type MovieListSettings} from "~/types/movie-list-settings";
 import type {Movie} from "~/types/movie";
+import type {User} from "~/types/user";
 
 export type MovieList = {
-    id: number,
+    id: number
     name: string
     is_public: boolean
-    movieListSettings: MovieListSettings
+    owner: string
+    role: string
     movies: Movie[]
+    collaborators: User[]
 }
 

app/types/movie.ts

@@ -1,5 +1,7 @@
+import type {MovieCriticScore} from "~/types/movie-critic-score";
+
 export type Movie = {
-    id: number,
+    id: number
     title: string
     year: number
     imdb_id: string
@@ -8,7 +10,7 @@ export type Movie = {
     plot: string
     genre: string
     mpaa_rating: string
-    critic_scores: string
+    critic_scores: Array<MovieCriticScore>
     poster: string
     added_by: number
 }

app/types/user.ts

@@ -0,0 +1,7 @@
+export type User = {
+    id: number,
+    username: string
+    email: string
+    role: number
+}
+