sandvich
/
opencode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: WIP session nav

pull/8743/head
Aaron Iker 2026-01-13 19:41:51 +01:00
parent cffdf3320b
commit 9f47fa7f97
1 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/ui/src/components/message-nav.tsx
View File

@ -1,7 +1,6 @@
import { UserMessage } from "@opencode-ai/sdk/v2"
import { ComponentProps, For, Match, Show, splitProps, Switch } from "solid-js"
import { DiffChanges } from "./diff-changes"
import { Tooltip } from "@kobalte/core/tooltip"
import { type ComponentProps, For, Match, Show, Switch, splitProps } from "solid-js"
import type { UserMessage } from "@opencode-ai/sdk/v2"
export function MessageNav(
props: ComponentProps<"ul"> & {
@ -14,7 +13,7 @@ export function MessageNav(
const [local, others] = splitProps(props, ["messages", "current", "size", "onMessageSelect"])
const content = () => (
<ul role="list" data-component="message-nav" data-size={local.size} {...others}>
<ul data-component="message-nav" data-size={local.size} {...others}>
<For each={local.messages}>
{(message) => {
const handleClick = () => local.onMessageSelect(message)
@ -28,8 +27,7 @@ export function MessageNav(
</div>
</Match>
<Match when={local.size === "normal"}>
<button data-slot="message-nav-message-button" onClick={handleClick}>
<DiffChanges changes={message.summary?.diffs ?? []} variant="bars" />
<button data-slot="message-nav-message-button" onClick={handleClick} type="button">
<div
data-slot="message-nav-title-preview"
data-active={message.id === local.current?.id || undefined}
@ -38,6 +36,24 @@ export function MessageNav(
{message.summary?.title}
</Show>
</div>
<Show when={(message.summary?.diffs.reduce((acc, diff) => acc + diff.additions, 0) ?? 0) > 0}>
<span data-slot="message-nav-diff-changes message-nav-diff-additions">
{message.summary?.diffs.reduce((acc, diff) => acc + diff.additions, 0)}
</span>
</Show>
<Show when={(message.summary?.diffs.reduce((acc, diff) => acc + diff.deletions, 0) ?? 0) > 0}>
<span data-slot="message-nav-diff-changes message-nav-diff-deletions">
{message.summary?.diffs.reduce((acc, diff) => acc + diff.deletions, 0)}
</span>
</Show>
<Show
when={
(message.summary?.diffs?.reduce((acc, diff) => acc + diff.additions, 0) ?? 0) <= 0 &&
(message.summary?.diffs?.reduce((acc, diff) => acc + diff.deletions, 0) ?? 0) <= 0
}
>
<span data-slot="message-nav-diff-changes message-nav-diff-neutral">0</span>
</Show>
</button>
</Match>
</Switch>