diff --git a/packages/desktop/src/pages/session.tsx b/packages/desktop/src/pages/session.tsx index 9c639919..f16729cc 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 */} -
+
{(diff) => ( - +
@@ -549,8 +549,8 @@ export default function Page() {
-
- + + {(diff) => ( - +
@@ -702,7 +702,7 @@ export default function Page() {
-
+ - +
-
All changes
-
+
All changes
+
{(diff) => ( - +
@@ -755,7 +755,7 @@ export default function Page() {
-
+ ) } + +function StickyAccordionHeader(props: ParentProps<{ class?: string }>) { + return ( + + {props.children} + + ) +} diff --git a/packages/ui/src/components/accordion.css b/packages/ui/src/components/accordion.css index 5524838b..f949dc94 100644 --- a/packages/ui/src/components/accordion.css +++ b/packages/ui/src/components/accordion.css @@ -12,9 +12,6 @@ align-items: flex-start; gap: 0px; align-self: stretch; - border: 1px solid var(--border-weak-base); - border-bottom: none; - border-top: none; overflow: clip; [data-slot="accordion-header"] { @@ -36,7 +33,7 @@ user-select: none; background-color: var(--surface-base); - border-bottom: 1px solid var(--border-weak-base); + border: 1px solid var(--border-weak-base); overflow: clip; color: var(--text-strong); transition: background-color 0.15s ease; @@ -62,11 +59,19 @@ } &[data-expanded] { - border: 1px solid var(--border-weak-base); - border-bottom: 1px solid var(--border-weak-base); margin-top: 8px; margin-bottom: 8px; - border-radius: 8px; + + [data-slot="accordion-trigger"] { + border-radius: 8px 8px 0 0; + } + + [data-slot="accordion-content"] { + border: 1px solid var(--border-weak-base); + border-top: none; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + } [data-slot="accordion-item"]:has(+ &) { &[data-closed] { @@ -81,18 +86,23 @@ } & + [data-slot="accordion-item"] { - border-top: 1px solid var(--border-weak-base); - border-top-left-radius: 8px; - border-top-right-radius: 8px; margin-top: 8px; + + [data-slot="accordion-trigger"] { + border-top-left-radius: 8px; + border-top-right-radius: 8px; + } + } + } + + &[data-closed] + &[data-closed] { + [data-slot="accordion-trigger"] { + border-top: none; } } &:first-child { margin-top: 0px; - border-top: 1px solid var(--border-weak-base); - border-top-left-radius: 8px; - border-top-right-radius: 8px; &[data-closed] { [data-slot="accordion-trigger"] { @@ -104,8 +114,6 @@ &:last-child { margin-bottom: 0px; - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; &[data-closed] { [data-slot="accordion-trigger"] { diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css index f6511e31..05164092 100644 --- a/packages/ui/src/styles/theme.css +++ b/packages/ui/src/styles/theme.css @@ -77,7 +77,7 @@ --background-weak: var(--smoke-light-3); --background-strong: var(--smoke-light-1); --background-stronger: #fcfcfc; - --surface-base: var(--smoke-light-alpha-2); + --surface-base: var(--smoke-light-3); --base: var(--smoke-light-alpha-2); --surface-base-hover: #0500000f; --surface-base-active: var(--smoke-light-alpha-3); @@ -317,7 +317,7 @@ --background-weak: #1b1818; --background-strong: #151313; --background-stronger: #191515; - --surface-base: var(--smoke-dark-alpha-2); + --surface-base: var(--smoke-dark-3); --base: var(--smoke-dark-alpha-2); --surface-base-hover: #e0b7b716; --surface-base-active: var(--smoke-dark-alpha-3);