From 629e950e603f83f7d22f33fff70a8455a0aa791d Mon Sep 17 00:00:00 2001
From: "Edward Tirado Jr." <ed@etdevelopment.net>
Date: Tue, 24 Feb 2026 00:30:07 -0600
Subject: [PATCH 1/3] lists page now pulls real data

---
 app/components/forms/create-list-form.vue | 24 +++++++++++++++++++++--
 app/pages/lists/index.vue                 | 16 ++++++++++++---
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/app/components/forms/create-list-form.vue b/app/components/forms/create-list-form.vue
index eb20088..b1f6762 100644
--- a/app/components/forms/create-list-form.vue
+++ b/app/components/forms/create-list-form.vue
@@ -1,12 +1,32 @@
 <script lang="ts" setup>
+const emit = defineEmits(['refreshLists']);
+const refreshLists = () => emit('refreshLists');
+const listName = ref("");
 
+const createList = () => {
+  $api('/api/movielists', {
+    body: {
+      name: listName.value,
+    },
+    method: "POST"
+  }).then(() => {
+    listName.value = "";
+    refreshLists();
+  }).catch((error) => {
+    if (error.response?.status === 401) {
+      useAuth().logout();
+    }
+    alert(error.message)
+  });
+}
 </script>
 
 <template>
-  <form>
+  <form @submit.prevent="createList">
     <label for="list_name">Add List</label>
     <div>
-      <input class="" name="list_name"
+      <input v-model="listName"
+             name="list_name"
              placeholder="List Name"
              type="text">
       <button>Add</button>
diff --git a/app/pages/lists/index.vue b/app/pages/lists/index.vue
index 133a2bd..8d98fae 100644
--- a/app/pages/lists/index.vue
+++ b/app/pages/lists/index.vue
@@ -2,19 +2,29 @@
 
 import PageTitle from "~/components/common/page-title.vue";
 import CreateListForm from "~/components/forms/create-list-form.vue";
+import type {List} from "~/types/list";
+
+const {data: lists, refresh} = await useApiData<List[]>("/api/movielists")
+
+const refreshLists = () => {
+  refresh()
+}
+
 </script>
 
 <template>
   <PageTitle title="Lists"/>
 
   <div class="content">
-    <CreateListForm/>
+    <CreateListForm @refreshLists="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">
-        <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/1">List 1</NuxtLink>
+        <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>
         </li>
       </ul>
     </div>

From 26291062c0c33e89b13758eed3c4c2b9d1d0c58e Mon Sep 17 00:00:00 2001
From: "Edward Tirado Jr." <ed@etdevelopment.net>
Date: Tue, 24 Feb 2026 00:30:26 -0600
Subject: [PATCH 2/3] lists page now pulls real data

---
 app/pages/lists/index.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/pages/lists/index.vue b/app/pages/lists/index.vue
index 8d98fae..d7d5c75 100644
--- a/app/pages/lists/index.vue
+++ b/app/pages/lists/index.vue
@@ -29,14 +29,15 @@ 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">
-        <li class="flex justify-between items-center p-4 bg-gray-700/50 rounded-lg hover:bg-gray-600/50 transition-colors">
+        <li v-for="list in lists.share" 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>
         </li>
       </ul>
     </div>
+    -->
   </div>
 
 </template>

From 66eddb56bf2e04001d1d6205488dcb7a428baccf Mon Sep 17 00:00:00 2001
From: "Edward Tirado Jr." <ed@etdevelopment.net>
Date: Tue, 24 Feb 2026 00:31:42 -0600
Subject: [PATCH 3/3] removed unused v-for

---
 app/pages/lists/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/lists/index.vue b/app/pages/lists/index.vue
index d7d5c75..19b8022 100644
--- a/app/pages/lists/index.vue
+++ b/app/pages/lists/index.vue
@@ -32,7 +32,7 @@ const refreshLists = () => {
     <!-- <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 v-for="list in lists.share" class="flex justify-between items-center p-4 bg-gray-700/50 rounded-lg hover:bg-gray-600/50 transition-colors">
+        <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>
         </li>
       </ul>