fix(app): highlight selected change

Track clicked file in the Changes tree and apply selection styling to the matching review diff.

packages/ui/src/components/button.css

@@ -43,6 +43,10 @@
     background-color: transparent;
     color: var(--text-strong);
 
+    [data-slot="icon-svg"] {
+      color: var(--icon-base);
+    }
+
     &:hover:not(:disabled) {
       background-color: var(--surface-raised-base-hover);
     }
@@ -54,8 +58,11 @@
     }
     &:disabled {
       color: var(--text-weak);
-      opacity: 0.7;
       cursor: not-allowed;
+
+      [data-slot="icon-svg"] {
+        color: var(--icon-disabled);
+      }
     }
     &[data-selected="true"]:not(:disabled) {
       background-color: var(--surface-raised-base-hover);

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

@@ -54,6 +54,13 @@
     background-color: var(--background-stronger) !important;
   }
 
+  [data-slot="session-review-accordion-item"][data-selected] {
+    [data-slot="session-review-accordion-content"] {
+      box-shadow: var(--shadow-xs-border-select);
+      border-radius: var(--radius-lg);
+    }
+  }
+
   [data-slot="accordion-item"] {
     [data-slot="accordion-content"] {
       display: none;

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

@@ -44,6 +44,7 @@ export interface SessionReviewProps {
   comments?: SessionReviewComment[]
   focusedComment?: SessionReviewFocus | null
   onFocusedCommentChange?: (focus: SessionReviewFocus | null) => void
+  focusedFile?: string
   open?: string[]
   onOpenChange?: (open: string[]) => void
   scrollRef?: (el: HTMLDivElement) => void
@@ -501,6 +502,7 @@ export const SessionReview = (props: SessionReviewProps) => {
                   id={diffId(diff.file)}
                   data-file={diff.file}
                   data-slot="session-review-accordion-item"
+                  data-selected={props.focusedFile === diff.file ? "" : undefined}
                 >
                   <StickyAccordionHeader>
                     <Accordion.Trigger>

packages/ui/src/styles/theme.css

@@ -286,6 +286,7 @@
   --icon-diff-add-active: var(--mint-light-12);
   --icon-diff-delete-base: var(--ember-light-10);
   --icon-diff-delete-hover: var(--ember-light-11);
+  --icon-diff-modified-base: var(--icon-warning-base);
   --syntax-comment: var(--text-weak);
   --syntax-regexp: var(--text-base);
   --syntax-string: #006656;
@@ -543,6 +544,7 @@
     --icon-diff-add-active: var(--mint-dark-11);
     --icon-diff-delete-base: var(--ember-dark-9);
     --icon-diff-delete-hover: var(--ember-dark-10);
+    --icon-diff-modified-base: var(--icon-warning-base);
     --syntax-comment: var(--text-weak);
     --syntax-regexp: var(--text-base);
     --syntax-string: #00ceb9;

packages/ui/src/theme/resolve.ts

@@ -240,6 +240,7 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
   tokens["icon-diff-add-active"] = diffAdd[isDark ? 10 : 11]
   tokens["icon-diff-delete-base"] = diffDelete[isDark ? 8 : 9]
   tokens["icon-diff-delete-hover"] = diffDelete[isDark ? 9 : 10]
+  tokens["icon-diff-modified-base"] = tokens["icon-warning-base"]
 
   tokens["syntax-comment"] = "var(--text-weak)"
   tokens["syntax-regexp"] = "var(--text-base)"