fix(ui): disable accordion items for binary files and improve disabled state styling (#22577)

packages/ui/src/components/accordion.css

@@ -51,10 +51,10 @@
         line-height: var(--line-height-large); /* 166.667% */
         letter-spacing: var(--letter-spacing-normal);
 
-        &:hover {
+        &:hover:not([data-disabled]) {
           background-color: var(--surface-base-hover);
         }
-        &:active {
+        &:active:not([data-disabled]) {
           background-color: var(--surface-base-active);
         }
         &:focus-visible {

packages/ui/src/components/session-review.tsx

@@ -388,6 +388,9 @@ export const SessionReview = (props: SessionReviewProps) => {
                     let wrapper: HTMLDivElement | undefined
                     const file = diff.file
 
+                    // binary files have empty diffs that we can't render
+                    const diffCanRender = () => diff.additions !== 0 && diff.deletions !== 0
+
                     const expanded = createMemo(() => open().includes(file))
                     const mounted = createMemo(() => expanded() && (!!store.visible[file] || pinned(file)))
                     const force = () => !!store.force[file]
@@ -496,14 +499,14 @@ export const SessionReview = (props: SessionReviewProps) => {
 
                     return (
                       <Accordion.Item
-                        value={file}
+                        value={diffCanRender() ? file : null!}
                         id={diffId(file)}
                         data-file={file}
                         data-slot="session-review-accordion-item"
                         data-selected={props.focusedFile === file ? "" : undefined}
                       >
                         <StickyAccordionHeader>
-                          <Accordion.Trigger>
+                          <Accordion.Trigger disabled={!diffCanRender()} class="cursor-default">
                             <div data-slot="session-review-trigger-content">
                               <div data-slot="session-review-file-info">
                                 <FileIcon node={{ path: file, type: "file" }} />
@@ -512,7 +515,7 @@ export const SessionReview = (props: SessionReviewProps) => {
                                     <span data-slot="session-review-directory">{`\u202A${getDirectory(file)}\u202C`}</span>
                                   </Show>
                                   <span data-slot="session-review-filename">{getFilename(file)}</span>
-                                  <Show when={props.onViewFile}>
+                                  <Show when={props.onViewFile && diffCanRender()}>
                                     <Tooltip value={openFileLabel()} placement="top" gutter={4}>
                                       <button
                                         data-slot="session-review-view-button"
@@ -553,9 +556,11 @@ export const SessionReview = (props: SessionReviewProps) => {
                                     <DiffChanges changes={diff} />
                                   </Match>
                                 </Switch>
-                                <span data-slot="session-review-diff-chevron">
-                                  <Icon name="chevron-down" size="small" />
-                                </span>
+                                <Show when={diffCanRender()}>
+                                  <span data-slot="session-review-diff-chevron">
+                                    <Icon name="chevron-down" size="small" />
+                                  </span>
+                                </Show>
                               </div>
                             </div>
                           </Accordion.Trigger>