Remove automatic active navigation item tracking based on scroll position and refactor component ref handling

Author: robertpiosik

packages/ui/src/components/editor/settings/Layout/Layout.tsx

@@ -23,8 +23,7 @@ export const Layout = forwardRef<HTMLDivElement, Props>((props, ref) => {
 
       const last_child_height = last_child.offsetHeight
       const viewport_height = window.innerHeight
-      const calculated_padding =
-        viewport_height - Math.floor(last_child_height) - 60
+      const calculated_padding = viewport_height - Math.floor(last_child_height)
 
       set_padding_bottom(
         calculated_padding > 0 ? `${calculated_padding}px` : '0px'

packages/ui/src/components/editor/settings/NavigationItem/NavigationItem.module.scss

@@ -12,4 +12,8 @@
     background-color: var(--vscode-list-hoverBackground);
     text-decoration: none;
   }
+
+  &--active {
+    background-color: var(--vscode-list-hoverBackground);
+  }
 }

packages/ui/src/components/editor/settings/Section/Section.tsx

@@ -10,7 +10,7 @@ type Props = {
 
 export const Section = forwardRef<HTMLDivElement, Props>((props, ref) => {
   const marker_ref = useRef<HTMLDivElement>(null)
-  const container_ref = useRef<HTMLDivElement>(null)
+  const container_ref = useRef<HTMLDivElement | null>(null)
   const [is_stuck, set_is_stuck] = useState(false)
 
   useEffect(() => {
@@ -51,7 +51,17 @@ export const Section = forwardRef<HTMLDivElement, Props>((props, ref) => {
   }, [])
 
   return (
-    <div ref={container_ref} className={styles.container}>
+    <div
+      ref={(node) => {
+        container_ref.current = node
+        if (typeof ref == 'function') {
+          ref(node)
+        } else if (ref) {
+          ref.current = node
+        }
+      }}
+      className={styles.container}
+    >
       <div
         className={cn(styles.header, { [styles['header--stuck']]: is_stuck })}
       >

packages/vscode/src/views/settings/frontend/Home/Home.tsx

@@ -71,7 +71,6 @@ type Props = {
 }
 
 export const Home: React.FC<Props> = (props) => {
-  const [active_item, set_active_item] = useState<NavItem>('general')
   const scroll_container_ref = useRef<HTMLDivElement>(null)
   const section_refs = useRef<Record<NavItem, HTMLDivElement | null>>({
     general: null,
@@ -81,8 +80,6 @@ export const Home: React.FC<Props> = (props) => {
     'intelligent-update': null,
     'commit-messages': null
   })
-  const is_scrolling_from_click = useRef(false)
-
   const [commit_instructions, set_commit_instructions] = useState('')
 
   useEffect(() => {
@@ -106,64 +103,28 @@ export const Home: React.FC<Props> = (props) => {
   ])
 
   const handle_scroll_to_section = (item_id: NavItem) => {
-    is_scrolling_from_click.current = true
-    set_active_item(item_id)
-    section_refs.current[item_id]?.scrollIntoView({
-      behavior: 'smooth',
-      block: 'start'
-    })
-    setTimeout(() => {
-      is_scrolling_from_click.current = false
-    }, 1000)
-  }
-
-  useEffect(() => {
-    if (props.scroll_to_section_on_load) {
-      handle_scroll_to_section(props.scroll_to_section_on_load)
-    }
-  }, [props.scroll_to_section_on_load])
-
-  useEffect(() => {
-    const handle_scroll = () => {
-      if (is_scrolling_from_click.current) return
+    const section = section_refs.current[item_id]
+    const scroll_container = scroll_container_ref.current
 
-      const THRESHOLD = 200 // 200px from top of viewport
-      let closest_section: NavItem | null = null
-      let closest_distance = Infinity
+    if (section && scroll_container) {
+      const container_rect = scroll_container.getBoundingClientRect()
+      const section_rect = section.getBoundingClientRect()
 
-      NAV_ITEMS_CONFIG.forEach(({ id }) => {
-        const element = section_refs.current[id]
-        if (element) {
-          const rect = element.getBoundingClientRect()
-          const distance_from_threshold = Math.abs(rect.top - THRESHOLD)
+      const offset = section_rect.top - container_rect.top
+      const target_scroll_top = scroll_container.scrollTop + offset
 
-          // Check if top edge is within 200px from top and is closest
-          if (
-            rect.top <= THRESHOLD &&
-            rect.top >= 0 &&
-            distance_from_threshold < closest_distance
-          ) {
-            closest_section = id
-            closest_distance = distance_from_threshold
-          }
-        }
+      scroll_container.scrollTo({
+        top: target_scroll_top,
+        behavior: 'smooth'
       })
-
-      if (closest_section) {
-        set_active_item(closest_section)
-      }
-    }
-
-    const container = scroll_container_ref.current
-    if (container) {
-      container.addEventListener('scroll', handle_scroll)
-      handle_scroll() // Check initial position
     }
+  }
 
-    return () => {
-      container?.removeEventListener('scroll', handle_scroll)
+  useEffect(() => {
+    if (props.scroll_to_section_on_load) {
+      handle_scroll_to_section(props.scroll_to_section_on_load)
     }
-  }, [])
+  }, [props.scroll_to_section_on_load])
 
   const handle_nav_click = (
     e: React.MouseEvent<HTMLAnchorElement>,
@@ -185,7 +146,7 @@ export const Home: React.FC<Props> = (props) => {
                 key={id}
                 href={`#${id}`}
                 label={label}
-                is_active={active_item == id}
+                is_active={false}
                 on_click={(e) => handle_nav_click(e, id)}
               />
             ))}