Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

agent: Refine individual file item design in the edit disclosure (#28283)

Browse source 
<img
src="https://github.com/user-attachments/assets/f1ad0598-d864-407f-8b81-6ca29e2ffae3"
width="650"/>

Release Notes:

- N/A
This commit is contained in:
Danilo Leal 2025-04-07 19:58:49 -03:00 • committed by GitHub
parent 6220b86f94
commit b27922129c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 94 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

118
crates/agent/src/message_editor.rs
View file

@ -351,6 +351,7 @@ impl Render for MessageEditor {
let total_token_usage = thread.total_token_usage(cx); let total_token_usage = thread.total_token_usage(cx);
let is_model_selected = self.is_model_selected(cx); let is_model_selected = self.is_model_selected(cx);
let is_editor_empty = self.is_editor_empty(cx); let is_editor_empty = self.is_editor_empty(cx);
let is_edit_changes_expanded = self.edits_expanded;
let action_log = self.thread.read(cx).action_log(); let action_log = self.thread.read(cx).action_log();
let changed_buffers = action_log.read(cx).changed_buffers(cx); let changed_buffers = action_log.read(cx).changed_buffers(cx);
@ -416,12 +417,12 @@ impl Render for MessageEditor {
.child( .child(
h_flex() h_flex()
.id("edits-container") .id("edits-container")
.cursor_pointer()
.p_1p5() .p_1p5()
.justify_between() .justify_between()
.when(self.edits_expanded, |this| { .when(is_edit_changes_expanded, |this| {
this.border_b_1().border_color(border_color) this.border_b_1().border_color(border_color)
}) })
.cursor_pointer()
.on_click(cx.listener(|this, _, window, cx| { .on_click(cx.listener(|this, _, window, cx| {
this.handle_review_click(window, cx) this.handle_review_click(window, cx)
})) }))
@ -431,7 +432,7 @@ impl Render for MessageEditor {
.child( .child(
Disclosure::new( Disclosure::new(
"edits-disclosure", "edits-disclosure",
self.edits_expanded, is_edit_changes_expanded,
) )
.on_click( .on_click(
cx.listener(|this, _ev, _window, cx| { cx.listener(|this, _ev, _window, cx| {
@ -481,9 +482,9 @@ impl Render for MessageEditor {
})), })),
), ),
) )
.when(self.edits_expanded, |parent| { .when(is_edit_changes_expanded, |parent| {
parent.child( parent.child(
v_flex().bg(cx.theme().colors().editor_background).children( v_flex().children(
changed_buffers.into_iter().enumerate().flat_map( changed_buffers.into_iter().enumerate().flat_map(
|(index, (buffer, _diff))| { |(index, (buffer, _diff))| {
let file = buffer.read(cx).file()?; let file = buffer.read(cx).file()?;
@ -497,7 +498,7 @@ impl Render for MessageEditor {
} else { } else {
Some( Some(
Label::new(format!( Label::new(format!(
"{}{}", "/{}{}",
parent_str, parent_str,
std::path::MAIN_SEPARATOR_STR std::path::MAIN_SEPARATOR_STR
)) ))
@ -525,39 +526,65 @@ impl Render for MessageEditor {
.size(IconSize::Small) .size(IconSize::Small)
}); });
let element = div() let hover_color = cx.theme()
.colors()
.element_background
.blend(cx.theme().colors().editor_foreground.opacity(0.025));
let overlay_gradient = linear_gradient(
90.,
linear_color_stop(
editor_bg_color,
1.,
),
linear_color_stop(
editor_bg_color
.opacity(0.2),
0.,
),
);
let overlay_gradient_hover = linear_gradient(
90.,
linear_color_stop(
hover_color,
1.,
),
linear_color_stop(
hover_color
.opacity(0.2),
0.,
),
);
let element = h_flex()
.group("edited-code")
.id(("file-container", index))
.cursor_pointer()
.relative() .relative()
.py_1() .py_1()
.px_2() .pl_2()
.pr_1()
.gap_2()
.justify_between()
.bg(cx.theme().colors().editor_background)
.hover(|style| style.bg(hover_color))
.when(index + 1 < changed_buffers_count, |parent| { .when(index + 1 < changed_buffers_count, |parent| {
parent.border_color(border_color).border_b_1() parent.border_color(border_color).border_b_1()
}) })
.child( .child(
h_flex() h_flex()
.gap_2() .id("file-name")
.justify_between()
.child(
h_flex()
.id(("file-container", index))
.pr_8() .pr_8()
.gap_1p5() .gap_1p5()
.max_w_full() .max_w_full()
.overflow_x_scroll() .overflow_x_scroll()
.cursor_pointer()
.on_click({
let buffer = buffer.clone();
cx.listener(move |this, _, window, cx| {
this.handle_file_click(buffer.clone(), window, cx);
})
})
.tooltip(
Tooltip::text(format!("Review {}", path.display()))
)
.child(file_icon) .child(file_icon)
.child( .child(
h_flex() h_flex()
.gap_0p5()
.children(name_label)
.children(parent_label) .children(parent_label)
.children(name_label),
) // TODO: show lines changed ) // TODO: show lines changed
.child( .child(
Label::new("+") Label::new("+")
@ -568,27 +595,36 @@ impl Render for MessageEditor {
.color(Color::Deleted), .color(Color::Deleted),
), ),
) )
.child(
div().visible_on_hover("edited-code").child(
Button::new("review", "Review")
.label_size(LabelSize::Small)
.on_click({
let buffer = buffer.clone();
cx.listener(move |this, _, window, cx| {
this.handle_file_click(buffer.clone(), window, cx);
})
})
)
)
.child( .child(
div() div()
.h_full() .id("gradient-overlay")
.absolute() .absolute()
.w_8() .h_5_6()
.w_12()
.bottom_0() .bottom_0()
.right_0() .right(px(52.))
.bg(linear_gradient( .bg(overlay_gradient)
90., .group_hover("edited-code", |style| style.bg(overlay_gradient_hover))
linear_color_stop( ,
editor_bg_color, )
1., .on_click({
), let buffer = buffer.clone();
linear_color_stop( cx.listener(move |this, _, window, cx| {
editor_bg_color this.handle_file_click(buffer.clone(), window, cx);
.opacity(0.2), })
0., });
),
)),
),
);
Some(element) Some(element)
}, },