From 2193064f3a855fb2810fd77770dd871518b3c029 Mon Sep 17 00:00:00 2001
From: "Edward Tirado Jr." <ed@etdevelopment.net>
Date: Sun, 13 Jul 2025 00:09:58 -0500
Subject: [PATCH] added scroll to top button

---
 .../{ => common/menus}/ProfileMenu.vue        |   0
 .../common/navigation/ScrollToTop.vue         |  46 ++++++
 src/components/common/navigation/navbar.vue   |   1 +
 src/pages/lists/[id].vue                      | 146 +++++++++---------
 4 files changed, 124 insertions(+), 69 deletions(-)
 rename src/components/{ => common/menus}/ProfileMenu.vue (100%)
 create mode 100644 src/components/common/navigation/ScrollToTop.vue

diff --git a/src/components/ProfileMenu.vue b/src/components/common/menus/ProfileMenu.vue
similarity index 100%
rename from src/components/ProfileMenu.vue
rename to src/components/common/menus/ProfileMenu.vue
diff --git a/src/components/common/navigation/ScrollToTop.vue b/src/components/common/navigation/ScrollToTop.vue
new file mode 100644
index 0000000..62c2753
--- /dev/null
+++ b/src/components/common/navigation/ScrollToTop.vue
@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+//const props = defineProps(['show']);
+const showScroll = ref(false);
+const updateScrollPosition = () => {
+  showScroll.value = document.documentElement.scrollTop > 1500;
+};
+const scrollToTop = () => {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth",
+  });
+};
+
+onMounted(() => {
+  window.addEventListener("scroll", updateScrollPosition);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", updateScrollPosition);
+});
+</script>
+
+<template>
+  <span v-if="showScroll" class="floater overlay-text" @click="scrollToTop">
+    Scroll To Top
+  </span>
+</template>
+
+<style scoped>
+.floater {
+  display: block;
+  position: fixed;
+  right: 10px;
+  bottom: 10px;
+  z-index: 1000;
+  cursor: pointer;
+  background-color: rgba(112, 128, 144, 0.8);
+  padding: 1rem;
+  border-radius: 10px;
+}
+
+.overlay-text {
+  color: white;
+  text-shadow: 1px 1px #6f0b51;
+}
+</style>
diff --git a/src/components/common/navigation/navbar.vue b/src/components/common/navigation/navbar.vue
index ff470d0..87f1008 100644
--- a/src/components/common/navigation/navbar.vue
+++ b/src/components/common/navigation/navbar.vue
@@ -24,6 +24,7 @@
 
 <script lang="ts" setup>
 import { hasToken } from "~/composables/hasToken";
+import ProfileMenu from "~/components/common/menus/ProfileMenu.vue";
 
 const authenticated = computed(() => hasToken());
 </script>
diff --git a/src/pages/lists/[id].vue b/src/pages/lists/[id].vue
index 270ebc6..0fb7de4 100644
--- a/src/pages/lists/[id].vue
+++ b/src/pages/lists/[id].vue
@@ -1,75 +1,81 @@
 <template>
-  <LoadingIcon v-if="loading" show-quote="true" />
-  <div v-else class="p-5 sm:p-0">
-    <Modal ref="movie_modal">
-      <ShowMovie
-        v-if="modal_movie"
-        :movie="modal_movie"
-        :updating="updating"
-        @close-modal="closeModal"
-        @update-movie="updateMovie(modal_movie)"
-      ></ShowMovie>
-    </Modal>
-    <h2 class="text-xl font-bold pb-5">{{ list.name }}</h2>
-    <div
-      v-if="movies.length > 1 && !loading"
-      class="grid grid-cols-2 rounded movie-card neon-border p-5"
-    >
-      <div>
-        <ul class="flex flex-row">
-          <li>
-            <label class="mr-2" for="hide_scheduled">Hide Scheduled</label>
-            <input
-              id="hide_scheduled"
-              v-model="hide_scheduled"
-              type="checkbox"
-              @change="hideScheduled"
-            />
-          </li>
-        </ul>
-      </div>
-      <input
-        v-model="movie_query"
-        class="p-1 rounded"
-        placeholder="Filter Movies"
-        type="text"
-        @input="filterMovies"
-      />
-    </div>
-
-    <div v-if="movies.length < 1 && !loading" class="mt-10 flex gap-5 flex-col">
-      No Movies Found
-      <MovieQuote />
-    </div>
-    <!-- MOVIE LIST -->
-    <ul
-      v-else
-      class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2 mt-5"
-    >
-      <li
-        v-for="movie in filtered_movies"
-        :key="movie.poster"
-        class="rounded movie-card neon-border flex flex-col overflow-hidden"
+  <div>
+    <LoadingIcon v-if="loading" show-quote="true" />
+    <div v-else class="p-5 sm:p-0">
+      <ScrollToTop></ScrollToTop>
+      <Modal ref="movie_modal">
+        <ShowMovie
+          v-if="modal_movie"
+          :movie="modal_movie"
+          :updating="updating"
+          @close-modal="closeModal"
+          @update-movie="updateMovie(modal_movie)"
+        ></ShowMovie>
+      </Modal>
+      <h2 class="text-xl font-bold pb-5">{{ list.name }}</h2>
+      <div
+        v-if="movies.length > 1 && !loading"
+        class="grid grid-cols-2 rounded movie-card neon-border p-5"
       >
-        <!-- POSTER -->
-        <MoviePoster
-          :image="movie.poster"
-          class="flex-shrink-0"
-          @click="showModal(movie)"
-        />
-        <div class="p-5 flex flex-col justify-between flex-1">
-          <!-- TITLE -->
-          <span class="font-bold text-center mb-1">{{ movie.title }}</span>
-          <span
-            v-if="logged_in"
-            class="text-center hover-pointer"
-            @click="removeMovie(movie.imdb_id)"
-          >
-            X
-          </span>
+        <div>
+          <ul class="flex flex-row">
+            <li>
+              <label class="mr-2" for="hide_scheduled">Hide Scheduled</label>
+              <input
+                id="hide_scheduled"
+                v-model="hide_scheduled"
+                type="checkbox"
+                @change="hideScheduled"
+              />
+            </li>
+          </ul>
         </div>
-      </li>
-    </ul>
+        <input
+          v-model="movie_query"
+          class="p-1 rounded"
+          placeholder="Filter Movies"
+          type="text"
+          @input="filterMovies"
+        />
+      </div>
+
+      <div
+        v-if="movies.length < 1 && !loading"
+        class="mt-10 flex gap-5 flex-col"
+      >
+        No Movies Found
+        <MovieQuote />
+      </div>
+      <!-- MOVIE LIST -->
+      <ul
+        v-else
+        class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2 mt-5"
+      >
+        <li
+          v-for="movie in filtered_movies"
+          :key="movie.poster"
+          class="rounded movie-card neon-border flex flex-col overflow-hidden"
+        >
+          <!-- POSTER -->
+          <MoviePoster
+            :image="movie.poster"
+            class="flex-shrink-0"
+            @click="showModal(movie)"
+          />
+          <div class="p-5 flex flex-col justify-between flex-1">
+            <!-- TITLE -->
+            <span class="font-bold text-center mb-1">{{ movie.title }}</span>
+            <span
+              v-if="logged_in"
+              class="text-center hover-pointer"
+              @click="removeMovie(movie.imdb_id)"
+            >
+              X
+            </span>
+          </div>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
@@ -82,6 +88,7 @@ import Modal from "~/components/common/ui/Modal.vue";
 import { useCookie } from "#app";
 import { $fetch } from "ofetch";
 import MoviePoster from "~/components/MoviePoster.vue";
+import ScrollToTop from "~/components/common/navigation/ScrollToTop.vue";
 
 const list_id = ref(0);
 const list = defineModel<MovieList>("movie_list", { default: [] });
@@ -238,6 +245,7 @@ onMounted(() => {
   const route = useRoute();
   if (typeof route.params.id === "string") {
     const list_param: string = route.params.id;
+
     list_id.value = parseInt(list_param);
     getList(list_id.value);
   }