-
+ {
+ let scrollTimeout: number | undefined
+ let prevScrollWidth = el.scrollWidth
+ let prevContextOpen = contextOpen()
+
+ const handler = () => {
+ if (scrollTimeout !== undefined) clearTimeout(scrollTimeout)
+ scrollTimeout = window.setTimeout(() => {
+ const scrollWidth = el.scrollWidth
+ const clientWidth = el.clientWidth
+ const currentContextOpen = contextOpen()
+
+ // Only scroll when a tab is added (width increased), not on removal
+ if (scrollWidth > prevScrollWidth) {
+ if (!prevContextOpen && currentContextOpen) {
+ // Context tab was opened, scroll to first
+ el.scrollTo({
+ left: 0,
+ behavior: "smooth",
+ })
+ } else if (scrollWidth > clientWidth) {
+ // File tab was added, scroll to rightmost
+ el.scrollTo({
+ left: scrollWidth - clientWidth,
+ behavior: "smooth",
+ })
+ }
+ }
+ // When width decreases (tab removed), don't scroll - let browser handle it naturally
+
+ prevScrollWidth = scrollWidth
+ prevContextOpen = currentContextOpen
+ }, 0)
+ }
+
+ const wheelHandler = (e: WheelEvent) => {
+ // Enable horizontal scrolling with mouse wheel
+ if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
+ el.scrollLeft += e.deltaY > 0 ? 50 : -50
+ e.preventDefault()
+ }
+ }
+
+ el.addEventListener("wheel", wheelHandler, { passive: false })
+
+ const observer = new MutationObserver(handler)
+ observer.observe(el, { childList: true })
+
+ onCleanup(() => {
+ el.removeEventListener("wheel", wheelHandler)
+ observer.disconnect()
+ if (scrollTimeout !== undefined) clearTimeout(scrollTimeout)
+ })
+ }}
+ >