assistant: Refine settings view's instruction visuals (#25812)
I've been bothered by using simple hyphens for bullet lists here for a while; it kinda looked cheap and not well-formatted. So, in this PR, I'm adding a new, custom UI component in the `language_models` crate, called `InstructionListItem`, based off the `ListItem` that's somewhat mimic'ing what a `<li>` would be on the web. It does have a "rigid" structure as in it's always a label followed by a button (which is optional), but that seems okay given it has been the overall shape of the copy we've been using here. Also, never really loved that we were pasting URLs directly, that kinda felt cheap, too. I could see an argument where it's just clearer, but it looks too cluttered, as URLs aren't super pretty, necessarily. | Before | After | |--------|--------| | <img src="https://github.com/user-attachments/assets/ffd1ac27-b1f4-450d-abf5-079285fc9877" width="700px" /> | <img src="https://github.com/user-attachments/assets/28fb9d0d-205d-45d8-9e43-1aaa947adc96" width="700px" /> | Release Notes: - N/A
This commit is contained in:
parent
c9aba6c10a
commit
508b581215
9 changed files with 180 additions and 148 deletions
66
crates/language_models/src/ui/instruction_list_item.rs
Normal file
66
crates/language_models/src/ui/instruction_list_item.rs
Normal file
|
@ -0,0 +1,66 @@
|
|||
use gpui::{AnyElement, IntoElement, ParentElement, SharedString};
|
||||
use ui::{prelude::*, ListItem};
|
||||
|
||||
/// A reusable list item component for adding LLM provider configuration instructions
|
||||
pub struct InstructionListItem {
|
||||
label: SharedString,
|
||||
button_label: Option<SharedString>,
|
||||
button_link: Option<String>,
|
||||
}
|
||||
|
||||
impl InstructionListItem {
|
||||
pub fn new(
|
||||
label: impl Into<SharedString>,
|
||||
button_label: Option<impl Into<SharedString>>,
|
||||
button_link: Option<impl Into<String>>,
|
||||
) -> Self {
|
||||
Self {
|
||||
label: label.into(),
|
||||
button_label: button_label.map(|l| l.into()),
|
||||
button_link: button_link.map(|l| l.into()),
|
||||
}
|
||||
}
|
||||
|
||||
pub fn text_only(label: impl Into<SharedString>) -> Self {
|
||||
Self {
|
||||
label: label.into(),
|
||||
button_label: None,
|
||||
button_link: None,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
impl IntoElement for InstructionListItem {
|
||||
type Element = AnyElement;
|
||||
|
||||
fn into_element(self) -> Self::Element {
|
||||
let item_content = if let (Some(button_label), Some(button_link)) =
|
||||
(self.button_label, self.button_link)
|
||||
{
|
||||
let link = button_link.clone();
|
||||
h_flex().flex_wrap().child(Label::new(self.label)).child(
|
||||
Button::new("link-button", button_label)
|
||||
.style(ButtonStyle::Subtle)
|
||||
.icon(IconName::ArrowUpRight)
|
||||
.icon_size(IconSize::XSmall)
|
||||
.icon_color(Color::Muted)
|
||||
.on_click(move |_, _window, cx| cx.open_url(&link)),
|
||||
)
|
||||
} else {
|
||||
div().child(Label::new(self.label))
|
||||
};
|
||||
|
||||
div()
|
||||
.child(
|
||||
ListItem::new("list-item")
|
||||
.selectable(false)
|
||||
.start_slot(
|
||||
Icon::new(IconName::Dash)
|
||||
.size(IconSize::XSmall)
|
||||
.color(Color::Hidden),
|
||||
)
|
||||
.child(item_content),
|
||||
)
|
||||
.into_any()
|
||||
}
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue