initial commit

app/pages/account.vue

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+
+import PageTitle from "~/components/common/page-title.vue";
+import PasswordResetForm from "~/components/forms/password-reset-form.vue";
+import ProfileForm from "~/components/forms/profile-form.vue";
+</script>
+
+<template>
+  <PageTitle title="Account Settings"/>
+
+  <div class="password-settings settings-section">
+    <h2>Reset Password</h2>
+    <PasswordResetForm/>
+
+
+  </div>
+
+  <div class="profile-settings settings-section">
+    <div class="profile-header">
+      <h2>Profile</h2>
+      <span class="public-profile-link">View Public Profile</span>
+    </div>
+
+    <ProfileForm/>
+  </div>
+
+</template>
+
+<style scoped>
+
+.profile-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.public-profile-link {
+  color: #007bff;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin: 1rem 0;
+}
+
+.settings-section {
+  margin: 2rem 0;
+}
+
+</style>

app/pages/index.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import PageTitle from "~/components/common/page-title.vue";
+
+const user = "Eddie";
+const welcomeMessage = computed(() => `Welcome, ${user}!`)
+</script>
+
+<template>
+  <PageTitle :title="welcomeMessage"/>
+
+  <div class="content">
+    <div>
+      <h2>Next up</h2>
+      <span>Nothing Scheduled :(</span>
+    </div>
+
+    <div>
+      <h2>Activity Feed</h2>
+      <ul>
+        <li>Ed created a list: "Best of 2023"</li>
+        <li>Ed added a movie to "Best of 2023": "The Dark Knight"</li>
+        <li>Ed added a movie to "Best of 2023": "The Dark Knight Rises"</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.page-title {
+  margin: 1rem 0;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+</style>

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>