ceos/opencode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

cleanup(app): wrap entire MessageTimeline in ScrollView

Browse source
This commit is contained in:
Brendan Allan 2026-05-14 20:34:29 +08:00
commit f9248e8faa
No known key found for this signature in database
GPG key ID: 41E835AEA046A32E
1 changed files with 38 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

81
packages/app/src/pages/session/message-timeline.tsx
View file

@ -1163,8 +1163,17 @@ export function MessageTimeline(props: {
</div> </div>
</button> </button>
</div> </div>
<div <ScrollView
class="relative min-w-0 w-full h-full flex flex-col" viewportRef={bindListRoot}
onWheel={handleListWheel}
onTouchStart={handleListTouchStart}
onTouchMove={handleListTouchMove}
onTouchEnd={handleListTouchEnd}
onTouchCancel={handleListTouchEnd}
onPointerDown={handleListPointerDown}
onScroll={handleListScroll}
onClick={props.onAutoScrollInteraction}
class="relative min-w-0 w-full h-full"
style={{ style={{
"--session-title-height": showHeader() ? "40px" : "0px", "--session-title-height": showHeader() ? "40px" : "0px",
"--sticky-accordion-top": showHeader() ? "48px" : "0px", "--sticky-accordion-top": showHeader() ? "48px" : "0px",
@ -1179,7 +1188,6 @@ export function MessageTimeline(props: {
data-session-title data-session-title
classList={{ classList={{
"sticky top-0 z-30 bg-[linear-gradient(to_bottom,var(--background-stronger)_48px,transparent)]": true, "sticky top-0 z-30 bg-[linear-gradient(to_bottom,var(--background-stronger)_48px,transparent)]": true,
relative: true,
"w-full": true, "w-full": true,
"pb-4": true, "pb-4": true,
"pl-2 pr-3 md:pl-4 md:pr-3": true, "pl-2 pr-3 md:pl-4 md:pr-3": true,
@ -1460,46 +1468,33 @@ export function MessageTimeline(props: {
</div> </div>
</div> </div>
</Show> </Show>
<ScrollView <Show when={scrollRoot()}>
viewportRef={bindListRoot} {(root) => (
onWheel={handleListWheel} <Virtualizer
onTouchStart={handleListTouchStart} data={timelineRowKeys()}
onTouchMove={handleListTouchMove} cache={virtualCache()}
onTouchEnd={handleListTouchEnd} itemSize={virtualCache() ? undefined : timelineFallbackItemSize}
onTouchCancel={handleListTouchEnd} scrollRef={root()}
onPointerDown={handleListPointerDown} shift={props.historyShift}
onScroll={handleListScroll} keepMounted={keepMounted()}
onClick={props.onAutoScrollInteraction} ref={(handle) => {
class="relative min-w-0 w-full h-full" if (!handle) {
> writeTimelineCache(virtualizerSessionKey, virtualizerRowKeys, virtualizer)
<Show when={scrollRoot()}> virtualizer = undefined
{(root) => ( return
<Virtualizer }
data={timelineRowKeys()} virtualizer = handle
cache={virtualCache()} virtualizerSessionKey = cacheSessionKey
itemSize={virtualCache() ? undefined : timelineFallbackItemSize} virtualizerRowKeys = cacheRowKeys
scrollRef={root()} maybeAnchorBottom()
shift={props.historyShift} scheduleContentRoot(root())
keepMounted={keepMounted()} }}
ref={(handle) => { >
if (!handle) { {(key) => <TimelineRowView rowKey={key} />}
writeTimelineCache(virtualizerSessionKey, virtualizerRowKeys, virtualizer) </Virtualizer>
virtualizer = undefined )}
return </Show>
} </ScrollView>
virtualizer = handle
virtualizerSessionKey = cacheSessionKey
virtualizerRowKeys = cacheRowKeys
maybeAnchorBottom()
scheduleContentRoot(root())
}}
>
{(key) => <TimelineRowView rowKey={key} />}
</Virtualizer>
)}
</Show>
</ScrollView>
</div>
</div> </div>
) )
} }