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

feat: WIP session nav

Browse source
This commit is contained in:
Aaron Iker 2026-01-13 19:41:51 +01:00
commit 9f47fa7f97
1 changed files with 22 additions and 6 deletions
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 { 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( export function MessageNav(
props: ComponentProps<"ul"> & { props: ComponentProps<"ul"> & {
@ -14,7 +13,7 @@ export function MessageNav(
const [local, others] = splitProps(props, ["messages", "current", "size", "onMessageSelect"]) const [local, others] = splitProps(props, ["messages", "current", "size", "onMessageSelect"])
const content = () => ( 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}> <For each={local.messages}>
{(message) => { {(message) => {
const handleClick = () => local.onMessageSelect(message) const handleClick = () => local.onMessageSelect(message)
@ -28,8 +27,7 @@ export function MessageNav(
</div> </div>
</Match> </Match>
<Match when={local.size === "normal"}> <Match when={local.size === "normal"}>
<button data-slot="message-nav-message-button" onClick={handleClick}> <button data-slot="message-nav-message-button" onClick={handleClick} type="button">
<DiffChanges changes={message.summary?.diffs ?? []} variant="bars" />
<div <div
data-slot="message-nav-title-preview" data-slot="message-nav-title-preview"
data-active={message.id === local.current?.id || undefined} data-active={message.id === local.current?.id || undefined}
@ -38,6 +36,24 @@ export function MessageNav(
{message.summary?.title} {message.summary?.title}
</Show> </Show>
</div> </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> </button>
</Match> </Match>
</Switch> </Switch>