Implement sticky header behavior for settings sections using

Author: robertpiosik

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

@@ -2,10 +2,6 @@
   display: flex;
   flex-direction: column;
   gap: var(--padding-24px);
-
-  &--stuck {
-    box-shadow: var(--vscode-scrollbar-shadow) 0 6px 6px -6px;
-  }
 }
 
 .header {
@@ -18,17 +14,27 @@
   padding-top: calc(
     var(--padding-60px) + var(--padding-2px)
   ); // to align with the sidebar title
-  border-bottom: 2px solid var(--vscode-editorWidget-border);
   padding-bottom: var(--padding-10px);
   background-color: var(--vscode-editor-background);
-}
 
-.title {
-  margin: 0;
-  font-size: var(--font-size-20px);
-  font-weight: 600;
-}
+  &--stuck {
+    box-shadow: var(--vscode-scrollbar-shadow) 0 6px 6px -6px;
+  }
+
+  &__marker {
+    position: absolute;
+    top: 0;
+    height: 1px;
+    margin-top: -2px;
+  }
 
-.subtitle {
-  font-size: var(--font-size-14px);
+  &__title {
+    margin: 0;
+    font-size: var(--font-size-20px);
+    font-weight: 600;
+  }
+
+  &__subtitle {
+    font-size: var(--font-size-14px);
+  }
 }

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

@@ -1,5 +1,6 @@
 import styles from './Section.module.scss'
-import { forwardRef } from 'react'
+import { forwardRef, useRef, useState, useEffect } from 'react'
+import cn from 'classnames'
 
 type Props = {
   title: string
@@ -8,11 +9,55 @@ type Props = {
 }
 
 export const Section = forwardRef<HTMLDivElement, Props>((props, ref) => {
+  const marker_ref = useRef<HTMLDivElement>(null)
+  const container_ref = useRef<HTMLDivElement>(null)
+  const [is_stuck, set_is_stuck] = useState(false)
+
+  useEffect(() => {
+    const marker = marker_ref.current
+    const container = container_ref.current
+    if (!marker || !container) return
+
+    let is_marker_stuck = false
+    let is_container_visible = true
+
+    const update_stuck_state = () => {
+      set_is_stuck(is_marker_stuck && is_container_visible)
+    }
+
+    const marker_observer = new IntersectionObserver(
+      ([entry]) => {
+        is_marker_stuck = !entry.isIntersecting
+        update_stuck_state()
+      },
+      { threshold: 1 }
+    )
+
+    const container_observer = new IntersectionObserver(
+      ([entry]) => {
+        is_container_visible = entry.isIntersecting
+        update_stuck_state()
+      },
+      { threshold: 0 }
+    )
+
+    marker_observer.observe(marker)
+    container_observer.observe(container)
+
+    return () => {
+      marker_observer.disconnect()
+      container_observer.disconnect()
+    }
+  }, [])
+
   return (
-    <div ref={ref} className={styles.container}>
-      <div className={styles.header}>
-        <div className={styles.title}>{props.title}</div>
-        <div className={styles.subtitle}>{props.subtitle}</div>
+    <div ref={container_ref} className={styles.container}>
+      <div
+        className={cn(styles.header, { [styles['header--stuck']]: is_stuck })}
+      >
+        <div className={styles.header__marker} ref={marker_ref} />
+        <div className={styles.header__title}>{props.title}</div>
+        <div className={styles.header__subtitle}>{props.subtitle}</div>
       </div>
       {props.children}
     </div>