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, 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::{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        if self.project.read(cx).is_disconnected() {
417            return Some(
418                Button::new("disconnected", "Disconnected")
419                    .disabled(true)
420                    .color(Color::Disabled)
421                    .style(ButtonStyle::Subtle)
422                    .label_size(LabelSize::Small)
423                    .into_any_element(),
424            );
425        }
426
427        let host = self.project.read(cx).host()?;
428        let host_user = self.user_store.read(cx).get_cached_user(host.user_id)?;
429        let participant_index = self
430            .user_store
431            .read(cx)
432            .participant_indices()
433            .get(&host_user.id)?;
434        Some(
435            Button::new("project_owner_trigger", host_user.github_login.clone())
436                .color(Color::Player(participant_index.0))
437                .style(ButtonStyle::Subtle)
438                .label_size(LabelSize::Small)
439                .tooltip(move |cx| {
440                    Tooltip::text(
441                        format!(
442                            "{} is sharing this project. Click to follow.",
443                            host_user.github_login.clone()
444                        ),
445                        cx,
446                    )
447                })
448                .on_click({
449                    let host_peer_id = host.peer_id;
450                    cx.listener(move |this, _, cx| {
451                        this.workspace
452                            .update(cx, |workspace, cx| {
453                                workspace.follow(host_peer_id, cx);
454                            })
455                            .log_err();
456                    })
457                })
458                .into_any_element(),
459        )
460    }
461
462    pub fn render_project_name(&self, cx: &mut ViewContext<Self>) -> impl IntoElement {
463        let name = {
464            let mut names = self.project.read(cx).visible_worktrees(cx).map(|worktree| {
465                let worktree = worktree.read(cx);
466                worktree.root_name()
467            });
468
469            names.next()
470        };
471        let is_project_selected = name.is_some();
472        let name = if let Some(name) = name {
473            util::truncate_and_trailoff(name, MAX_PROJECT_NAME_LENGTH)
474        } else {
475            "Open recent project".to_string()
476        };
477
478        let workspace = self.workspace.clone();
479        Button::new("project_name_trigger", name)
480            .when(!is_project_selected, |b| b.color(Color::Muted))
481            .style(ButtonStyle::Subtle)
482            .label_size(LabelSize::Small)
483            .tooltip(move |cx| {
484                Tooltip::for_action(
485                    "Recent Projects",
486                    &recent_projects::OpenRecent {
487                        create_new_window: false,
488                    },
489                    cx,
490                )
491            })
492            .on_click(cx.listener(move |_, _, cx| {
493                if let Some(workspace) = workspace.upgrade() {
494                    workspace.update(cx, |workspace, cx| {
495                        RecentProjects::open(workspace, false, cx);
496                    })
497                }
498            }))
499    }
500
501    pub fn render_project_branch(&self, cx: &mut ViewContext<Self>) -> Option<impl IntoElement> {
502        let entry = {
503            let mut names_and_branches =
504                self.project.read(cx).visible_worktrees(cx).map(|worktree| {
505                    let worktree = worktree.read(cx);
506                    worktree.root_git_entry()
507                });
508
509            names_and_branches.next().flatten()
510        };
511        let workspace = self.workspace.upgrade()?;
512        let branch_name = entry
513            .as_ref()
514            .and_then(RepositoryEntry::branch)
515            .map(|branch| util::truncate_and_trailoff(&branch, MAX_BRANCH_NAME_LENGTH))?;
516        Some(
517            Button::new("project_branch_trigger", branch_name)
518                .color(Color::Muted)
519                .style(ButtonStyle::Subtle)
520                .label_size(LabelSize::Small)
521                .tooltip(move |cx| {
522                    Tooltip::with_meta(
523                        "Recent Branches",
524                        Some(&ToggleVcsMenu),
525                        "Local branches only",
526                        cx,
527                    )
528                })
529                .on_click(move |_, cx| {
530                    let _ = workspace.update(cx, |this, cx| {
531                        BranchList::open(this, &Default::default(), cx)
532                    });
533                }),
534        )
535    }
536
537    #[allow(clippy::too_many_arguments)]
538    fn render_collaborator(
539        &self,
540        user: &Arc<User>,
541        peer_id: PeerId,
542        is_present: bool,
543        is_speaking: bool,
544        is_muted: bool,
545        leader_selection_color: Option<Hsla>,
546        room: &Room,
547        project_id: Option<u64>,
548        current_user: &Arc<User>,
549        cx: &ViewContext<Self>,
550    ) -> Option<Div> {
551        if room.role_for_user(user.id) == Some(proto::ChannelRole::Guest) {
552            return None;
553        }
554
555        const FACEPILE_LIMIT: usize = 3;
556        let followers = project_id.map_or(&[] as &[_], |id| room.followers_for(peer_id, id));
557        let extra_count = followers.len().saturating_sub(FACEPILE_LIMIT);
558
559        Some(
560            div()
561                .m_0p5()
562                .p_0p5()
563                // When the collaborator is not followed, still draw this wrapper div, but leave
564                // it transparent, so that it does not shift the layout when following.
565                .when_some(leader_selection_color, |div, color| {
566                    div.rounded_md().bg(color)
567                })
568                .child(
569                    FacePile::empty()
570                        .child(
571                            Avatar::new(user.avatar_uri.clone())
572                                .grayscale(!is_present)
573                                .border_color(if is_speaking {
574                                    cx.theme().status().info
575                                } else {
576                                    // We draw the border in a transparent color rather to avoid
577                                    // the layout shift that would come with adding/removing the border.
578                                    gpui::transparent_black()
579                                })
580                                .when(is_muted, |avatar| {
581                                    avatar.indicator(
582                                        AvatarAudioStatusIndicator::new(ui::AudioStatus::Muted)
583                                            .tooltip({
584                                                let github_login = user.github_login.clone();
585                                                move |cx| {
586                                                    Tooltip::text(
587                                                        format!("{} is muted", github_login),
588                                                        cx,
589                                                    )
590                                                }
591                                            }),
592                                    )
593                                }),
594                        )
595                        .children(followers.iter().take(FACEPILE_LIMIT).filter_map(
596                            |follower_peer_id| {
597                                let follower = room
598                                    .remote_participants()
599                                    .values()
600                                    .find_map(|p| {
601                                        (p.peer_id == *follower_peer_id).then_some(&p.user)
602                                    })
603                                    .or_else(|| {
604                                        (self.client.peer_id() == Some(*follower_peer_id))
605                                            .then_some(current_user)
606                                    })?
607                                    .clone();
608
609                                Some(div().mt(-px(4.)).child(
610                                    Avatar::new(follower.avatar_uri.clone()).size(rems(0.75)),
611                                ))
612                            },
613                        ))
614                        .children(if extra_count > 0 {
615                            Some(
616                                div()
617                                    .ml_1()
618                                    .child(Label::new(format!("+{extra_count}")))
619                                    .into_any_element(),
620                            )
621                        } else {
622                            None
623                        }),
624                ),
625        )
626    }
627
628    fn window_activation_changed(&mut self, cx: &mut ViewContext<Self>) {
629        if cx.is_window_active() {
630            ActiveCall::global(cx)
631                .update(cx, |call, cx| call.set_location(Some(&self.project), cx))
632                .detach_and_log_err(cx);
633        } else if cx.active_window().is_none() {
634            ActiveCall::global(cx)
635                .update(cx, |call, cx| call.set_location(None, cx))
636                .detach_and_log_err(cx);
637        }
638        self.workspace
639            .update(cx, |workspace, cx| {
640                workspace.update_active_view_for_followers(cx);
641            })
642            .ok();
643    }
644
645    fn active_call_changed(&mut self, cx: &mut ViewContext<Self>) {
646        cx.notify();
647    }
648
649    fn share_project(&mut self, _: &ShareProject, cx: &mut ViewContext<Self>) {
650        let active_call = ActiveCall::global(cx);
651        let project = self.project.clone();
652        active_call
653            .update(cx, |call, cx| call.share_project(project, cx))
654            .detach_and_log_err(cx);
655    }
656
657    fn unshare_project(&mut self, _: &UnshareProject, cx: &mut ViewContext<Self>) {
658        let active_call = ActiveCall::global(cx);
659        let project = self.project.clone();
660        active_call
661            .update(cx, |call, cx| call.unshare_project(project, cx))
662            .log_err();
663    }
664
665    fn render_connection_status(
666        &self,
667        status: &client::Status,
668        cx: &mut ViewContext<Self>,
669    ) -> Option<AnyElement> {
670        match status {
671            client::Status::ConnectionError
672            | client::Status::ConnectionLost
673            | client::Status::Reauthenticating { .. }
674            | client::Status::Reconnecting { .. }
675            | client::Status::ReconnectionError { .. } => Some(
676                div()
677                    .id("disconnected")
678                    .child(Icon::new(IconName::Disconnected).size(IconSize::Small))
679                    .tooltip(|cx| Tooltip::text("Disconnected", cx))
680                    .into_any_element(),
681            ),
682            client::Status::UpgradeRequired => {
683                let auto_updater = auto_update::AutoUpdater::get(cx);
684                let label = match auto_updater.map(|auto_update| auto_update.read(cx).status()) {
685                    Some(AutoUpdateStatus::Updated { .. }) => "Please restart Zed to Collaborate",
686                    Some(AutoUpdateStatus::Installing)
687                    | Some(AutoUpdateStatus::Downloading)
688                    | Some(AutoUpdateStatus::Checking) => "Updating...",
689                    Some(AutoUpdateStatus::Idle) | Some(AutoUpdateStatus::Errored) | None => {
690                        "Please update Zed to Collaborate"
691                    }
692                };
693
694                Some(
695                    Button::new("connection-status", label)
696                        .label_size(LabelSize::Small)
697                        .on_click(|_, cx| {
698                            if let Some(auto_updater) = auto_update::AutoUpdater::get(cx) {
699                                if auto_updater.read(cx).status().is_updated() {
700                                    workspace::reload(&Default::default(), cx);
701                                    return;
702                                }
703                            }
704                            auto_update::check(&Default::default(), cx);
705                        })
706                        .into_any_element(),
707                )
708            }
709            _ => None,
710        }
711    }
712
713    pub fn render_sign_in_button(&mut self, _: &mut ViewContext<Self>) -> Button {
714        let client = self.client.clone();
715        Button::new("sign_in", "Sign in")
716            .label_size(LabelSize::Small)
717            .on_click(move |_, cx| {
718                let client = client.clone();
719                cx.spawn(move |mut cx| async move {
720                    client
721                        .authenticate_and_connect(true, &cx)
722                        .await
723                        .notify_async_err(&mut cx);
724                })
725                .detach();
726            })
727    }
728
729    pub fn render_user_menu_button(&mut self, cx: &mut ViewContext<Self>) -> impl Element {
730        if let Some(user) = self.user_store.read(cx).current_user() {
731            popover_menu("user-menu")
732                .menu(|cx| {
733                    ContextMenu::build(cx, |menu, _| {
734                        menu.action("Settings", zed_actions::OpenSettings.boxed_clone())
735                            .action("Extensions", extensions_ui::Extensions.boxed_clone())
736                            .action("Themes…", theme_selector::Toggle::default().boxed_clone())
737                            .separator()
738                            .action("Sign Out", client::SignOut.boxed_clone())
739                    })
740                    .into()
741                })
742                .trigger(
743                    ButtonLike::new("user-menu")
744                        .child(
745                            h_flex()
746                                .gap_0p5()
747                                .child(Avatar::new(user.avatar_uri.clone()))
748                                .child(
749                                    Icon::new(IconName::ChevronDown)
750                                        .size(IconSize::Small)
751                                        .color(Color::Muted),
752                                ),
753                        )
754                        .style(ButtonStyle::Subtle)
755                        .tooltip(move |cx| Tooltip::text("Toggle User Menu", cx)),
756                )
757                .anchor(gpui::AnchorCorner::TopRight)
758        } else {
759            popover_menu("user-menu")
760                .menu(|cx| {
761                    ContextMenu::build(cx, |menu, _| {
762                        menu.action("Settings", zed_actions::OpenSettings.boxed_clone())
763                            .action("Extensions", extensions_ui::Extensions.boxed_clone())
764                            .action("Themes…", theme_selector::Toggle::default().boxed_clone())
765                    })
766                    .into()
767                })
768                .trigger(
769                    ButtonLike::new("user-menu")
770                        .child(
771                            h_flex().gap_0p5().child(
772                                Icon::new(IconName::ChevronDown)
773                                    .size(IconSize::Small)
774                                    .color(Color::Muted),
775                            ),
776                        )
777                        .style(ButtonStyle::Subtle)
778                        .tooltip(move |cx| Tooltip::text("Toggle User Menu", cx)),
779                )
780        }
781    }
782}