From e29ad4a83bfc37b18df033d6dd476d88b416dcaa Mon Sep 17 00:00:00 2001
From: Julius Volz <julius.volz@gmail.com>
Date: Thu, 14 Mar 2024 12:01:19 +0100
Subject: [PATCH] Add "Scroll to Top" component

Signed-off-by: Julius Volz <julius.volz@gmail.com>
---
 web/ui/mantine-ui/src/App.tsx | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/web/ui/mantine-ui/src/App.tsx b/web/ui/mantine-ui/src/App.tsx
index ae8e08899..48a670cd6 100644
--- a/web/ui/mantine-ui/src/App.tsx
+++ b/web/ui/mantine-ui/src/App.tsx
@@ -7,6 +7,7 @@ import PrometheusLogo from "./images/prometheus-logo.svg";
 
 import {
   ActionIcon,
+  Affix,
   AppShell,
   Box,
   Burger,
@@ -16,12 +17,14 @@ import {
   Menu,
   Skeleton,
   Text,
+  Transition,
   createTheme,
   rem,
 } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
+import { useDisclosure, useWindowScroll } from "@mantine/hooks";
 import {
   IconAdjustments,
+  IconArrowUp,
   IconBellFilled,
   IconChevronDown,
   IconChevronRight,
@@ -169,6 +172,7 @@ const navLinkIconSize = 15;
 const navLinkXPadding = "md";
 
 function App() {
+  const [scroll, scrollTo] = useWindowScroll();
   const [opened, { toggle }] = useDisclosure();
   const { agentMode } = useContext(SettingsContext);
 
@@ -373,6 +377,23 @@ function App() {
                   </Routes>
                 </Suspense>
               </ErrorBoundary>
+              <Affix position={{ bottom: 20, right: 20 }}>
+                <Transition transition="slide-up" mounted={scroll.y > 0}>
+                  {(transitionStyles) => (
+                    <Button
+                      leftSection={
+                        <IconArrowUp
+                          style={{ width: rem(16), height: rem(16) }}
+                        />
+                      }
+                      style={transitionStyles}
+                      onClick={() => scrollTo({ y: 0 })}
+                    >
+                      Scroll to top
+                    </Button>
+                  )}
+                </Transition>
+              </Affix>
             </AppShell.Main>
           </AppShell>
           {/* <ReactQueryDevtools initialIsOpen={false} /> */}