monadical/opencode
14
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

feat(app): improved session layout

Browse Source
This commit is contained in:
Adam
2026-01-15 13:32:15 -06:00
parent d5ae8e0bef
commit 1f11a8a6ea
8 changed files with 121 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,9 +9,10 @@ export function MessageNav(
current?: UserMessage
size: "normal" | "compact"
onMessageSelect: (message: UserMessage) => void
getLabel?: (message: UserMessage) => string | undefined
},
) {
const [local, others] = splitProps(props, ["messages", "current", "size", "onMessageSelect"])
const [local, others] = splitProps(props, ["messages", "current", "size", "onMessageSelect", "getLabel"])
const content = () => (
<ul role="list" data-component="message-nav" data-size={local.size} {...others}>
@@ -19,23 +20,36 @@ export function MessageNav(
{(message) => {
const handleClick = () => local.onMessageSelect(message)
const handleKeyPress = (event: KeyboardEvent) => {
if (event.key !== "Enter" && event.key !== " ") return
event.preventDefault()
local.onMessageSelect(message)
}
return (
<li data-slot="message-nav-item">
<Switch>
<Match when={local.size === "compact"}>
<div data-slot="message-nav-tick-button" data-active={message.id === local.current?.id || undefined}>
<div
data-slot="message-nav-tick-button"
data-active={message.id === local.current?.id || undefined}
role="button"
tabindex={0}
onClick={handleClick}
onKeyDown={handleKeyPress}
>
<div data-slot="message-nav-tick-line" />
</div>
</Match>
<Match when={local.size === "normal"}>
<button data-slot="message-nav-message-button" onClick={handleClick}>
<button data-slot="message-nav-message-button" onClick={handleClick} onKeyDown={handleKeyPress}>
<DiffChanges changes={message.summary?.diffs ?? []} variant="bars" />
<div
data-slot="message-nav-title-preview"
data-active={message.id === local.current?.id || undefined}
>
<Show when={message.summary?.title} fallback="New message">
{message.summary?.title}
<Show when={local.getLabel?.(message) ?? message.summary?.title} fallback="New message">
{local.getLabel?.(message) ?? message.summary?.title}
</Show>
</div>
</button>