mirror of
https://github.com/anomalyco/opencode.git
synced 2026-02-01 22:48:16 +00:00
fix(app): file tabs - auto scroll on open & scroll via mouse wheel (#11070)
This commit is contained in:
@@ -2183,7 +2183,62 @@ export default function Page() {
|
||||
<ConstrainDragYAxis />
|
||||
<Tabs value={activeTab()} onChange={openTab}>
|
||||
<div class="sticky top-0 shrink-0 flex">
|
||||
<Tabs.List>
|
||||
<Tabs.List
|
||||
ref={(el) => {
|
||||
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)
|
||||
})
|
||||
}}
|
||||
>
|
||||
<Show when={contextOpen()}>
|
||||
<Tabs.Trigger
|
||||
value="context"
|
||||
|
||||
Reference in New Issue
Block a user