app/components/common/card.vue

@@ -17,4 +17,10 @@
   border-radius: 0.5rem;
 }
 
+@media (max-width: 640px) {
+  .card {
+    padding: 1rem;
+  }
+}
+
 </style>

app/components/common/combo-box.vue

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

app/components/common/input-action.vue

@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+const model = defineModel<string>({default: ''});
+
+defineProps<{
+  placeholder: string
+  buttonText: string
+  inputName: string
+}>()
+
+const emit = defineEmits(['action'])
+
+</script>
+
+<template>
+  <div class="form-group">
+    <input v-model="model"
+           :name="inputName"
+           :placeholder="placeholder"
+           type="text">
+    <button @click="emit('action')">{{ buttonText }}</button>
+  </div>
+
+</template>
+
+<style scoped>
+button {
+  background-color: #4caf50;
+  color: white;
+  padding: .5rem 1rem;
+  border: none;
+  border-radius: 0 4px 4px 0;
+}
+
+input {
+  padding: .5rem;
+  border: 1px solid #ccc;
+  border-right: none;
+  border-radius: 4px 0 0 4px;
+  flex: 1;
+}
+
+.form-group {
+  display: flex;
+}
+
+
+</style>

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

@@ -10,12 +10,22 @@ const handleLogin = () => login(email.value, password.value)
   <form class="password-form" @submit.prevent="handleLogin">
     <div class="form-group">
       <label for="email">Email</label>
-      <input id="email" v-model="email" type="email"/>
+      <input
+          id="email"
+          v-model="email"
+          autocomplete="email"
+          type="email"
+      />
     </div>
 
     <div class="form-group">
       <label for="password">Password</label>
-      <input id="password" v-model="password" type="password"/>
+      <input
+          id="password"
+          v-model="password"
+          autocomplete="current-password"
+          type="password"
+      />
     </div>
 
     <button type="submit">Submit</button>

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

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import InputAction from "~/components/common/input-action.vue";
+
 const emit = defineEmits(['refreshLists']);
 const refreshLists = () => emit('refreshLists');
 const listName = ref("");
@@ -20,14 +22,13 @@ const createList = () => {
 
 <template>
   <form @submit.prevent="createList">
-    <label for="list_name">Add MovieList</label>
+    <label for="list_name">Add List</label>
-    <div class="form-group">
+    <InputAction
-      <input v-model="listName"
+        v-model="listName"
-             name="list_name"
+        :buttonText="'Add'"
-             placeholder="MovieList Name"
+        :inputName="'list_name'"
-             type="text">
+        :placeholder="'List Name'"
-      <button>Add</button>
+    />
-    </div>
   </form>
 </template>
 <style scoped>
@@ -35,26 +36,12 @@ const createList = () => {
 form {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
 }
 
-button {
-  background-color: #4caf50;
-  color: white;
-  padding: .5rem 1rem;
-  border: none;
-  border-radius: 0 4px 4px 0;
-}
-
-input {
-  padding: .5rem;
-  border: 1px solid #ccc;
-  border-right: none;
-  border-radius: 4px 0 0 4px;
-}
 
 label {
   font-weight: bold;
 }
 
+
 </style>

app/components/header.vue

@@ -1,3 +1,5 @@
+<script lang="ts" setup>
+</script>
 <template>
   <nav class="header">
     <span class="logo">
@@ -28,6 +30,9 @@
   gap: 1rem;
   font: bold 1.5rem sans-serif;
   justify-content: center;
+  margin-bottom: 2rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+  padding: 1rem 0;
 }
 
 .links {

app/components/list-settings.vue

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
 import type {MovieList} from "~/types/movie-list";
 import Card from "~/components/common/card.vue";
+import InputAction from "~/components/common/input-action.vue";
 
-const emit = defineEmits(['back-to-list', 'update-list'])
+defineEmits(['back-to-list', 'update-list'])
 const props = defineProps<{
   list: MovieList
 }>()
@@ -45,7 +46,7 @@ const deleteList = () => {
 </script>
 
 <template>
-  <Card>
+  <Card class="card">
     <div class="settings-header">
       <div @click="$emit('back-to-list')">
         <Icon name="solar:arrow-left-linear"/>
@@ -56,11 +57,13 @@ const deleteList = () => {
     <ul class="settings-list">
       <li class="list-setting">
         <label for="list-name-input">MovieList Name</label>
-
+        <InputAction
-        <div>
+            v-model="localName"
-          <input id="list-name-input" v-model="localName" type="text"/>
+            buttonText="Save"
-          <button @click="$emit('update-list', { ...list, name: localName })">Save</button>
+            inputName="list-name-input"
-        </div>
+            placeholder="List Name"
+            @action="$emit('update-list', { ...list, name: localName })"
+        />
       </li>
       <li class="list-setting-row">
         <label for="make-list-public">Make list public</label>
@@ -170,4 +173,6 @@ details ul > li {
 details ul > li:not(:last-child) {
   border-bottom: none;
 }
+
+
 </style>

app/components/movie-list.vue

@@ -194,7 +194,7 @@ const isSortActive = (field: SortField, direction: SortDirection): boolean => {
 .movie-list {
   display: grid;
   /*grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));*/
-  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(14em, 1fr));
   gap: 1rem;
 }
 
@@ -251,7 +251,7 @@ const isSortActive = (field: SortField, direction: SortDirection): boolean => {
 
   .list-controls {
     width: 100%;
-    border-bottom: 2px solid black;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
     padding-bottom: 1rem;
   }
 

app/components/panels/movie-search.vue

@@ -1,7 +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";
+import type {ResourceResponse} from "@/types/api";
 
 const emit = defineEmits(['add-movie']);
 const props = defineProps<{
@@ -12,10 +12,10 @@ const searchQuery = ref("");
 
 const movies = ref<MovieSearchResult[]>([]);
 const searchMovies = () => {
-  $api<MovieSearchResult[]>(`/api/movies/search/${searchQuery.value}`, {
+  $api<ResourceResponse<MovieSearchResult[]>>(`/api/movies/search/${searchQuery.value}`, {
     method: "GET"
-  }).then((data) => {
+  }).then((response) => {
-    movies.value = data.results
+    movies.value = response.data
   }).catch((error) => {
     alert(error.message)
   });

app/composables/$api.ts

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

app/pages/lists/index.vue

@@ -20,10 +20,9 @@ const refreshLists = () => {
   <div class="content">
     <PageTitle title="Lists"/>
     <Card class="card">
-      <CreateListForm @refreshLists="refreshLists"/>
 
-      <div class="w-full flex flex-col gap-5">
+      <div class="user-list-container">
-        <h2 class="text-2xl font-bold">Your Lists</h2>
+        <h2 class="">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"
@@ -35,10 +34,11 @@ const refreshLists = () => {
             </NuxtLink>
           </li>
         </ul>
+        <CreateListForm @refreshLists="refreshLists"/>
       </div>
 
-      <div class="w-full flex flex-col gap-5">
+      <div>
-        <h2 class="text-2xl font-bold">Shared With You</h2>
+        <h2>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"
@@ -60,7 +60,7 @@ const refreshLists = () => {
 .card {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 2rem;
 }
 
 .movie-list {
@@ -91,4 +91,10 @@ const refreshLists = () => {
   padding: 1em 0;
 }
 
+.user-list-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
 </style>