From 6dcfa52a71a5a259de8e4dace58f223c49ae8023 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 29 Jan 2024 18:51:29 -0600
Subject: [PATCH] add `ScrollToTopButton` to `HistoryScrollList`

---
 client/src/components/History/HistoryScrollList.vue   | 8 +++++++-
 client/src/components/ToolsList/ScrollToTopButton.vue | 1 +
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/client/src/components/History/HistoryScrollList.vue b/client/src/components/History/HistoryScrollList.vue
index a2a69921fb09..c8a6b5a82d5b 100644
--- a/client/src/components/History/HistoryScrollList.vue
+++ b/client/src/components/History/HistoryScrollList.vue
@@ -21,6 +21,7 @@ import { HistoriesFilters } from "./HistoriesFilters";
 import TextSummary from "../Common/TextSummary.vue";
 import Heading from "@/components/Common/Heading.vue";
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
+import ScrollToTopButton from "@/components/ToolsList/ScrollToTopButton.vue";
 import UtcDate from "@/components/UtcDate.vue";
 
 type AdditionalOptions = "set-current" | "multi" | "center";
@@ -58,7 +59,7 @@ const validFilter = computed(() => props.filter && props.filter.length > 2);
 const allLoaded = computed(() => totalHistoryCount.value <= filtered.value.length);
 
 // check if we have scrolled to the top or bottom of the scrollable div
-const { arrived } = useAnimationFrameScroll(scrollableDiv);
+const { arrived, scrollTop } = useAnimationFrameScroll(scrollableDiv);
 const isScrollable = ref(false);
 useAnimationFrameResizeObserver(scrollableDiv, ({ clientSize, scrollSize }) => {
     isScrollable.value = scrollSize.height >= clientSize.height + 1;
@@ -157,6 +158,10 @@ function historyClicked(history: HistorySummary) {
     }
 }
 
+function scrollToTop() {
+    scrollableDiv.value?.scrollTo({ top: 0, behavior: "smooth" });
+}
+
 const router = useRouter();
 
 function setCurrentHistory(history: HistorySummary) {
@@ -325,6 +330,7 @@ async function loadMore(noScroll = false) {
                     </div>
                 </BListGroup>
             </div>
+            <ScrollToTopButton :offset="scrollTop" @click="scrollToTop" />
         </div>
 
         <div :class="!isMultiviewPanel && 'd-flex flex-row mt-3'">
diff --git a/client/src/components/ToolsList/ScrollToTopButton.vue b/client/src/components/ToolsList/ScrollToTopButton.vue
index 04694b2dea4b..34b5d8d6fbc5 100644
--- a/client/src/components/ToolsList/ScrollToTopButton.vue
+++ b/client/src/components/ToolsList/ScrollToTopButton.vue
@@ -35,6 +35,7 @@ export default {
     position: absolute;
     opacity: 0;
     transition: opacity 0.4s;
+    z-index: 1000;
 
     &.show {
         opacity: 1;