refactor(ui): auto scroll active code line into view (#2232)

TabbyML · May 23, 2024 · 47f10cd · 47f10cd
1 parent 8b24727
commit 47f10cd
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 23 deletions.
diff --git a/ee/tabby-ui/app/files/components/code-editor-view.tsx b/ee/tabby-ui/app/files/components/code-editor-view.tsx
@@ -39,7 +39,6 @@ const CodeEditorView: React.FC<CodeEditorViewProps> = ({ value, language }) => {
   const tags: TCodeTag[] = React.useMemo(() => {
     return []
   }, [])
-  const initialized = React.useRef(false)
   const { copyToClipboard } = useCopyToClipboard({})
   const line = searchParams.get('line')?.toString()
   const [editorView, setEditorView] = React.useState<EditorView | null>(null)
@@ -132,11 +131,16 @@ const CodeEditorView: React.FC<CodeEditorViewProps> = ({ value, language }) => {
   React.useEffect(() => {
     if (line && editorView && value) {
       try {
-        initialized.current = true
         const lineNumber = parseInt(line)
         const lineObject = editorView?.state?.doc?.line(lineNumber)
         if (lineObject) {
           setSelectedLines(editorView, lineObject.from)
+          editorView.dispatch({
+            effects: EditorView.scrollIntoView(lineObject.from, {
+              y: 'start',
+              yMargin: 120
+            })
+          })
         }
       } catch (e) {}
     }

diff --git a/ee/tabby-ui/app/files/components/file-tree.tsx b/ee/tabby-ui/app/files/components/file-tree.tsx
@@ -26,6 +26,7 @@ import {
   resolveFileNameFromPath,
   resolveRepositoryInfoFromPath
 } from './utils'
+import { useInView } from 'react-intersection-observer'
 
 type TFileTreeNode = {
   name: string
@@ -136,7 +137,22 @@ const GridArea: React.FC<{ level: number }> = ({ level }) => {
 }
 
 const ActiveViewBar = () => {
-  return <div className="absolute -left-2 h-8 w-1 rounded-md bg-primary" />
+  const { ref, entry, inView } = useInView({
+    trackVisibility: true,
+    delay: 500
+  })
+
+  React.useEffect(() => {
+    if (!!entry?.target && !inView) {
+      entry?.target?.scrollIntoView({
+        block: 'center'
+      })
+    }
+  }, [entry?.target])
+
+  return (
+    <div ref={ref} className="absolute -left-2 h-8 w-1 rounded-md bg-primary" />
+  )
 }
 
 /**

diff --git a/ee/tabby-ui/app/files/components/source-code-browser.tsx b/ee/tabby-ui/app/files/components/source-code-browser.tsx
@@ -434,26 +434,6 @@ const SourceCodeBrowserRenderer: React.FC<SourceCodeBrowserProps> = ({
     }
   }, [chatSideBarVisible])
 
-  React.useEffect(() => {
-    const onMessage = (event: MessageEvent) => {
-      if (event.origin !== window.origin || !event.data) return
-
-      const { data } = event
-      if (data.action === 'navigateToContext') {
-        updateSearchParams({
-          set: {
-            path: data.path,
-            line: data.line
-          }
-        })
-      }
-    }
-
-    window.addEventListener('message', onMessage)
-
-    return () => window.removeEventListener('message', onMessage)
-  }, [])
-
   return (
     <ResizablePanelGroup
       direction="horizontal"