@@ -2597,6 +2622,7 @@ export default function Page() {
diffStyle={layout.review.diffStyle()}
onDiffStyleChange={layout.review.setDiffStyle}
onScrollRef={setReviewScroll}
+ focusedFile={activeDiff()}
onLineComment={(comment) => addCommentToContext({ ...comment, origin: "review" })}
comments={comments.all()}
focusedComment={comments.focus()}
@@ -2664,6 +2690,7 @@ export default function Page() {
allowed={diffFiles()}
kinds={kinds()}
draggable={false}
+ active={activeDiff()}
onFileClick={(node) => focusReviewDiff(node.path)}
/>
diff --git a/packages/ui/src/components/button.css b/packages/ui/src/components/button.css
index 933c7ce5f..d9b345923 100644
--- a/packages/ui/src/components/button.css
+++ b/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);
diff --git a/packages/ui/src/components/session-review.css b/packages/ui/src/components/session-review.css
index dd75b1905..20d2fef15 100644
--- a/packages/ui/src/components/session-review.css
+++ b/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;
diff --git a/packages/ui/src/components/session-review.tsx b/packages/ui/src/components/session-review.tsx
index 8dfbbb1ca..84ec934e2 100644
--- a/packages/ui/src/components/session-review.tsx
+++ b/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}
>
diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css
index 04a9837fd..951450d54 100644
--- a/packages/ui/src/styles/theme.css
+++ b/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;
diff --git a/packages/ui/src/theme/resolve.ts b/packages/ui/src/theme/resolve.ts
index 8c25aefd7..2e9c3a521 100644
--- a/packages/ui/src/theme/resolve.ts
+++ b/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)"