Move contacts panel features into collab_ui

crates/collab_ui/Cargo.toml

@@ -29,6 +29,7 @@ editor = { path = "../editor" }
 fuzzy = { path = "../fuzzy" }
 gpui = { path = "../gpui" }
 menu = { path = "../menu" }
+picker = { path = "../picker" }
 project = { path = "../project" }
 settings = { path = "../settings" }
 theme = { path = "../theme" }

crates/collab_ui/src/collab_titlebar_item.rs

@@ -1,6 +1,6 @@
-use crate::contacts_popover;
+use crate::{contact_notification::ContactNotification, contacts_popover};
 use call::{ActiveCall, ParticipantLocation};
-use client::{Authenticate, PeerId};
+use client::{Authenticate, ContactEventKind, PeerId, UserStore};
 use clock::ReplicaId;
 use contacts_popover::ContactsPopover;
 use gpui::{
@@ -9,8 +9,8 @@ use gpui::{
     elements::*,
     geometry::{rect::RectF, vector::vec2f, PathBuilder},
     json::{self, ToJson},
-    Border, CursorStyle, Entity, ImageData, MouseButton, MutableAppContext, RenderContext,
-    Subscription, View, ViewContext, ViewHandle, WeakViewHandle,
+    Border, CursorStyle, Entity, ImageData, ModelHandle, MouseButton, MutableAppContext,
+    RenderContext, Subscription, View, ViewContext, ViewHandle, WeakViewHandle,
 };
 use settings::Settings;
 use std::{ops::Range, sync::Arc};
@@ -29,6 +29,7 @@ pub fn init(cx: &mut MutableAppContext) {
 
 pub struct CollabTitlebarItem {
     workspace: WeakViewHandle<Workspace>,
+    user_store: ModelHandle<UserStore>,
     contacts_popover: Option<ViewHandle<ContactsPopover>>,
     _subscriptions: Vec<Subscription>,
 }
@@ -71,7 +72,11 @@ impl View for CollabTitlebarItem {
 }
 
 impl CollabTitlebarItem {
-    pub fn new(workspace: &ViewHandle<Workspace>, cx: &mut ViewContext<Self>) -> Self {
+    pub fn new(
+        workspace: &ViewHandle<Workspace>,
+        user_store: &ModelHandle<UserStore>,
+        cx: &mut ViewContext<Self>,
+    ) -> Self {
         let active_call = ActiveCall::global(cx);
         let mut subscriptions = Vec::new();
         subscriptions.push(cx.observe(workspace, |_, _, cx| cx.notify()));
@@ -79,9 +84,33 @@ impl CollabTitlebarItem {
         subscriptions.push(cx.observe_window_activation(|this, active, cx| {
             this.window_activation_changed(active, cx)
         }));
+        subscriptions.push(cx.observe(user_store, |_, _, cx| cx.notify()));
+        subscriptions.push(
+            cx.subscribe(user_store, move |this, user_store, event, cx| {
+                if let Some(workspace) = this.workspace.upgrade(cx) {
+                    workspace.update(cx, |workspace, cx| {
+                        if let client::Event::Contact { user, kind } = event {
+                            if let ContactEventKind::Requested | ContactEventKind::Accepted = kind {
+                                workspace.show_notification(user.id as usize, cx, |cx| {
+                                    cx.add_view(|cx| {
+                                        ContactNotification::new(
+                                            user.clone(),
+                                            *kind,
+                                            user_store,
+                                            cx,
+                                        )
+                                    })
+                                })
+                            }
+                        }
+                    });
+                }
+            }),
+        );
 
         Self {
             workspace: workspace.downgrade(),
+            user_store: user_store.clone(),
             contacts_popover: None,
             _subscriptions: subscriptions,
         }
@@ -160,6 +189,26 @@ impl CollabTitlebarItem {
         cx: &mut RenderContext<Self>,
     ) -> ElementBox {
         let titlebar = &theme.workspace.titlebar;
+        let badge = if self
+            .user_store
+            .read(cx)
+            .incoming_contact_requests()
+            .is_empty()
+        {
+            None
+        } else {
+            Some(
+                Empty::new()
+                    .collapsed()
+                    .contained()
+                    .with_style(titlebar.toggle_contacts_badge)
+                    .contained()
+                    .with_margin_left(titlebar.toggle_contacts_button.default.icon_width)
+                    .with_margin_top(titlebar.toggle_contacts_button.default.icon_width)
+                    .aligned()
+                    .boxed(),
+            )
+        };
         Stack::new()
             .with_child(
                 MouseEventHandler::<ToggleContactsPopover>::new(0, cx, |state, _| {
@@ -185,6 +234,7 @@ impl CollabTitlebarItem {
                 .aligned()
                 .boxed(),
             )
+            .with_children(badge)
             .with_children(self.contacts_popover.as_ref().map(|popover| {
                 Overlay::new(
                     ChildView::new(popover)

crates/collab_ui/src/collab_ui.rs

@@ -1,6 +1,9 @@
 mod collab_titlebar_item;
+mod contact_finder;
+mod contact_notification;
 mod contacts_popover;
 mod incoming_call_notification;
+mod notifications;
 mod project_shared_notification;
 
 use call::ActiveCall;
@@ -11,6 +14,8 @@ use std::sync::Arc;
 use workspace::{AppState, JoinProject, ToggleFollow, Workspace};
 
 pub fn init(app_state: Arc<AppState>, cx: &mut MutableAppContext) {
+    contact_notification::init(cx);
+    contact_finder::init(cx);
     contacts_popover::init(cx);
     collab_titlebar_item::init(cx);
     incoming_call_notification::init(cx);

crates/collab_ui/src/contact_finder.rs

@@ -0,0 +1,199 @@
+use client::{ContactRequestStatus, User, UserStore};
+use gpui::{
+    actions, elements::*, AnyViewHandle, Entity, ModelHandle, MouseState, MutableAppContext,
+    RenderContext, Task, View, ViewContext, ViewHandle,
+};
+use picker::{Picker, PickerDelegate};
+use settings::Settings;
+use std::sync::Arc;
+use util::TryFutureExt;
+use workspace::Workspace;
+
+actions!(contact_finder, [Toggle]);
+
+pub fn init(cx: &mut MutableAppContext) {
+    Picker::<ContactFinder>::init(cx);
+    cx.add_action(ContactFinder::toggle);
+}
+
+pub struct ContactFinder {
+    picker: ViewHandle<Picker<Self>>,
+    potential_contacts: Arc<[Arc<User>]>,
+    user_store: ModelHandle<UserStore>,
+    selected_index: usize,
+}
+
+pub enum Event {
+    Dismissed,
+}
+
+impl Entity for ContactFinder {
+    type Event = Event;
+}
+
+impl View for ContactFinder {
+    fn ui_name() -> &'static str {
+        "ContactFinder"
+    }
+
+    fn render(&mut self, _: &mut RenderContext<Self>) -> ElementBox {
+        ChildView::new(self.picker.clone()).boxed()
+    }
+
+    fn on_focus_in(&mut self, _: AnyViewHandle, cx: &mut ViewContext<Self>) {
+        if cx.is_self_focused() {
+            cx.focus(&self.picker);
+        }
+    }
+}
+
+impl PickerDelegate for ContactFinder {
+    fn match_count(&self) -> usize {
+        self.potential_contacts.len()
+    }
+
+    fn selected_index(&self) -> usize {
+        self.selected_index
+    }
+
+    fn set_selected_index(&mut self, ix: usize, _: &mut ViewContext<Self>) {
+        self.selected_index = ix;
+    }
+
+    fn update_matches(&mut self, query: String, cx: &mut ViewContext<Self>) -> Task<()> {
+        let search_users = self
+            .user_store
+            .update(cx, |store, cx| store.fuzzy_search_users(query, cx));
+
+        cx.spawn(|this, mut cx| async move {
+            async {
+                let potential_contacts = search_users.await?;
+                this.update(&mut cx, |this, cx| {
+                    this.potential_contacts = potential_contacts.into();
+                    cx.notify();
+                });
+                Ok(())
+            }
+            .log_err()
+            .await;
+        })
+    }
+
+    fn confirm(&mut self, cx: &mut ViewContext<Self>) {
+        if let Some(user) = self.potential_contacts.get(self.selected_index) {
+            let user_store = self.user_store.read(cx);
+            match user_store.contact_request_status(user) {
+                ContactRequestStatus::None | ContactRequestStatus::RequestReceived => {
+                    self.user_store
+                        .update(cx, |store, cx| store.request_contact(user.id, cx))
+                        .detach();
+                }
+                ContactRequestStatus::RequestSent => {
+                    self.user_store
+                        .update(cx, |store, cx| store.remove_contact(user.id, cx))
+                        .detach();
+                }
+                _ => {}
+            }
+        }
+    }
+
+    fn dismiss(&mut self, cx: &mut ViewContext<Self>) {
+        cx.emit(Event::Dismissed);
+    }
+
+    fn render_match(
+        &self,
+        ix: usize,
+        mouse_state: MouseState,
+        selected: bool,
+        cx: &gpui::AppContext,
+    ) -> ElementBox {
+        let theme = &cx.global::<Settings>().theme;
+        let user = &self.potential_contacts[ix];
+        let request_status = self.user_store.read(cx).contact_request_status(user);
+
+        let icon_path = match request_status {
+            ContactRequestStatus::None | ContactRequestStatus::RequestReceived => {
+                Some("icons/check_8.svg")
+            }
+            ContactRequestStatus::RequestSent => Some("icons/x_mark_8.svg"),
+            ContactRequestStatus::RequestAccepted => None,
+        };
+        let button_style = if self.user_store.read(cx).is_contact_request_pending(user) {
+            &theme.contact_finder.disabled_contact_button
+        } else {
+            &theme.contact_finder.contact_button
+        };
+        let style = theme.picker.item.style_for(mouse_state, selected);
+        Flex::row()
+            .with_children(user.avatar.clone().map(|avatar| {
+                Image::new(avatar)
+                    .with_style(theme.contact_finder.contact_avatar)
+                    .aligned()
+                    .left()
+                    .boxed()
+            }))
+            .with_child(
+                Label::new(user.github_login.clone(), style.label.clone())
+                    .contained()
+                    .with_style(theme.contact_finder.contact_username)
+                    .aligned()
+                    .left()
+                    .boxed(),
+            )
+            .with_children(icon_path.map(|icon_path| {
+                Svg::new(icon_path)
+                    .with_color(button_style.color)
+                    .constrained()
+                    .with_width(button_style.icon_width)
+                    .aligned()
+                    .contained()
+                    .with_style(button_style.container)
+                    .constrained()
+                    .with_width(button_style.button_width)
+                    .with_height(button_style.button_width)
+                    .aligned()
+                    .flex_float()
+                    .boxed()
+            }))
+            .contained()
+            .with_style(style.container)
+            .constrained()
+            .with_height(theme.contact_finder.row_height)
+            .boxed()
+    }
+}
+
+impl ContactFinder {
+    fn toggle(workspace: &mut Workspace, _: &Toggle, cx: &mut ViewContext<Workspace>) {
+        workspace.toggle_modal(cx, |workspace, cx| {
+            let finder = cx.add_view(|cx| Self::new(workspace.user_store().clone(), cx));
+            cx.subscribe(&finder, Self::on_event).detach();
+            finder
+        });
+    }
+
+    pub fn new(user_store: ModelHandle<UserStore>, cx: &mut ViewContext<Self>) -> Self {
+        let this = cx.weak_handle();
+        Self {
+            picker: cx.add_view(|cx| Picker::new(this, cx)),
+            potential_contacts: Arc::from([]),
+            user_store,
+            selected_index: 0,
+        }
+    }
+
+    fn on_event(
+        workspace: &mut Workspace,
+        _: ViewHandle<Self>,
+        event: &Event,
+        cx: &mut ViewContext<Workspace>,
+    ) {
+        match event {
+            Event::Dismissed => {
+                workspace.dismiss_modal(cx);
+            }
+        }
+    }
+}

crates/collab_ui/src/contact_notification.rs

@@ -0,0 +1,137 @@
+use std::sync::Arc;
+
+use crate::notifications::render_user_notification;
+use client::{ContactEventKind, User, UserStore};
+use gpui::{
+    elements::*, impl_internal_actions, Entity, ModelHandle, MutableAppContext, RenderContext,
+    View, ViewContext,
+};
+use workspace::Notification;
+
+impl_internal_actions!(contact_notifications, [Dismiss, RespondToContactRequest]);
+
+pub fn init(cx: &mut MutableAppContext) {
+    cx.add_action(ContactNotification::dismiss);
+    cx.add_action(ContactNotification::respond_to_contact_request);
+}
+
+pub struct ContactNotification {
+    user_store: ModelHandle<UserStore>,
+    user: Arc<User>,
+    kind: client::ContactEventKind,
+}
+
+#[derive(Clone, PartialEq)]
+struct Dismiss(u64);
+
+#[derive(Clone, PartialEq)]
+pub struct RespondToContactRequest {
+    pub user_id: u64,
+    pub accept: bool,
+}
+
+pub enum Event {
+    Dismiss,
+}
+
+impl Entity for ContactNotification {
+    type Event = Event;
+}
+
+impl View for ContactNotification {
+    fn ui_name() -> &'static str {
+        "ContactNotification"
+    }
+
+    fn render(&mut self, cx: &mut RenderContext<Self>) -> ElementBox {
+        match self.kind {
+            ContactEventKind::Requested => render_user_notification(
+                self.user.clone(),
+                "wants to add you as a contact",
+                Some("They won't know if you decline."),
+                Dismiss(self.user.id),
+                vec![
+                    (
+                        "Decline",
+                        Box::new(RespondToContactRequest {
+                            user_id: self.user.id,
+                            accept: false,
+                        }),
+                    ),
+                    (
+                        "Accept",
+                        Box::new(RespondToContactRequest {
+                            user_id: self.user.id,
+                            accept: true,
+                        }),
+                    ),
+                ],
+                cx,
+            ),
+            ContactEventKind::Accepted => render_user_notification(
+                self.user.clone(),
+                "accepted your contact request",
+                None,
+                Dismiss(self.user.id),
+                vec![],
+                cx,
+            ),
+            _ => unreachable!(),
+        }
+    }
+}
+
+impl Notification for ContactNotification {
+    fn should_dismiss_notification_on_event(&self, event: &<Self as Entity>::Event) -> bool {
+        matches!(event, Event::Dismiss)
+    }
+}
+
+impl ContactNotification {
+    pub fn new(
+        user: Arc<User>,
+        kind: client::ContactEventKind,
+        user_store: ModelHandle<UserStore>,
+        cx: &mut ViewContext<Self>,
+    ) -> Self {
+        cx.subscribe(&user_store, move |this, _, event, cx| {
+            if let client::Event::Contact {
+                kind: ContactEventKind::Cancelled,
+                user,
+            } = event
+            {
+                if user.id == this.user.id {
+                    cx.emit(Event::Dismiss);
+                }
+            }
+        })
+        .detach();
+
+        Self {
+            user,
+            kind,
+            user_store,
+        }
+    }
+
+    fn dismiss(&mut self, _: &Dismiss, cx: &mut ViewContext<Self>) {
+        self.user_store.update(cx, |store, cx| {
+            store
+                .dismiss_contact_request(self.user.id, cx)
+                .detach_and_log_err(cx);
+        });
+        cx.emit(Event::Dismiss);
+    }
+
+    fn respond_to_contact_request(
+        &mut self,
+        action: &RespondToContactRequest,
+        cx: &mut ViewContext<Self>,
+    ) {
+        self.user_store
+            .update(cx, |store, cx| {
+                store.respond_to_contact_request(action.user_id, action.accept, cx)
+            })
+            .detach();
+    }
+}

crates/collab_ui/src/contacts_popover.rs

@@ -1,22 +1,27 @@
 use std::sync::Arc;
 
+use crate::contact_finder;
 use call::ActiveCall;
 use client::{Contact, User, UserStore};
 use editor::{Cancel, Editor};
 use fuzzy::{match_strings, StringMatchCandidate};
 use gpui::{
-    elements::*, impl_internal_actions, keymap, AppContext, ClipboardItem, CursorStyle, Entity,
-    ModelHandle, MouseButton, MutableAppContext, RenderContext, Subscription, View, ViewContext,
-    ViewHandle,
+    elements::*, impl_actions, impl_internal_actions, keymap, AppContext, ClipboardItem,
+    CursorStyle, Entity, ModelHandle, MouseButton, MutableAppContext, RenderContext, Subscription,
+    View, ViewContext, ViewHandle,
 };
 use menu::{Confirm, SelectNext, SelectPrev};
 use project::Project;
+use serde::Deserialize;
 use settings::Settings;
 use theme::IconButton;
 
-impl_internal_actions!(contacts_panel, [ToggleExpanded, Call]);
+impl_actions!(contacts_popover, [RemoveContact, RespondToContactRequest]);
+impl_internal_actions!(contacts_popover, [ToggleExpanded, Call]);
 
 pub fn init(cx: &mut MutableAppContext) {
+    cx.add_action(ContactsPopover::remove_contact);
+    cx.add_action(ContactsPopover::respond_to_contact_request);
     cx.add_action(ContactsPopover::clear_filter);
     cx.add_action(ContactsPopover::select_next);
     cx.add_action(ContactsPopover::select_prev);
@@ -77,6 +82,18 @@ impl PartialEq for ContactEntry {
     }
 }
 
+#[derive(Clone, Deserialize, PartialEq)]
+pub struct RequestContact(pub u64);
+
+#[derive(Clone, Deserialize, PartialEq)]
+pub struct RemoveContact(pub u64);
+
+#[derive(Clone, Deserialize, PartialEq)]
+pub struct RespondToContactRequest {
+    pub user_id: u64,
+    pub accept: bool,
+}
+
 pub enum Event {
     Dismissed,
 }
@@ -186,6 +203,24 @@ impl ContactsPopover {
         this
     }
 
+    fn remove_contact(&mut self, request: &RemoveContact, cx: &mut ViewContext<Self>) {
+        self.user_store
+            .update(cx, |store, cx| store.remove_contact(request.0, cx))
+            .detach();
+    }
+
+    fn respond_to_contact_request(
+        &mut self,
+        action: &RespondToContactRequest,
+        cx: &mut ViewContext<Self>,
+    ) {
+        self.user_store
+            .update(cx, |store, cx| {
+                store.respond_to_contact_request(action.user_id, action.accept, cx)
+            })
+            .detach();
+    }
+
     fn clear_filter(&mut self, _: &Cancel, cx: &mut ViewContext<Self>) {
         let did_clear = self.filter_editor.update(cx, |editor, cx| {
             if editor.buffer().read(cx).len(cx) > 0 {
@@ -574,18 +609,15 @@ impl ContactsPopover {
                     };
                     render_icon_button(button_style, "icons/x_mark_8.svg")
                         .aligned()
-                        // .flex_float()
                         .boxed()
                 })
                 .with_cursor_style(CursorStyle::PointingHand)
                 .on_click(MouseButton::Left, move |_, cx| {
-                    todo!();
-                    // cx.dispatch_action(RespondToContactRequest {
-                    //     user_id,
-                    //     accept: false,
-                    // })
+                    cx.dispatch_action(RespondToContactRequest {
+                        user_id,
+                        accept: false,
+                    })
                 })
-                // .flex_float()
                 .contained()
                 .with_margin_right(button_spacing)
                 .boxed(),
@@ -602,11 +634,10 @@ impl ContactsPopover {
                 })
                 .with_cursor_style(CursorStyle::PointingHand)
                 .on_click(MouseButton::Left, move |_, cx| {
-                    todo!()
-                    // cx.dispatch_action(RespondToContactRequest {
-                    //     user_id,
-                    //     accept: true,
-                    // })
+                    cx.dispatch_action(RespondToContactRequest {
+                        user_id,
+                        accept: true,
+                    })
                 })
                 .boxed(),
             ]);
@@ -626,8 +657,7 @@ impl ContactsPopover {
                 .with_padding(Padding::uniform(2.))
                 .with_cursor_style(CursorStyle::PointingHand)
                 .on_click(MouseButton::Left, move |_, cx| {
-                    todo!()
-                    // cx.dispatch_action(RemoveContact(user_id))
+                    cx.dispatch_action(RemoveContact(user_id))
                 })
                 .flex_float()
                 .boxed(),
@@ -692,8 +722,7 @@ impl View for ContactsPopover {
                         })
                         .with_cursor_style(CursorStyle::PointingHand)
                         .on_click(MouseButton::Left, |_, cx| {
-                            todo!()
-                            // cx.dispatch_action(contact_finder::Toggle)
+                            cx.dispatch_action(contact_finder::Toggle)
                         })
                         .boxed(),
                     )

crates/collab_ui/src/notifications.rs

@@ -0,0 +1,119 @@
+use client::User;
+use gpui::{
+    elements::*, platform::CursorStyle, Action, Element, ElementBox, MouseButton, RenderContext,
+    View,
+};
+use settings::Settings;
+use std::sync::Arc;
+
+enum Dismiss {}
+enum Button {}
+
+pub fn render_user_notification<V: View, A: Action + Clone>(
+    user: Arc<User>,
+    title: &str,
+    body: Option<&str>,
+    dismiss_action: A,
+    buttons: Vec<(&'static str, Box<dyn Action>)>,
+    cx: &mut RenderContext<V>,
+) -> ElementBox {
+    let theme = cx.global::<Settings>().theme.clone();
+    let theme = &theme.contact_notification;
+
+    Flex::column()
+        .with_child(
+            Flex::row()
+                .with_children(user.avatar.clone().map(|avatar| {
+                    Image::new(avatar)
+                        .with_style(theme.header_avatar)
+                        .aligned()
+                        .constrained()
+                        .with_height(
+                            cx.font_cache()
+                                .line_height(theme.header_message.text.font_size),
+                        )
+                        .aligned()
+                        .top()
+                        .boxed()
+                }))
+                .with_child(
+                    Text::new(
+                        format!("{} {}", user.github_login, title),
+                        theme.header_message.text.clone(),
+                    )
+                    .contained()
+                    .with_style(theme.header_message.container)
+                    .aligned()
+                    .top()
+                    .left()
+                    .flex(1., true)
+                    .boxed(),
+                )
+                .with_child(
+                    MouseEventHandler::<Dismiss>::new(user.id as usize, cx, |state, _| {
+                        let style = theme.dismiss_button.style_for(state, false);
+                        Svg::new("icons/x_mark_thin_8.svg")
+                            .with_color(style.color)
+                            .constrained()
+                            .with_width(style.icon_width)
+                            .aligned()
+                            .contained()
+                            .with_style(style.container)
+                            .constrained()
+                            .with_width(style.button_width)
+                            .with_height(style.button_width)
+                            .boxed()
+                    })
+                    .with_cursor_style(CursorStyle::PointingHand)
+                    .with_padding(Padding::uniform(5.))
+                    .on_click(MouseButton::Left, move |_, cx| {
+                        cx.dispatch_any_action(dismiss_action.boxed_clone())
+                    })
+                    .aligned()
+                    .constrained()
+                    .with_height(
+                        cx.font_cache()
+                            .line_height(theme.header_message.text.font_size),
+                    )
+                    .aligned()
+                    .top()
+                    .flex_float()
+                    .boxed(),
+                )
+                .named("contact notification header"),
+        )
+        .with_children(body.map(|body| {
+            Label::new(body.to_string(), theme.body_message.text.clone())
+                .contained()
+                .with_style(theme.body_message.container)
+                .boxed()
+        }))
+        .with_children(if buttons.is_empty() {
+            None
+        } else {
+            Some(
+                Flex::row()
+                    .with_children(buttons.into_iter().enumerate().map(
+                        |(ix, (message, action))| {
+                            MouseEventHandler::<Button>::new(ix, cx, |state, _| {
+                                let button = theme.button.style_for(state, false);
+                                Label::new(message.to_string(), button.text.clone())
+                                    .contained()
+                                    .with_style(button.container)
+                                    .boxed()
+                            })
+                            .with_cursor_style(CursorStyle::PointingHand)
+                            .on_click(MouseButton::Left, move |_, cx| {
+                                cx.dispatch_any_action(action.boxed_clone())
+                            })
+                            .boxed()
+                        },
+                    ))
+                    .aligned()
+                    .right()
+                    .boxed(),
+            )
+        })
+        .contained()
+        .boxed()
+}