From c5f74f134d13295164ab3b6fee4d378339fede88 Mon Sep 17 00:00:00 2001
From: "Edward Tirado Jr." <ed@etdevelopment.net>
Date: Wed, 25 Feb 2026 17:33:37 -0600
Subject: [PATCH] implemented individual list functionality

---
 app/components/common/card.vue                |  18 ++
 app/components/forms/auth/login-form.vue      |   8 +
 app/components/forms/create-list-form.vue     |   7 +-
 app/components/header.vue                     |   3 -
 app/components/list-settings.vue              |  16 +-
 app/components/movie-list.vue                 | 215 +++++++++++++++---
 app/components/panels/movie-details.vue       | 100 +++++++-
 app/components/panels/movie-search.vue        |  95 ++++++++
 app/components/slideout-panel.vue             |  27 ++-
 app/composables/$api.ts                       |   5 +
 app/composables/useApiData.ts                 |   5 +
 app/composables/useAuth.ts                    |   5 +-
 app/layouts/auth.vue                          |  15 ++
 app/layouts/default.vue                       |   6 +
 app/middleware/auth.global.ts                 |   9 +
 app/pages/auth/login.vue                      |   5 +-
 app/pages/lists/[id].vue                      |  84 ++++---
 app/pages/lists/index.vue                     |  42 +++-
 app/types/list.ts                             |   9 -
 app/types/movie-critic-score.ts               |   5 +
 ...ist-settings.ts => movie-list-settings.ts} |   2 +-
 app/types/movie-list.ts                       |  11 +
 app/types/movie-search-results.ts             |   8 +
 app/types/movie.ts                            |   1 +
 24 files changed, 592 insertions(+), 109 deletions(-)
 create mode 100644 app/components/common/card.vue
 create mode 100644 app/components/panels/movie-search.vue
 create mode 100644 app/layouts/auth.vue
 create mode 100644 app/middleware/auth.global.ts
 delete mode 100644 app/types/list.ts
 create mode 100644 app/types/movie-critic-score.ts
 rename app/types/{list-settings.ts => movie-list-settings.ts} (85%)
 create mode 100644 app/types/movie-list.ts
 create mode 100644 app/types/movie-search-results.ts

diff --git a/app/components/common/card.vue b/app/components/common/card.vue
new file mode 100644
index 0000000..d00eeae
--- /dev/null
+++ b/app/components/common/card.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <div class="card">
+    <slot/>
+  </div>
+
+</template>
+
+<style scoped>
+.card {
+  padding: 1rem;
+  background-color: lightgray;
+}
+
+</style>
\ No newline at end of file
diff --git a/app/components/forms/auth/login-form.vue b/app/components/forms/auth/login-form.vue
index 5632403..b25f8ab 100644
--- a/app/components/forms/auth/login-form.vue
+++ b/app/components/forms/auth/login-form.vue
@@ -23,6 +23,14 @@ const handleLogin = () => login(email.value, password.value)
 </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;
diff --git a/app/components/forms/create-list-form.vue b/app/components/forms/create-list-form.vue
index b1f6762..a92539d 100644
--- a/app/components/forms/create-list-form.vue
+++ b/app/components/forms/create-list-form.vue
@@ -13,9 +13,6 @@ const createList = () => {
     listName.value = "";
     refreshLists();
   }).catch((error) => {
-    if (error.response?.status === 401) {
-      useAuth().logout();
-    }
     alert(error.message)
   });
 }
@@ -23,11 +20,11 @@ const createList = () => {
 
 <template>
   <form @submit.prevent="createList">
-    <label for="list_name">Add List</label>
+    <label for="list_name">Add MovieList</label>
     <div>
       <input v-model="listName"
              name="list_name"
-             placeholder="List Name"
+             placeholder="MovieList Name"
              type="text">
       <button>Add</button>
     </div>
diff --git a/app/components/header.vue b/app/components/header.vue
index dd9f919..077a9be 100644
--- a/app/components/header.vue
+++ b/app/components/header.vue
@@ -1,6 +1,3 @@
-<script lang="ts" setup>
-</script>
-
 <template>
   <nav class="header">
     <span class="logo">
diff --git a/app/components/list-settings.vue b/app/components/list-settings.vue
index fdb7a1e..f5252c4 100644
--- a/app/components/list-settings.vue
+++ b/app/components/list-settings.vue
@@ -1,14 +1,14 @@
 <script lang="ts" setup>
-import type {List} from "~/types/list";
-import {type ListSettings} from "~/types/list-settings";
+import type {MovieList} from "~/types/movie-list";
+import {type MovieListSettings} from "~/types/movie-list-settings";
 
 const emit = defineEmits(['back-to-list'])
 const props = defineProps<{
-  list: List
+  list: MovieList
 }>()
 
-const listSettings: ListSettings = {
-  listName: 'My List',
+const listSettings: MovieListSettings = {
+  listName: 'My MovieList',
   isPublic: true,
   collaborators: [
     {id: 1, name: 'Ed', role: 3},
@@ -26,13 +26,13 @@ const listSettings: ListSettings = {
   <div class="settings-header">
     <div @click="$emit('back-to-list')">
       <Icon name="solar:arrow-left-linear"/>
-      <span>Back to List</span>
+      <span>Back to MovieList</span>
     </div>
   </div>
 
   <ul class="settings-list">
     <li class="list-setting">
-      <label for="list-name-input">List Name</label>
+      <label for="list-name-input">MovieList Name</label>
 
       <div>
         <input id="list-name-input" :value="listSettings.listName" type="text"/>
@@ -79,7 +79,7 @@ const listSettings: ListSettings = {
       <textarea name="invite-collaborators-input" type="text"></textarea>
     </li>
     <li class="list-setting">
-      <label for="delete-list-button">Delete List</label>
+      <label for="delete-list-button">Delete MovieList</label>
       <button name="delete-list-button">Delete</button>
     </li>
   </ul>
diff --git a/app/components/movie-list.vue b/app/components/movie-list.vue
index 934c193..883533e 100644
--- a/app/components/movie-list.vue
+++ b/app/components/movie-list.vue
@@ -1,46 +1,122 @@
 <script lang="ts" setup>
 import {type Movie} from "~/types/movie";
 import posterPlaceholder from "~/assets/img/poster-placeholder.svg";
+import Card from "~/components/common/card.vue";
+
+type SortField = 'title' | 'year'
+type SortDirection = 'asc' | 'desc'
+type SortOption = { field: SortField, direction: SortDirection }
 
 const props = defineProps<{
   movies: Movie[]
 }>()
 
-const filteredMovies = ref<Movie[]>(props.movies);
-const searchQuery = ref('');
-
 const emit = defineEmits<{
   'movie-clicked': [movie: Movie],
   '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 sortMovies = (movies: Movie[]): Movie[] => {
+  if (!currentSort.value) return movies;
+
+  const {field, direction} = currentSort.value;
+  return [...movies].sort((a, b) => {
+    const aVal = a[field];
+    const bVal = b[field];
+
+    let comparison: number;
+    if (typeof aVal === 'string' && typeof bVal === 'string') {
+      comparison = aVal.localeCompare(bVal);
+    } else {
+      comparison = (aVal as number) - (bVal as number);
+    }
+
+    return direction === 'asc' ? comparison : -comparison;
+  });
+}
+
+const applySort = (field: SortField, direction: SortDirection) => {
+  currentSort.value = {field, direction};
+  filteredMovies.value = sortMovies(filteredMovies.value);
+  sortMenuOpen.value = false;
+}
+
+const toggleSortMenu = () => {
+  sortMenuOpen.value = !sortMenuOpen.value;
+}
+
+const onSortClickOutside = (e: MouseEvent) => {
+  if (sortMenuRef.value && !sortMenuRef.value.contains(e.target as Node)) {
+    sortMenuOpen.value = false;
+  }
+}
+
+onMounted(() => document.addEventListener('click', onSortClickOutside))
+onUnmounted(() => document.removeEventListener('click', onSortClickOutside))
+
+watch(() => props.movies, (newMovies) => {
+  filteredMovies.value = sortMovies(newMovies);
+});
+
 const movieSearch = () => {
-  filteredMovies.value = props.movies.filter(
+  const filtered = props.movies.filter(
       movie => movie.title.toLowerCase().includes(searchQuery.value.toLowerCase())
   );
+  filteredMovies.value = sortMovies(filtered);
+}
+
+const handleImageError = (e: Event, movieId: number) => {
+  (e.target as HTMLImageElement).src = posterPlaceholder;
+  imageErrors.value.add(movieId);
+}
+
+const isSortActive = (field: SortField, direction: SortDirection): boolean => {
+  return currentSort.value?.field === field && currentSort.value?.direction === direction;
 }
 
 </script>
 
 <template>
-  <div>
+  <Card>
     <div class="list-controls-container">
       <div class="list-controls">
         <input v-model="searchQuery" placeholder="Search Movies" type="text" @keyup="movieSearch"/>
-        <Icon
-            class="list-controls-icon"
-            name="solar:filter-bold"
-            size="24"
-            title="Filter Movies"
-        />
-        <Icon
-            class="list-controls-icon"
-            name="solar:sort-vertical-linear"
-            size="24"
-            title="Sort Movies"
-        />
+        <div ref="sortMenuRef" class="sort-menu-container">
+          <Icon
+              class="list-controls-icon"
+              name="solar:sort-vertical-linear"
+              size="24"
+              title="Sort Movies"
+              @click="toggleSortMenu"
+          />
+          <ul v-if="sortMenuOpen" class="sort-dropdown">
+            <li @click.stop="applySort('title', 'asc')">
+              <Icon v-if="isSortActive('title', 'asc')" name="solar:check-circle-linear" size="16"/>
+              Title (A-Z)
+            </li>
+            <li @click.stop="applySort('title', 'desc')">
+              <Icon v-if="isSortActive('title', 'desc')" name="solar:check-circle-linear" size="16"/>
+              Title (Z-A)
+            </li>
+            <li @click.stop="applySort('year', 'asc')">
+              <Icon v-if="isSortActive('year', 'asc')" name="solar:check-circle-linear" size="16"/>
+              Year (Oldest First)
+            </li>
+            <li @click.stop="applySort('year', 'desc')">
+              <Icon v-if="isSortActive('year', 'desc')" name="solar:check-circle-linear" size="16"/>
+              Year (Newest First)
+            </li>
+          </ul>
+        </div>
       </div>
-      <button @click="emit('add-movie')">Add Movie</button>
+      <button class="add-movie-button" @click="emit('add-movie')">Add Movie</button>
     </div>
     <div v-if="filteredMovies.length === 0" class="movie-quote">
       <span class="quote">"You complete me."</span>
@@ -48,22 +124,29 @@ const movieSearch = () => {
     </div>
     <ul v-else class="movie-list">
       <li v-for="movie in filteredMovies" :key="movie.id" class="movie" @click="emit('movie-clicked', movie)">
-        <img
-            alt=""
-            class="movie-poster"
-            src="http://fart.fart"
-            @error="(e) => (e.target as HTMLImageElement).src = posterPlaceholder"
-        />
-        <span class="movie-title">{{ movie.title }}</span>
+        <div class="movie-poster-container">
+          <img
+              :class="{ 'movie-poster-error': imageErrors.has(movie.id) }"
+              :src="movie.poster"
+              alt=""
+              class="movie-poster"
+              @error="(e) => handleImageError(e, movie.id)"
+          />
+          <div v-if="imageErrors.has(movie.id)" class="movie-title-overlay">
+            {{ movie.title }}
+          </div>
+        </div>
       </li>
     </ul>
-  </div>
+  </Card>
 </template>
 
 <style scoped>
+
 .list-controls-container {
   display: flex;
   justify-content: space-between;
+  flex-wrap: wrap;
   gap: 1rem;
   margin: 1rem 0;
 }
@@ -74,6 +157,39 @@ const movieSearch = () => {
   gap: 0.5rem;
 }
 
+.sort-menu-container {
+  position: relative;
+}
+
+.sort-dropdown {
+  position: absolute;
+  right: 0;
+  top: 100%;
+  margin-top: 0.5rem;
+  background: white;
+  border: 1px solid #ccc;
+  border-radius: 0.5rem;
+  list-style: none;
+  padding: 0.25rem 0;
+  min-width: 10rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  z-index: 10;
+}
+
+.sort-dropdown li {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.sort-dropdown li:hover {
+  background: #f0f0f0;
+}
+
 .movie-list {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(max(140px, 20%), 1fr));
@@ -86,6 +202,37 @@ const movieSearch = () => {
   cursor: pointer;
 }
 
+.movie-poster-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.movie img {
+  object-fit: fill;
+  width: 100%;
+  height: 100%;
+}
+
+.movie img.movie-poster-error {
+  object-fit: cover;
+}
+
+.movie-title-overlay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+  font-weight: bold;
+  text-align: center;
+  padding: 0.5rem;
+  background-color: rgba(0, 0, 0, 0.7);
+  border-radius: 4px;
+  max-width: 90%;
+  word-wrap: break-word;
+}
+
 .movie-quote {
   display: flex;
   flex-direction: column;
@@ -93,4 +240,20 @@ const movieSearch = () => {
   gap: 1rem;
   margin: 5rem 0;
 }
+
+@media (max-width: 640px) {
+  .list-controls-container {
+    flex-direction: column;
+  }
+
+  .list-controls {
+    width: 100%;
+    border-bottom: 2px solid black;
+    padding-bottom: 1rem;
+  }
+
+  .list-controls input {
+    flex-grow: 1;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/app/components/panels/movie-details.vue b/app/components/panels/movie-details.vue
index 066d32b..320162e 100644
--- a/app/components/panels/movie-details.vue
+++ b/app/components/panels/movie-details.vue
@@ -1,37 +1,127 @@
 <script lang="ts" setup>
 import type {Movie} from "~/types/movie";
+import type {MovieCriticScore} from "~/types/movie-critic-score";
+import posterPlaceholder from "~/assets/img/poster-placeholder.svg";
 
-defineProps<{
+const props = defineProps<{
   selectedMovie: Movie;
 }>();
 
+const emit = defineEmits(['remove-movie']);
+
+const criticScores = computed(() => {
+  const scores = JSON.parse(props.selectedMovie.critic_scores)
+  const parsedScores: MovieCriticScore[] = []
+  scores.map((score: MovieCriticScore) => {
+    parsedScores.push({Value: score.Value, Source: score.Source})
+  })
+
+  return parsedScores
+})
 </script>
 
 <template>
   <div class="movie-details">
-    <img :alt="selectedMovie!.title" :src="selectedMovie!.poster" class="movie-poster"/>
-    <h2 class="movie-title">{{ selectedMovie!.title }}</h2>
+    <div class="movie-details-header">
+      <img :alt="selectedMovie.title"
+           :src="selectedMovie.poster"
+           class="movie-poster"
+           @error="(e) => (e.target as HTMLImageElement).src = posterPlaceholder"
+      />
+      <h2 class="movie-title">{{ selectedMovie.title }} ({{ selectedMovie.year }})</h2>
+    </div>
+    <dl class="movie-details-list">
+      <div class="movie-detail">
+        <dt>Plot</dt>
+        <dd>{{ selectedMovie.plot }}</dd>
+      </div>
+      <div class="movie-detail">
+        <dt>Genre</dt>
+        <dd>{{ selectedMovie.genre }}</dd>
+      </div>
+      <div class="movie-detail">
+        <dt>Actors</dt>
+        <dd>{{ selectedMovie.actors }}</dd>
+      </div>
+      <div class="movie-detail">
+        <dt>Directed By</dt>
+        <dd>{{ selectedMovie.director }}</dd>
+      </div>
+      <div class="movie-detail">
+        <dt class="detail-title">Critic Scores:</dt>
+        <div v-for="score in criticScores" :key="score.Source">
+          <dd class="critic-score-source">{{ score.Source }}</dd>
+          <dd>{{ score.Value }}</dd>
+        </div>
+      </div>
+    </dl>
+
+    <button type="button" @click="emit('remove-movie', selectedMovie.id)">Remove From List</button>
   </div>
 </template>
 
 <style scoped>
+dt {
+  font-weight: bold;
+}
+
+.critic-score-source {
+}
+
+.movie-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
 .movie-details {
   display: flex;
   flex-direction: column;
   padding: 2rem;
+  justify-content: center;
+  max-width: 40rem;
+  margin: 0 auto;
 }
 
+.movie-details img {
+  max-width: 15em;
+  margin: 2rem auto;
+}
+
+.movie-details-header {
+  margin: 2em 0;
+}
+
+.movie-details-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+
 .movie-poster {
   width: 100%;
 }
 
+.movie-title {
+  text-align: center;
+}
+
+@media (max-width: 1300px) {
+  .movie-plot {
+    margin: unset;
+  }
+}
+
 @media (max-width: 767px) {
   .movie-details {
     align-items: center;
   }
 
-  .movie-poster {
-    margin: 0 auto;
+
+  .movie-details img {
+    max-height: 15em;
+    max-width: 10em;
   }
 }
 
diff --git a/app/components/panels/movie-search.vue b/app/components/panels/movie-search.vue
new file mode 100644
index 0000000..f53e4d0
--- /dev/null
+++ b/app/components/panels/movie-search.vue
@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import type {MovieSearchResult} from "~/types/movie-search-results";
+import type {MovieList} from "~/types/movie-list";
+
+const emit = defineEmits(['add-movie']);
+const props = defineProps<{
+  movieListId: string
+}>()
+
+const searchQuery = ref("");
+
+const movies = ref<MovieSearchResult[]>([]);
+const searchMovies = () => {
+  $api<MovieSearchResult[]>(`/api/movies/search/${searchQuery.value}`, {
+    method: "GET"
+  }).then((data) => {
+    movies.value = data.results
+  }).catch((error) => {
+    alert(error.message)
+  });
+}
+
+const addMovieToList = (movie: MovieSearchResult) => {
+  $api<MovieList>(`/api/movielists/${props.movieListId}/movies`, {
+    body: {
+      movie: movie
+    },
+    method: "POST"
+  }).then((list) => {
+    emit('add-movie', list);
+  }).catch((error) => {
+    alert(error.message)
+  });
+}
+
+</script>
+
+<template>
+  <div>
+    <h2>Movie Search</h2>
+    <form @submit.prevent="searchMovies">
+      <label for="search">Search Movies</label>
+
+      <div>
+        <input id="search" v-model="searchQuery" type="text"/>
+        <button>Search</button>
+      </div>
+    </form>
+    <ul class="results-list">
+      <li v-for="movie in movies" :key="movie.imdbId" class="movie-result">
+        <img :src="movie.poster" alt="movie poster">
+        <div class="movie-details">
+          <span>{{ movie.title }}</span>
+          <span>{{ movie.year }}</span>
+          <button @click="addMovieToList(movie)">Add Movie</button>
+        </div>
+      </li>
+    </ul>
+  </div>
+
+
+</template>
+
+<style scoped>
+.results-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  justify-content: center;
+  margin: 1rem 0;
+}
+
+.movie-details {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  gap: 0.5rem;
+  padding: 0.5rem;
+}
+
+.movie-result {
+  display: flex;
+  flex-direction: row;
+  border: 1px solid black;
+  align-items: center;
+  text-align: center;
+}
+
+.movie-result img {
+  height: 10rem;
+  max-width: 7rem;
+}
+
+</style>
\ No newline at end of file
diff --git a/app/components/slideout-panel.vue b/app/components/slideout-panel.vue
index 439cb37..105f2e5 100644
--- a/app/components/slideout-panel.vue
+++ b/app/components/slideout-panel.vue
@@ -9,16 +9,18 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <Transition name="slideout-backdrop">
-    <div v-if="open" class="backdrop" @click="emit('close')"/>
-  </Transition>
+  <Teleport to="body">
+    <Transition name="slideout-backdrop">
+      <div v-if="open" class="backdrop" @click="emit('close')"/>
+    </Transition>
 
-  <Transition name="slideout">
-    <div v-if="open" class="panel">
-      <button class="close-button" @click="emit('close')">&times;</button>
-      <slot/>
-    </div>
-  </Transition>
+    <Transition name="slideout">
+      <div v-if="open" class="panel">
+        <button class="close-button" @click="emit('close')">&times;</button>
+        <slot/>
+      </div>
+    </Transition>
+  </Teleport>
 </template>
 
 <style scoped>
@@ -34,7 +36,7 @@ const emit = defineEmits<{
   top: 0;
   right: 0;
   bottom: 0;
-  width: 400px;
+  width: 40%;
   background: var(--color-surface, #fff);
   z-index: 101;
   overflow-y: auto;
@@ -57,7 +59,10 @@ const emit = defineEmits<{
 
 @media (max-width: 767px) {
   .panel {
-    width: 100%;
+    left: 0;
+    right: 0;
+    width: 100vw;
+    padding: 0.5rem;
   }
 }
 
diff --git a/app/composables/$api.ts b/app/composables/$api.ts
index 22261e2..1145da3 100644
--- a/app/composables/$api.ts
+++ b/app/composables/$api.ts
@@ -12,6 +12,11 @@ export const $api = <T>(
             Accept: 'application/json',
             ...(xsrfToken.value ? {'X-XSRF-TOKEN': xsrfToken.value} : {}),
         },
+        onResponseError({response}) {
+            if (response.status === 401) {
+                navigateTo('/auth/login')
+            }
+        },
         ...options,
     })
 }
diff --git a/app/composables/useApiData.ts b/app/composables/useApiData.ts
index 2cb0c25..0a1da55 100644
--- a/app/composables/useApiData.ts
+++ b/app/composables/useApiData.ts
@@ -16,6 +16,11 @@ export const useApiData = <T>(
             ...requestHeaders,
             ...(xsrfToken.value ? {'X-XSRF-TOKEN': xsrfToken.value} : {}),
         })),
+        onResponseError({response}) {
+            if (response.status === 401) {
+                navigateTo('/auth/login')
+            }
+        },
         ...options,
     })
 }
diff --git a/app/composables/useAuth.ts b/app/composables/useAuth.ts
index d6774cd..d362854 100644
--- a/app/composables/useAuth.ts
+++ b/app/composables/useAuth.ts
@@ -1,6 +1,5 @@
 export const useAuth = () => {
     const config = useRuntimeConfig()
-    const router = useRouter()
 
     const login = async (email: string, password: string) => {
         await $fetch('/sanctum/csrf-cookie', {
@@ -8,12 +7,12 @@ export const useAuth = () => {
             credentials: 'include',
         })
         await $api('/api/login', {method: 'POST', body: {email, password}})
-        await router.push('/')
+        await navigateTo('/')
     }
 
     const logout = async () => {
         await $api('/api/logout', {method: 'POST'})
-        await router.push('/')
+        await navigateTo('/auth/login')
     }
 
     return {login, logout}
diff --git a/app/layouts/auth.vue b/app/layouts/auth.vue
new file mode 100644
index 0000000..864a55c
--- /dev/null
+++ b/app/layouts/auth.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="auth-container">
+    <slot/>
+  </div>
+</template>
+
+<style scoped>
+.auth-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  padding: 1rem;
+}
+</style>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index d2b618b..a4d279a 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -16,4 +16,10 @@
   max-width: 1280px;
 }
 
+@media (max-width: 740px) {
+  .container {
+    padding: 0.5rem;
+  }
+}
+
 </style>
\ No newline at end of file
diff --git a/app/middleware/auth.global.ts b/app/middleware/auth.global.ts
new file mode 100644
index 0000000..3212b86
--- /dev/null
+++ b/app/middleware/auth.global.ts
@@ -0,0 +1,9 @@
+export default defineNuxtRouteMiddleware((to) => {
+    const publicRoutes = ['/auth/login']
+    if (publicRoutes.includes(to.path)) return
+
+    const xsrfToken = useCookie('XSRF-TOKEN')
+    if (!xsrfToken.value) {
+        return navigateTo('/auth/login')
+    }
+})
diff --git a/app/pages/auth/login.vue b/app/pages/auth/login.vue
index 576b08c..6f800ce 100644
--- a/app/pages/auth/login.vue
+++ b/app/pages/auth/login.vue
@@ -1,6 +1,9 @@
 <script lang="ts" setup>
-
 import LoginForm from "~/components/forms/auth/login-form.vue";
+
+definePageMeta({
+  layout: 'auth'
+})
 </script>
 
 <template>
diff --git a/app/pages/lists/[id].vue b/app/pages/lists/[id].vue
index b6cdef5..ad92ee6 100644
--- a/app/pages/lists/[id].vue
+++ b/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>
diff --git a/app/pages/lists/index.vue b/app/pages/lists/index.vue
index 19b8022..5b62bb8 100644
--- a/app/pages/lists/index.vue
+++ b/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>
\ No newline at end of file
diff --git a/app/types/list.ts b/app/types/list.ts
deleted file mode 100644
index bf31735..0000000
--- a/app/types/list.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import {type ListSettings} from "~/types/list-settings";
-
-export type List = {
-    id: number,
-    name: string
-    isPublic: boolean
-    listSettings: ListSettings
-}
-
diff --git a/app/types/movie-critic-score.ts b/app/types/movie-critic-score.ts
new file mode 100644
index 0000000..186196f
--- /dev/null
+++ b/app/types/movie-critic-score.ts
@@ -0,0 +1,5 @@
+export type MovieCriticScore = {
+    Source: string
+    Value: string
+}
+
diff --git a/app/types/list-settings.ts b/app/types/movie-list-settings.ts
similarity index 85%
rename from app/types/list-settings.ts
rename to app/types/movie-list-settings.ts
index 80cbd52..4263788 100644
--- a/app/types/list-settings.ts
+++ b/app/types/movie-list-settings.ts
@@ -1,7 +1,7 @@
 import type {Collaborator} from "~/types/collaborator";
 import type {Role} from "~/types/role";
 
-export type ListSettings = {
+export type MovieListSettings = {
     listName: string,
     isPublic: boolean,
     collaborators: Collaborator[],
diff --git a/app/types/movie-list.ts b/app/types/movie-list.ts
new file mode 100644
index 0000000..ce4f3f8
--- /dev/null
+++ b/app/types/movie-list.ts
@@ -0,0 +1,11 @@
+import {type MovieListSettings} from "~/types/movie-list-settings";
+import type {Movie} from "~/types/movie";
+
+export type MovieList = {
+    id: number,
+    name: string
+    is_public: boolean
+    movieListSettings: MovieListSettings
+    movies: Movie[]
+}
+
diff --git a/app/types/movie-search-results.ts b/app/types/movie-search-results.ts
new file mode 100644
index 0000000..0c02739
--- /dev/null
+++ b/app/types/movie-search-results.ts
@@ -0,0 +1,8 @@
+export type MovieSearchResult = {
+    title: string
+    year: number
+    imdbId: string
+    type: string
+    poster: string
+}
+
diff --git a/app/types/movie.ts b/app/types/movie.ts
index 07032ee..220f57c 100644
--- a/app/types/movie.ts
+++ b/app/types/movie.ts
@@ -1,6 +1,7 @@
 export type Movie = {
     id: number,
     title: string
+    year: number
     imdb_id: string
     director: string
     actors: string