guise/input/
tags.rs

1//! `TagsInput` — a pill list with an inline editor (gpui entity).
2//!
3//! Type and press Enter (or comma) to commit a tag; committed tags render as
4//! removable pills. Tags are trimmed, non-empty and unique; Backspace in an
5//! empty query pops the last pill. Emits [`TagsInputEvent`] with the full tag
6//! list on every change.
7//!
8//! ```ignore
9//! let topics = cx.new(|cx| {
10//!     TagsInput::new(cx)
11//!         .label("Topics")
12//!         .placeholder("Add a topic…")
13//!         .max_tags(5)
14//! });
15//! cx.subscribe(&topics, |_this, _input, event: &TagsInputEvent, _cx| {
16//!     let tags: &Vec<String> = &event.0;
17//! })
18//! .detach();
19//! ```
20
21use gpui::prelude::*;
22use gpui::{
23    div, px, App, Context, Entity, EventEmitter, FocusHandle, IntoElement, KeyDownEvent,
24    SharedString, Window,
25};
26
27use super::line::{self, Line, LineEditor, LineState};
28use super::{control_metrics, edit::TextEdit, Field, KeyOutcome};
29use crate::devtools::ProbedAny;
30use crate::reactive::Signal;
31use crate::theme::{theme, ColorName, Size};
32
33/// Emitted whenever the tag list changes. Carries the full list.
34#[derive(Debug, Clone)]
35pub struct TagsInputEvent(pub Vec<String>);
36
37/// What committing a query did to the tag list.
38#[derive(Debug, Clone, Copy, PartialEq, Eq)]
39enum Commit {
40    /// The tag was added; clear the query and emit.
41    Added,
42    /// Already present; clear the query, nothing to emit.
43    Duplicate,
44    /// Empty after trimming, or the list is full; leave the query alone.
45    Rejected,
46}
47
48/// Trim `raw` and append it if non-empty, unique, and under `max_tags`.
49fn commit_tag(tags: &mut Vec<String>, raw: &str, max_tags: Option<usize>) -> Commit {
50    let tag = raw.trim();
51    if tag.is_empty() {
52        return Commit::Rejected;
53    }
54    if tags.iter().any(|t| t == tag) {
55        return Commit::Duplicate;
56    }
57    if max_tags.is_some_and(|m| tags.len() >= m) {
58        return Commit::Rejected;
59    }
60    tags.push(tag.to_string());
61    Commit::Added
62}
63
64/// A tag list editor. Create with `cx.new(|cx| TagsInput::new(cx))`.
65pub struct TagsInput {
66    tags: Vec<String>,
67    query: TextEdit,
68    state: LineState,
69    focus: FocusHandle,
70    placeholder: SharedString,
71    label: Option<SharedString>,
72    description: Option<SharedString>,
73    error: Option<SharedString>,
74    max_tags: Option<usize>,
75    size: Size,
76    disabled: bool,
77}
78
79impl EventEmitter<TagsInputEvent> for TagsInput {}
80
81impl TagsInput {
82    pub fn new(cx: &mut Context<Self>) -> Self {
83        TagsInput {
84            tags: Vec::new(),
85            query: TextEdit::new(""),
86            state: LineState::new(),
87            focus: cx.focus_handle().tab_stop(true),
88            placeholder: SharedString::default(),
89            label: None,
90            description: None,
91            error: None,
92            max_tags: None,
93            size: Size::Sm,
94            disabled: false,
95        }
96    }
97
98    /// The initial tags.
99    pub fn tags<I, S>(mut self, tags: I) -> Self
100    where
101        I: IntoIterator<Item = S>,
102        S: Into<String>,
103    {
104        self.tags = tags.into_iter().map(Into::into).collect();
105        self
106    }
107
108    pub fn placeholder(mut self, placeholder: impl Into<SharedString>) -> Self {
109        self.placeholder = placeholder.into();
110        self
111    }
112
113    pub fn label(mut self, label: impl Into<SharedString>) -> Self {
114        self.label = Some(label.into());
115        self
116    }
117
118    pub fn description(mut self, description: impl Into<SharedString>) -> Self {
119        self.description = Some(description.into());
120        self
121    }
122
123    pub fn error(mut self, error: impl Into<SharedString>) -> Self {
124        self.error = Some(error.into());
125        self
126    }
127
128    /// Cap the number of tags; commits beyond it are ignored.
129    pub fn max_tags(mut self, max_tags: usize) -> Self {
130        self.max_tags = Some(max_tags);
131        self
132    }
133
134    pub fn size(mut self, size: Size) -> Self {
135        self.size = size;
136        self
137    }
138
139    pub fn disabled(mut self, disabled: bool) -> Self {
140        self.disabled = disabled;
141        self
142    }
143
144    /// The current tags.
145    pub fn tag_values(&self) -> &[String] {
146        &self.tags
147    }
148
149    /// Replace the tags programmatically (emits no event).
150    pub fn set_tags(&mut self, tags: Vec<String>, cx: &mut Context<Self>) {
151        if self.tags != tags {
152            self.tags = tags;
153            cx.notify();
154        }
155    }
156
157    /// Two-way bind this input's tags to a `Signal<Vec<String>>`. The signal
158    /// is the source of truth: the input adopts its value now, commits and
159    /// removals write back through [`Signal::set_if_changed`], and signal
160    /// writes replace the pills without emitting [`TagsInputEvent`]. Equality
161    /// guards on both directions prevent update loops.
162    pub fn bind(entity: &Entity<TagsInput>, signal: &Signal<Vec<String>>, cx: &mut App) {
163        let initial = signal.get(cx);
164        entity.update(cx, |this, cx| this.set_tags(initial, cx));
165        let sink = signal.clone();
166        cx.subscribe(entity, move |_input, event: &TagsInputEvent, cx| {
167            sink.set_if_changed(cx, event.0.clone());
168        })
169        .detach();
170        let input = entity.downgrade();
171        cx.observe(signal.entity(), move |observed, cx| {
172            let value = observed.read(cx).clone();
173            input.update(cx, |this, cx| this.set_tags(value, cx)).ok();
174        })
175        .detach();
176    }
177
178    fn remove(&mut self, index: usize, cx: &mut Context<Self>) {
179        if self.disabled || index >= self.tags.len() {
180            return;
181        }
182        self.tags.remove(index);
183        cx.emit(TagsInputEvent(self.tags.clone()));
184        cx.notify();
185    }
186
187    fn commit(&mut self, cx: &mut Context<Self>) {
188        match commit_tag(&mut self.tags, &self.query.text(), self.max_tags) {
189            Commit::Added => {
190                self.query.set_text("");
191                cx.emit(TagsInputEvent(self.tags.clone()));
192            }
193            Commit::Duplicate => self.query.set_text(""),
194            Commit::Rejected => {}
195        }
196    }
197
198    fn on_key(&mut self, event: &KeyDownEvent, window: &mut Window, cx: &mut Context<Self>) {
199        if self.disabled {
200            return;
201        }
202        let ks = &event.keystroke;
203        // Enter and comma commit instead of editing the query. Catching the
204        // comma here, before the key is offered to the platform's input
205        // handler, is what keeps it from being typed as a character.
206        if ks.key.as_str() == "enter" || ks.key_char.as_deref() == Some(",") {
207            self.commit(cx);
208            cx.notify();
209            cx.stop_propagation();
210            return;
211        }
212        // Backspace in an empty query pops the last pill.
213        if ks.key.as_str() == "backspace" && self.query.is_empty() {
214            if self.tags.pop().is_some() {
215                cx.emit(TagsInputEvent(self.tags.clone()));
216            }
217            cx.notify();
218            cx.stop_propagation();
219            return;
220        }
221        match line::keys(self, event, window, cx) {
222            KeyOutcome::Edited => {
223                cx.notify();
224                cx.stop_propagation();
225            }
226            // Submit is handled above; Escape and the rest bubble to the host.
227            KeyOutcome::Submit | KeyOutcome::Cancel | KeyOutcome::Pass => {}
228        }
229    }
230}
231
232impl LineEditor for TagsInput {
233    fn edit(&self) -> &TextEdit {
234        &self.query
235    }
236
237    fn edit_mut(&mut self) -> &mut TextEdit {
238        &mut self.query
239    }
240
241    fn line(&self) -> &LineState {
242        &self.state
243    }
244
245    fn line_mut(&mut self) -> &mut LineState {
246        &mut self.state
247    }
248
249    fn line_focus(&self) -> &FocusHandle {
250        &self.focus
251    }
252
253    fn line_read_only(&self) -> bool {
254        self.disabled
255    }
256
257    /// A comma pasted mid-string is still a separator, so it commits rather
258    /// than landing in the query.
259    fn line_filter(&self, text: String) -> String {
260        text.replace(',', " ")
261    }
262
263    fn line_changed(&mut self, cx: &mut Context<Self>) {
264        cx.notify();
265    }
266}
267
268line::line_input_handler!(TagsInput);
269line::line_focus_builders!(TagsInput);
270
271impl Render for TagsInput {
272    fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
273        let t = theme(cx);
274        let (height, pad_x, font) = control_metrics(self.size);
275        let radius = t.radius(t.default_radius);
276        let focused = self.focus.is_focused(window) && !self.disabled;
277
278        let border = if self.error.is_some() {
279            t.color(ColorName::Red, 6)
280        } else if focused {
281            t.primary()
282        } else {
283            t.border()
284        }
285        .hsla();
286        let text_color = t.text().hsla();
287        let dimmed = t.dimmed().hsla();
288        let surface = t.surface().hsla();
289        let pill_bg = t.surface_hover().hsla();
290        let pill_h = height - 14.0;
291        let pill_font = (font - 2.0).max(10.0);
292
293        let mut field = line::wire(div().id("guise-tagsinput"), &self.focus, cx)
294            .on_key_down(cx.listener(Self::on_key))
295            .flex()
296            .flex_row()
297            .flex_wrap()
298            .items_center()
299            .gap(px(6.0))
300            .min_h(px(height))
301            .px(px(pad_x))
302            .py(px(5.0))
303            .rounded(px(radius))
304            .border_1()
305            .border_color(border)
306            .bg(surface)
307            .text_size(px(font));
308
309        for (i, tag) in self.tags.iter().enumerate() {
310            let remove = div()
311                .id(("guise-tag-remove", i))
312                .cursor_pointer()
313                .text_color(dimmed)
314                .hover(move |s| s.text_color(text_color))
315                .child(SharedString::new_static("\u{00d7}"))
316                .on_click(cx.listener(move |this, _ev, _window, cx| this.remove(i, cx)));
317            field = field.child(
318                div()
319                    .id(("guise-tag", i))
320                    .flex()
321                    .items_center()
322                    .gap(px(4.0))
323                    .h(px(pill_h))
324                    .px(px(8.0))
325                    .rounded(px(pill_h / 2.0))
326                    .bg(pill_bg)
327                    .text_size(px(pill_font))
328                    .text_color(text_color)
329                    .child(SharedString::from(tag.clone()))
330                    .child(remove),
331            );
332        }
333
334        let mut interior = Line::new(cx.entity());
335        // Only offer the placeholder while the field is genuinely empty; with
336        // pills present it would read as another tag.
337        if self.tags.is_empty() {
338            interior = interior.placeholder(self.placeholder.clone(), dimmed);
339        }
340        field = field.child(
341            div()
342                .flex_1()
343                .min_w(px(80.0))
344                .line_height(px(font * 1.3))
345                .child(interior),
346        );
347
348        let mut chrome = Field::new().child(if self.disabled {
349            field.opacity(0.6)
350        } else {
351            field
352        });
353        if let Some(label) = self.label.clone() {
354            chrome = chrome.label(label);
355        }
356        if let Some(error) = self.error.clone() {
357            chrome = chrome.error(error);
358        } else if let Some(description) = self.description.clone() {
359            chrome = chrome.description(description);
360        }
361        chrome.probe_any("TagsInput")
362    }
363}
364
365#[cfg(test)]
366mod tests {
367    use super::*;
368
369    #[test]
370    fn commits_trimmed_unique_tags() {
371        let mut tags = Vec::new();
372        assert_eq!(commit_tag(&mut tags, "  rust  ", None), Commit::Added);
373        assert_eq!(commit_tag(&mut tags, "gpui", None), Commit::Added);
374        assert_eq!(tags, vec!["rust".to_string(), "gpui".to_string()]);
375    }
376
377    #[test]
378    fn rejects_empty_and_whitespace() {
379        let mut tags = Vec::new();
380        assert_eq!(commit_tag(&mut tags, "", None), Commit::Rejected);
381        assert_eq!(commit_tag(&mut tags, "   ", None), Commit::Rejected);
382        assert!(tags.is_empty());
383    }
384
385    #[test]
386    fn detects_duplicates_after_trimming() {
387        let mut tags = vec!["rust".to_string()];
388        assert_eq!(commit_tag(&mut tags, " rust ", None), Commit::Duplicate);
389        assert_eq!(tags.len(), 1);
390    }
391
392    #[test]
393    fn respects_max_tags() {
394        let mut tags = vec!["a".to_string(), "b".to_string()];
395        assert_eq!(commit_tag(&mut tags, "c", Some(2)), Commit::Rejected);
396        assert_eq!(tags.len(), 2);
397        // A duplicate at the cap still reports Duplicate (clears the query).
398        assert_eq!(commit_tag(&mut tags, "a", Some(2)), Commit::Duplicate);
399    }
400}
guise/input/tags.rs

guise/input/
tags.rs
