Rename collab_titlebar_item crate to collab_ui

Co-Authored-By: Nathan Sobo <nathan@zed.dev>

crates/collab_ui/Cargo.toml

@@ -0,0 +1,52 @@
+[package]
+name = "collab_ui"
+version = "0.1.0"
+edition = "2021"
+
+[lib]
+path = "src/collab_ui.rs"
+doctest = false
+
+[features]
+test-support = [
+    "client/test-support",
+    "collections/test-support",
+    "editor/test-support",
+    "gpui/test-support",
+    "project/test-support",
+    "room/test-support",
+    "settings/test-support",
+    "util/test-support",
+    "workspace/test-support",
+]
+
+[dependencies]
+client = { path = "../client" }
+clock = { path = "../clock" }
+collections = { path = "../collections" }
+editor = { path = "../editor" }
+fuzzy = { path = "../fuzzy" }
+gpui = { path = "../gpui" }
+menu = { path = "../menu" }
+project = { path = "../project" }
+room = { path = "../room" }
+settings = { path = "../settings" }
+theme = { path = "../theme" }
+util = { path = "../util" }
+workspace = { path = "../workspace" }
+anyhow = "1.0"
+futures = "0.3"
+log = "0.4"
+postage = { version = "0.4.1", features = ["futures-traits"] }
+serde = { version = "1.0", features = ["derive", "rc"] }
+
+[dev-dependencies]
+client = { path = "../client", features = ["test-support"] }
+collections = { path = "../collections", features = ["test-support"] }
+editor = { path = "../editor", features = ["test-support"] }
+gpui = { path = "../gpui", features = ["test-support"] }
+project = { path = "../project", features = ["test-support"] }
+room = { path = "../room", features = ["test-support"] }
+settings = { path = "../settings", features = ["test-support"] }
+util = { path = "../util", features = ["test-support"] }
+workspace = { path = "../workspace", features = ["test-support"] }

crates/collab_ui/src/collab_titlebar_item.rs

@@ -0,0 +1,398 @@
+use crate::contacts_popover;
+use client::{Authenticate, PeerId};
+use clock::ReplicaId;
+use contacts_popover::ContactsPopover;
+use gpui::{
+    actions,
+    color::Color,
+    elements::*,
+    geometry::{rect::RectF, vector::vec2f, PathBuilder},
+    json::{self, ToJson},
+    Border, CursorStyle, Entity, ImageData, MouseButton, MutableAppContext, RenderContext,
+    Subscription, View, ViewContext, ViewHandle, WeakViewHandle,
+};
+use settings::Settings;
+use std::{ops::Range, sync::Arc};
+use theme::Theme;
+use workspace::{FollowNextCollaborator, ToggleFollow, Workspace};
+
+actions!(contacts_titlebar_item, [ToggleContactsPopover]);
+
+pub fn init(cx: &mut MutableAppContext) {
+    cx.add_action(CollabTitlebarItem::toggle_contacts_popover);
+}
+
+pub struct CollabTitlebarItem {
+    workspace: WeakViewHandle<Workspace>,
+    contacts_popover: Option<ViewHandle<ContactsPopover>>,
+    _subscriptions: Vec<Subscription>,
+}
+
+impl Entity for CollabTitlebarItem {
+    type Event = ();
+}
+
+impl View for CollabTitlebarItem {
+    fn ui_name() -> &'static str {
+        "CollabTitlebarItem"
+    }
+
+    fn render(&mut self, cx: &mut RenderContext<Self>) -> ElementBox {
+        let workspace = if let Some(workspace) = self.workspace.upgrade(cx) {
+            workspace
+        } else {
+            return Empty::new().boxed();
+        };
+
+        let theme = cx.global::<Settings>().theme.clone();
+        Flex::row()
+            .with_children(self.render_toggle_contacts_button(&workspace, &theme, cx))
+            .with_children(self.render_collaborators(&workspace, &theme, cx))
+            .with_children(self.render_current_user(&workspace, &theme, cx))
+            .with_children(self.render_connection_status(&workspace, cx))
+            .boxed()
+    }
+}
+
+impl CollabTitlebarItem {
+    pub fn new(workspace: &ViewHandle<Workspace>, cx: &mut ViewContext<Self>) -> Self {
+        let observe_workspace = cx.observe(workspace, |_, _, cx| cx.notify());
+        Self {
+            workspace: workspace.downgrade(),
+            contacts_popover: None,
+            _subscriptions: vec![observe_workspace],
+        }
+    }
+
+    fn toggle_contacts_popover(&mut self, _: &ToggleContactsPopover, cx: &mut ViewContext<Self>) {
+        match self.contacts_popover.take() {
+            Some(_) => {}
+            None => {
+                if let Some(workspace) = self.workspace.upgrade(cx) {
+                    let client = workspace.read(cx).client().clone();
+                    let user_store = workspace.read(cx).user_store().clone();
+                    let view = cx.add_view(|cx| ContactsPopover::new(client, user_store, cx));
+                    cx.focus(&view);
+                    cx.subscribe(&view, |this, _, event, cx| {
+                        match event {
+                            contacts_popover::Event::Dismissed => {
+                                this.contacts_popover = None;
+                            }
+                        }
+
+                        cx.notify();
+                    })
+                    .detach();
+                    self.contacts_popover = Some(view);
+                }
+            }
+        }
+        cx.notify();
+    }
+
+    fn render_toggle_contacts_button(
+        &self,
+        workspace: &ViewHandle<Workspace>,
+        theme: &Theme,
+        cx: &mut RenderContext<Self>,
+    ) -> Option<ElementBox> {
+        if !workspace.read(cx).client().status().borrow().is_connected() {
+            return None;
+        }
+
+        let titlebar = &theme.workspace.titlebar;
+
+        Some(
+            Stack::new()
+                .with_child(
+                    MouseEventHandler::<ToggleContactsPopover>::new(0, cx, |state, _| {
+                        let style = titlebar
+                            .toggle_contacts_button
+                            .style_for(state, self.contacts_popover.is_some());
+                        Svg::new("icons/plus_8.svg")
+                            .with_color(style.color)
+                            .constrained()
+                            .with_width(style.icon_width)
+                            .aligned()
+                            .constrained()
+                            .with_width(style.button_width)
+                            .with_height(style.button_width)
+                            .contained()
+                            .with_style(style.container)
+                            .boxed()
+                    })
+                    .with_cursor_style(CursorStyle::PointingHand)
+                    .on_click(MouseButton::Left, |_, cx| {
+                        cx.dispatch_action(ToggleContactsPopover);
+                    })
+                    .aligned()
+                    .boxed(),
+                )
+                .with_children(self.contacts_popover.as_ref().map(|popover| {
+                    Overlay::new(
+                        ChildView::new(popover)
+                            .contained()
+                            .with_margin_top(titlebar.height)
+                            .with_margin_right(
+                                -titlebar.toggle_contacts_button.default.button_width,
+                            )
+                            .boxed(),
+                    )
+                    .with_fit_mode(OverlayFitMode::SwitchAnchor)
+                    .with_anchor_corner(AnchorCorner::BottomLeft)
+                    .boxed()
+                }))
+                .boxed(),
+        )
+    }
+
+    fn render_collaborators(
+        &self,
+        workspace: &ViewHandle<Workspace>,
+        theme: &Theme,
+        cx: &mut RenderContext<Self>,
+    ) -> Vec<ElementBox> {
+        let mut collaborators = workspace
+            .read(cx)
+            .project()
+            .read(cx)
+            .collaborators()
+            .values()
+            .cloned()
+            .collect::<Vec<_>>();
+        collaborators.sort_unstable_by_key(|collaborator| collaborator.replica_id);
+        collaborators
+            .into_iter()
+            .filter_map(|collaborator| {
+                Some(self.render_avatar(
+                    collaborator.user.avatar.clone()?,
+                    collaborator.replica_id,
+                    Some((collaborator.peer_id, &collaborator.user.github_login)),
+                    workspace,
+                    theme,
+                    cx,
+                ))
+            })
+            .collect()
+    }
+
+    fn render_current_user(
+        &self,
+        workspace: &ViewHandle<Workspace>,
+        theme: &Theme,
+        cx: &mut RenderContext<Self>,
+    ) -> Option<ElementBox> {
+        let user = workspace.read(cx).user_store().read(cx).current_user();
+        let replica_id = workspace.read(cx).project().read(cx).replica_id();
+        let status = *workspace.read(cx).client().status().borrow();
+        if let Some(avatar) = user.and_then(|user| user.avatar.clone()) {
+            Some(self.render_avatar(avatar, replica_id, None, workspace, theme, cx))
+        } else if matches!(status, client::Status::UpgradeRequired) {
+            None
+        } else {
+            Some(
+                MouseEventHandler::<Authenticate>::new(0, cx, |state, _| {
+                    let style = theme
+                        .workspace
+                        .titlebar
+                        .sign_in_prompt
+                        .style_for(state, false);
+                    Label::new("Sign in".to_string(), style.text.clone())
+                        .contained()
+                        .with_style(style.container)
+                        .boxed()
+                })
+                .on_click(MouseButton::Left, |_, cx| cx.dispatch_action(Authenticate))
+                .with_cursor_style(CursorStyle::PointingHand)
+                .aligned()
+                .boxed(),
+            )
+        }
+    }
+
+    fn render_avatar(
+        &self,
+        avatar: Arc<ImageData>,
+        replica_id: ReplicaId,
+        peer: Option<(PeerId, &str)>,
+        workspace: &ViewHandle<Workspace>,
+        theme: &Theme,
+        cx: &mut RenderContext<Self>,
+    ) -> ElementBox {
+        let replica_color = theme.editor.replica_selection_style(replica_id).cursor;
+        let is_followed = peer.map_or(false, |(peer_id, _)| {
+            workspace.read(cx).is_following(peer_id)
+        });
+        let mut avatar_style = theme.workspace.titlebar.avatar;
+        if is_followed {
+            avatar_style.border = Border::all(1.0, replica_color);
+        }
+        let content = Stack::new()
+            .with_child(
+                Image::new(avatar)
+                    .with_style(avatar_style)
+                    .constrained()
+                    .with_width(theme.workspace.titlebar.avatar_width)
+                    .aligned()
+                    .boxed(),
+            )
+            .with_child(
+                AvatarRibbon::new(replica_color)
+                    .constrained()
+                    .with_width(theme.workspace.titlebar.avatar_ribbon.width)
+                    .with_height(theme.workspace.titlebar.avatar_ribbon.height)
+                    .aligned()
+                    .bottom()
+                    .boxed(),
+            )
+            .constrained()
+            .with_width(theme.workspace.titlebar.avatar_width)
+            .contained()
+            .with_margin_left(theme.workspace.titlebar.avatar_margin)
+            .boxed();
+
+        if let Some((peer_id, peer_github_login)) = peer {
+            MouseEventHandler::<ToggleFollow>::new(replica_id.into(), cx, move |_, _| content)
+                .with_cursor_style(CursorStyle::PointingHand)
+                .on_click(MouseButton::Left, move |_, cx| {
+                    cx.dispatch_action(ToggleFollow(peer_id))
+                })
+                .with_tooltip::<ToggleFollow, _>(
+                    peer_id.0 as usize,
+                    if is_followed {
+                        format!("Unfollow {}", peer_github_login)
+                    } else {
+                        format!("Follow {}", peer_github_login)
+                    },
+                    Some(Box::new(FollowNextCollaborator)),
+                    theme.tooltip.clone(),
+                    cx,
+                )
+                .boxed()
+        } else {
+            content
+        }
+    }
+
+    fn render_connection_status(
+        &self,
+        workspace: &ViewHandle<Workspace>,
+        cx: &mut RenderContext<Self>,
+    ) -> Option<ElementBox> {
+        let theme = &cx.global::<Settings>().theme;
+        match &*workspace.read(cx).client().status().borrow() {
+            client::Status::ConnectionError
+            | client::Status::ConnectionLost
+            | client::Status::Reauthenticating { .. }
+            | client::Status::Reconnecting { .. }
+            | client::Status::ReconnectionError { .. } => Some(
+                Container::new(
+                    Align::new(
+                        ConstrainedBox::new(
+                            Svg::new("icons/cloud_slash_12.svg")
+                                .with_color(theme.workspace.titlebar.offline_icon.color)
+                                .boxed(),
+                        )
+                        .with_width(theme.workspace.titlebar.offline_icon.width)
+                        .boxed(),
+                    )
+                    .boxed(),
+                )
+                .with_style(theme.workspace.titlebar.offline_icon.container)
+                .boxed(),
+            ),
+            client::Status::UpgradeRequired => Some(
+                Label::new(
+                    "Please update Zed to collaborate".to_string(),
+                    theme.workspace.titlebar.outdated_warning.text.clone(),
+                )
+                .contained()
+                .with_style(theme.workspace.titlebar.outdated_warning.container)
+                .aligned()
+                .boxed(),
+            ),
+            _ => None,
+        }
+    }
+}
+
+pub struct AvatarRibbon {
+    color: Color,
+}
+
+impl AvatarRibbon {
+    pub fn new(color: Color) -> AvatarRibbon {
+        AvatarRibbon { color }
+    }
+}
+
+impl Element for AvatarRibbon {
+    type LayoutState = ();
+
+    type PaintState = ();
+
+    fn layout(
+        &mut self,
+        constraint: gpui::SizeConstraint,
+        _: &mut gpui::LayoutContext,
+    ) -> (gpui::geometry::vector::Vector2F, Self::LayoutState) {
+        (constraint.max, ())
+    }
+
+    fn paint(
+        &mut self,
+        bounds: gpui::geometry::rect::RectF,
+        _: gpui::geometry::rect::RectF,
+        _: &mut Self::LayoutState,
+        cx: &mut gpui::PaintContext,
+    ) -> Self::PaintState {
+        let mut path = PathBuilder::new();
+        path.reset(bounds.lower_left());
+        path.curve_to(
+            bounds.origin() + vec2f(bounds.height(), 0.),
+            bounds.origin(),
+        );
+        path.line_to(bounds.upper_right() - vec2f(bounds.height(), 0.));
+        path.curve_to(bounds.lower_right(), bounds.upper_right());
+        path.line_to(bounds.lower_left());
+        cx.scene.push_path(path.build(self.color, None));
+    }
+
+    fn dispatch_event(
+        &mut self,
+        _: &gpui::Event,
+        _: RectF,
+        _: RectF,
+        _: &mut Self::LayoutState,
+        _: &mut Self::PaintState,
+        _: &mut gpui::EventContext,
+    ) -> bool {
+        false
+    }
+
+    fn rect_for_text_range(
+        &self,
+        _: Range<usize>,
+        _: RectF,
+        _: RectF,
+        _: &Self::LayoutState,
+        _: &Self::PaintState,
+        _: &gpui::MeasurementContext,
+    ) -> Option<RectF> {
+        None
+    }
+
+    fn debug(
+        &self,
+        bounds: gpui::geometry::rect::RectF,
+        _: &Self::LayoutState,
+        _: &Self::PaintState,
+        _: &gpui::DebugContext,
+    ) -> gpui::json::Value {
+        json::json!({
+            "type": "AvatarRibbon",
+            "bounds": bounds.to_json(),
+            "color": self.color.to_json(),
+        })
+    }
+}

crates/collab_ui/src/collab_ui.rs

@@ -0,0 +1,10 @@
+mod collab_titlebar_item;
+mod contacts_popover;
+
+pub use collab_titlebar_item::CollabTitlebarItem;
+use gpui::MutableAppContext;
+
+pub fn init(cx: &mut MutableAppContext) {
+    contacts_popover::init(cx);
+    collab_titlebar_item::init(cx);
+}

crates/collab_ui/src/contacts_popover.rs

@@ -0,0 +1,794 @@
+use std::sync::Arc;
+
+use client::{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,
+};
+use menu::{Confirm, SelectNext, SelectPrev};
+use room::Room;
+use settings::Settings;
+use theme::IconButton;
+
+impl_internal_actions!(contacts_panel, [ToggleExpanded, Call]);
+
+pub fn init(cx: &mut MutableAppContext) {
+    cx.add_action(ContactsPopover::clear_filter);
+    cx.add_action(ContactsPopover::select_next);
+    cx.add_action(ContactsPopover::select_prev);
+    cx.add_action(ContactsPopover::confirm);
+    cx.add_action(ContactsPopover::toggle_expanded);
+    cx.add_action(ContactsPopover::call);
+}
+
+#[derive(Clone, PartialEq)]
+struct ToggleExpanded(Section);
+
+#[derive(Clone, PartialEq)]
+struct Call {
+    recipient_user_id: u64,
+}
+
+#[derive(Clone, Copy, PartialEq, Eq, Debug, PartialOrd, Ord)]
+enum Section {
+    Requests,
+    Online,
+    Offline,
+}
+
+#[derive(Clone)]
+enum ContactEntry {
+    Header(Section),
+    IncomingRequest(Arc<User>),
+    OutgoingRequest(Arc<User>),
+    Contact(Arc<Contact>),
+}
+
+impl PartialEq for ContactEntry {
+    fn eq(&self, other: &Self) -> bool {
+        match self {
+            ContactEntry::Header(section_1) => {
+                if let ContactEntry::Header(section_2) = other {
+                    return section_1 == section_2;
+                }
+            }
+            ContactEntry::IncomingRequest(user_1) => {
+                if let ContactEntry::IncomingRequest(user_2) = other {
+                    return user_1.id == user_2.id;
+                }
+            }
+            ContactEntry::OutgoingRequest(user_1) => {
+                if let ContactEntry::OutgoingRequest(user_2) = other {
+                    return user_1.id == user_2.id;
+                }
+            }
+            ContactEntry::Contact(contact_1) => {
+                if let ContactEntry::Contact(contact_2) = other {
+                    return contact_1.user.id == contact_2.user.id;
+                }
+            }
+        }
+        false
+    }
+}
+
+pub enum Event {
+    Dismissed,
+}
+
+pub struct ContactsPopover {
+    room: Option<(ModelHandle<Room>, Subscription)>,
+    entries: Vec<ContactEntry>,
+    match_candidates: Vec<StringMatchCandidate>,
+    list_state: ListState,
+    client: Arc<Client>,
+    user_store: ModelHandle<UserStore>,
+    filter_editor: ViewHandle<Editor>,
+    collapsed_sections: Vec<Section>,
+    selection: Option<usize>,
+    _subscriptions: Vec<Subscription>,
+}
+
+impl ContactsPopover {
+    pub fn new(
+        client: Arc<Client>,
+        user_store: ModelHandle<UserStore>,
+        cx: &mut ViewContext<Self>,
+    ) -> Self {
+        let filter_editor = cx.add_view(|cx| {
+            let mut editor = Editor::single_line(
+                Some(|theme| theme.contacts_panel.user_query_editor.clone()),
+                cx,
+            );
+            editor.set_placeholder_text("Filter contacts", cx);
+            editor
+        });
+
+        cx.subscribe(&filter_editor, |this, _, event, cx| {
+            if let editor::Event::BufferEdited = event {
+                let query = this.filter_editor.read(cx).text(cx);
+                if !query.is_empty() {
+                    this.selection.take();
+                }
+                this.update_entries(cx);
+                if !query.is_empty() {
+                    this.selection = this
+                        .entries
+                        .iter()
+                        .position(|entry| !matches!(entry, ContactEntry::Header(_)));
+                }
+            }
+        })
+        .detach();
+
+        let list_state = ListState::new(0, Orientation::Top, 1000., cx, move |this, ix, cx| {
+            let theme = cx.global::<Settings>().theme.clone();
+            let is_selected = this.selection == Some(ix);
+
+            match &this.entries[ix] {
+                ContactEntry::Header(section) => {
+                    let is_collapsed = this.collapsed_sections.contains(section);
+                    Self::render_header(
+                        *section,
+                        &theme.contacts_panel,
+                        is_selected,
+                        is_collapsed,
+                        cx,
+                    )
+                }
+                ContactEntry::IncomingRequest(user) => Self::render_contact_request(
+                    user.clone(),
+                    this.user_store.clone(),
+                    &theme.contacts_panel,
+                    true,
+                    is_selected,
+                    cx,
+                ),
+                ContactEntry::OutgoingRequest(user) => Self::render_contact_request(
+                    user.clone(),
+                    this.user_store.clone(),
+                    &theme.contacts_panel,
+                    false,
+                    is_selected,
+                    cx,
+                ),
+                ContactEntry::Contact(contact) => {
+                    Self::render_contact(contact, &theme.contacts_panel, is_selected, cx)
+                }
+            }
+        });
+
+        let mut subscriptions = Vec::new();
+        subscriptions.push(cx.observe(&user_store, |this, _, cx| this.update_entries(cx)));
+
+        let weak_self = cx.weak_handle();
+        subscriptions.push(Room::observe(cx, move |room, cx| {
+            if let Some(this) = weak_self.upgrade(cx) {
+                this.update(cx, |this, cx| this.set_room(room, cx));
+            }
+        }));
+
+        let mut this = Self {
+            room: None,
+            list_state,
+            selection: None,
+            collapsed_sections: Default::default(),
+            entries: Default::default(),
+            match_candidates: Default::default(),
+            filter_editor,
+            _subscriptions: subscriptions,
+            client,
+            user_store,
+        };
+        this.update_entries(cx);
+        this
+    }
+
+    fn set_room(&mut self, room: Option<ModelHandle<Room>>, cx: &mut ViewContext<Self>) {
+        if let Some(room) = room {
+            let observation = cx.observe(&room, |_, _, cx| cx.notify());
+            self.room = Some((room, observation));
+        } else {
+            self.room = None;
+        }
+
+        cx.notify();
+    }
+
+    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 {
+                editor.set_text("", cx);
+                true
+            } else {
+                false
+            }
+        });
+        if !did_clear {
+            cx.emit(Event::Dismissed);
+        }
+    }
+
+    fn select_next(&mut self, _: &SelectNext, cx: &mut ViewContext<Self>) {
+        if let Some(ix) = self.selection {
+            if self.entries.len() > ix + 1 {
+                self.selection = Some(ix + 1);
+            }
+        } else if !self.entries.is_empty() {
+            self.selection = Some(0);
+        }
+        cx.notify();
+        self.list_state.reset(self.entries.len());
+    }
+
+    fn select_prev(&mut self, _: &SelectPrev, cx: &mut ViewContext<Self>) {
+        if let Some(ix) = self.selection {
+            if ix > 0 {
+                self.selection = Some(ix - 1);
+            } else {
+                self.selection = None;
+            }
+        }
+        cx.notify();
+        self.list_state.reset(self.entries.len());
+    }
+
+    fn confirm(&mut self, _: &Confirm, cx: &mut ViewContext<Self>) {
+        if let Some(selection) = self.selection {
+            if let Some(entry) = self.entries.get(selection) {
+                match entry {
+                    ContactEntry::Header(section) => {
+                        let section = *section;
+                        self.toggle_expanded(&ToggleExpanded(section), cx);
+                    }
+                    _ => {}
+                }
+            }
+        }
+    }
+
+    fn toggle_expanded(&mut self, action: &ToggleExpanded, cx: &mut ViewContext<Self>) {
+        let section = action.0;
+        if let Some(ix) = self.collapsed_sections.iter().position(|s| *s == section) {
+            self.collapsed_sections.remove(ix);
+        } else {
+            self.collapsed_sections.push(section);
+        }
+        self.update_entries(cx);
+    }
+
+    fn update_entries(&mut self, cx: &mut ViewContext<Self>) {
+        let user_store = self.user_store.read(cx);
+        let query = self.filter_editor.read(cx).text(cx);
+        let executor = cx.background().clone();
+
+        let prev_selected_entry = self.selection.and_then(|ix| self.entries.get(ix).cloned());
+        self.entries.clear();
+
+        let mut request_entries = Vec::new();
+        let incoming = user_store.incoming_contact_requests();
+        if !incoming.is_empty() {
+            self.match_candidates.clear();
+            self.match_candidates
+                .extend(
+                    incoming
+                        .iter()
+                        .enumerate()
+                        .map(|(ix, user)| StringMatchCandidate {
+                            id: ix,
+                            string: user.github_login.clone(),
+                            char_bag: user.github_login.chars().collect(),
+                        }),
+                );
+            let matches = executor.block(match_strings(
+                &self.match_candidates,
+                &query,
+                true,
+                usize::MAX,
+                &Default::default(),
+                executor.clone(),
+            ));
+            request_entries.extend(
+                matches
+                    .iter()
+                    .map(|mat| ContactEntry::IncomingRequest(incoming[mat.candidate_id].clone())),
+            );
+        }
+
+        let outgoing = user_store.outgoing_contact_requests();
+        if !outgoing.is_empty() {
+            self.match_candidates.clear();
+            self.match_candidates
+                .extend(
+                    outgoing
+                        .iter()
+                        .enumerate()
+                        .map(|(ix, user)| StringMatchCandidate {
+                            id: ix,
+                            string: user.github_login.clone(),
+                            char_bag: user.github_login.chars().collect(),
+                        }),
+                );
+            let matches = executor.block(match_strings(
+                &self.match_candidates,
+                &query,
+                true,
+                usize::MAX,
+                &Default::default(),
+                executor.clone(),
+            ));
+            request_entries.extend(
+                matches
+                    .iter()
+                    .map(|mat| ContactEntry::OutgoingRequest(outgoing[mat.candidate_id].clone())),
+            );
+        }
+
+        if !request_entries.is_empty() {
+            self.entries.push(ContactEntry::Header(Section::Requests));
+            if !self.collapsed_sections.contains(&Section::Requests) {
+                self.entries.append(&mut request_entries);
+            }
+        }
+
+        let contacts = user_store.contacts();
+        if !contacts.is_empty() {
+            // Always put the current user first.
+            self.match_candidates.clear();
+            self.match_candidates
+                .extend(
+                    contacts
+                        .iter()
+                        .enumerate()
+                        .map(|(ix, contact)| StringMatchCandidate {
+                            id: ix,
+                            string: contact.user.github_login.clone(),
+                            char_bag: contact.user.github_login.chars().collect(),
+                        }),
+                );
+
+            let matches = executor.block(match_strings(
+                &self.match_candidates,
+                &query,
+                true,
+                usize::MAX,
+                &Default::default(),
+                executor.clone(),
+            ));
+
+            let (online_contacts, offline_contacts) = matches
+                .iter()
+                .partition::<Vec<_>, _>(|mat| contacts[mat.candidate_id].online);
+
+            for (matches, section) in [
+                (online_contacts, Section::Online),
+                (offline_contacts, Section::Offline),
+            ] {
+                if !matches.is_empty() {
+                    self.entries.push(ContactEntry::Header(section));
+                    if !self.collapsed_sections.contains(&section) {
+                        for mat in matches {
+                            let contact = &contacts[mat.candidate_id];
+                            self.entries.push(ContactEntry::Contact(contact.clone()));
+                        }
+                    }
+                }
+            }
+        }
+
+        if let Some(prev_selected_entry) = prev_selected_entry {
+            self.selection.take();
+            for (ix, entry) in self.entries.iter().enumerate() {
+                if *entry == prev_selected_entry {
+                    self.selection = Some(ix);
+                    break;
+                }
+            }
+        }
+
+        self.list_state.reset(self.entries.len());
+        cx.notify();
+    }
+
+    fn render_active_call(&self, cx: &mut RenderContext<Self>) -> Option<ElementBox> {
+        let (room, _) = self.room.as_ref()?;
+        let theme = &cx.global::<Settings>().theme.contacts_panel;
+
+        Some(
+            Flex::column()
+                .with_children(room.read(cx).pending_users().iter().map(|user| {
+                    Flex::row()
+                        .with_children(user.avatar.clone().map(|avatar| {
+                            Image::new(avatar)
+                                .with_style(theme.contact_avatar)
+                                .aligned()
+                                .left()
+                                .boxed()
+                        }))
+                        .with_child(
+                            Label::new(
+                                user.github_login.clone(),
+                                theme.contact_username.text.clone(),
+                            )
+                            .contained()
+                            .with_style(theme.contact_username.container)
+                            .aligned()
+                            .left()
+                            .flex(1., true)
+                            .boxed(),
+                        )
+                        .constrained()
+                        .with_height(theme.row_height)
+                        .contained()
+                        .with_style(theme.contact_row.default)
+                        .boxed()
+                }))
+                .boxed(),
+        )
+    }
+
+    fn render_header(
+        section: Section,
+        theme: &theme::ContactsPanel,
+        is_selected: bool,
+        is_collapsed: bool,
+        cx: &mut RenderContext<Self>,
+    ) -> ElementBox {
+        enum Header {}
+
+        let header_style = theme.header_row.style_for(Default::default(), is_selected);
+        let text = match section {
+            Section::Requests => "Requests",
+            Section::Online => "Online",
+            Section::Offline => "Offline",
+        };
+        let icon_size = theme.section_icon_size;
+        MouseEventHandler::<Header>::new(section as usize, cx, |_, _| {
+            Flex::row()
+                .with_child(
+                    Svg::new(if is_collapsed {
+                        "icons/chevron_right_8.svg"
+                    } else {
+                        "icons/chevron_down_8.svg"
+                    })
+                    .with_color(header_style.text.color)
+                    .constrained()
+                    .with_max_width(icon_size)
+                    .with_max_height(icon_size)
+                    .aligned()
+                    .constrained()
+                    .with_width(icon_size)
+                    .boxed(),
+                )
+                .with_child(
+                    Label::new(text.to_string(), header_style.text.clone())
+                        .aligned()
+                        .left()
+                        .contained()
+                        .with_margin_left(theme.contact_username.container.margin.left)
+                        .flex(1., true)
+                        .boxed(),
+                )
+                .constrained()
+                .with_height(theme.row_height)
+                .contained()
+                .with_style(header_style.container)
+                .boxed()
+        })
+        .with_cursor_style(CursorStyle::PointingHand)
+        .on_click(MouseButton::Left, move |_, cx| {
+            cx.dispatch_action(ToggleExpanded(section))
+        })
+        .boxed()
+    }
+
+    fn render_contact(
+        contact: &Contact,
+        theme: &theme::ContactsPanel,
+        is_selected: bool,
+        cx: &mut RenderContext<Self>,
+    ) -> ElementBox {
+        let user_id = contact.user.id;
+        MouseEventHandler::<Contact>::new(contact.user.id as usize, cx, |_, _| {
+            Flex::row()
+                .with_children(contact.user.avatar.clone().map(|avatar| {
+                    Image::new(avatar)
+                        .with_style(theme.contact_avatar)
+                        .aligned()
+                        .left()
+                        .boxed()
+                }))
+                .with_child(
+                    Label::new(
+                        contact.user.github_login.clone(),
+                        theme.contact_username.text.clone(),
+                    )
+                    .contained()
+                    .with_style(theme.contact_username.container)
+                    .aligned()
+                    .left()
+                    .flex(1., true)
+                    .boxed(),
+                )
+                .constrained()
+                .with_height(theme.row_height)
+                .contained()
+                .with_style(*theme.contact_row.style_for(Default::default(), is_selected))
+                .boxed()
+        })
+        .on_click(MouseButton::Left, move |_, cx| {
+            cx.dispatch_action(Call {
+                recipient_user_id: user_id,
+            })
+        })
+        .boxed()
+    }
+
+    fn render_contact_request(
+        user: Arc<User>,
+        user_store: ModelHandle<UserStore>,
+        theme: &theme::ContactsPanel,
+        is_incoming: bool,
+        is_selected: bool,
+        cx: &mut RenderContext<Self>,
+    ) -> ElementBox {
+        enum Decline {}
+        enum Accept {}
+        enum Cancel {}
+
+        let mut row = Flex::row()
+            .with_children(user.avatar.clone().map(|avatar| {
+                Image::new(avatar)
+                    .with_style(theme.contact_avatar)
+                    .aligned()
+                    .left()
+                    .boxed()
+            }))
+            .with_child(
+                Label::new(
+                    user.github_login.clone(),
+                    theme.contact_username.text.clone(),
+                )
+                .contained()
+                .with_style(theme.contact_username.container)
+                .aligned()
+                .left()
+                .flex(1., true)
+                .boxed(),
+            );
+
+        let user_id = user.id;
+        let is_contact_request_pending = user_store.read(cx).is_contact_request_pending(&user);
+        let button_spacing = theme.contact_button_spacing;
+
+        if is_incoming {
+            row.add_children([
+                MouseEventHandler::<Decline>::new(user.id as usize, cx, |mouse_state, _| {
+                    let button_style = if is_contact_request_pending {
+                        &theme.disabled_button
+                    } else {
+                        theme.contact_button.style_for(mouse_state, false)
+                    };
+                    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,
+                    // })
+                })
+                // .flex_float()
+                .contained()
+                .with_margin_right(button_spacing)
+                .boxed(),
+                MouseEventHandler::<Accept>::new(user.id as usize, cx, |mouse_state, _| {
+                    let button_style = if is_contact_request_pending {
+                        &theme.disabled_button
+                    } else {
+                        theme.contact_button.style_for(mouse_state, false)
+                    };
+                    render_icon_button(button_style, "icons/check_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: true,
+                    // })
+                })
+                .boxed(),
+            ]);
+        } else {
+            row.add_child(
+                MouseEventHandler::<Cancel>::new(user.id as usize, cx, |mouse_state, _| {
+                    let button_style = if is_contact_request_pending {
+                        &theme.disabled_button
+                    } else {
+                        theme.contact_button.style_for(mouse_state, false)
+                    };
+                    render_icon_button(button_style, "icons/x_mark_8.svg")
+                        .aligned()
+                        .flex_float()
+                        .boxed()
+                })
+                .with_padding(Padding::uniform(2.))
+                .with_cursor_style(CursorStyle::PointingHand)
+                .on_click(MouseButton::Left, move |_, cx| {
+                    todo!()
+                    // cx.dispatch_action(RemoveContact(user_id))
+                })
+                .flex_float()
+                .boxed(),
+            );
+        }
+
+        row.constrained()
+            .with_height(theme.row_height)
+            .contained()
+            .with_style(*theme.contact_row.style_for(Default::default(), is_selected))
+            .boxed()
+    }
+
+    fn call(&mut self, action: &Call, cx: &mut ViewContext<Self>) {
+        let client = self.client.clone();
+        let user_store = self.user_store.clone();
+        let recipient_user_id = action.recipient_user_id;
+        cx.spawn_weak(|_, mut cx| async move {
+            let room = cx
+                .update(|cx| Room::get_or_create(&client, &user_store, cx))
+                .await?;
+            room.update(&mut cx, |room, cx| room.call(recipient_user_id, cx))
+                .await?;
+            anyhow::Ok(())
+        })
+        .detach();
+    }
+}
+
+impl Entity for ContactsPopover {
+    type Event = Event;
+}
+
+impl View for ContactsPopover {
+    fn ui_name() -> &'static str {
+        "ContactsPopover"
+    }
+
+    fn keymap_context(&self, _: &AppContext) -> keymap::Context {
+        let mut cx = Self::default_keymap_context();
+        cx.set.insert("menu".into());
+        cx
+    }
+
+    fn render(&mut self, cx: &mut RenderContext<Self>) -> ElementBox {
+        enum AddContact {}
+        let theme = cx.global::<Settings>().theme.clone();
+
+        Flex::column()
+            .with_child(
+                Flex::row()
+                    .with_child(
+                        ChildView::new(self.filter_editor.clone())
+                            .contained()
+                            .with_style(theme.contacts_panel.user_query_editor.container)
+                            .flex(1., true)
+                            .boxed(),
+                    )
+                    .with_child(
+                        MouseEventHandler::<AddContact>::new(0, cx, |_, _| {
+                            Svg::new("icons/user_plus_16.svg")
+                                .with_color(theme.contacts_panel.add_contact_button.color)
+                                .constrained()
+                                .with_height(16.)
+                                .contained()
+                                .with_style(theme.contacts_panel.add_contact_button.container)
+                                .aligned()
+                                .boxed()
+                        })
+                        .with_cursor_style(CursorStyle::PointingHand)
+                        .on_click(MouseButton::Left, |_, cx| {
+                            todo!()
+                            // cx.dispatch_action(contact_finder::Toggle)
+                        })
+                        .boxed(),
+                    )
+                    .constrained()
+                    .with_height(theme.contacts_panel.user_query_editor_height)
+                    .boxed(),
+            )
+            .with_children(self.render_active_call(cx))
+            .with_child(List::new(self.list_state.clone()).flex(1., false).boxed())
+            .with_children(
+                self.user_store
+                    .read(cx)
+                    .invite_info()
+                    .cloned()
+                    .and_then(|info| {
+                        enum InviteLink {}
+
+                        if info.count > 0 {
+                            Some(
+                                MouseEventHandler::<InviteLink>::new(0, cx, |state, cx| {
+                                    let style = theme
+                                        .contacts_panel
+                                        .invite_row
+                                        .style_for(state, false)
+                                        .clone();
+
+                                    let copied = cx.read_from_clipboard().map_or(false, |item| {
+                                        item.text().as_str() == info.url.as_ref()
+                                    });
+
+                                    Label::new(
+                                        format!(
+                                            "{} invite link ({} left)",
+                                            if copied { "Copied" } else { "Copy" },
+                                            info.count
+                                        ),
+                                        style.label.clone(),
+                                    )
+                                    .aligned()
+                                    .left()
+                                    .constrained()
+                                    .with_height(theme.contacts_panel.row_height)
+                                    .contained()
+                                    .with_style(style.container)
+                                    .boxed()
+                                })
+                                .with_cursor_style(CursorStyle::PointingHand)
+                                .on_click(MouseButton::Left, move |_, cx| {
+                                    cx.write_to_clipboard(ClipboardItem::new(info.url.to_string()));
+                                    cx.notify();
+                                })
+                                .boxed(),
+                            )
+                        } else {
+                            None
+                        }
+                    }),
+            )
+            .contained()
+            .with_style(theme.workspace.titlebar.contacts_popover.container)
+            .constrained()
+            .with_width(theme.workspace.titlebar.contacts_popover.width)
+            .with_height(theme.workspace.titlebar.contacts_popover.height)
+            .boxed()
+    }
+
+    fn on_focus_in(&mut self, _: gpui::AnyViewHandle, cx: &mut ViewContext<Self>) {
+        if !self.filter_editor.is_focused(cx) {
+            cx.focus(&self.filter_editor);
+        }
+    }
+
+    fn on_focus_out(&mut self, _: gpui::AnyViewHandle, cx: &mut ViewContext<Self>) {
+        if !self.filter_editor.is_focused(cx) {
+            cx.emit(Event::Dismissed);
+        }
+    }
+}
+
+fn render_icon_button(style: &IconButton, svg_path: &'static str) -> impl Element {
+    Svg::new(svg_path)
+        .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)
+}