ZacharyZhang-NY/Ely-GPUI-Components
1
1 Fork 0
Code Issues Pull Requests Actions 7 Packages Projects Releases Wiki Activity

Messaging · Stickers and GIFs: a sticker picker and a GIF picker

Browse Source 
StickerPicker shows stickers a pack at a time, chosen above with a
segmented control; a search spans every pack and keeps the stickers
whose names hold it. Arrows move, Enter or a press picks. It reuses the
glyph grid, now forms::picks, which takes its columns and cell size and
titles from the host, so emoji, icons and stickers share one searchable
grid; forms::glyphs keeps the emoji and icon pickers.

GifPicker packs host GIFs in two columns, each moving, under a search
it owns; the host hears the trimmed words only when they change, and
categories fill the search while it is empty. Waiting, it shows tiles
in GIF shapes; finding nothing, it says so. Each GIF is a Tab stop that
a press, Enter or Space picks.

The share toggle now shows its state, as the microphone and camera do.
The gallery ships line-drawn stickers and small GIFs made from its own
pictures.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
ZacharyZhang-NYandClaude Opus 5.5 committed 2026-09-26 23:00:15 -04:00
1 parent 48d02c4903
commit 5ade2bed74
27 files changed
+1212 -288
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/forms/glyphs.rs
+17 -282
View File
@@ -1,266 +1,21 @@
use std::{ops::Range, rc::Rc};
use std::rc::Rc;
use emojis::Group;
use gpui::{
AnyElement, App, Context, ElementId, Entity, InteractiveElement, IntoElement, ParentElement,
RenderOnce, ScrollStrategy, SharedString, StatefulInteractiveElement, Styled,
UniformListScrollHandle, Window, div, prelude::*, uniform_list,
};
use gpui::{App, ElementId, IntoElement, RenderOnce, SharedString, Window};
use super::{
Input, TextInput,
text::{Down, Enter},
};
use super::picks::{Grid, Pick, finder, grid, rows};
use crate::{
primitives::{Icon, IconName, Tooltip, tab_stop},
theme::{ActiveTheme, ControlSize, IconSize, Radius, TextSize},
primitives::{Icon, IconName},
theme::{ActiveTheme, ControlSize, IconSize, TextSize},
typography::Emoji,
};
/// Glyphs across an emoji or icon grid.
const COLUMNS: usize = 8;
/// A row of a glyph grid: a group's title, or a run of glyphs.
#[derive(Clone, Debug, PartialEq)]
pub(crate) enum Row {
Title(&'static str),
Glyphs(Range<usize>),
}
/// Rows for glyph groups given as (title, count), laid in order.
pub(crate) fn rows(groups: impl IntoIterator<Item = (Option<&'static str>, usize)>) -> Vec<Row> {
let (mut out, mut start) = (Vec::new(), 0);
for (title, count) in groups.into_iter().filter(|(_, count)| *count > 0) {
out.extend(title.map(Row::Title));
let end = start + count;
while start < end {
let stop = (start + COLUMNS).min(end);
out.push(Row::Glyphs(start..stop));
start = stop;
}
}
out
}
fn row_of(rows: &[Row], ix: usize) -> usize {
rows.iter()
.position(|row| matches!(row, Row::Glyphs(range) if range.contains(&ix)))
.expect("every glyph sits in a row")
}
/// The glyph an arrow key moves to from `at`: same column in the next row, or the last one there.
pub(crate) fn stepped(rows: &[Row], at: usize, key: &str) -> Option<usize> {
let row = row_of(rows, at);
let Row::Glyphs(here) = &rows[row] else {
unreachable!("row_of finds glyph rows");
};
let column = at - here.start;
let land = |row: &Row| match row {
Row::Glyphs(range) => Some((range.start + column).min(range.end - 1)),
Row::Title(_) => None,
};
let last = rows
.iter()
.rev()
.find_map(|row| match row {
Row::Glyphs(range) => Some(range.end - 1),
Row::Title(_) => None,
})
.expect("a grid with a cursor has glyphs");
match key {
"left" => at.checked_sub(1),
"right" => (at < last).then_some(at + 1),
"up" => rows[..row].iter().rev().find_map(land),
"down" => rows[row + 1..].iter().find_map(land),
_ => None,
}
}
/// A grid's search field, its cursor, and where its list has scrolled.
struct Finder {
search: Entity<TextInput>,
query: String,
cursor: usize,
scroll: UniformListScrollHandle,
}
fn finder(id: &ElementId, hint: &'static str, window: &mut Window, cx: &mut App) -> Entity<Finder> {
let finder = window.use_keyed_state(
(id.clone(), "finder"),
cx,
|window, cx: &mut Context<Finder>| Finder {
search: cx.new(|cx| TextInput::new(window, cx).placeholder(hint)),
query: String::new(),
cursor: 0,
scroll: UniformListScrollHandle::new(),
},
);
let query = {
let search = finder.read(cx).search.clone();
search.read(cx).text().trim().to_lowercase()
};
if finder.read(cx).query != query {
finder.update(cx, |finder, _| {
finder.query = query;
finder.cursor = 0;
finder.scroll.scroll_to_item(0, ScrollStrategy::Top);
});
}
finder
}
type Pick = Rc<dyn Fn(usize, &mut Window, &mut App)>;
type Draw = Rc<dyn Fn(usize, &App) -> AnyElement>;
type OnIcon = Rc<dyn Fn(IconName, &mut Window, &mut App)>;
type OnEmoji = Rc<dyn Fn(&str, &mut Window, &mut App)>;
/// What a glyph grid shows: names for tooltips, rows, a painter, and what a pick does.
struct Grid {
id: ElementId,
names: Rc<Vec<SharedString>>,
rows: Rc<Vec<Row>>,
selected: Option<usize>,
draw: Draw,
pick: Pick,
none: &'static str,
}
fn grid(grid: Grid, finder: &Entity<Finder>, window: &mut Window, cx: &mut App) -> AnyElement {
let focus = tab_stop((grid.id.clone(), "grid").into(), true, window, cx);
let focused = focus.is_focused(window);
let count = grid.names.len();
let (search, cursor, scroll) = {
let finder = finder.read(cx);
let cursor = finder.cursor.min(count.saturating_sub(1));
(finder.search.clone(), cursor, finder.scroll.clone())
};
let theme = cx.theme();
let colors = theme.colors.clone();
let cell = theme.control_height(ControlSize::Lg);
let (into, enter, keys) = (focus.clone(), grid.pick.clone(), grid.pick.clone());
let field = div()
.capture_action(move |_: &Down, window, cx| {
if count > 0 {
cx.stop_propagation();
window.focus(&into);
}
})
.capture_action(move |_: &Enter, window, cx| {
if count > 0 {
cx.stop_propagation();
enter(cursor, window, cx);
}
})
.child(
Input::new(&search).prefix(
Icon::new(IconName::Search)
.size(IconSize::Sm)
.color(colors.fg_subtle),
),
);
let body = if count == 0 {
div()
.h(theme.list_max_height())
.pt_6()
.text_center()
.text_color(colors.fg_subtle)
.child(grid.none)
.into_any_element()
} else {
let (rows, names, draw, pick) = (grid.rows.clone(), grid.names, grid.draw, grid.pick);
let selected = grid.selected;
let (moved, key_rows, place) = (finder.clone(), grid.rows, scroll.clone());
let clicked = finder.clone();
let list = uniform_list((grid.id, "rows"), rows.len(), move |range, _, cx| {
let theme = cx.theme();
rows[range]
.iter()
.map(|row| match row {
Row::Title(title) => div()
.h(cell)
.flex()
.items_end()
.pb_1()
.text_size(theme.text_size(TextSize::Xs))
.text_color(colors.fg_subtle)
.child(*title)
.into_any_element(),
Row::Glyphs(glyphs) => div()
.flex()
.children(glyphs.clone().map(|ix| {
let (pick, name, clicked) =
(pick.clone(), names[ix].clone(), clicked.clone());
let ring = if focused && ix == cursor {
colors.focus
} else if selected == Some(ix) {
colors.accent
} else {
gpui::transparent_black()
};
div()
.id(("glyph", ix))
.flex()
.items_center()
.justify_center()
.size(cell)
.rounded(theme.radius(Radius::Md))
.border_1()
.border_color(ring)
.when(selected == Some(ix), |cell| cell.bg(colors.active))
.cursor_pointer()
.hover(|style| style.bg(colors.hover))
.tooltip(Tooltip::text(name))
.on_click(move |_, window, cx| {
clicked.update(cx, |finder, cx| {
finder.cursor = ix;
cx.notify();
});
pick(ix, window, cx);
})
.child(draw(ix, cx))
}))
.into_any_element(),
})
.collect()
})
.track_scroll(scroll)
.h(theme.list_max_height());
div()
.track_focus(&focus)
.on_key_down(move |event, window, cx| {
let key = event.keystroke.key.as_str();
if matches!(key, "enter" | "space") {
cx.stop_propagation();
keys(cursor, window, cx);
return;
}
let Some(to) = stepped(&key_rows, cursor, key) else {
return;
};
cx.stop_propagation();
let strategy = if to < cursor {
ScrollStrategy::Top
} else {
ScrollStrategy::Bottom
};
place.scroll_to_item(row_of(&key_rows, to), strategy);
moved.update(cx, |finder, cx| {
finder.cursor = to;
cx.notify();
});
})
.child(list)
.into_any_element()
};
div()
.flex()
.flex_col()
.gap_2()
.w(cell * COLUMNS as f32)
.child(field)
.child(body)
.into_any_element()
}
/// A searchable grid of the library's icons.
#[derive(IntoElement)]
pub struct IconPicker {
@@ -317,7 +72,7 @@ impl RenderOnce for IconPicker {
Grid {
id: self.id,
names: Rc::new(found.iter().map(|icon| icon.name().into()).collect()),
rows: Rc::new(rows([(None, found.len())])),
rows: Rc::new(rows([(None, found.len())], COLUMNS)),
selected: self
.selected
.and_then(|icon| found.iter().position(|f| *f == icon)),
@@ -329,6 +84,8 @@ impl RenderOnce for IconPicker {
}),
pick,
none: "No icons match",
columns: COLUMNS,
cell: cx.theme().control_height(ControlSize::Lg),
},
&finder,
window,
@@ -396,9 +153,12 @@ impl RenderOnce for EmojiPicker {
let query = finder.read(cx).query.clone();
let found = emoji_found(&query);
let layout = if query.is_empty() {
rows(Group::iter().map(|group| (Some(title(group)), group.emojis().count())))
rows(
Group::iter().map(|group| (Some(title(group).into()), group.emojis().count())),
COLUMNS,
)
} else {
rows([(None, found.len())])
rows([(None, found.len())], COLUMNS)
};
let found = Rc::new(found);
let (painted, picked) = (found.clone(), found.clone());
@@ -427,6 +187,8 @@ impl RenderOnce for EmojiPicker {
}),
pick,
none: "No emoji match",
columns: COLUMNS,
cell: cx.theme().control_height(ControlSize::Lg),
},
&finder,
window,
@@ -437,7 +199,7 @@ impl RenderOnce for EmojiPicker {
#[cfg(test)]
mod tests {
use super::{Row, emoji_found, rows, stepped};
use super::emoji_found;
#[test]
fn emoji_are_found_whatever_the_case_of_their_names() {
@@ -451,31 +213,4 @@ mod tests {
assert!(glyphs("sparkles").contains(&"✨"));
assert_eq!(glyphs("").len(), emojis::iter().count());
}
#[test]
fn groups_break_into_titled_rows_of_eight() {
let laid = rows([(Some("A"), 10), (None, 0), (Some("B"), 3)]);
assert_eq!(
laid,
[
Row::Title("A"),
Row::Glyphs(0..8),
Row::Glyphs(8..10),
Row::Title("B"),
Row::Glyphs(10..13),
]
);
}
#[test]
fn arrows_keep_the_column_and_cross_titles() {
let laid = rows([(Some("A"), 10), (Some("B"), 3)]);
assert_eq!(stepped(&laid, 6, "down"), Some(9));
assert_eq!(stepped(&laid, 9, "down"), Some(11));
assert_eq!(stepped(&laid, 11, "up"), Some(9));
assert_eq!(stepped(&laid, 1, "up"), None);
assert_eq!(stepped(&laid, 12, "right"), None);
assert_eq!(stepped(&laid, 0, "left"), None);
assert_eq!(stepped(&laid, 8, "left"), Some(7));
}
}
src/forms/mod.rs
+2
View File
@@ -26,6 +26,7 @@ mod options;
mod pairs;
mod path;
mod pattern;
mod picks;
mod pin;
mod radio;
mod rating;
@@ -91,6 +92,7 @@ pub use pairs::{FieldArray, KeyValueInput, ListInput};
pub use path::PathInput;
pub(crate) use path::choose;
pub use pattern::{RegexInput, regex_highlights};
pub(crate) use picks::{Grid, finder, grid, rows};
pub use pin::PinInput;
pub use radio::{Radio, RadioGroup};
pub use rating::Rating;
src/forms/picks.rs
+306
View File
@@ -0,0 +1,306 @@
use std::{ops::Range, rc::Rc};
use gpui::{
AnyElement, App, Context, ElementId, Entity, InteractiveElement, IntoElement, ParentElement,
Rems, ScrollStrategy, SharedString, StatefulInteractiveElement, Styled,
UniformListScrollHandle, Window, div, prelude::*, uniform_list,
};
use super::{
Input, TextInput,
text::{Down, Enter},
};
use crate::{
primitives::{Icon, IconName, Tooltip, tab_stop},
theme::{ActiveTheme, IconSize, Radius, TextSize},
};
/// A row of a glyph grid: a group's title, or a run of glyphs.
#[derive(Clone, Debug, PartialEq)]
pub(crate) enum Row {
Title(SharedString),
Glyphs(Range<usize>),
}
/// Rows for glyph groups given as (title, count), laid in order, `columns` across.
pub(crate) fn rows(
groups: impl IntoIterator<Item = (Option<SharedString>, usize)>,
columns: usize,
) -> Vec<Row> {
let (mut out, mut start) = (Vec::new(), 0);
for (title, count) in groups.into_iter().filter(|(_, count)| *count > 0) {
out.extend(title.map(Row::Title));
let end = start + count;
while start < end {
let stop = (start + columns).min(end);
out.push(Row::Glyphs(start..stop));
start = stop;
}
}
out
}
fn row_of(rows: &[Row], ix: usize) -> usize {
rows.iter()
.position(|row| matches!(row, Row::Glyphs(range) if range.contains(&ix)))
.expect("every glyph sits in a row")
}
/// The glyph an arrow key moves to from `at`: same column in the next row, or the last one there.
pub(crate) fn stepped(rows: &[Row], at: usize, key: &str) -> Option<usize> {
let row = row_of(rows, at);
let Row::Glyphs(here) = &rows[row] else {
unreachable!("row_of finds glyph rows");
};
let column = at - here.start;
let land = |row: &Row| match row {
Row::Glyphs(range) => Some((range.start + column).min(range.end - 1)),
Row::Title(_) => None,
};
let last = rows
.iter()
.rev()
.find_map(|row| match row {
Row::Glyphs(range) => Some(range.end - 1),
Row::Title(_) => None,
})
.expect("a grid with a cursor has glyphs");
match key {
"left" => at.checked_sub(1),
"right" => (at < last).then_some(at + 1),
"up" => rows[..row].iter().rev().find_map(land),
"down" => rows[row + 1..].iter().find_map(land),
_ => None,
}
}
/// A grid's search field, its cursor, and where its list has scrolled.
pub(crate) struct Finder {
search: Entity<TextInput>,
pub query: String,
cursor: usize,
scroll: UniformListScrollHandle,
}
pub(crate) fn finder(
id: &ElementId,
hint: &'static str,
window: &mut Window,
cx: &mut App,
) -> Entity<Finder> {
let finder = window.use_keyed_state(
(id.clone(), "finder"),
cx,
|window, cx: &mut Context<Finder>| Finder {
search: cx.new(|cx| TextInput::new(window, cx).placeholder(hint)),
query: String::new(),
cursor: 0,
scroll: UniformListScrollHandle::new(),
},
);
let query = {
let search = finder.read(cx).search.clone();
search.read(cx).text().trim().to_lowercase()
};
if finder.read(cx).query != query {
finder.update(cx, |finder, _| {
finder.query = query;
finder.cursor = 0;
finder.scroll.scroll_to_item(0, ScrollStrategy::Top);
});
}
finder
}
pub(crate) type Pick = Rc<dyn Fn(usize, &mut Window, &mut App)>;
pub(crate) type Draw = Rc<dyn Fn(usize, &App) -> AnyElement>;
/// What a glyph grid shows: names for tooltips, rows, a painter, what a pick does, and its cells.
pub(crate) struct Grid {
pub id: ElementId,
pub names: Rc<Vec<SharedString>>,
pub rows: Rc<Vec<Row>>,
pub selected: Option<usize>,
pub draw: Draw,
pub pick: Pick,
pub none: &'static str,
pub columns: usize,
pub cell: Rems,
}
pub(crate) fn grid(
grid: Grid,
finder: &Entity<Finder>,
window: &mut Window,
cx: &mut App,
) -> AnyElement {
let focus = tab_stop((grid.id.clone(), "grid").into(), true, window, cx);
let focused = focus.is_focused(window);
let count = grid.names.len();
let (search, cursor, scroll) = {
let finder = finder.read(cx);
let cursor = finder.cursor.min(count.saturating_sub(1));
(finder.search.clone(), cursor, finder.scroll.clone())
};
let theme = cx.theme();
let colors = theme.colors.clone();
let (cell, columns) = (grid.cell, grid.columns);
let (into, enter, keys) = (focus.clone(), grid.pick.clone(), grid.pick.clone());
let field = div()
.capture_action(move |_: &Down, window, cx| {
if count > 0 {
cx.stop_propagation();
window.focus(&into);
}
})
.capture_action(move |_: &Enter, window, cx| {
if count > 0 {
cx.stop_propagation();
enter(cursor, window, cx);
}
})
.child(
Input::new(&search).prefix(
Icon::new(IconName::Search)
.size(IconSize::Sm)
.color(colors.fg_subtle),
),
);
let body = if count == 0 {
div()
.h(theme.list_max_height())
.pt_6()
.text_center()
.text_color(colors.fg_subtle)
.child(grid.none)
.into_any_element()
} else {
let (rows, names, draw, pick) = (grid.rows.clone(), grid.names, grid.draw, grid.pick);
let selected = grid.selected;
let (moved, key_rows, place) = (finder.clone(), grid.rows, scroll.clone());
let clicked = finder.clone();
let list = uniform_list((grid.id, "rows"), rows.len(), move |range, _, cx| {
let theme = cx.theme();
rows[range]
.iter()
.map(|row| match row {
Row::Title(title) => div()
.h(cell)
.flex()
.items_end()
.pb_1()
.text_size(theme.text_size(TextSize::Xs))
.text_color(colors.fg_subtle)
.child(title.clone())
.into_any_element(),
Row::Glyphs(glyphs) => div()
.flex()
.children(glyphs.clone().map(|ix| {
let (pick, name, clicked) =
(pick.clone(), names[ix].clone(), clicked.clone());
let ring = if focused && ix == cursor {
colors.focus
} else if selected == Some(ix) {
colors.accent
} else {
gpui::transparent_black()
};
div()
.id(("glyph", ix))
.flex()
.items_center()
.justify_center()
.size(cell)
.rounded(theme.radius(Radius::Md))
.border_1()
.border_color(ring)
.when(selected == Some(ix), |cell| cell.bg(colors.active))
.cursor_pointer()
.hover(|style| style.bg(colors.hover))
.tooltip(Tooltip::text(name))
.on_click(move |_, window, cx| {
clicked.update(cx, |finder, cx| {
finder.cursor = ix;
cx.notify();
});
pick(ix, window, cx);
})
.child(draw(ix, cx))
}))
.into_any_element(),
})
.collect()
})
.track_scroll(scroll)
.h(theme.list_max_height());
div()
.track_focus(&focus)
.on_key_down(move |event, window, cx| {
let key = event.keystroke.key.as_str();
if matches!(key, "enter" | "space") {
cx.stop_propagation();
keys(cursor, window, cx);
return;
}
let Some(to) = stepped(&key_rows, cursor, key) else {
return;
};
cx.stop_propagation();
let strategy = if to < cursor {
ScrollStrategy::Top
} else {
ScrollStrategy::Bottom
};
place.scroll_to_item(row_of(&key_rows, to), strategy);
moved.update(cx, |finder, cx| {
finder.cursor = to;
cx.notify();
});
})
.child(list)
.into_any_element()
};
div()
.flex()
.flex_col()
.gap_2()
.w(cell * columns as f32)
.child(field)
.child(body)
.into_any_element()
}
#[cfg(test)]
mod tests {
use super::{Row, rows, stepped};
#[test]
fn groups_break_into_titled_rows_of_eight() {
let laid = rows(
[(Some("A".into()), 10), (None, 0), (Some("B".into()), 3)],
8,
);
assert_eq!(
laid,
[
Row::Title("A".into()),
Row::Glyphs(0..8),
Row::Glyphs(8..10),
Row::Title("B".into()),
Row::Glyphs(10..13),
]
);
}
#[test]
fn arrows_keep_the_column_and_cross_titles() {
let laid = rows([(Some("A".into()), 10), (Some("B".into()), 3)], 8);
assert_eq!(stepped(&laid, 6, "down"), Some(9));
assert_eq!(stepped(&laid, 9, "down"), Some(11));
assert_eq!(stepped(&laid, 11, "up"), Some(9));
assert_eq!(stepped(&laid, 1, "up"), None);
assert_eq!(stepped(&laid, 12, "right"), None);
assert_eq!(stepped(&laid, 0, "left"), None);
assert_eq!(stepped(&laid, 8, "left"), Some(7));
}
}
src/messaging/call.rs
+1 -1
View File
@@ -108,7 +108,7 @@ impl RenderOnce for CallControls {
),
toggle(
"share",
(IconName::ScreenShareOff, IconName::ScreenShare),
(IconName::ScreenShare, IconName::ScreenShareOff),
"Share screen",
self.share,
),
src/messaging/gifs.rs
+266
View File
@@ -0,0 +1,266 @@
use std::rc::Rc;
use gpui::{
App, Context, ElementId, Entity, ImageSource, InteractiveElement, IntoElement, MouseButton,
ParentElement, RenderOnce, SharedString, StatefulInteractiveElement, Styled, Subscription,
Window, div, prelude::*, rems,
};
use crate::{
buttons::{Button, ButtonVariant},
forms::{Input, InputEvent, OnValue, TextInput},
layout::{Masonry, on_axis},
motion::Skeleton,
primitives::{FocusRing, Icon, IconName, Image, Tooltip, checked_ratio, framed},
theme::{ActiveTheme, ControlSize, IconSize, Radius, TextSize},
};
/// Shapes the loading tiles take, so the wait looks like GIFs.
const WAITING: [f32; 6] = [1.5, 1.0, 1.8, 1.25, 1.6, 1.1];
/// A GIF: its key, its title, its picture, and its width over its height.
#[derive(Clone)]
pub struct Gif {
pub key: SharedString,
pub title: SharedString,
pub picture: ImageSource,
pub ratio: f32,
}
impl Gif {
pub fn new(
key: impl Into<SharedString>,
title: impl Into<SharedString>,
picture: impl Into<ImageSource>,
ratio: f32,
) -> Self {
Self {
key: key.into(),
title: title.into(),
picture: picture.into(),
ratio: checked_ratio(ratio),
}
}
}
/// Where a GIF search stands: waiting on the host, or what it found.
#[derive(Clone)]
pub enum Gifs {
Loading,
Found(Vec<Gif>),
}
/// The search field, the words last reported, and who gets them.
struct Search {
input: Entity<TextInput>,
words: SharedString,
on_query: Option<OnValue>,
_changes: Subscription,
}
/// GIFs from the host in two columns packed tight, under a search the host answers; while it is empty, categories fill it. Each GIF is a Tab stop, picked by a press, Enter or Space.
#[derive(IntoElement)]
pub struct GifPicker {
id: ElementId,
gifs: Gifs,
categories: Vec<SharedString>,
on_query: Option<OnValue>,
on_pick: Option<OnValue>,
}
impl GifPicker {
pub fn new(id: impl Into<ElementId>, gifs: Gifs) -> Self {
if let Gifs::Found(found) = &gifs {
for (ix, gif) in found.iter().enumerate() {
let twice = found[..ix].iter().any(|other| other.key == gif.key);
assert!(!twice, "gif {} twice", gif.key);
}
}
Self {
id: id.into(),
gifs,
categories: Vec::new(),
on_query: None,
on_pick: None,
}
}
/// Searches offered while the field is empty; a press puts one in it.
pub fn categories(
mut self,
categories: impl IntoIterator<Item = impl Into<SharedString>>,
) -> Self {
self.categories = categories.into_iter().map(Into::into).collect();
self
}
/// Gets the search's words, trimmed, each time they change.
pub fn on_query(
mut self,
handler: impl Fn(&SharedString, &mut Window, &mut App) + 'static,
) -> Self {
self.on_query = Some(Rc::new(handler));
self
}
/// Gets the key of the GIF picked.
pub fn on_pick(
mut self,
handler: impl Fn(&SharedString, &mut Window, &mut App) + 'static,
) -> Self {
self.on_pick = Some(Rc::new(handler));
self
}
}
impl RenderOnce for GifPicker {
fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
let search = window.use_keyed_state(
(self.id.clone(), "search"),
cx,
|window, cx: &mut Context<Search>| {
let input = cx.new(|cx| TextInput::new(window, cx).placeholder("Search GIFs"));
let changes =
cx.subscribe_in(&input, window, |search, input, event, window, cx| {
if *event != InputEvent::Changed {
return;
}
let query = SharedString::from(input.read(cx).text().trim().to_string());
if query == search.words {
return;
}
search.words = query.clone();
log::info!("gif picker: search {query:?}");
if let Some(on_query) = search.on_query.clone() {
on_query(&query, window, cx);
}
cx.notify();
});
Search {
input,
words: SharedString::default(),
on_query: None,
_changes: changes,
}
},
);
search.update(cx, |search, _| search.on_query = self.on_query.clone());
let input = search.read(cx).input.clone();
let empty = input.read(cx).text().trim().is_empty();
let theme = cx.theme();
let colors = &theme.colors;
let round = theme.radius(Radius::Md);
let gap = rems(0.5).to_pixels(window.rem_size());
let categories = (empty && !self.categories.is_empty()).then(|| {
div()
.flex()
.flex_wrap()
.gap_1()
.children(self.categories.iter().map(|category| {
let (field, words) = (input.clone(), category.clone());
Button::new(
(self.id.clone(), format!("category-{category}")),
category.clone(),
)
.variant(ButtonVariant::Subtle)
.size(ControlSize::Sm)
.on_click(move |_, _, cx| {
log::info!("gif picker: category {words}");
let words = words.clone();
field.update(cx, |input, cx| input.set_text(words.to_string(), cx));
})
}))
});
let tiles: Vec<gpui::AnyElement> = match self.gifs {
Gifs::Loading => WAITING
.iter()
.enumerate()
.map(|(ix, ratio)| {
framed(*ratio, cx)
.rounded(round)
.child(
Skeleton::new((self.id.clone(), format!("waiting-{ix}"))).size_full(),
)
.into_any_element()
})
.collect(),
Gifs::Found(found) => found
.into_iter()
.map(|gif| {
let (key, on_pick, owner) =
(gif.key.clone(), self.on_pick.clone(), self.id.clone());
div()
.id((self.id.clone(), format!("gif-{}", gif.key)))
.rounded(round)
.border_1()
.border_color(gpui::transparent_black())
.tab_index(0)
.focus_ring(cx)
.cursor_pointer()
.tooltip(Tooltip::text(gif.title.clone()))
.on_mouse_down(MouseButton::Left, |_, window, _| window.prevent_default())
.on_click(move |_, window, cx| {
log::info!("gif picker {owner}: {key}");
if let Some(on_pick) = &on_pick {
on_pick(&key, window, cx);
}
})
.child(
framed(gif.ratio, cx).rounded(round).child(
Image::new(
(self.id.clone(), format!("picture-{}", gif.key)),
gif.picture,
)
.size_full()
.rounded(round),
),
)
.into_any_element()
})
.collect(),
};
let none = tiles.is_empty().then(|| {
div()
.debug_selector(|| "gifs-none".into())
.py_6()
.flex()
.flex_col()
.items_center()
.gap_2()
.text_size(theme.text_size(TextSize::Sm))
.text_color(colors.fg_muted)
.child(
Icon::new(IconName::SearchX)
.size(IconSize::Lg)
.color(colors.fg_subtle),
)
.child("No GIFs match")
});
let masonry = (!tiles.is_empty())
.then(|| Masonry::new((self.id.clone(), "gifs"), 2, gap).children(tiles));
div()
.debug_selector(|| "gif-picker".into())
.w_full()
.flex()
.flex_col()
.gap_2()
.child(
Input::new(&input).prefix(
Icon::new(IconName::Search)
.size(IconSize::Sm)
.color(colors.fg_subtle),
),
)
.children(categories)
.child(
on_axis(
div()
.id((self.id.clone(), "results"))
.max_h(theme.list_max_height())
.overflow_y_scroll(),
)
.children(none)
.children(masonry),
)
}
}
src/messaging/mod.rs
+4
View File
@@ -1,5 +1,6 @@
mod call;
mod channels;
mod gifs;
mod header;
mod incoming;
mod members;
@@ -8,6 +9,7 @@ mod people;
mod pins;
mod receipt;
mod status;
mod stickers;
mod thread;
mod tiles;
@@ -16,6 +18,7 @@ mod tests;
pub use call::{CallControls, HuddleIndicator, VoiceCallBar};
pub use channels::{ChannelItem, ChannelList, ChatRow, DirectMessageItem};
pub use gifs::{Gif, GifPicker, Gifs};
pub use header::ChannelHeader;
pub use incoming::IncomingCallDialog;
pub use members::{Member, MemberList};
@@ -24,5 +27,6 @@ pub use people::{OnlineStatus, UserProfileCard};
pub use pins::{PinnedMessage, PinnedMessages};
pub use receipt::{Delivery, ReadReceipt};
pub use status::{ClearAfter, Status, StatusSetter};
pub use stickers::{Sticker, StickerPack, StickerPicker};
pub use thread::{MessageThread, ThreadPanel};
pub use tiles::{ParticipantTile, ScreenShareView, VideoCallGrid};
src/messaging/stickers.rs
+179
View File
@@ -0,0 +1,179 @@
use std::rc::Rc;
use gpui::{
App, ElementId, ImageSource, InteractiveElement, IntoElement, ObjectFit, ParentElement,
RenderOnce, SharedString, Styled, Window, div,
};
use crate::{
buttons::SegmentedControl,
forms::{Grid, OnValue, finder, grid, rows},
primitives::Image,
theme::{ActiveTheme, ControlSize},
};
/// Stickers across a picker's row, so it fits a narrow window.
const COLUMNS: usize = 4;
/// A sticker: its key, its name, and its square picture.
#[derive(Clone)]
pub struct Sticker {
pub key: SharedString,
pub name: SharedString,
pub picture: ImageSource,
}
impl Sticker {
pub fn new(
key: impl Into<SharedString>,
name: impl Into<SharedString>,
picture: impl Into<ImageSource>,
) -> Self {
Self {
key: key.into(),
name: name.into(),
picture: picture.into(),
}
}
}
/// Stickers under their pack's name.
#[derive(Clone)]
pub struct StickerPack {
pub name: SharedString,
pub stickers: Vec<Sticker>,
}
impl StickerPack {
pub fn new(name: impl Into<SharedString>, stickers: impl IntoIterator<Item = Sticker>) -> Self {
Self {
name: name.into(),
stickers: stickers.into_iter().collect(),
}
}
}
/// Stickers in a grid, a pack at a time, chosen above; a search spans every pack and keeps the stickers whose names hold it. Arrows move, and Enter or a press picks.
#[derive(IntoElement)]
pub struct StickerPicker {
id: ElementId,
packs: Vec<StickerPack>,
on_pick: Option<OnValue>,
}
impl StickerPicker {
pub fn new(id: impl Into<ElementId>, packs: impl IntoIterator<Item = StickerPack>) -> Self {
let packs: Vec<StickerPack> = packs.into_iter().collect();
assert!(!packs.is_empty(), "a sticker picker holds a pack");
for (ix, pack) in packs.iter().enumerate() {
let twice = packs[..ix].iter().any(|other| other.name == pack.name);
assert!(!twice, "pack {} twice", pack.name);
}
let keys: Vec<&SharedString> = packs
.iter()
.flat_map(|pack| pack.stickers.iter().map(|sticker| &sticker.key))
.collect();
for (ix, key) in keys.iter().enumerate() {
assert!(!keys[..ix].contains(key), "sticker {key} twice");
}
Self {
id: id.into(),
packs,
on_pick: None,
}
}
/// Gets the key of the sticker picked.
pub fn on_pick(
mut self,
handler: impl Fn(&SharedString, &mut Window, &mut App) + 'static,
) -> Self {
self.on_pick = Some(Rc::new(handler));
self
}
}
impl RenderOnce for StickerPicker {
fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
let first = self.packs[0].name.clone();
let chosen = window.use_keyed_state((self.id.clone(), "pack"), cx, |_, _| first.clone());
if !self.packs.iter().any(|pack| pack.name == *chosen.read(cx)) {
log::info!("sticker picker {}: pack gone, showing {first}", self.id);
chosen.update(cx, |chosen, _| *chosen = first);
}
let pack = chosen.read(cx).clone();
let finder = finder(&self.id, "Search stickers", window, cx);
let query = finder.read(cx).query.clone();
let packs = (self.packs.len() > 1).then(|| {
let (id, choose) = (self.id.clone(), chosen.clone());
self.packs
.iter()
.fold(
SegmentedControl::new((self.id.clone(), "packs"), pack.clone()),
|packs, each| packs.segment(each.name.clone(), each.name.clone(), None),
)
.size(ControlSize::Sm)
.on_change(move |name, _, cx| {
log::info!("sticker picker {id}: pack {name}");
choose.update(cx, |chosen, cx| {
*chosen = name.clone();
cx.notify();
})
})
});
let found: Rc<Vec<Sticker>> = Rc::new(
self.packs
.into_iter()
.filter(|each| !query.is_empty() || each.name == pack)
.flat_map(|each| each.stickers)
.filter(|sticker| sticker.name.to_lowercase().contains(&query))
.collect(),
);
let (painted, picked) = (found.clone(), found.clone());
let (id, owner, on_pick) = (self.id.clone(), self.id.clone(), self.on_pick);
let stickers = grid(
Grid {
id: self.id,
names: Rc::new(found.iter().map(|sticker| sticker.name.clone()).collect()),
rows: Rc::new(rows([(None, found.len())], COLUMNS)),
selected: None,
draw: Rc::new(move |ix, _| {
let sticker = &painted[ix];
div()
.size_full()
.p_1()
.child(
Image::new(
(owner.clone(), format!("sticker-{}", sticker.key)),
sticker.picture.clone(),
)
.fit(ObjectFit::Contain)
.size_full(),
)
.into_any_element()
}),
pick: Rc::new(move |ix, window, cx| {
let key = &picked[ix].key;
log::info!("sticker picker {id}: {key}");
if let Some(on_pick) = &on_pick {
on_pick(key, window, cx);
}
}),
none: "No stickers match",
columns: COLUMNS,
cell: cx.theme().messaging().sticker,
},
&finder,
window,
cx,
);
div()
.debug_selector(|| "sticker-picker".into())
.flex_none()
.flex()
.flex_col()
.gap_2()
.children(packs)
.child(stickers)
}
}
src/messaging/tests/mod.rs
+1
View File
@@ -12,6 +12,7 @@ use crate::{data_display::Presence, primitives::FocusNext, theme::Theme};
mod calls;
mod messages;
mod people;
mod pickers;
fn setup(cx: &mut TestAppContext) {
cx.update(|cx| {
src/messaging/tests/pickers.rs
+200
View File
@@ -0,0 +1,200 @@
use std::path::Path;
use gpui::{
Context, Entity, IntoElement, ParentElement, Render, SharedString, Styled, TestAppContext,
VisualTestContext, Window, div, px,
};
use super::{press, settle, setup, tab_to};
use crate::{
forms,
messaging::{Gif, GifPicker, Gifs, Sticker, StickerPack, StickerPicker},
};
fn sticker(key: &'static str, name: &'static str) -> Sticker {
Sticker::new(key, name, Path::new("/nowhere.png"))
}
fn packs() -> [StickerPack; 2] {
[
StickerPack::new(
"Atrium",
[
sticker("arch", "Arch"),
sticker("stair", "Stair"),
sticker("column", "Column"),
],
),
StickerPack::new(
"Garden",
[sticker("olive", "Olive"), sticker("stone", "Stone")],
),
]
}
/// A picker and what it picked.
struct Stickers {
picked: Vec<SharedString>,
}
impl Render for Stickers {
fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
let owner = cx.entity();
StickerPicker::new("stickers", packs())
.on_pick(move |key, _, cx| owner.update(cx, |host, _| host.picked.push(key.clone())))
}
}
fn stickering(cx: &mut TestAppContext) -> (Entity<Stickers>, &mut VisualTestContext) {
setup(cx);
cx.update(forms::bind_keys);
let (host, cx) = cx.add_window_view(|_, _| Stickers { picked: Vec::new() });
cx.update(|window, _| window.activate_window());
settle(cx);
(host, cx)
}
fn picked(host: &Entity<Stickers>, cx: &mut VisualTestContext) -> Vec<SharedString> {
host.read_with(cx, |host, _| host.picked.clone())
}
#[gpui::test]
fn a_search_spans_every_pack(cx: &mut TestAppContext) {
let (host, cx) = stickering(cx);
tab_to(3, cx);
cx.simulate_input("st");
settle(cx);
cx.simulate_keystrokes("down right enter");
settle(cx);
assert_eq!(
picked(&host, cx),
["stone"],
"Stair and Stone sit side by side, a pack apart"
);
}
#[gpui::test]
fn the_chosen_pack_fills_the_grid(cx: &mut TestAppContext) {
let (host, cx) = stickering(cx);
tab_to(4, cx);
press("enter", cx);
tab_to(2, cx);
press("space", cx);
tab_to(4, cx);
press("enter", cx);
assert_eq!(picked(&host, cx), ["arch", "olive"]);
}
#[test]
#[should_panic(expected = "pack Atrium twice")]
fn a_pack_is_named_once() {
let _ = StickerPicker::new(
"stickers",
[
StickerPack::new("Atrium", [sticker("arch", "Arch")]),
StickerPack::new("Atrium", [sticker("stair", "Stair")]),
],
);
}
#[test]
#[should_panic(expected = "sticker arch twice")]
fn a_sticker_is_listed_once() {
let _ = StickerPicker::new(
"stickers",
[
StickerPack::new("A", [sticker("arch", "Arch")]),
StickerPack::new("B", [sticker("arch", "Arch again")]),
],
);
}
fn gif(key: &'static str) -> Gif {
Gif::new(key, key, Path::new("/nowhere.gif"), 1.5)
}
/// A GIF picker showing `gifs`, and what it heard.
struct Gifing {
gifs: Gifs,
heard: Vec<String>,
}
impl Render for Gifing {
fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
let (query, pick) = (cx.entity(), cx.entity());
div().w(px(360.0)).child(
GifPicker::new("gifs", self.gifs.clone())
.categories(["Dunes", "Stairs"])
.on_query(move |words, _, cx| {
query.update(cx, |host, _| host.heard.push(format!("query {words}")))
})
.on_pick(move |key, _, cx| {
pick.update(cx, |host, _| host.heard.push(format!("pick {key}")))
}),
)
}
}
fn gifing(gifs: Gifs, cx: &mut TestAppContext) -> (Entity<Gifing>, &mut VisualTestContext) {
setup(cx);
cx.update(forms::bind_keys);
let (host, cx) = cx.add_window_view(|_, _| Gifing {
gifs,
heard: Vec::new(),
});
cx.update(|window, _| window.activate_window());
settle(cx);
(host, cx)
}
fn heard(host: &Entity<Gifing>, cx: &mut VisualTestContext) -> Vec<String> {
host.read_with(cx, |host, _| host.heard.clone())
}
#[gpui::test]
fn typed_words_and_a_category_reach_the_host(cx: &mut TestAppContext) {
let (host, cx) = gifing(Gifs::Found(vec![gif("a")]), cx);
tab_to(3, cx);
press("space", cx);
tab_to(1, cx);
cx.simulate_input(" more");
settle(cx);
assert_eq!(
heard(&host, cx),
[
"query Stairs",
"query Stairs m",
"query Stairs mo",
"query Stairs mor",
"query Stairs more"
],
"the second category fills the field, typing goes on from it, and a space alone asks nothing"
);
}
#[gpui::test]
fn a_gif_is_a_tab_stop_that_space_picks(cx: &mut TestAppContext) {
let (host, cx) = gifing(Gifs::Found(vec![gif("a"), gif("b")]), cx);
tab_to(5, cx);
press("space", cx);
assert_eq!(heard(&host, cx), ["pick b"]);
}
#[gpui::test]
fn nothing_found_says_so(cx: &mut TestAppContext) {
let (_, cx) = gifing(Gifs::Found(Vec::new()), cx);
assert!(cx.debug_bounds("gifs-none").is_some());
}
#[gpui::test]
fn a_search_under_way_waits_without_saying_nothing(cx: &mut TestAppContext) {
let (_, cx) = gifing(Gifs::Loading, cx);
assert!(cx.debug_bounds("gif-picker").is_some());
assert!(cx.debug_bounds("gifs-none").is_none());
}
#[test]
#[should_panic(expected = "gif a twice")]
fn a_gif_is_listed_once() {
let _ = GifPicker::new("gifs", Gifs::Found(vec![gif("a"), gif("a")]));
}
src/theme/messaging.rs
+3
View File
@@ -9,6 +9,8 @@ pub struct MessagingSizes {
pub tiles: Rems,
/// A call's tile at its narrowest, before a grid drops a column.
pub tile: Rems,
/// A sticker's cell in a picker, square.
pub sticker: Rems,
}
impl Theme {
@@ -16,6 +18,7 @@ impl Theme {
MessagingSizes {
tiles: px_to_rems(200.0),
tile: px_to_rems(160.0),
sticker: px_to_rems(64.0),
}
}
}