From 0ccb26df94ed83c5a6492068a7bbe73445e54f0c Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Wed, 12 Nov 2025 07:03:35 -0600
Subject: feat(desktop): sticky diff headers

---
 packages/desktop/src/pages/session.tsx | 41 +++++++++++++++++++++++-----------
 1 file changed, 28 insertions(+), 13 deletions(-)

(limited to 'packages/desktop/src')

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>
+  )
+}
-- 
cgit v1.2.3