From a0e242e57c40256a1a3ecc834bc9ed0ee1df1ad8 Mon Sep 17 00:00:00 2001
From: Sagar Hedaoo <sagarhedaoo@gmail.com>
Date: Thu, 30 May 2024 02:50:05 -0400
Subject: [PATCH] Added Scroll to top feature

---
 .../components/Previewer/Device/Toolbar.tsx   | 12 ++++
 .../components/Previewer/Device/index.tsx     | 55 +++++++++++++++++++
 2 files changed, 67 insertions(+)

diff --git a/desktop-app/src/renderer/components/Previewer/Device/Toolbar.tsx b/desktop-app/src/renderer/components/Previewer/Device/Toolbar.tsx
index c77023ba..e58fa48b 100644
--- a/desktop-app/src/renderer/components/Previewer/Device/Toolbar.tsx
+++ b/desktop-app/src/renderer/components/Previewer/Device/Toolbar.tsx
@@ -138,6 +138,15 @@ const Toolbar = ({
     onRotate(!rotated);
   };
 
+  const scrollToTop = () => {
+    if (webview) {
+      webview.executeJavaScript(
+        'window.scrollTo({ top: 0, behavior: "smooth" })',
+        false
+      );
+    }
+  };
+
   return (
     <div className="flex items-center justify-between gap-1">
       <div className="my-1 inline-flex max-w-[75%] items-center gap-1 overflow-x-auto">
@@ -190,6 +199,9 @@ const Toolbar = ({
         <Button onClick={toggleRulers} title="Show rulers">
           <Icon icon="tdesign:measurement-1" />
         </Button>
+        <Button onClick={scrollToTop} title="Scroll to Top">
+          <Icon icon="ic:baseline-arrow-upward" />
+        </Button>
         <ColorBlindnessTools webview={webview} />
       </div>
       <Button
diff --git a/desktop-app/src/renderer/components/Previewer/Device/index.tsx b/desktop-app/src/renderer/components/Previewer/Device/index.tsx
index fd289266..6f502522 100644
--- a/desktop-app/src/renderer/components/Previewer/Device/index.tsx
+++ b/desktop-app/src/renderer/components/Previewer/Device/index.tsx
@@ -495,6 +495,61 @@ const Device = ({ isPrimary, device, setIndividualDevice }: Props) => {
   const scaledHeight = height * zoomfactor;
   const scaledWidth = width * zoomfactor;
 
+  useEffect(() => {
+    const webview = ref.current;
+    if (!webview) return;
+
+    const injectScrollToTopButton = () => {
+      webview
+        .executeJavaScript(`document.readyState`, false)
+        .then((readyState) => {
+          if (readyState !== 'complete') {
+            throw new Error('Document not ready for injection.');
+          }
+
+          const buttonHTML = `
+            <button id="scrollToTopButton" style="position: fixed; right: 20px; bottom: 20px; z-index: 1000; padding: 10px 15px; font-size: 16px; border: none; background-color: #007BFF; color: white; border-radius: 5px; cursor: pointer; opacity: 0; transition: opacity 0.5s;">
+              ↑
+            </button>
+          `;
+          const script = `
+            document.body.insertAdjacentHTML('beforeend', '${buttonHTML.replace(
+              /\n/g,
+              ''
+            )}');
+            const scrollToTopButton = document.getElementById('scrollToTopButton');
+            scrollToTopButton.onclick = function() {
+              window.scrollTo({ top: 0, behavior: 'smooth' });
+            };
+  
+            window.addEventListener('scroll', function() {
+              if (window.scrollY > 100) {
+                scrollToTopButton.style.opacity = 1;
+              } else {
+                scrollToTopButton.style.opacity = 0;
+              }
+            });
+          `;
+
+          return webview.executeJavaScript(script, false);
+        })
+        .then(() => null)
+        .catch((err) => {
+          console.error('Error executing script or loading document:', err);
+        });
+    };
+
+    webview.addEventListener('dom-ready', injectScrollToTopButton);
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      if (webview) {
+        webview.removeEventListener('dom-ready', injectScrollToTopButton);
+      }
+      return undefined;
+    };
+  }, [ref]);
+
   return (
     <div
       className={cx('h-fit flex-shrink-0', {