From a8488f111f079fa32e20192fec2849273061dff1 Mon Sep 17 00:00:00 2001
From: "Edward Tirado Jr." <ed@etdevelopment.net>
Date: Wed, 8 Apr 2026 19:04:15 -0500
Subject: [PATCH] cleaned up mobile styling and updated input action component

---
 app/components/common/card.vue            |  6 +++
 app/components/common/combo-box.vue       | 11 ------
 app/components/common/input-action.vue    | 47 +++++++++++++++++++++++
 app/components/forms/auth/login-form.vue  | 14 ++++++-
 app/components/forms/create-list-form.vue | 33 +++++-----------
 app/components/header.vue                 |  5 +++
 app/components/list-settings.vue          | 19 +++++----
 app/components/movie-list.vue             |  4 +-
 app/components/panels/movie-search.vue    |  8 ++--
 app/composables/$api.ts                   |  3 +-
 app/pages/lists/index.vue                 | 18 ++++++---
 11 files changed, 112 insertions(+), 56 deletions(-)
 delete mode 100644 app/components/common/combo-box.vue
 create mode 100644 app/components/common/input-action.vue

diff --git a/app/components/common/card.vue b/app/components/common/card.vue
index 32bc1ff..5d8cf64 100644
--- a/app/components/common/card.vue
+++ b/app/components/common/card.vue
@@ -17,4 +17,10 @@
   border-radius: 0.5rem;
 }
 
+@media (max-width: 640px) {
+  .card {
+    padding: 1rem;
+  }
+}
+
 </style>
\ No newline at end of file
diff --git a/app/components/common/combo-box.vue b/app/components/common/combo-box.vue
deleted file mode 100644
index 27324a8..0000000
--- a/app/components/common/combo-box.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script lang="ts" setup>
-
-</script>
-
-<template>
-
-</template>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/app/components/common/input-action.vue b/app/components/common/input-action.vue
new file mode 100644
index 0000000..1700c64
--- /dev/null
+++ b/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>
\ 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 b25f8ab..3b0a8fc 100644
--- a/app/components/forms/auth/login-form.vue
+++ b/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>
diff --git a/app/components/forms/create-list-form.vue b/app/components/forms/create-list-form.vue
index c3d657a..a2e0e22 100644
--- a/app/components/forms/create-list-form.vue
+++ b/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>
-    <div class="form-group">
-      <input v-model="listName"
-             name="list_name"
-             placeholder="MovieList Name"
-             type="text">
-      <button>Add</button>
-    </div>
+    <label for="list_name">Add List</label>
+    <InputAction
+        v-model="listName"
+        :buttonText="'Add'"
+        :inputName="'list_name'"
+        :placeholder="'List Name'"
+    />
   </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>
\ No newline at end of file
diff --git a/app/components/header.vue b/app/components/header.vue
index 095f01e..5744a46 100644
--- a/app/components/header.vue
+++ b/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 {
diff --git a/app/components/list-settings.vue b/app/components/list-settings.vue
index b50429f..15b3cc6 100644
--- a/app/components/list-settings.vue
+++ b/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>
-
-        <div>
-          <input id="list-name-input" v-model="localName" type="text"/>
-          <button @click="$emit('update-list', { ...list, name: localName })">Save</button>
-        </div>
+        <InputAction
+            v-model="localName"
+            buttonText="Save"
+            inputName="list-name-input"
+            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>
\ No newline at end of file
diff --git a/app/components/movie-list.vue b/app/components/movie-list.vue
index 3c04303..bd03961 100644
--- a/app/components/movie-list.vue
+++ b/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;
   }
 
diff --git a/app/components/panels/movie-search.vue b/app/components/panels/movie-search.vue
index 58fa3c5..a42561c 100644
--- a/app/components/panels/movie-search.vue
+++ b/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) => {
-    movies.value = data.results
+  }).then((response) => {
+    movies.value = response.data
   }).catch((error) => {
     alert(error.message)
   });
diff --git a/app/composables/$api.ts b/app/composables/$api.ts
index abfd25b..edb08cc 100644
--- a/app/composables/$api.ts
+++ b/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,
diff --git a/app/pages/lists/index.vue b/app/pages/lists/index.vue
index 0e66185..891f85b 100644
--- a/app/pages/lists/index.vue
+++ b/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">
-        <h2 class="text-2xl font-bold">Your Lists</h2>
+      <div class="user-list-container">
+        <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">
-        <h2 class="text-2xl font-bold">Shared With You</h2>
+      <div>
+        <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>
\ No newline at end of file