diff --git a/packages/ui/src/components/session-review.css b/packages/ui/src/components/session-review.css index 7395da1b1..79c62d334 100644 --- a/packages/ui/src/components/session-review.css +++ b/packages/ui/src/components/session-review.css @@ -68,7 +68,7 @@ [data-slot="session-review-diffs-group"] { background-color: var(--background-stronger); border-radius: var(--radius-lg); - box-shadow: var(--shadow-xs-border-base); + border: 1px solid var(--border-weak-base); overflow: clip; [data-component="accordion"] { diff --git a/packages/ui/src/components/session-turn.css b/packages/ui/src/components/session-turn.css index e7da2b6f0..9dbc1bf63 100644 --- a/packages/ui/src/components/session-turn.css +++ b/packages/ui/src/components/session-turn.css @@ -127,7 +127,49 @@ padding-top: 8px; display: flex; 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"] { diff --git a/packages/ui/src/components/session-turn.tsx b/packages/ui/src/components/session-turn.tsx index a418fddd9..191daa1e3 100644 --- a/packages/ui/src/components/session-turn.tsx +++ b/packages/ui/src/components/session-turn.tsx @@ -315,76 +315,78 @@ export function SessionTurn(
- setExpanded(Array.isArray(value) ? value : value ? [value] : [])} - > - - {(diff) => { - const active = createMemo(() => expanded().includes(diff.file)) - const [visible, setVisible] = createSignal(false) +
+ setExpanded(Array.isArray(value) ? value : value ? [value] : [])} + > + + {(diff) => { + const active = createMemo(() => expanded().includes(diff.file)) + const [visible, setVisible] = createSignal(false) - createEffect( - on( - active, - (value) => { - if (!value) { - setVisible(false) - return - } + createEffect( + on( + active, + (value) => { + if (!value) { + setVisible(false) + return + } - requestAnimationFrame(() => { - if (!active()) return - setVisible(true) - }) - }, - { defer: true }, - ), - ) + requestAnimationFrame(() => { + if (!active()) return + setVisible(true) + }) + }, + { defer: true }, + ), + ) - return ( - - - -
- - - - {getDirectory(diff.file)} + return ( + + + +
+ + + + {getDirectory(diff.file)} + + + + {getFilename(diff.file)} - - - {getFilename(diff.file)} - - -
- - - - - +
+ + + + + + +
-
-
-
- - -
- -
-
-
-
- ) - }} - - + + + + +
+ +
+
+
+ + ) + }} + + +