Improve mention visibility by adding a background color (#7014)

When the chat if going fast, It's hard to see who is mentioning you, so
this feature will make it more clear by the UI instead of needing to
read all the messages.

<img width="242" alt="Screenshot 2024-01-29 at 21 19 07"
src="https://github.com/zed-industries/zed/assets/62463826/65ec307d-5027-4ead-9568-854fc746c822">

Release Notes:

- Added background to messages that mention you.
This commit is contained in:
Remco Smits 2024-01-30 18:58:36 +01:00 committed by GitHub
parent e5c4c8522b
commit 30b9cef5ba
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -8,8 +8,9 @@ use db::kvp::KEY_VALUE_STORE;
use editor::Editor;
use gpui::{
actions, div, list, prelude::*, px, Action, AppContext, AsyncWindowContext, DismissEvent,
ElementId, EventEmitter, FocusHandle, FocusableView, FontWeight, ListOffset, ListScrollEvent,
ListState, Model, Render, Subscription, Task, View, ViewContext, VisualContext, WeakView,
ElementId, EventEmitter, Fill, FocusHandle, FocusableView, FontWeight, ListOffset,
ListScrollEvent, ListState, Model, Render, Subscription, Task, View, ViewContext,
VisualContext, WeakView,
};
use language::LanguageRegistry;
use menu::Confirm;
@ -335,19 +336,29 @@ impl ChatPanel {
};
let this = cx.view().clone();
v_flex()
.w_full()
.relative()
let mentioning_you = message
.mentions
.iter()
.any(|m| Some(m.1) == self.client.user_id());
v_flex().w_full().relative().child(
div()
.bg(if mentioning_you {
Fill::from(cx.theme().colors().background)
} else {
Fill::default()
})
.rounded_md()
.overflow_hidden()
.px_1()
.py_0p5()
.when(!is_continuation_from_previous, |this| {
this.pt_3().child(
this.mt_1().child(
h_flex()
.text_ui_sm()
.child(
div().absolute().child(
.child(div().absolute().child(
Avatar::new(message.sender.avatar_uri.clone()).size(rems(1.)),
),
)
))
.child(
div()
.pl(cx.rem_size() + px(6.0))
@ -366,7 +377,7 @@ impl ChatPanel {
),
)
})
.when(is_continuation_from_previous, |this| this.pt_1())
.when(mentioning_you, |this| this.mt_1())
.child(
v_flex()
.w_full()
@ -395,6 +406,7 @@ impl ChatPanel {
})
})),
),
),
)
}