title_bar.rs

  1mod application_menu;
  2mod collab;
  3mod platforms;
  4mod window_controls;
  5
  6#[cfg(feature = "stories")]
  7mod stories;
  8
  9use crate::application_menu::ApplicationMenu;
 10use crate::platforms::{platform_linux, platform_mac, platform_windows};
 11use auto_update::AutoUpdateStatus;
 12use call::ActiveCall;
 13use client::{Client, UserStore};
 14use feature_flags::{FeatureFlagAppExt, ZedPro};
 15use gpui::{
 16    actions, div, px, Action, AnyElement, AppContext, Decorations, Element, InteractiveElement,
 17    Interactivity, IntoElement, Model, MouseButton, ParentElement, Render, Stateful,
 18    StatefulInteractiveElement, Styled, Subscription, View, ViewContext, VisualContext, WeakView,
 19};
 20use project::{Project, RepositoryEntry};
 21use recent_projects::{OpenRemote, RecentProjects};
 22use rpc::proto::{self, DevServerStatus};
 23use smallvec::SmallVec;
 24use std::sync::Arc;
 25use theme::ActiveTheme;
 26use ui::{
 27    h_flex, prelude::*, Avatar, Button, ButtonLike, ButtonStyle, ContextMenu, Icon, IconName,
 28    Indicator, PopoverMenu, Tooltip,
 29};
 30use util::ResultExt;
 31use vcs_menu::{BranchList, OpenRecent as ToggleVcsMenu};
 32use workspace::{notifications::NotifyResultExt, Workspace};
 33
 34#[cfg(feature = "stories")]
 35pub use stories::*;
 36
 37const MAX_PROJECT_NAME_LENGTH: usize = 40;
 38const MAX_BRANCH_NAME_LENGTH: usize = 40;
 39
 40actions!(
 41    collab,
 42    [
 43        ShareProject,
 44        UnshareProject,
 45        ToggleUserMenu,
 46        ToggleProjectMenu,
 47        SwitchBranch
 48    ]
 49);
 50
 51pub fn init(cx: &mut AppContext) {
 52    cx.observe_new_views(|workspace: &mut Workspace, cx| {
 53        let item = cx.new_view(|cx| TitleBar::new("title-bar", workspace, cx));
 54        workspace.set_titlebar_item(item.into(), cx)
 55    })
 56    .detach();
 57}
 58
 59pub struct TitleBar {
 60    platform_style: PlatformStyle,
 61    content: Stateful<Div>,
 62    children: SmallVec<[AnyElement; 2]>,
 63    project: Model<Project>,
 64    user_store: Model<UserStore>,
 65    client: Arc<Client>,
 66    workspace: WeakView<Workspace>,
 67    should_move: bool,
 68    application_menu: Option<View<ApplicationMenu>>,
 69    _subscriptions: Vec<Subscription>,
 70}
 71
 72impl Render for TitleBar {
 73    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
 74        let close_action = Box::new(workspace::CloseWindow);
 75        let height = Self::height(cx);
 76        let supported_controls = cx.window_controls();
 77        let decorations = cx.window_decorations();
 78        let titlebar_color = if cfg!(target_os = "linux") {
 79            if cx.is_window_active() && !self.should_move {
 80                cx.theme().colors().title_bar_background
 81            } else {
 82                cx.theme().colors().title_bar_inactive_background
 83            }
 84        } else {
 85            cx.theme().colors().title_bar_background
 86        };
 87
 88        h_flex()
 89            .id("titlebar")
 90            .w_full()
 91            .h(height)
 92            .map(|this| {
 93                if cx.is_fullscreen() {
 94                    this.pl_2()
 95                } else if self.platform_style == PlatformStyle::Mac {
 96                    this.pl(px(platform_mac::TRAFFIC_LIGHT_PADDING))
 97                } else {
 98                    this.pl_2()
 99                }
100            })
101            .map(|el| match decorations {
102                Decorations::Server => el,
103                Decorations::Client { tiling, .. } => el
104                    .when(!(tiling.top || tiling.right), |el| {
105                        el.rounded_tr(theme::CLIENT_SIDE_DECORATION_ROUNDING)
106                    })
107                    .when(!(tiling.top || tiling.left), |el| {
108                        el.rounded_tl(theme::CLIENT_SIDE_DECORATION_ROUNDING)
109                    })
110                    // this border is to avoid a transparent gap in the rounded corners
111                    .mt(px(-1.))
112                    .border(px(1.))
113                    .border_color(titlebar_color),
114            })
115            .bg(titlebar_color)
116            .content_stretch()
117            .child(
118                div()
119                    .id("titlebar-content")
120                    .flex()
121                    .flex_row()
122                    .justify_between()
123                    .w_full()
124                    // Note: On Windows the title bar behavior is handled by the platform implementation.
125                    .when(self.platform_style != PlatformStyle::Windows, |this| {
126                        this.on_click(|event, cx| {
127                            if event.up.click_count == 2 {
128                                cx.zoom_window();
129                            }
130                        })
131                    })
132                    .child(
133                        h_flex()
134                            .gap_1()
135                            .when_some(self.application_menu.clone(), |this, menu| this.child(menu))
136                            .children(self.render_project_host(cx))
137                            .child(self.render_project_name(cx))
138                            .children(self.render_project_branch(cx))
139                            .on_mouse_down(MouseButton::Left, |_, cx| cx.stop_propagation()),
140                    )
141                    .child(self.render_collaborator_list(cx))
142                    .child(
143                        h_flex()
144                            .gap_1()
145                            .pr_1()
146                            .on_mouse_down(MouseButton::Left, |_, cx| cx.stop_propagation())
147                            .children(self.render_call_controls(cx))
148                            .map(|el| {
149                                let status = self.client.status();
150                                let status = &*status.borrow();
151                                if matches!(status, client::Status::Connected { .. }) {
152                                    el.child(self.render_user_menu_button(cx))
153                                } else {
154                                    el.children(self.render_connection_status(status, cx))
155                                        .child(self.render_sign_in_button(cx))
156                                        .child(self.render_user_menu_button(cx))
157                                }
158                            }),
159                    ),
160            )
161            .when(!cx.is_fullscreen(), |title_bar| match self.platform_style {
162                PlatformStyle::Mac => title_bar,
163                PlatformStyle::Linux => {
164                    if matches!(decorations, Decorations::Client { .. }) {
165                        title_bar
166                            .child(platform_linux::LinuxWindowControls::new(close_action))
167                            .when(supported_controls.window_menu, |titlebar| {
168                                titlebar.on_mouse_down(gpui::MouseButton::Right, move |ev, cx| {
169                                    cx.show_window_menu(ev.position)
170                                })
171                            })
172                            .on_mouse_move(cx.listener(move |this, _ev, cx| {
173                                if this.should_move {
174                                    this.should_move = false;
175                                    cx.start_window_move();
176                                }
177                            }))
178                            .on_mouse_down_out(cx.listener(move |this, _ev, _cx| {
179                                this.should_move = false;
180                            }))
181                            .on_mouse_up(
182                                gpui::MouseButton::Left,
183                                cx.listener(move |this, _ev, _cx| {
184                                    this.should_move = false;
185                                }),
186                            )
187                            .on_mouse_down(
188                                gpui::MouseButton::Left,
189                                cx.listener(move |this, _ev, _cx| {
190                                    this.should_move = true;
191                                }),
192                            )
193                    } else {
194                        title_bar
195                    }
196                }
197                PlatformStyle::Windows => {
198                    title_bar.child(platform_windows::WindowsWindowControls::new(height))
199                }
200            })
201    }
202}
203
204impl TitleBar {
205    pub fn new(
206        id: impl Into<ElementId>,
207        workspace: &Workspace,
208        cx: &mut ViewContext<Self>,
209    ) -> Self {
210        let project = workspace.project().clone();
211        let user_store = workspace.app_state().user_store.clone();
212        let client = workspace.app_state().client.clone();
213        let active_call = ActiveCall::global(cx);
214
215        let platform_style = PlatformStyle::platform();
216        let application_menu = match platform_style {
217            PlatformStyle::Mac => None,
218            PlatformStyle::Linux | PlatformStyle::Windows => {
219                Some(cx.new_view(ApplicationMenu::new))
220            }
221        };
222
223        let mut subscriptions = Vec::new();
224        subscriptions.push(
225            cx.observe(&workspace.weak_handle().upgrade().unwrap(), |_, _, cx| {
226                cx.notify()
227            }),
228        );
229        subscriptions.push(cx.observe(&project, |_, _, cx| cx.notify()));
230        subscriptions.push(cx.observe(&active_call, |this, _, cx| this.active_call_changed(cx)));
231        subscriptions.push(cx.observe_window_activation(Self::window_activation_changed));
232        subscriptions.push(cx.observe(&user_store, |_, _, cx| cx.notify()));
233
234        Self {
235            platform_style,
236            content: div().id(id.into()),
237            children: SmallVec::new(),
238            application_menu,
239            workspace: workspace.weak_handle(),
240            should_move: false,
241            project,
242            user_store,
243            client,
244            _subscriptions: subscriptions,
245        }
246    }
247
248    #[cfg(not(target_os = "windows"))]
249    pub fn height(cx: &mut WindowContext) -> Pixels {
250        (1.75 * cx.rem_size()).max(px(34.))
251    }
252
253    #[cfg(target_os = "windows")]
254    pub fn height(_cx: &mut WindowContext) -> Pixels {
255        // todo(windows) instead of hard coded size report the actual size to the Windows platform API
256        px(32.)
257    }
258
259    /// Sets the platform style.
260    pub fn platform_style(mut self, style: PlatformStyle) -> Self {
261        self.platform_style = style;
262        self
263    }
264
265    fn render_ssh_project_host(&self, cx: &mut ViewContext<Self>) -> Option<AnyElement> {
266        let host = self.project.read(cx).ssh_connection_string(cx)?;
267        let meta = SharedString::from(format!("Connected to: {host}"));
268        let indicator_color = if self.project.read(cx).ssh_is_connected()? {
269            Color::Success
270        } else {
271            Color::Warning
272        };
273        let indicator = div()
274            .absolute()
275            .w_1_4()
276            .h_1_4()
277            .right_0p5()
278            .bottom_0p5()
279            .p_1()
280            .rounded_2xl()
281            .bg(indicator_color.color(cx));
282
283        Some(
284            div()
285                .child(
286                    IconButton::new("ssh-server-icon", IconName::Server)
287                        .tooltip(move |cx| {
288                            Tooltip::with_meta(
289                                "Remote Project",
290                                Some(&OpenRemote),
291                                meta.clone(),
292                                cx,
293                            )
294                        })
295                        .shape(ui::IconButtonShape::Square)
296                        .on_click(|_, cx| {
297                            cx.dispatch_action(OpenRemote.boxed_clone());
298                        }),
299                )
300                .child(indicator)
301                .into_any_element(),
302        )
303    }
304
305    pub fn render_project_host(&self, cx: &mut ViewContext<Self>) -> Option<AnyElement> {
306        if let Some(dev_server) =
307            self.project
308                .read(cx)
309                .dev_server_project_id()
310                .and_then(|dev_server_project_id| {
311                    dev_server_projects::Store::global(cx)
312                        .read(cx)
313                        .dev_server_for_project(dev_server_project_id)
314                })
315        {
316            return Some(
317                ButtonLike::new("dev_server_trigger")
318                    .child(Indicator::dot().color(
319                        if dev_server.status == DevServerStatus::Online {
320                            Color::Created
321                        } else {
322                            Color::Disabled
323                        },
324                    ))
325                    .child(
326                        Label::new(dev_server.name.clone())
327                            .size(LabelSize::Small)
328                            .line_height_style(LineHeightStyle::UiLabel),
329                    )
330                    .tooltip(move |cx| Tooltip::text("Project is hosted on a dev server", cx))
331                    .on_click(cx.listener(|this, _, cx| {
332                        if let Some(workspace) = this.workspace.upgrade() {
333                            recent_projects::DevServerProjects::open(workspace, cx)
334                        }
335                    }))
336                    .into_any_element(),
337            );
338        }
339        if self.project.read(cx).is_via_ssh() {
340            return self.render_ssh_project_host(cx);
341        }
342
343        if self.project.read(cx).is_disconnected() {
344            return Some(
345                Button::new("disconnected", "Disconnected")
346                    .disabled(true)
347                    .color(Color::Disabled)
348                    .style(ButtonStyle::Subtle)
349                    .label_size(LabelSize::Small)
350                    .into_any_element(),
351            );
352        }
353
354        let host = self.project.read(cx).host()?;
355        let host_user = self.user_store.read(cx).get_cached_user(host.user_id)?;
356        let participant_index = self
357            .user_store
358            .read(cx)
359            .participant_indices()
360            .get(&host_user.id)?;
361        Some(
362            Button::new("project_owner_trigger", host_user.github_login.clone())
363                .color(Color::Player(participant_index.0))
364                .style(ButtonStyle::Subtle)
365                .label_size(LabelSize::Small)
366                .tooltip(move |cx| {
367                    Tooltip::text(
368                        format!(
369                            "{} is sharing this project. Click to follow.",
370                            host_user.github_login.clone()
371                        ),
372                        cx,
373                    )
374                })
375                .on_click({
376                    let host_peer_id = host.peer_id;
377                    cx.listener(move |this, _, cx| {
378                        this.workspace
379                            .update(cx, |workspace, cx| {
380                                workspace.follow(host_peer_id, cx);
381                            })
382                            .log_err();
383                    })
384                })
385                .into_any_element(),
386        )
387    }
388
389    pub fn render_project_name(&self, cx: &mut ViewContext<Self>) -> impl IntoElement {
390        let name = {
391            let mut names = self.project.read(cx).visible_worktrees(cx).map(|worktree| {
392                let worktree = worktree.read(cx);
393                worktree.root_name()
394            });
395
396            names.next()
397        };
398        let is_project_selected = name.is_some();
399        let name = if let Some(name) = name {
400            util::truncate_and_trailoff(name, MAX_PROJECT_NAME_LENGTH)
401        } else {
402            "Open recent project".to_string()
403        };
404
405        let workspace = self.workspace.clone();
406        Button::new("project_name_trigger", name)
407            .when(!is_project_selected, |b| b.color(Color::Muted))
408            .style(ButtonStyle::Subtle)
409            .label_size(LabelSize::Small)
410            .tooltip(move |cx| {
411                Tooltip::for_action(
412                    "Recent Projects",
413                    &recent_projects::OpenRecent {
414                        create_new_window: false,
415                    },
416                    cx,
417                )
418            })
419            .on_click(cx.listener(move |_, _, cx| {
420                if let Some(workspace) = workspace.upgrade() {
421                    workspace.update(cx, |workspace, cx| {
422                        RecentProjects::open(workspace, false, cx);
423                    })
424                }
425            }))
426    }
427
428    pub fn render_project_branch(&self, cx: &mut ViewContext<Self>) -> Option<impl IntoElement> {
429        let entry = {
430            let mut names_and_branches =
431                self.project.read(cx).visible_worktrees(cx).map(|worktree| {
432                    let worktree = worktree.read(cx);
433                    worktree.root_git_entry()
434                });
435
436            names_and_branches.next().flatten()
437        };
438        let workspace = self.workspace.upgrade()?;
439        let branch_name = entry
440            .as_ref()
441            .and_then(RepositoryEntry::branch)
442            .map(|branch| util::truncate_and_trailoff(&branch, MAX_BRANCH_NAME_LENGTH))?;
443        Some(
444            Button::new("project_branch_trigger", branch_name)
445                .color(Color::Muted)
446                .style(ButtonStyle::Subtle)
447                .label_size(LabelSize::Small)
448                .tooltip(move |cx| {
449                    Tooltip::with_meta(
450                        "Recent Branches",
451                        Some(&ToggleVcsMenu),
452                        "Local branches only",
453                        cx,
454                    )
455                })
456                .on_click(move |_, cx| {
457                    let _ = workspace.update(cx, |this, cx| {
458                        BranchList::open(this, &Default::default(), cx)
459                    });
460                }),
461        )
462    }
463
464    fn window_activation_changed(&mut self, cx: &mut ViewContext<Self>) {
465        if cx.is_window_active() {
466            ActiveCall::global(cx)
467                .update(cx, |call, cx| call.set_location(Some(&self.project), cx))
468                .detach_and_log_err(cx);
469        } else if cx.active_window().is_none() {
470            ActiveCall::global(cx)
471                .update(cx, |call, cx| call.set_location(None, cx))
472                .detach_and_log_err(cx);
473        }
474        self.workspace
475            .update(cx, |workspace, cx| {
476                workspace.update_active_view_for_followers(cx);
477            })
478            .ok();
479    }
480
481    fn active_call_changed(&mut self, cx: &mut ViewContext<Self>) {
482        cx.notify();
483    }
484
485    fn share_project(&mut self, _: &ShareProject, cx: &mut ViewContext<Self>) {
486        let active_call = ActiveCall::global(cx);
487        let project = self.project.clone();
488        active_call
489            .update(cx, |call, cx| call.share_project(project, cx))
490            .detach_and_log_err(cx);
491    }
492
493    fn unshare_project(&mut self, _: &UnshareProject, cx: &mut ViewContext<Self>) {
494        let active_call = ActiveCall::global(cx);
495        let project = self.project.clone();
496        active_call
497            .update(cx, |call, cx| call.unshare_project(project, cx))
498            .log_err();
499    }
500
501    fn render_connection_status(
502        &self,
503        status: &client::Status,
504        cx: &mut ViewContext<Self>,
505    ) -> Option<AnyElement> {
506        match status {
507            client::Status::ConnectionError
508            | client::Status::ConnectionLost
509            | client::Status::Reauthenticating { .. }
510            | client::Status::Reconnecting { .. }
511            | client::Status::ReconnectionError { .. } => Some(
512                div()
513                    .id("disconnected")
514                    .child(Icon::new(IconName::Disconnected).size(IconSize::Small))
515                    .tooltip(|cx| Tooltip::text("Disconnected", cx))
516                    .into_any_element(),
517            ),
518            client::Status::UpgradeRequired => {
519                let auto_updater = auto_update::AutoUpdater::get(cx);
520                let label = match auto_updater.map(|auto_update| auto_update.read(cx).status()) {
521                    Some(AutoUpdateStatus::Updated { .. }) => "Please restart Zed to Collaborate",
522                    Some(AutoUpdateStatus::Installing)
523                    | Some(AutoUpdateStatus::Downloading)
524                    | Some(AutoUpdateStatus::Checking) => "Updating...",
525                    Some(AutoUpdateStatus::Idle) | Some(AutoUpdateStatus::Errored) | None => {
526                        "Please update Zed to Collaborate"
527                    }
528                };
529
530                Some(
531                    Button::new("connection-status", label)
532                        .label_size(LabelSize::Small)
533                        .on_click(|_, cx| {
534                            if let Some(auto_updater) = auto_update::AutoUpdater::get(cx) {
535                                if auto_updater.read(cx).status().is_updated() {
536                                    workspace::reload(&Default::default(), cx);
537                                    return;
538                                }
539                            }
540                            auto_update::check(&Default::default(), cx);
541                        })
542                        .into_any_element(),
543                )
544            }
545            _ => None,
546        }
547    }
548
549    pub fn render_sign_in_button(&mut self, _: &mut ViewContext<Self>) -> Button {
550        let client = self.client.clone();
551        Button::new("sign_in", "Sign in")
552            .label_size(LabelSize::Small)
553            .on_click(move |_, cx| {
554                let client = client.clone();
555                cx.spawn(move |mut cx| async move {
556                    client
557                        .authenticate_and_connect(true, &cx)
558                        .await
559                        .notify_async_err(&mut cx);
560                })
561                .detach();
562            })
563    }
564
565    pub fn render_user_menu_button(&mut self, cx: &mut ViewContext<Self>) -> impl Element {
566        let user_store = self.user_store.read(cx);
567        if let Some(user) = user_store.current_user() {
568            let plan = user_store.current_plan();
569            PopoverMenu::new("user-menu")
570                .menu(move |cx| {
571                    ContextMenu::build(cx, |menu, cx| {
572                        menu.when(cx.has_flag::<ZedPro>(), |menu| {
573                            menu.action(
574                                format!(
575                                    "Current Plan: {}",
576                                    match plan {
577                                        None => "",
578                                        Some(proto::Plan::Free) => "Free",
579                                        Some(proto::Plan::ZedPro) => "Pro",
580                                    }
581                                ),
582                                zed_actions::OpenAccountSettings.boxed_clone(),
583                            )
584                            .separator()
585                        })
586                        .action("Settings", zed_actions::OpenSettings.boxed_clone())
587                        .action("Key Bindings", Box::new(zed_actions::OpenKeymap))
588                        .action("Themes…", theme_selector::Toggle::default().boxed_clone())
589                        .action("Extensions", extensions_ui::Extensions.boxed_clone())
590                        .separator()
591                        .action("Sign Out", client::SignOut.boxed_clone())
592                    })
593                    .into()
594                })
595                .trigger(
596                    ButtonLike::new("user-menu")
597                        .child(
598                            h_flex()
599                                .gap_0p5()
600                                .child(Avatar::new(user.avatar_uri.clone()))
601                                .child(
602                                    Icon::new(IconName::ChevronDown)
603                                        .size(IconSize::Small)
604                                        .color(Color::Muted),
605                                ),
606                        )
607                        .style(ButtonStyle::Subtle)
608                        .tooltip(move |cx| Tooltip::text("Toggle User Menu", cx)),
609                )
610                .anchor(gpui::AnchorCorner::TopRight)
611        } else {
612            PopoverMenu::new("user-menu")
613                .menu(|cx| {
614                    ContextMenu::build(cx, |menu, _| {
615                        menu.action("Settings", zed_actions::OpenSettings.boxed_clone())
616                            .action("Key Bindings", Box::new(zed_actions::OpenKeymap))
617                            .action("Themes…", theme_selector::Toggle::default().boxed_clone())
618                            .action("Extensions", extensions_ui::Extensions.boxed_clone())
619                    })
620                    .into()
621                })
622                .trigger(
623                    ButtonLike::new("user-menu")
624                        .child(
625                            h_flex().gap_0p5().child(
626                                Icon::new(IconName::ChevronDown)
627                                    .size(IconSize::Small)
628                                    .color(Color::Muted),
629                            ),
630                        )
631                        .style(ButtonStyle::Subtle)
632                        .tooltip(move |cx| Tooltip::text("Toggle User Menu", cx)),
633                )
634        }
635    }
636}
637
638impl InteractiveElement for TitleBar {
639    fn interactivity(&mut self) -> &mut Interactivity {
640        self.content.interactivity()
641    }
642}
643
644impl StatefulInteractiveElement for TitleBar {}
645
646impl ParentElement for TitleBar {
647    fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
648        self.children.extend(elements)
649    }
650}