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

chore: cleanup

Browse Source
This commit is contained in:
Adam
2026-02-19 11:10:47 -06:00
parent 6b8902e8b9
commit 56dda4c98c
6 changed files with 118 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/app/src/pages/session/message-timeline.tsx
View File

@@ -368,7 +368,7 @@ export function MessageTimeline(props: {
class="relative min-w-0 w-full h-full overflow-y-auto session-scroller" class="relative min-w-0 w-full h-full overflow-y-auto session-scroller"
style={{ style={{
"--session-title-height": showHeader() ? "40px" : "0px", "--session-title-height": showHeader() ? "40px" : "0px",
"--sticky-accordion-top": showHeader() ? "64px" : "0px", "--sticky-accordion-top": showHeader() ? "48px" : "0px",
}} }}
> >
<Show when={showHeader()}> <Show when={showHeader()}>

15
packages/ui/src/components/message-part.css
View File

@@ -1219,6 +1219,21 @@
} }
} }
[data-component="apply-patch-tool"] {
> [data-component="collapsible"].tool-collapsible {
gap: 0px;
}
> [data-component="collapsible"] > [data-slot="collapsible-trigger"][aria-expanded="true"] {
position: sticky;
top: var(--sticky-accordion-top, 0px);
z-index: 20;
height: 40px;
padding-bottom: 8px;
background-color: var(--background-stronger);
}
}
[data-component="accordion"][data-scope="apply-patch"] { [data-component="accordion"][data-scope="apply-patch"] {
[data-slot="accordion-trigger"] { [data-slot="accordion-trigger"] {
background-color: var(--background-stronger) !important; background-color: var(--background-stronger) !important;

171
packages/ui/src/components/message-part.tsx
View File

@@ -1611,97 +1611,100 @@ ToolRegistry.register({
}) })
return ( return (
<BasicTool <div data-component="apply-patch-tool">
{...props} <BasicTool
icon="code-lines" {...props}
defer icon="code-lines"
trigger={{ defer
title: i18n.t("ui.tool.patch"), trigger={{
subtitle: subtitle(), title: i18n.t("ui.tool.patch"),
}} subtitle: subtitle(),
> }}
<Show when={files().length > 0}> >
<Accordion <Show when={files().length > 0}>
multiple <Accordion
data-scope="apply-patch" multiple
value={expanded()} data-scope="apply-patch"
onChange={(value) => setExpanded(Array.isArray(value) ? value : value ? [value] : [])} style={{ "--sticky-accordion-offset": "40px" }}
> value={expanded()}
<For each={files()}> onChange={(value) => setExpanded(Array.isArray(value) ? value : value ? [value] : [])}
{(file) => { >
const active = createMemo(() => expanded().includes(file.filePath)) <For each={files()}>
const [visible, setVisible] = createSignal(false) {(file) => {
const active = createMemo(() => expanded().includes(file.filePath))
const [visible, setVisible] = createSignal(false)
createEffect(() => { createEffect(() => {
if (!active()) { if (!active()) {
setVisible(false) setVisible(false)
return return
} }
requestAnimationFrame(() => { requestAnimationFrame(() => {
if (!active()) return if (!active()) return
setVisible(true) setVisible(true)
})
}) })
})
return ( return (
<Accordion.Item value={file.filePath} data-type={file.type}> <Accordion.Item value={file.filePath} data-type={file.type}>
<StickyAccordionHeader> <StickyAccordionHeader>
<Accordion.Trigger> <Accordion.Trigger>
<div data-slot="apply-patch-trigger-content"> <div data-slot="apply-patch-trigger-content">
<div data-slot="apply-patch-file-info"> <div data-slot="apply-patch-file-info">
<FileIcon node={{ path: file.relativePath, type: "file" }} /> <FileIcon node={{ path: file.relativePath, type: "file" }} />
<div data-slot="apply-patch-file-name-container"> <div data-slot="apply-patch-file-name-container">
<Show when={file.relativePath.includes("/")}> <Show when={file.relativePath.includes("/")}>
<span data-slot="apply-patch-directory">{`\u202A${getDirectory(file.relativePath)}\u202C`}</span> <span data-slot="apply-patch-directory">{`\u202A${getDirectory(file.relativePath)}\u202C`}</span>
</Show> </Show>
<span data-slot="apply-patch-filename">{getFilename(file.relativePath)}</span> <span data-slot="apply-patch-filename">{getFilename(file.relativePath)}</span>
</div>
</div>
<div data-slot="apply-patch-trigger-actions">
<Switch>
<Match when={file.type === "add"}>
<span data-slot="apply-patch-change" data-type="added">
{i18n.t("ui.patch.action.created")}
</span>
</Match>
<Match when={file.type === "delete"}>
<span data-slot="apply-patch-change" data-type="removed">
{i18n.t("ui.patch.action.deleted")}
</span>
</Match>
<Match when={file.type === "move"}>
<span data-slot="apply-patch-change" data-type="modified">
{i18n.t("ui.patch.action.moved")}
</span>
</Match>
<Match when={true}>
<DiffChanges changes={{ additions: file.additions, deletions: file.deletions }} />
</Match>
</Switch>
<Icon name="chevron-grabber-vertical" size="small" />
</div> </div>
</div> </div>
<div data-slot="apply-patch-trigger-actions"> </Accordion.Trigger>
<Switch> </StickyAccordionHeader>
<Match when={file.type === "add"}> <Accordion.Content>
<span data-slot="apply-patch-change" data-type="added"> <Show when={visible()}>
{i18n.t("ui.patch.action.created")} <div data-component="apply-patch-file-diff">
</span> <Dynamic
</Match> component={diffComponent}
<Match when={file.type === "delete"}> before={{ name: file.filePath, contents: file.before }}
<span data-slot="apply-patch-change" data-type="removed"> after={{ name: file.movePath ?? file.filePath, contents: file.after }}
{i18n.t("ui.patch.action.deleted")} />
</span>
</Match>
<Match when={file.type === "move"}>
<span data-slot="apply-patch-change" data-type="modified">
{i18n.t("ui.patch.action.moved")}
</span>
</Match>
<Match when={true}>
<DiffChanges changes={{ additions: file.additions, deletions: file.deletions }} />
</Match>
</Switch>
<Icon name="chevron-grabber-vertical" size="small" />
</div> </div>
</div> </Show>
</Accordion.Trigger> </Accordion.Content>
</StickyAccordionHeader> </Accordion.Item>
<Accordion.Content> )
<Show when={visible()}> }}
<div data-component="apply-patch-file-diff"> </For>
<Dynamic </Accordion>
component={diffComponent} </Show>
before={{ name: file.filePath, contents: file.before }} </BasicTool>
after={{ name: file.movePath ?? file.filePath, contents: file.after }} </div>
/>
</div>
</Show>
</Accordion.Content>
</Accordion.Item>
)
}}
</For>
</Accordion>
</Show>
</BasicTool>
) )
}, },
}) })

13
packages/ui/src/components/session-turn.css
View File

@@ -81,6 +81,17 @@
min-width: 0; min-width: 0;
} }
[data-slot="session-turn-diffs"]
> [data-component="collapsible"]
> [data-slot="collapsible-trigger"][aria-expanded="true"] {
position: sticky;
top: var(--sticky-accordion-top, 0px);
z-index: 20;
height: 40px;
padding-bottom: 8px;
background-color: var(--background-stronger);
}
[data-component="session-turn-diffs-trigger"] { [data-component="session-turn-diffs-trigger"] {
width: 100%; width: 100%;
display: flex; display: flex;
@@ -124,7 +135,7 @@
} }
[data-component="session-turn-diffs-content"] { [data-component="session-turn-diffs-content"] {
padding-top: 8px; padding-top: 0px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }

1
packages/ui/src/components/session-turn.tsx
View File

@@ -318,6 +318,7 @@ export function SessionTurn(
<div data-component="session-turn-diffs-content"> <div data-component="session-turn-diffs-content">
<Accordion <Accordion
multiple multiple
style={{ "--sticky-accordion-offset": "40px" }}
value={expanded()} value={expanded()}
onChange={(value) => setExpanded(Array.isArray(value) ? value : value ? [value] : [])} onChange={(value) => setExpanded(Array.isArray(value) ? value : value ? [value] : [])}
> >

12
packages/ui/src/components/sticky-accordion-header.css
View File

@@ -1,14 +1,6 @@
[data-component="sticky-accordion-header"] { [data-component="sticky-accordion-header"] {
--sticky-accordion-top: 0px;
position: sticky; position: sticky;
top: var(--sticky-accordion-top); top: calc(var(--sticky-accordion-top, 0px) + var(--sticky-accordion-offset, 0px));
} z-index: 10;
[data-slot="accordion-item"]:first-child [data-component="sticky-accordion-header"] {
background-color: var(--background-stronger); background-color: var(--background-stronger);
} }
[data-component="sticky-accordion-header"][data-expanded],
[data-slot="accordion-item"][data-expanded] [data-component="sticky-accordion-header"] {
z-index: 10;
}