collab_titlebar_item.rs

  1use crate::face_pile::FacePile;
  2use auto_update::AutoUpdateStatus;
  3use call::{ActiveCall, ParticipantLocation, Room};
  4use client::{proto::PeerId, Client, User, UserStore};
  5use gpui::{
  6    actions, canvas, div, point, px, Action, AnyElement, AppContext, Element, Hsla,
  7    InteractiveElement, IntoElement, Model, ParentElement, Path, Render,
  8    StatefulInteractiveElement, Styled, Subscription, View, ViewContext, VisualContext, WeakView,
  9};
 10use project::{Project, RepositoryEntry};
 11use recent_projects::RecentProjects;
 12use rpc::proto::{self, DevServerStatus};
 13use std::sync::Arc;
 14use theme::ActiveTheme;
 15use ui::{
 16    h_flex, popover_menu, prelude::*, Avatar, AvatarAudioStatusIndicator, Button, ButtonLike,
 17    ButtonStyle, ContextMenu, Icon, IconButton, IconName, Indicator, TintColor, TitleBar, Tooltip,
 18};
 19use util::ResultExt;
 20use vcs_menu::{build_branch_list, BranchList, OpenRecent as ToggleVcsMenu};
 21use workspace::{notifications::NotifyResultExt, Workspace};
 22
 23const MAX_PROJECT_NAME_LENGTH: usize = 40;
 24const MAX_BRANCH_NAME_LENGTH: usize = 40;
 25
 26actions!(
 27    collab,
 28    [
 29        ShareProject,
 30        UnshareProject,
 31        ToggleUserMenu,
 32        ToggleProjectMenu,
 33        SwitchBranch
 34    ]
 35);
 36
 37pub fn init(cx: &mut AppContext) {
 38    cx.observe_new_views(|workspace: &mut Workspace, cx| {
 39        let titlebar_item = cx.new_view(|cx| CollabTitlebarItem::new(workspace, cx));
 40        workspace.set_titlebar_item(titlebar_item.into(), cx)
 41    })
 42    .detach();
 43}
 44
 45pub struct CollabTitlebarItem {
 46    project: Model<Project>,
 47    user_store: Model<UserStore>,
 48    client: Arc<Client>,
 49    workspace: WeakView<Workspace>,
 50    _subscriptions: Vec<Subscription>,
 51}
 52
 53impl Render for CollabTitlebarItem {
 54    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
 55        let room = ActiveCall::global(cx).read(cx).room().cloned();
 56        let current_user = self.user_store.read(cx).current_user();
 57        let client = self.client.clone();
 58        let project_id = self.project.read(cx).remote_id();
 59        let workspace = self.workspace.upgrade();
 60
 61        TitleBar::new("collab-titlebar", Box::new(workspace::CloseWindow))
 62            // note: on windows titlebar behaviour is handled by the platform implementation
 63            .when(cfg!(not(windows)), |this| {
 64                this.on_click(|event, cx| {
 65                    if event.up.click_count == 2 {
 66                        cx.zoom_window();
 67                    }
 68                })
 69            })
 70            // left side
 71            .child(
 72                h_flex()
 73                    .gap_1()
 74                    .children(self.render_project_host(cx))
 75                    .child(self.render_project_name(cx))
 76                    .children(self.render_project_branch(cx))
 77                    .on_mouse_move(|_, cx| cx.stop_propagation()),
 78            )
 79            .child(
 80                h_flex()
 81                    .id("collaborator-list")
 82                    .w_full()
 83                    .gap_1()
 84                    .overflow_x_scroll()
 85                    .when_some(
 86                        current_user.clone().zip(client.peer_id()).zip(room.clone()),
 87                        |this, ((current_user, peer_id), room)| {
 88                            let player_colors = cx.theme().players();
 89                            let room = room.read(cx);
 90                            let mut remote_participants =
 91                                room.remote_participants().values().collect::<Vec<_>>();
 92                            remote_participants.sort_by_key(|p| p.participant_index.0);
 93
 94                            let current_user_face_pile = self.render_collaborator(
 95                                &current_user,
 96                                peer_id,
 97                                true,
 98                                room.is_speaking(),
 99                                room.is_muted(),
100                                None,
101                                &room,
102                                project_id,
103                                &current_user,
104                                cx,
105                            );
106
107                            this.children(current_user_face_pile.map(|face_pile| {
108                                v_flex()
109                                    .on_mouse_move(|_, cx| cx.stop_propagation())
110                                    .child(face_pile)
111                                    .child(render_color_ribbon(player_colors.local().cursor))
112                            }))
113                            .children(
114                                remote_participants.iter().filter_map(|collaborator| {
115                                    let player_color = player_colors
116                                        .color_for_participant(collaborator.participant_index.0);
117                                    let is_following = workspace
118                                        .as_ref()?
119                                        .read(cx)
120                                        .is_being_followed(collaborator.peer_id);
121                                    let is_present = project_id.map_or(false, |project_id| {
122                                        collaborator.location
123                                            == ParticipantLocation::SharedProject { project_id }
124                                    });
125
126                                    let face_pile = self.render_collaborator(
127                                        &collaborator.user,
128                                        collaborator.peer_id,
129                                        is_present,
130                                        collaborator.speaking,
131                                        collaborator.muted,
132                                        is_following.then_some(player_color.selection),
133                                        &room,
134                                        project_id,
135                                        &current_user,
136                                        cx,
137                                    )?;
138
139                                    Some(
140                                        v_flex()
141                                            .id(("collaborator", collaborator.user.id))
142                                            .child(face_pile)
143                                            .child(render_color_ribbon(player_color.cursor))
144                                            .cursor_pointer()
145                                            .on_click({
146                                                let peer_id = collaborator.peer_id;
147                                                cx.listener(move |this, _, cx| {
148                                                    this.workspace
149                                                        .update(cx, |workspace, cx| {
150                                                            workspace.follow(peer_id, cx);
151                                                        })
152                                                        .ok();
153                                                })
154                                            })
155                                            .tooltip({
156                                                let login = collaborator.user.github_login.clone();
157                                                move |cx| {
158                                                    Tooltip::text(format!("Follow {login}"), cx)
159                                                }
160                                            }),
161                                    )
162                                }),
163                            )
164                        },
165                    ),
166            )
167            // right side
168            .child(
169                h_flex()
170                    .gap_1()
171                    .pr_1()
172                    .on_mouse_move(|_, cx| cx.stop_propagation())
173                    .when_some(room, |this, room| {
174                        let room = room.read(cx);
175                        let project = self.project.read(cx);
176                        let is_local = project.is_local();
177                        let is_dev_server_project = project.dev_server_project_id().is_some();
178                        let is_shared = (is_local || is_dev_server_project) && project.is_shared();
179                        let is_muted = room.is_muted();
180                        let is_deafened = room.is_deafened().unwrap_or(false);
181                        let is_screen_sharing = room.is_screen_sharing();
182                        let can_use_microphone = room.can_use_microphone();
183                        let can_share_projects = room.can_share_projects();
184
185                        this.when(
186                            (is_local || is_dev_server_project) && can_share_projects,
187                            |this| {
188                                this.child(
189                                    Button::new(
190                                        "toggle_sharing",
191                                        if is_shared { "Unshare" } else { "Share" },
192                                    )
193                                    .tooltip(move |cx| {
194                                        Tooltip::text(
195                                            if is_shared {
196                                                "Stop sharing project with call participants"
197                                            } else {
198                                                "Share project with call participants"
199                                            },
200                                            cx,
201                                        )
202                                    })
203                                    .style(ButtonStyle::Subtle)
204                                    .selected_style(ButtonStyle::Tinted(TintColor::Accent))
205                                    .selected(is_shared)
206                                    .label_size(LabelSize::Small)
207                                    .on_click(cx.listener(
208                                        move |this, _, cx| {
209                                            if is_shared {
210                                                this.unshare_project(&Default::default(), cx);
211                                            } else {
212                                                this.share_project(&Default::default(), cx);
213                                            }
214                                        },
215                                    )),
216                                )
217                            },
218                        )
219                        .child(
220                            div()
221                                .child(
222                                    IconButton::new("leave-call", ui::IconName::Exit)
223                                        .style(ButtonStyle::Subtle)
224                                        .tooltip(|cx| Tooltip::text("Leave call", cx))
225                                        .icon_size(IconSize::Small)
226                                        .on_click(move |_, cx| {
227                                            ActiveCall::global(cx)
228                                                .update(cx, |call, cx| call.hang_up(cx))
229                                                .detach_and_log_err(cx);
230                                        }),
231                                )
232                                .pr_2(),
233                        )
234                        .when(can_use_microphone, |this| {
235                            this.child(
236                                IconButton::new(
237                                    "mute-microphone",
238                                    if is_muted {
239                                        ui::IconName::MicMute
240                                    } else {
241                                        ui::IconName::Mic
242                                    },
243                                )
244                                .tooltip(move |cx| {
245                                    Tooltip::text(
246                                        if is_muted {
247                                            "Unmute microphone"
248                                        } else {
249                                            "Mute microphone"
250                                        },
251                                        cx,
252                                    )
253                                })
254                                .style(ButtonStyle::Subtle)
255                                .icon_size(IconSize::Small)
256                                .selected(is_muted)
257                                .selected_style(ButtonStyle::Tinted(TintColor::Negative))
258                                .on_click(move |_, cx| crate::toggle_mute(&Default::default(), cx)),
259                            )
260                        })
261                        .child(
262                            IconButton::new(
263                                "mute-sound",
264                                if is_deafened {
265                                    ui::IconName::AudioOff
266                                } else {
267                                    ui::IconName::AudioOn
268                                },
269                            )
270                            .style(ButtonStyle::Subtle)
271                            .selected_style(ButtonStyle::Tinted(TintColor::Negative))
272                            .icon_size(IconSize::Small)
273                            .selected(is_deafened)
274                            .tooltip(move |cx| {
275                                if can_use_microphone {
276                                    Tooltip::with_meta(
277                                        "Deafen Audio",
278                                        None,
279                                        "Mic will be muted",
280                                        cx,
281                                    )
282                                } else {
283                                    Tooltip::text("Deafen Audio", cx)
284                                }
285                            })
286                            .on_click(move |_, cx| crate::toggle_deafen(&Default::default(), cx)),
287                        )
288                        .when(can_share_projects, |this| {
289                            this.child(
290                                IconButton::new("screen-share", ui::IconName::Screen)
291                                    .style(ButtonStyle::Subtle)
292                                    .icon_size(IconSize::Small)
293                                    .selected(is_screen_sharing)
294                                    .selected_style(ButtonStyle::Tinted(TintColor::Accent))
295                                    .tooltip(move |cx| {
296                                        Tooltip::text(
297                                            if is_screen_sharing {
298                                                "Stop Sharing Screen"
299                                            } else {
300                                                "Share Screen"
301                                            },
302                                            cx,
303                                        )
304                                    })
305                                    .on_click(move |_, cx| {
306                                        crate::toggle_screen_sharing(&Default::default(), cx)
307                                    }),
308                            )
309                        })
310                        .child(div().pr_2())
311                    })
312                    .map(|el| {
313                        let status = self.client.status();
314                        let status = &*status.borrow();
315                        if matches!(status, client::Status::Connected { .. }) {
316                            el.child(self.render_user_menu_button(cx))
317                        } else {
318                            el.children(self.render_connection_status(status, cx))
319                                .child(self.render_sign_in_button(cx))
320                                .child(self.render_user_menu_button(cx))
321                        }
322                    }),
323            )
324    }
325}
326
327fn render_color_ribbon(color: Hsla) -> impl Element {
328    canvas(
329        move |_, _| {},
330        move |bounds, _, cx| {
331            let height = bounds.size.height;
332            let horizontal_offset = height;
333            let vertical_offset = px(height.0 / 2.0);
334            let mut path = Path::new(bounds.lower_left());
335            path.curve_to(
336                bounds.origin + point(horizontal_offset, vertical_offset),
337                bounds.origin + point(px(0.0), vertical_offset),
338            );
339            path.line_to(bounds.upper_right() + point(-horizontal_offset, vertical_offset));
340            path.curve_to(
341                bounds.lower_right(),
342                bounds.upper_right() + point(px(0.0), vertical_offset),
343            );
344            path.line_to(bounds.lower_left());
345            cx.paint_path(path, color);
346        },
347    )
348    .h_1()
349    .w_full()
350}
351
352impl CollabTitlebarItem {
353    pub fn new(workspace: &Workspace, cx: &mut ViewContext<Self>) -> Self {
354        let project = workspace.project().clone();
355        let user_store = workspace.app_state().user_store.clone();
356        let client = workspace.app_state().client.clone();
357        let active_call = ActiveCall::global(cx);
358        let mut subscriptions = Vec::new();
359        subscriptions.push(
360            cx.observe(&workspace.weak_handle().upgrade().unwrap(), |_, _, cx| {
361                cx.notify()
362            }),
363        );
364        subscriptions.push(cx.observe(&project, |_, _, cx| cx.notify()));
365        subscriptions.push(cx.observe(&active_call, |this, _, cx| this.active_call_changed(cx)));
366        subscriptions.push(cx.observe_window_activation(Self::window_activation_changed));
367        subscriptions.push(cx.observe(&user_store, |_, _, cx| cx.notify()));
368
369        Self {
370            workspace: workspace.weak_handle(),
371            project,
372            user_store,
373            client,
374            _subscriptions: subscriptions,
375        }
376    }
377
378    // resolve if you are in a room -> render_project_owner
379    // render_project_owner -> resolve if you are in a room -> Option<foo>
380
381    pub fn render_project_host(&self, cx: &mut ViewContext<Self>) -> Option<AnyElement> {
382        if let Some(dev_server) =
383            self.project
384                .read(cx)
385                .dev_server_project_id()
386                .and_then(|dev_server_project_id| {
387                    dev_server_projects::Store::global(cx)
388                        .read(cx)
389                        .dev_server_for_project(dev_server_project_id)
390                })
391        {
392            return Some(
393                ButtonLike::new("dev_server_trigger")
394                    .child(Indicator::dot().color(
395                        if dev_server.status == DevServerStatus::Online {
396                            Color::Created
397                        } else {
398                            Color::Disabled
399                        },
400                    ))
401                    .child(
402                        Label::new(dev_server.name.clone())
403                            .size(LabelSize::Small)
404                            .line_height_style(LineHeightStyle::UiLabel),
405                    )
406                    .tooltip(move |cx| Tooltip::text("Project is hosted on a dev server", cx))
407                    .on_click(cx.listener(|this, _, cx| {
408                        if let Some(workspace) = this.workspace.upgrade() {
409                            recent_projects::DevServerProjects::open(workspace, cx)
410                        }
411                    }))
412                    .into_any_element(),
413            );
414        }
415
416        let host = self.project.read(cx).host()?;
417        let host_user = self.user_store.read(cx).get_cached_user(host.user_id)?;
418        let participant_index = self
419            .user_store
420            .read(cx)
421            .participant_indices()
422            .get(&host_user.id)?;
423        Some(
424            Button::new("project_owner_trigger", host_user.github_login.clone())
425                .color(Color::Player(participant_index.0))
426                .style(ButtonStyle::Subtle)
427                .label_size(LabelSize::Small)
428                .tooltip(move |cx| {
429                    Tooltip::text(
430                        format!(
431                            "{} is sharing this project. Click to follow.",
432                            host_user.github_login.clone()
433                        ),
434                        cx,
435                    )
436                })
437                .on_click({
438                    let host_peer_id = host.peer_id;
439                    cx.listener(move |this, _, cx| {
440                        this.workspace
441                            .update(cx, |workspace, cx| {
442                                workspace.follow(host_peer_id, cx);
443                            })
444                            .log_err();
445                    })
446                })
447                .into_any_element(),
448        )
449    }
450
451    pub fn render_project_name(&self, cx: &mut ViewContext<Self>) -> impl IntoElement {
452        let name = {
453            let mut names = self.project.read(cx).visible_worktrees(cx).map(|worktree| {
454                let worktree = worktree.read(cx);
455                worktree.root_name()
456            });
457
458            names.next()
459        };
460        let is_project_selected = name.is_some();
461        let name = if let Some(name) = name {
462            util::truncate_and_trailoff(name, MAX_PROJECT_NAME_LENGTH)
463        } else {
464            "Open recent project".to_string()
465        };
466
467        let workspace = self.workspace.clone();
468        Button::new("project_name_trigger", name)
469            .when(!is_project_selected, |b| b.color(Color::Muted))
470            .style(ButtonStyle::Subtle)
471            .label_size(LabelSize::Small)
472            .tooltip(move |cx| {
473                Tooltip::for_action(
474                    "Recent Projects",
475                    &recent_projects::OpenRecent {
476                        create_new_window: false,
477                    },
478                    cx,
479                )
480            })
481            .on_click(cx.listener(move |_, _, cx| {
482                if let Some(workspace) = workspace.upgrade() {
483                    workspace.update(cx, |workspace, cx| {
484                        RecentProjects::open(workspace, false, cx);
485                    })
486                }
487            }))
488    }
489
490    pub fn render_project_branch(&self, cx: &mut ViewContext<Self>) -> Option<impl Element> {
491        let entry = {
492            let mut names_and_branches =
493                self.project.read(cx).visible_worktrees(cx).map(|worktree| {
494                    let worktree = worktree.read(cx);
495                    worktree.root_git_entry()
496                });
497
498            names_and_branches.next().flatten()
499        };
500        let workspace = self.workspace.upgrade()?;
501        let branch_name = entry
502            .as_ref()
503            .and_then(RepositoryEntry::branch)
504            .map(|branch| util::truncate_and_trailoff(&branch, MAX_BRANCH_NAME_LENGTH))?;
505        Some(
506            popover_menu("project_branch_trigger")
507                .trigger(
508                    Button::new("project_branch_trigger", branch_name)
509                        .color(Color::Muted)
510                        .style(ButtonStyle::Subtle)
511                        .label_size(LabelSize::Small)
512                        .tooltip(move |cx| {
513                            Tooltip::with_meta(
514                                "Recent Branches",
515                                Some(&ToggleVcsMenu),
516                                "Local branches only",
517                                cx,
518                            )
519                        }),
520                )
521                .menu(move |cx| Self::render_vcs_popover(workspace.clone(), cx)),
522        )
523    }
524
525    #[allow(clippy::too_many_arguments)]
526    fn render_collaborator(
527        &self,
528        user: &Arc<User>,
529        peer_id: PeerId,
530        is_present: bool,
531        is_speaking: bool,
532        is_muted: bool,
533        leader_selection_color: Option<Hsla>,
534        room: &Room,
535        project_id: Option<u64>,
536        current_user: &Arc<User>,
537        cx: &ViewContext<Self>,
538    ) -> Option<Div> {
539        if room.role_for_user(user.id) == Some(proto::ChannelRole::Guest) {
540            return None;
541        }
542
543        const FACEPILE_LIMIT: usize = 3;
544        let followers = project_id.map_or(&[] as &[_], |id| room.followers_for(peer_id, id));
545        let extra_count = followers.len().saturating_sub(FACEPILE_LIMIT);
546
547        Some(
548            div()
549                .m_0p5()
550                .p_0p5()
551                // When the collaborator is not followed, still draw this wrapper div, but leave
552                // it transparent, so that it does not shift the layout when following.
553                .when_some(leader_selection_color, |div, color| {
554                    div.rounded_md().bg(color)
555                })
556                .child(
557                    FacePile::empty()
558                        .child(
559                            Avatar::new(user.avatar_uri.clone())
560                                .grayscale(!is_present)
561                                .border_color(if is_speaking {
562                                    cx.theme().status().info
563                                } else {
564                                    // We draw the border in a transparent color rather to avoid
565                                    // the layout shift that would come with adding/removing the border.
566                                    gpui::transparent_black()
567                                })
568                                .when(is_muted, |avatar| {
569                                    avatar.indicator(
570                                        AvatarAudioStatusIndicator::new(ui::AudioStatus::Muted)
571                                            .tooltip({
572                                                let github_login = user.github_login.clone();
573                                                move |cx| {
574                                                    Tooltip::text(
575                                                        format!("{} is muted", github_login),
576                                                        cx,
577                                                    )
578                                                }
579                                            }),
580                                    )
581                                }),
582                        )
583                        .children(followers.iter().take(FACEPILE_LIMIT).filter_map(
584                            |follower_peer_id| {
585                                let follower = room
586                                    .remote_participants()
587                                    .values()
588                                    .find_map(|p| {
589                                        (p.peer_id == *follower_peer_id).then_some(&p.user)
590                                    })
591                                    .or_else(|| {
592                                        (self.client.peer_id() == Some(*follower_peer_id))
593                                            .then_some(current_user)
594                                    })?
595                                    .clone();
596
597                                Some(div().mt(-px(4.)).child(
598                                    Avatar::new(follower.avatar_uri.clone()).size(rems(0.75)),
599                                ))
600                            },
601                        ))
602                        .children(if extra_count > 0 {
603                            Some(
604                                div()
605                                    .ml_1()
606                                    .child(Label::new(format!("+{extra_count}")))
607                                    .into_any_element(),
608                            )
609                        } else {
610                            None
611                        }),
612                ),
613        )
614    }
615
616    fn window_activation_changed(&mut self, cx: &mut ViewContext<Self>) {
617        if cx.is_window_active() {
618            ActiveCall::global(cx)
619                .update(cx, |call, cx| call.set_location(Some(&self.project), cx))
620                .detach_and_log_err(cx);
621        } else if cx.active_window().is_none() {
622            ActiveCall::global(cx)
623                .update(cx, |call, cx| call.set_location(None, cx))
624                .detach_and_log_err(cx);
625        }
626        self.workspace
627            .update(cx, |workspace, cx| {
628                workspace.update_active_view_for_followers(cx);
629            })
630            .ok();
631    }
632
633    fn active_call_changed(&mut self, cx: &mut ViewContext<Self>) {
634        cx.notify();
635    }
636
637    fn share_project(&mut self, _: &ShareProject, cx: &mut ViewContext<Self>) {
638        let active_call = ActiveCall::global(cx);
639        let project = self.project.clone();
640        active_call
641            .update(cx, |call, cx| call.share_project(project, cx))
642            .detach_and_log_err(cx);
643    }
644
645    fn unshare_project(&mut self, _: &UnshareProject, cx: &mut ViewContext<Self>) {
646        let active_call = ActiveCall::global(cx);
647        let project = self.project.clone();
648        active_call
649            .update(cx, |call, cx| call.unshare_project(project, cx))
650            .log_err();
651    }
652
653    pub fn render_vcs_popover(
654        workspace: View<Workspace>,
655        cx: &mut WindowContext<'_>,
656    ) -> Option<View<BranchList>> {
657        let view = build_branch_list(workspace, cx).log_err()?;
658        let focus_handle = view.focus_handle(cx);
659        cx.focus(&focus_handle);
660        Some(view)
661    }
662
663    fn render_connection_status(
664        &self,
665        status: &client::Status,
666        cx: &mut ViewContext<Self>,
667    ) -> Option<AnyElement> {
668        match status {
669            client::Status::ConnectionError
670            | client::Status::ConnectionLost
671            | client::Status::Reauthenticating { .. }
672            | client::Status::Reconnecting { .. }
673            | client::Status::ReconnectionError { .. } => Some(
674                div()
675                    .id("disconnected")
676                    .child(Icon::new(IconName::Disconnected).size(IconSize::Small))
677                    .tooltip(|cx| Tooltip::text("Disconnected", cx))
678                    .into_any_element(),
679            ),
680            client::Status::UpgradeRequired => {
681                let auto_updater = auto_update::AutoUpdater::get(cx);
682                let label = match auto_updater.map(|auto_update| auto_update.read(cx).status()) {
683                    Some(AutoUpdateStatus::Updated { .. }) => "Please restart Zed to Collaborate",
684                    Some(AutoUpdateStatus::Installing)
685                    | Some(AutoUpdateStatus::Downloading)
686                    | Some(AutoUpdateStatus::Checking) => "Updating...",
687                    Some(AutoUpdateStatus::Idle) | Some(AutoUpdateStatus::Errored) | None => {
688                        "Please update Zed to Collaborate"
689                    }
690                };
691
692                Some(
693                    Button::new("connection-status", label)
694                        .label_size(LabelSize::Small)
695                        .on_click(|_, cx| {
696                            if let Some(auto_updater) = auto_update::AutoUpdater::get(cx) {
697                                if auto_updater.read(cx).status().is_updated() {
698                                    workspace::restart(&Default::default(), cx);
699                                    return;
700                                }
701                            }
702                            auto_update::check(&Default::default(), cx);
703                        })
704                        .into_any_element(),
705                )
706            }
707            _ => None,
708        }
709    }
710
711    pub fn render_sign_in_button(&mut self, _: &mut ViewContext<Self>) -> Button {
712        let client = self.client.clone();
713        Button::new("sign_in", "Sign in")
714            .label_size(LabelSize::Small)
715            .on_click(move |_, cx| {
716                let client = client.clone();
717                cx.spawn(move |mut cx| async move {
718                    client
719                        .authenticate_and_connect(true, &cx)
720                        .await
721                        .notify_async_err(&mut cx);
722                })
723                .detach();
724            })
725    }
726
727    pub fn render_user_menu_button(&mut self, cx: &mut ViewContext<Self>) -> impl Element {
728        if let Some(user) = self.user_store.read(cx).current_user() {
729            popover_menu("user-menu")
730                .menu(|cx| {
731                    ContextMenu::build(cx, |menu, _| {
732                        menu.action("Settings", zed_actions::OpenSettings.boxed_clone())
733                            .action("Extensions", extensions_ui::Extensions.boxed_clone())
734                            .action("Themes...", theme_selector::Toggle::default().boxed_clone())
735                            .separator()
736                            .action("Sign Out", client::SignOut.boxed_clone())
737                    })
738                    .into()
739                })
740                .trigger(
741                    ButtonLike::new("user-menu")
742                        .child(
743                            h_flex()
744                                .gap_0p5()
745                                .child(Avatar::new(user.avatar_uri.clone()))
746                                .child(Icon::new(IconName::ChevronDown).color(Color::Muted)),
747                        )
748                        .style(ButtonStyle::Subtle)
749                        .tooltip(move |cx| Tooltip::text("Toggle User Menu", cx)),
750                )
751                .anchor(gpui::AnchorCorner::TopRight)
752        } else {
753            popover_menu("user-menu")
754                .menu(|cx| {
755                    ContextMenu::build(cx, |menu, _| {
756                        menu.action("Settings", zed_actions::OpenSettings.boxed_clone())
757                            .action("Extensions", extensions_ui::Extensions.boxed_clone())
758                            .action("Themes...", theme_selector::Toggle::default().boxed_clone())
759                    })
760                    .into()
761                })
762                .trigger(
763                    ButtonLike::new("user-menu")
764                        .child(
765                            h_flex()
766                                .gap_0p5()
767                                .child(Icon::new(IconName::ChevronDown).color(Color::Muted)),
768                        )
769                        .style(ButtonStyle::Subtle)
770                        .tooltip(move |cx| Tooltip::text("Toggle User Menu", cx)),
771                )
772        }
773    }
774}