diff --git a/packages/app/src/pages/session/message-timeline.tsx b/packages/app/src/pages/session/message-timeline.tsx index 352a9f0f3..567ef5fc8 100644 --- a/packages/app/src/pages/session/message-timeline.tsx +++ b/packages/app/src/pages/session/message-timeline.tsx @@ -368,7 +368,7 @@ export function MessageTimeline(props: { class="relative min-w-0 w-full h-full overflow-y-auto session-scroller" style={{ "--session-title-height": showHeader() ? "40px" : "0px", - "--sticky-accordion-top": showHeader() ? "64px" : "0px", + "--sticky-accordion-top": showHeader() ? "48px" : "0px", }} > diff --git a/packages/ui/src/components/message-part.css b/packages/ui/src/components/message-part.css index 443b1a42e..f83eae097 100644 --- a/packages/ui/src/components/message-part.css +++ b/packages/ui/src/components/message-part.css @@ -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-slot="accordion-trigger"] { background-color: var(--background-stronger) !important; diff --git a/packages/ui/src/components/message-part.tsx b/packages/ui/src/components/message-part.tsx index 3a8eafce2..4b223bf35 100644 --- a/packages/ui/src/components/message-part.tsx +++ b/packages/ui/src/components/message-part.tsx @@ -1611,97 +1611,100 @@ ToolRegistry.register({ }) return ( - - 0}> - setExpanded(Array.isArray(value) ? value : value ? [value] : [])} - > - - {(file) => { - const active = createMemo(() => expanded().includes(file.filePath)) - const [visible, setVisible] = createSignal(false) +
+ + 0}> + setExpanded(Array.isArray(value) ? value : value ? [value] : [])} + > + + {(file) => { + const active = createMemo(() => expanded().includes(file.filePath)) + const [visible, setVisible] = createSignal(false) - createEffect(() => { - if (!active()) { - setVisible(false) - return - } + createEffect(() => { + if (!active()) { + setVisible(false) + return + } - requestAnimationFrame(() => { - if (!active()) return - setVisible(true) + requestAnimationFrame(() => { + if (!active()) return + setVisible(true) + }) }) - }) - return ( - - - -
-
- -
- - {`\u202A${getDirectory(file.relativePath)}\u202C`} - - {getFilename(file.relativePath)} + return ( + + + +
+
+ +
+ + {`\u202A${getDirectory(file.relativePath)}\u202C`} + + {getFilename(file.relativePath)} +
+
+
+ + + + {i18n.t("ui.patch.action.created")} + + + + + {i18n.t("ui.patch.action.deleted")} + + + + + {i18n.t("ui.patch.action.moved")} + + + + + + +
-
- - - - {i18n.t("ui.patch.action.created")} - - - - - {i18n.t("ui.patch.action.deleted")} - - - - - {i18n.t("ui.patch.action.moved")} - - - - - - - + + + + +
+
-
-
-
- - -
- -
-
-
-
- ) - }} - - - - + + + + ) + }} + + + + +
) }, }) diff --git a/packages/ui/src/components/session-turn.css b/packages/ui/src/components/session-turn.css index 8f311e91f..d70c679f2 100644 --- a/packages/ui/src/components/session-turn.css +++ b/packages/ui/src/components/session-turn.css @@ -81,6 +81,17 @@ 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"] { width: 100%; display: flex; @@ -124,7 +135,7 @@ } [data-component="session-turn-diffs-content"] { - padding-top: 8px; + padding-top: 0px; display: flex; flex-direction: column; } diff --git a/packages/ui/src/components/session-turn.tsx b/packages/ui/src/components/session-turn.tsx index 17eb7f388..2aed8279e 100644 --- a/packages/ui/src/components/session-turn.tsx +++ b/packages/ui/src/components/session-turn.tsx @@ -318,6 +318,7 @@ export function SessionTurn(
setExpanded(Array.isArray(value) ? value : value ? [value] : [])} > diff --git a/packages/ui/src/components/sticky-accordion-header.css b/packages/ui/src/components/sticky-accordion-header.css index c8af9f872..68195241b 100644 --- a/packages/ui/src/components/sticky-accordion-header.css +++ b/packages/ui/src/components/sticky-accordion-header.css @@ -1,14 +1,6 @@ [data-component="sticky-accordion-header"] { - --sticky-accordion-top: 0px; position: sticky; - top: var(--sticky-accordion-top); -} - -[data-slot="accordion-item"]:first-child [data-component="sticky-accordion-header"] { + top: calc(var(--sticky-accordion-top, 0px) + var(--sticky-accordion-offset, 0px)); + z-index: 10; 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; -}