diff options
| author | Adam <[email protected]> | 2026-03-03 05:35:07 -0600 |
|---|---|---|
| committer | Adam <[email protected]> | 2026-03-03 05:35:15 -0600 |
| commit | e4af1bb42284bc76adf54927f4b224224830f1b5 (patch) | |
| tree | dcb536b73884517ad5b78342440f31384559a93a /packages/app/src | |
| parent | 5e8742f4312a8923f3da92172a7247470ef34516 (diff) | |
| download | opencode-e4af1bb42284bc76adf54927f4b224224830f1b5.tar.gz opencode-e4af1bb42284bc76adf54927f4b224224830f1b5.zip | |
fix(app): timeline jank
Diffstat (limited to 'packages/app/src')
| -rw-r--r-- | packages/app/src/pages/session/message-timeline.tsx | 50 |
1 files changed, 28 insertions, 22 deletions
diff --git a/packages/app/src/pages/session/message-timeline.tsx b/packages/app/src/pages/session/message-timeline.tsx index 19d6e09d9..fbf5ba291 100644 --- a/packages/app/src/pages/session/message-timeline.tsx +++ b/packages/app/src/pages/session/message-timeline.tsx @@ -1,4 +1,4 @@ -import { For, createEffect, createMemo, on, onCleanup, Show, startTransition, type JSX } from "solid-js" +import { For, createEffect, createMemo, on, onCleanup, Show, startTransition, Index, type JSX } from "solid-js" import { createStore, produce } from "solid-js/store" import { useNavigate, useParams } from "@solidjs/router" import { Button } from "@opencode-ai/ui/button" @@ -711,28 +711,34 @@ export function MessageTimeline(props: { <div class="w-full px-4 md:px-5 pb-2"> <div class="ml-auto max-w-[82%] overflow-x-auto no-scrollbar"> <div class="flex w-max min-w-full justify-end gap-2"> - <For each={comments()}> - {(comment) => ( - <div class="shrink-0 max-w-[260px] rounded-[6px] border border-border-weak-base bg-background-stronger px-2.5 py-2"> - <div class="flex items-center gap-1.5 min-w-0 text-11-medium text-text-strong"> - <FileIcon node={{ path: comment.path, type: "file" }} class="size-3.5 shrink-0" /> - <span class="truncate">{getFilename(comment.path)}</span> - <Show when={comment.selection}> - {(selection) => ( - <span class="shrink-0 text-text-weak"> - {selection().startLine === selection().endLine - ? `:${selection().startLine}` - : `:${selection().startLine}-${selection().endLine}`} - </span> - )} - </Show> + <Index each={comments()}> + {(commentAccessor: () => MessageComment) => { + const comment = createMemo(() => commentAccessor()) + return ( + <div class="shrink-0 max-w-[260px] rounded-[6px] border border-border-weak-base bg-background-stronger px-2.5 py-2"> + <div class="flex items-center gap-1.5 min-w-0 text-11-medium text-text-strong"> + <FileIcon + node={{ path: comment().path, type: "file" }} + class="size-3.5 shrink-0" + /> + <span class="truncate">{getFilename(comment().path)}</span> + <Show when={comment().selection}> + {(selection) => ( + <span class="shrink-0 text-text-weak"> + {selection().startLine === selection().endLine + ? `:${selection().startLine}` + : `:${selection().startLine}-${selection().endLine}`} + </span> + )} + </Show> + </div> + <div class="pt-1 text-12-regular text-text-strong whitespace-pre-wrap break-words"> + {comment().comment} + </div> </div> - <div class="pt-1 text-12-regular text-text-strong whitespace-pre-wrap break-words"> - {comment.comment} - </div> - </div> - )} - </For> + ) + }} + </Index> </div> </div> </div> |