From 18c64d26fb6e172c0ec43fe4f461658f5fe58da7 Mon Sep 17 00:00:00 2001
From: Joe Zein <joe@soallabs.com>
Date: Sun, 13 Oct 2024 17:52:28 +0300
Subject: [PATCH] Added scrolling to the bottom of the page when adding blocks
 from the files sidebar

---
 apps/web/src/components/Files.tsx               | 15 +++++++++++++--
 apps/web/src/components/PrivateDocumentPage.tsx | 10 +++++++++-
 apps/web/src/components/v2Editor/index.tsx      |  9 +++++++++
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/Files.tsx b/apps/web/src/components/Files.tsx
index 192d4d95..3e4d1a29 100644
--- a/apps/web/src/components/Files.tsx
+++ b/apps/web/src/components/Files.tsx
@@ -37,6 +37,7 @@ interface Props {
   visible: boolean
   onHide: () => void
   yDoc?: Y.Doc
+  scrollToBottom?: () => void
 }
 export default function Files(props: Props) {
   const { startedAt: environmentStartedAt } = useEnvironmentStatus(
@@ -87,8 +88,13 @@ file`
       }
 
       requestRun(pythonBlock, blocks, layout, environmentStartedAt, true)
+      if (props.scrollToBottom) {
+        setTimeout(() => {
+          props.scrollToBottom?.()
+        }, 200)
+      }
     },
-    [props.yDoc, environmentStartedAt]
+    [props.yDoc, environmentStartedAt, props.scrollToBottom]
   )
 
   const onUseInSQL = useCallback(
@@ -132,8 +138,13 @@ file`
       }
 
       requestRun(sqlBlock, blocks, layout, environmentStartedAt, true)
+      if (props.scrollToBottom) {
+        setTimeout(() => {
+          props.scrollToBottom?.()
+        }, 200)
+      }
     },
-    [props.yDoc, environmentStartedAt]
+    [props.yDoc, environmentStartedAt, props.scrollToBottom]
   )
 
   const [
diff --git a/apps/web/src/components/PrivateDocumentPage.tsx b/apps/web/src/components/PrivateDocumentPage.tsx
index 750223eb..3bf2d873 100644
--- a/apps/web/src/components/PrivateDocumentPage.tsx
+++ b/apps/web/src/components/PrivateDocumentPage.tsx
@@ -2,7 +2,7 @@ import dynamic from 'next/dynamic'
 
 import { useDataSources } from '@/hooks/useDatasources'
 import useDocument from '@/hooks/useDocument'
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useMemo, useRef, useState } from 'react'
 import { useRouter } from 'next/router'
 import type { ApiDocument, ApiUser, UserWorkspaceRole } from '@briefer/database'
 import { isNil } from 'ramda'
@@ -81,6 +81,7 @@ function PrivateDocumentPageInner(
     publishing: boolean
   }
 ) {
+  const [shouldScroll, setShouldScroll] = useState(false)
   const documentTitle = useMemo(
     () => props.document.title || 'Untitled',
     [props.document.title]
@@ -324,6 +325,10 @@ function PrivateDocumentPageInner(
     </div>
   )
 
+  const scrollToBottom = useCallback(() => {
+    setShouldScroll(true)
+  }, [setShouldScroll])
+
   return (
     <Layout
       topBarClassname={props.isApp ? 'bg-gray-50' : undefined}
@@ -332,6 +337,8 @@ function PrivateDocumentPageInner(
       <div className="w-full relative flex">
         <EditorAwarenessProvider awareness={provider.awareness}>
           <V2Editor
+            shouldScroll={shouldScroll}
+            setShouldScroll={setShouldScroll}
             document={props.document}
             dataSources={dataSources}
             isPublicViewer={false}
@@ -401,6 +408,7 @@ function PrivateDocumentPageInner(
               visible={selectedSidebar?._tag === 'files'}
               onHide={onHideSidebar}
               yDoc={yDoc}
+              scrollToBottom={scrollToBottom}
             />
             <ReusableComponents
               workspaceId={props.workspaceId}
diff --git a/apps/web/src/components/v2Editor/index.tsx b/apps/web/src/components/v2Editor/index.tsx
index f0be98da..c8787a36 100644
--- a/apps/web/src/components/v2Editor/index.tsx
+++ b/apps/web/src/components/v2Editor/index.tsx
@@ -1175,6 +1175,8 @@ const V2EditorRow = (props: {
 }
 
 type V2EditorProps = {
+  shouldScroll: boolean
+  setShouldScroll: (shouldScroll: boolean) => void
   isPublicViewer: boolean
   document: ApiDocument
   dataSources: APIDataSources
@@ -1269,6 +1271,13 @@ const V2Editor = (props: V2EditorProps) => {
     }
   }, [interactionState, scrollViewRef])
 
+  useEffect(() => {
+    if (props.shouldScroll && scrollViewRef.current) {
+      scrollViewRef.current.scrollTo({ top: scrollViewRef.current.scrollHeight, behavior: 'smooth' })
+      props.setShouldScroll(false)
+    }
+  }, [props.shouldScroll, scrollViewRef, props.setShouldScroll])
+
   const onAddBlock = useCallback(
     (type: BlockType, index: number) => {
       return props.yDoc.transact(() => {