initial commit

app/pages/lists/[id].vue

@@ -0,0 +1,70 @@
+<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 MovieDetails from "~/components/panels/movie-details.vue";
+
+const settingsActive = ref(false);
+const movieSearchActive = ref(false);
+const toggleSettings = () => settingsActive.value = !settingsActive.value
+const toggleMovieSearch = () => movieSearchActive.value = !movieSearchActive.value
+
+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 movies: Movie[] = []
+</script>
+
+<template>
+  <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="movies"
+      @movie-clicked="selectedMovie = $event"
+      @add-movie="toggleMovieSearch"
+  />
+
+  <SlideoutPanel :open="!!selectedMovie" @close="selectedMovie = null">
+    <MovieDetails v-if="selectedMovie" :selectedMovie="selectedMovie"/>
+  </SlideoutPanel>
+
+  <SlideoutPanel :open="movieSearchActive" class="movie-search-panel"
+                 @close="movieSearchActive = false">
+    <p>Movie Search</p>
+  </SlideoutPanel>
+
+</template>
+
+<style scoped>
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.settings-icon {
+  cursor: pointer;
+  font-size: 1.5rem;
+}
+</style>

app/pages/lists/index.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+
+import PageTitle from "~/components/common/page-title.vue";
+import CreateListForm from "~/components/forms/create-list-form.vue";
+</script>
+
+<template>
+  <PageTitle title="Lists"/>
+
+  <div class="content">
+    <CreateListForm/>
+
+    <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>
+      </ul>
+    </div>
+
+    <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">
+          <NuxtLink to="lists/2">Bob's List</NuxtLink>
+        </li>
+      </ul>
+    </div>
+  </div>
+
+</template>
+
+<style scoped>
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+</style>