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

feat(app): restyle v2 jump-to-latest button (#33809)

Browse source
This commit is contained in:
Aarav Sareen 2026-06-25 12:21:37 +05:30 • committed by GitHub
commit b2c688f2a8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 42 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1239,26 +1239,56 @@ export function MessageTimeline(props: {
return ( return (
<div class="relative w-full h-full min-w-0"> <div class="relative w-full h-full min-w-0">
<div <div
class="absolute left-1/2 -translate-x-1/2 bottom-6 z-[60] pointer-events-none transition-all duration-200 ease-out" class="absolute left-1/2 -translate-x-1/2 z-[60] pointer-events-none transition-all duration-200 ease-out"
classList={{ classList={{
"bottom-8": settings.general.newLayoutDesigns(),
"bottom-6": !settings.general.newLayoutDesigns(),
"opacity-100 translate-y-0 scale-100": props.scroll.overflow && props.scroll.jump, "opacity-100 translate-y-0 scale-100": props.scroll.overflow && props.scroll.jump,
"opacity-0 translate-y-2 scale-95 pointer-events-none": !props.scroll.overflow || !props.scroll.jump, "opacity-0 translate-y-2 pointer-events-none": !props.scroll.overflow || !props.scroll.jump,
"scale-[0.8]": (!props.scroll.overflow || !props.scroll.jump) && settings.general.newLayoutDesigns(),
"scale-95": (!props.scroll.overflow || !props.scroll.jump) && !settings.general.newLayoutDesigns(),
}} }}
> >
<button <Show
class="pointer-events-auto flex items-center justify-center w-10 h-8 bg-transparent border-none cursor-pointer p-0 group" when={settings.general.newLayoutDesigns()}
onClick={props.onResumeScroll} fallback={
<button
type="button"
aria-label={language.t("session.messages.jumpToLatest")}
class="pointer-events-auto flex items-center justify-center w-10 h-8 bg-transparent border-none cursor-pointer p-0 group"
onClick={props.onResumeScroll}
>
<div
class="flex items-center justify-center w-8 h-6 rounded-[6px] border border-border-weaker-base bg-[color-mix(in_srgb,var(--surface-raised-stronger-non-alpha)_80%,transparent)] backdrop-blur-[0.75px] transition-colors group-hover:border-[var(--border-weak-base)] group-hover:[--icon-base:var(--icon-hover)]"
style={{
"box-shadow":
"0 51px 60px 0 rgba(0,0,0,0.10), 0 15px 18px 0 rgba(0,0,0,0.12), 0 6.386px 7.513px 0 rgba(0,0,0,0.12), 0 2.31px 2.717px 0 rgba(0,0,0,0.20)",
}}
>
<Icon name="arrow-down-to-line" size="small" />
</div>
</button>
}
> >
<div <button
class="flex items-center justify-center w-8 h-6 rounded-[6px] border border-border-weaker-base bg-[color-mix(in_srgb,var(--surface-raised-stronger-non-alpha)_80%,transparent)] backdrop-blur-[0.75px] transition-colors group-hover:border-[var(--border-weak-base)] group-hover:[--icon-base:var(--icon-hover)]" type="button"
aria-label={language.t("session.messages.jumpToLatest")}
class="pointer-events-auto flex items-center justify-center w-8 h-7 px-2 py-1.5 rounded-lg border-none cursor-pointer text-v2-text-text-base backdrop-blur-[2px]"
style={{ style={{
"box-shadow": background: "color-mix(in srgb, var(--v2-background-bg-base) 92%, transparent)",
"0 51px 60px 0 rgba(0,0,0,0.10), 0 15px 18px 0 rgba(0,0,0,0.12), 0 6.386px 7.513px 0 rgba(0,0,0,0.12), 0 2.31px 2.717px 0 rgba(0,0,0,0.20)", "box-shadow": "var(--v2-elevation-raised), 0px 2px 8px var(--v2-background-bg-base)",
}} }}
onClick={props.onResumeScroll}
> >
<Icon name="arrow-down-to-line" size="small" /> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
</div> <path
</button> d="M12.3333 8.66665L8 13L3.66667 8.66665M8 12.6667V2.83332"
stroke="currentColor"
stroke-linecap="square"
/>
</svg>
</button>
</Show>
</div> </div>
<ScrollView <ScrollView
viewportRef={bindListRoot} viewportRef={bindListRoot}