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

tweak(ui): group edited files list styling

Browse Source
This commit is contained in:
David Hill
2026-02-18 23:51:25 +00:00
parent 9c7629ce61
commit 4a8bdc3c75
3 changed files with 110 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/ui/src/components/session-review.css
View File

@@ -68,7 +68,7 @@
[data-slot="session-review-diffs-group"] { [data-slot="session-review-diffs-group"] {
background-color: var(--background-stronger); background-color: var(--background-stronger);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
box-shadow: var(--shadow-xs-border-base); border: 1px solid var(--border-weak-base);
overflow: clip; overflow: clip;
[data-component="accordion"] { [data-component="accordion"] {

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

@@ -127,7 +127,49 @@
padding-top: 8px; padding-top: 8px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; }
[data-slot="session-turn-diffs-group"] {
background-color: var(--background-stronger);
border-radius: var(--radius-lg);
border: 1px solid var(--border-weak-base);
overflow: clip;
[data-component="accordion"] {
gap: 0;
}
[data-component="accordion"]
[data-slot="accordion-item"]
[data-slot="accordion-header"]
[data-slot="accordion-trigger"] {
border: 0;
border-radius: 0;
box-shadow: none;
background-color: transparent;
&:hover {
background-color: var(--surface-base-hover);
}
&:active {
background-color: var(--surface-base-active);
}
}
[data-component="accordion"]
[data-slot="accordion-item"]
+ [data-slot="accordion-item"]
[data-slot="accordion-header"]
[data-slot="accordion-trigger"] {
border-top: 1px solid var(--border-weak-base);
}
[data-component="accordion"] [data-slot="accordion-item"][data-expanded] [data-slot="accordion-content"] {
border: 0;
border-top: 1px solid var(--border-weak-base);
border-radius: 0;
}
} }
[data-slot="session-turn-diff-trigger"] { [data-slot="session-turn-diff-trigger"] {

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

@@ -315,76 +315,78 @@ export function SessionTurn(
<Collapsible.Content> <Collapsible.Content>
<Show when={open()}> <Show when={open()}>
<div data-component="session-turn-diffs-content"> <div data-component="session-turn-diffs-content">
<Accordion <div data-slot="session-turn-diffs-group">
multiple <Accordion
value={expanded()} multiple
onChange={(value) => setExpanded(Array.isArray(value) ? value : value ? [value] : [])} value={expanded()}
> onChange={(value) => setExpanded(Array.isArray(value) ? value : value ? [value] : [])}
<For each={diffs()}> >
{(diff) => { <For each={diffs()}>
const active = createMemo(() => expanded().includes(diff.file)) {(diff) => {
const [visible, setVisible] = createSignal(false) const active = createMemo(() => expanded().includes(diff.file))
const [visible, setVisible] = createSignal(false)
createEffect( createEffect(
on( on(
active, active,
(value) => { (value) => {
if (!value) { if (!value) {
setVisible(false) setVisible(false)
return return
} }
requestAnimationFrame(() => { requestAnimationFrame(() => {
if (!active()) return if (!active()) return
setVisible(true) setVisible(true)
}) })
}, },
{ defer: true }, { defer: true },
), ),
) )
return ( return (
<Accordion.Item value={diff.file}> <Accordion.Item value={diff.file}>
<Accordion.Header> <Accordion.Header>
<Accordion.Trigger> <Accordion.Trigger>
<div data-slot="session-turn-diff-trigger"> <div data-slot="session-turn-diff-trigger">
<span data-slot="session-turn-diff-path"> <span data-slot="session-turn-diff-path">
<Show when={diff.file.includes("/")}> <Show when={diff.file.includes("/")}>
<span data-slot="session-turn-diff-directory"> <span data-slot="session-turn-diff-directory">
{getDirectory(diff.file)} {getDirectory(diff.file)}
</span>
</Show>
<span data-slot="session-turn-diff-filename">
{getFilename(diff.file)}
</span> </span>
</Show>
<span data-slot="session-turn-diff-filename">
{getFilename(diff.file)}
</span>
</span>
<div data-slot="session-turn-diff-meta">
<span data-slot="session-turn-diff-changes">
<DiffChanges changes={diff} />
</span>
<span data-slot="session-turn-diff-chevron">
<Icon name="chevron-down" size="small" />
</span> </span>
<div data-slot="session-turn-diff-meta">
<span data-slot="session-turn-diff-changes">
<DiffChanges changes={diff} />
</span>
<span data-slot="session-turn-diff-chevron">
<Icon name="chevron-down" size="small" />
</span>
</div>
</div> </div>
</div> </Accordion.Trigger>
</Accordion.Trigger> </Accordion.Header>
</Accordion.Header> <Accordion.Content>
<Accordion.Content> <Show when={visible()}>
<Show when={visible()}> <div data-slot="session-turn-diff-view" data-scrollable>
<div data-slot="session-turn-diff-view" data-scrollable> <Dynamic
<Dynamic component={diffComponent}
component={diffComponent} before={{ name: diff.file, contents: diff.before }}
before={{ name: diff.file, contents: diff.before }} after={{ name: diff.file, contents: diff.after }}
after={{ name: diff.file, contents: diff.after }} />
/> </div>
</div> </Show>
</Show> </Accordion.Content>
</Accordion.Content> </Accordion.Item>
</Accordion.Item> )
) }}
}} </For>
</For> </Accordion>
</Accordion> </div>
</div> </div>
</Show> </Show>
</Collapsible.Content> </Collapsible.Content>