Add user handle and plan chip to the user menu (#34522)

A nicer way to visualize in which plan you're in and a bit of
personalization by adding the GitHub handle you're signed with in the
user menu, as a complement to the avatar photo itself. Taking advantage
of the newly added Chip component.

<img width="320" height="476" alt="CleanShot 2025-07-16 at 1  33 08@2x"
src="https://github.com/user-attachments/assets/36718a42-27d1-499e-ac81-1eef2cd00347"
/>

Release Notes:

- N/A
This commit is contained in:
Danilo Leal 2025-07-16 01:48:01 -03:00 committed by GitHub
parent 59d524427e
commit 1ed3f9eb42
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -34,7 +34,7 @@ use std::sync::Arc;
use theme::ActiveTheme; use theme::ActiveTheme;
use title_bar_settings::TitleBarSettings; use title_bar_settings::TitleBarSettings;
use ui::{ use ui::{
Avatar, Button, ButtonLike, ButtonStyle, ContextMenu, Icon, IconName, IconSize, Avatar, Button, ButtonLike, ButtonStyle, Chip, ContextMenu, Icon, IconName, IconSize,
IconWithIndicator, Indicator, PopoverMenu, Tooltip, h_flex, prelude::*, IconWithIndicator, Indicator, PopoverMenu, Tooltip, h_flex, prelude::*,
}; };
use util::ResultExt; use util::ResultExt;
@ -631,21 +631,55 @@ impl TitleBar {
// Since the user might be on the legacy free plan we filter based on whether we have a subscription period. // Since the user might be on the legacy free plan we filter based on whether we have a subscription period.
has_subscription_period has_subscription_period
}); });
let user_avatar = user.avatar_uri.clone();
let free_chip_bg = cx
.theme()
.colors()
.editor_background
.opacity(0.5)
.blend(cx.theme().colors().text_accent.opacity(0.05));
let pro_chip_bg = cx
.theme()
.colors()
.editor_background
.opacity(0.5)
.blend(cx.theme().colors().text_accent.opacity(0.2));
PopoverMenu::new("user-menu") PopoverMenu::new("user-menu")
.anchor(Corner::TopRight) .anchor(Corner::TopRight)
.menu(move |window, cx| { .menu(move |window, cx| {
ContextMenu::build(window, cx, |menu, _, _cx| { ContextMenu::build(window, cx, |menu, _, _cx| {
menu.link( let user_login = user.github_login.clone();
format!(
"Current Plan: {}", let (plan_name, label_color, bg_color) = match plan {
match plan { None => ("None", Color::Default, free_chip_bg),
None => "None", Some(proto::Plan::Free) => ("Free", Color::Default, free_chip_bg),
Some(proto::Plan::Free) => "Zed Free", Some(proto::Plan::ZedProTrial) => {
Some(proto::Plan::ZedPro) => "Zed Pro", ("Pro Trial", Color::Accent, pro_chip_bg)
Some(proto::Plan::ZedProTrial) => "Zed Pro (Trial)",
} }
), Some(proto::Plan::ZedPro) => ("Pro", Color::Accent, pro_chip_bg),
zed_actions::OpenAccountSettings.boxed_clone(), };
menu.custom_entry(
move |_window, _cx| {
let user_login = user_login.clone();
h_flex()
.w_full()
.justify_between()
.child(Label::new(user_login))
.child(
Chip::new(plan_name.to_string())
.bg_color(bg_color)
.label_color(label_color),
)
.into_any_element()
},
move |_, cx| {
cx.open_url("https://zed.dev/account");
},
) )
.separator() .separator()
.action("Settings", zed_actions::OpenSettings.boxed_clone()) .action("Settings", zed_actions::OpenSettings.boxed_clone())
@ -675,7 +709,7 @@ impl TitleBar {
.children( .children(
TitleBarSettings::get_global(cx) TitleBarSettings::get_global(cx)
.show_user_picture .show_user_picture
.then(|| Avatar::new(user.avatar_uri.clone())), .then(|| Avatar::new(user_avatar)),
) )
.child( .child(
Icon::new(IconName::ChevronDown) Icon::new(IconName::ChevronDown)