diff options
Diffstat (limited to 'packages/desktop/src')
| -rw-r--r-- | packages/desktop/src/pages/session.tsx | 41 |
1 files changed, 28 insertions, 13 deletions
diff --git a/packages/desktop/src/pages/session.tsx b/packages/desktop/src/pages/session.tsx index 9c639919f..f16729cc2 100644 --- a/packages/desktop/src/pages/session.tsx +++ b/packages/desktop/src/pages/session.tsx @@ -44,7 +44,7 @@ import { useDragDropContext, } from "@thisbeyond/solid-dnd" import type { DragEvent, Transformer } from "@thisbeyond/solid-dnd" -import type { JSX } from "solid-js" +import type { JSX, ParentProps } from "solid-js" import { useSync } from "@/context/sync" import { type AssistantMessage as AssistantMessageType } from "@opencode-ai/sdk" import { Markdown } from "@opencode-ai/ui" @@ -477,7 +477,7 @@ export default function Page() { class="flex flex-col items-start self-stretch gap-8 pb-20" > {/* Title */} - <div class="flex flex-col items-start gap-2 self-stretch sticky top-0 bg-background-stronger z-10 pb-1"> + <div class="flex flex-col items-start gap-2 self-stretch sticky top-0 bg-background-stronger z-20 pb-1"> <div class="w-full text-14-medium text-text-strong"> <Show when={titled()} @@ -524,7 +524,7 @@ export default function Page() { <For each={message.summary?.diffs ?? []}> {(diff) => ( <Accordion.Item value={diff.file}> - <Accordion.Header> + <StickyAccordionHeader class="top-10 data-expanded:before:-top-10 "> <Accordion.Trigger> <div class="flex items-center justify-between w-full gap-5"> <div class="grow flex items-center gap-5 min-w-0"> @@ -549,8 +549,8 @@ export default function Page() { </div> </div> </Accordion.Trigger> - </Accordion.Header> - <Accordion.Content class="max-h-[360px] overflow-y-auto no-scrollbar"> + </StickyAccordionHeader> + <Accordion.Content class="max-h-60 overflow-y-auto no-scrollbar"> <Diff before={{ name: diff.file!, @@ -682,7 +682,7 @@ export default function Page() { <For each={session.diffs()}> {(diff) => ( <Accordion.Item value={diff.file} defaultOpen> - <Accordion.Header> + <StickyAccordionHeader> <Accordion.Trigger> <div class="flex items-center justify-between w-full gap-5"> <div class="grow flex items-center gap-5 min-w-0"> @@ -702,7 +702,7 @@ export default function Page() { </div> </div> </Accordion.Trigger> - </Accordion.Header> + </StickyAccordionHeader> <Accordion.Content> <Diff before={{ @@ -725,19 +725,19 @@ export default function Page() { </div> </Tabs.Content> <Show when={local.layout.review.state() === "tab" && session.diffs().length}> - <Tabs.Content value="review" class="select-text mt-8"> + <Tabs.Content value="review" class="select-text flex flex-col h-full overflow-hidden mt-8"> <div classList={{ - "relative px-6 py-2 w-full flex flex-col gap-6 flex-1 min-h-0": true, + "relative px-6 py-2 w-full flex flex-col gap-6 flex-1 min-h-0 overflow-hidden": true, }} > - <div class="text-14-medium text-text-strong">All changes</div> - <div class="h-full pb-40 overflow-y-auto no-scrollbar"> + <div class="text-14-medium text-text-strong shrink-0">All changes</div> + <div class="flex-1 min-h-0 pb-40 overflow-y-auto no-scrollbar"> <Accordion class="w-full" multiple> <For each={session.diffs()}> {(diff) => ( <Accordion.Item value={diff.file} defaultOpen> - <Accordion.Header> + <StickyAccordionHeader> <Accordion.Trigger> <div class="flex items-center justify-between w-full gap-5"> <div class="grow flex items-center gap-5 min-w-0"> @@ -755,7 +755,7 @@ export default function Page() { </div> </div> </Accordion.Trigger> - </Accordion.Header> + </StickyAccordionHeader> <Accordion.Content> <Diff diffStyle="split" @@ -895,3 +895,18 @@ export default function Page() { </div> ) } + +function StickyAccordionHeader(props: ParentProps<{ class?: string }>) { + return ( + <Accordion.Header + classList={{ + "sticky top-0 data-expanded:z-10": true, + "data-expanded:before:content-[''] data-expanded:before:z-[-10]": true, + "data-expanded:before:absolute data-expanded:before:inset-0 data-expanded:before:bg-background-stronger": true, + [props.class ?? ""]: !!props.class, + }} + > + {props.children} + </Accordion.Header> + ) +} |