diff options
| author | David Hill <[email protected]> | 2026-01-22 09:39:36 +0000 |
|---|---|---|
| committer | David Hill <[email protected]> | 2026-01-22 09:41:28 +0000 |
| commit | cf1fc02d27fa6d638a78f3a8f0cfd3ea8b1932e5 (patch) | |
| tree | d786c568ab7ed8eedb77e43366bddcc90179322f /packages/app/src/pages | |
| parent | ba2e35e29c5fd48a112ae566e9e0dbd4562c491a (diff) | |
| download | opencode-cf1fc02d27fa6d638a78f3a8f0cfd3ea8b1932e5.tar.gz opencode-cf1fc02d27fa6d638a78f3a8f0cfd3ea8b1932e5.zip | |
update jump to latest button with circular design and animation
- add arrow-down-to-line icon
- circular 32px button centered above prompt input
- fade/scale/translate animation on show/hide
- fix duplicate language.ru keys in i18n files
Diffstat (limited to 'packages/app/src/pages')
| -rw-r--r-- | packages/app/src/pages/session.tsx | 35 |
1 files changed, 18 insertions, 17 deletions
diff --git a/packages/app/src/pages/session.tsx b/packages/app/src/pages/session.tsx index 953634ca8..5e4eeafd5 100644 --- a/packages/app/src/pages/session.tsx +++ b/packages/app/src/pages/session.tsx @@ -1360,23 +1360,24 @@ export default function Page() { } > <div class="relative w-full h-full min-w-0"> - <Show when={autoScroll.userScrolled()}> - <div class="absolute right-4 md:right-6 bottom-[calc(var(--prompt-height,8rem)+16px)] z-[60] pointer-events-none"> - <Button - variant="secondary" - size="small" - icon="chevron-down" - class="pointer-events-auto shadow-sm" - onClick={() => { - setStore("messageId", undefined) - autoScroll.forceScrollToBottom() - window.history.replaceState(null, "", window.location.href.replace(/#.*$/, "")) - }} - > - {language.t("session.messages.jumpToLatest")} - </Button> - </div> - </Show> + <div + class="absolute left-1/2 -translate-x-1/2 bottom-[calc(var(--prompt-height,8rem)+32px)] z-[60] pointer-events-none transition-all duration-200 ease-out" + classList={{ + "opacity-100 translate-y-0 scale-100": autoScroll.userScrolled(), + "opacity-0 translate-y-2 scale-95 pointer-events-none": !autoScroll.userScrolled(), + }} + > + <button + class="pointer-events-auto size-8 flex items-center justify-center rounded-full bg-background-base border border-border-base shadow-sm text-text-base hover:bg-background-stronger transition-colors" + onClick={() => { + setStore("messageId", undefined) + autoScroll.forceScrollToBottom() + window.history.replaceState(null, "", window.location.href.replace(/#.*$/, "")) + }} + > + <Icon name="arrow-down-to-line" /> + </button> + </div> <div ref={setScrollRef} onScroll={(e) => { |