1use std::sync::Arc;
2
3use client::TelemetrySettings;
4use fs::Fs;
5use gpui::{Action, App, IntoElement};
6use project::project_settings::ProjectSettings;
7use settings::{BaseKeymap, Settings, update_settings_file};
8use theme::{Appearance, SystemAppearance, ThemeRegistry};
9use theme_settings::{ThemeAppearanceMode, ThemeName, ThemeSelection, ThemeSettings};
10use ui::{
11 Divider, StatefulInteractiveElement, SwitchField, TintColor, ToggleButtonGroup,
12 ToggleButtonGroupSize, ToggleButtonSimple, ToggleButtonWithIcon, Tooltip, prelude::*,
13};
14use vim_mode_setting::VimModeSetting;
15
16use crate::{
17 ImportCursorSettings, ImportVsCodeSettings, SettingsImportState,
18 theme_preview::{ThemePreviewStyle, ThemePreviewTile},
19};
20
21const LIGHT_THEMES: [&str; 3] = ["One Light", "Ayu Light", "Gruvbox Light"];
22const DARK_THEMES: [&str; 3] = ["One Dark", "Ayu Dark", "Gruvbox Dark"];
23const FAMILY_NAMES: [SharedString; 3] = [
24 SharedString::new_static("One"),
25 SharedString::new_static("Ayu"),
26 SharedString::new_static("Gruvbox"),
27];
28
29fn get_theme_family_themes(theme_name: &str) -> Option<(&'static str, &'static str)> {
30 for i in 0..LIGHT_THEMES.len() {
31 if LIGHT_THEMES[i] == theme_name || DARK_THEMES[i] == theme_name {
32 return Some((LIGHT_THEMES[i], DARK_THEMES[i]));
33 }
34 }
35 None
36}
37
38fn render_theme_section(tab_index: &mut isize, cx: &mut App) -> impl IntoElement {
39 let theme_selection = ThemeSettings::get_global(cx).theme.clone();
40 let system_appearance = theme::SystemAppearance::global(cx);
41
42 let theme_mode = theme_selection
43 .mode()
44 .unwrap_or_else(|| match *system_appearance {
45 Appearance::Light => ThemeAppearanceMode::Light,
46 Appearance::Dark => ThemeAppearanceMode::Dark,
47 });
48
49 return v_flex()
50 .gap_2()
51 .child(
52 h_flex().justify_between().child(Label::new("Theme")).child(
53 ToggleButtonGroup::single_row(
54 "theme-selector-onboarding-dark-light",
55 [
56 ThemeAppearanceMode::Light,
57 ThemeAppearanceMode::Dark,
58 ThemeAppearanceMode::System,
59 ]
60 .map(|mode| {
61 const MODE_NAMES: [SharedString; 3] = [
62 SharedString::new_static("Light"),
63 SharedString::new_static("Dark"),
64 SharedString::new_static("System"),
65 ];
66 ToggleButtonSimple::new(
67 MODE_NAMES[mode as usize].clone(),
68 move |_, _, cx| {
69 write_mode_change(mode, cx);
70
71 telemetry::event!(
72 "Welcome Theme mode Changed",
73 from = theme_mode,
74 to = mode
75 );
76 },
77 )
78 }),
79 )
80 .size(ToggleButtonGroupSize::Medium)
81 .tab_index(tab_index)
82 .selected_index(theme_mode as usize)
83 .style(ui::ToggleButtonGroupStyle::Outlined)
84 .width(rems_from_px(3. * 64.)),
85 ),
86 )
87 .child(
88 h_flex()
89 .gap_4()
90 .justify_between()
91 .children(render_theme_previews(tab_index, &theme_selection, cx)),
92 );
93
94 fn render_theme_previews(
95 tab_index: &mut isize,
96 theme_selection: &ThemeSelection,
97 cx: &mut App,
98 ) -> [impl IntoElement; 3] {
99 let system_appearance = SystemAppearance::global(cx);
100 let theme_registry = ThemeRegistry::global(cx);
101
102 let theme_seed = 0xBEEF as f32;
103 let theme_mode = theme_selection
104 .mode()
105 .unwrap_or_else(|| match *system_appearance {
106 Appearance::Light => ThemeAppearanceMode::Light,
107 Appearance::Dark => ThemeAppearanceMode::Dark,
108 });
109 let appearance = match theme_mode {
110 ThemeAppearanceMode::Light => Appearance::Light,
111 ThemeAppearanceMode::Dark => Appearance::Dark,
112 ThemeAppearanceMode::System => *system_appearance,
113 };
114 let current_theme_name: SharedString = theme_selection.name(appearance).0.into();
115
116 let theme_names = match appearance {
117 Appearance::Light => LIGHT_THEMES,
118 Appearance::Dark => DARK_THEMES,
119 };
120
121 let themes = theme_names.map(|theme| theme_registry.get(theme).unwrap());
122
123 [0, 1, 2].map(|index| {
124 let theme = &themes[index];
125 let is_selected = theme.name == current_theme_name;
126 let name = theme.name.clone();
127 let colors = cx.theme().colors();
128
129 v_flex()
130 .w_full()
131 .items_center()
132 .gap_1()
133 .child(
134 h_flex()
135 .id(name)
136 .relative()
137 .w_full()
138 .border_2()
139 .border_color(colors.border_transparent)
140 .rounded(ThemePreviewTile::ROOT_RADIUS)
141 .map(|this| {
142 if is_selected {
143 this.border_color(colors.border_selected)
144 } else {
145 this.opacity(0.8).hover(|s| s.border_color(colors.border))
146 }
147 })
148 .tab_index({
149 *tab_index += 1;
150 *tab_index - 1
151 })
152 .focus(|mut style| {
153 style.border_color = Some(colors.border_focused);
154 style
155 })
156 .on_click({
157 let theme_name = theme.name.clone();
158 let current_theme_name = current_theme_name.clone();
159
160 move |_, _, cx| {
161 write_theme_change(theme_name.clone(), theme_mode, cx);
162 telemetry::event!(
163 "Welcome Theme Changed",
164 from = current_theme_name,
165 to = theme_name
166 );
167 }
168 })
169 .map(|this| {
170 if theme_mode == ThemeAppearanceMode::System {
171 let (light, dark) = (
172 theme_registry.get(LIGHT_THEMES[index]).unwrap(),
173 theme_registry.get(DARK_THEMES[index]).unwrap(),
174 );
175 this.child(
176 ThemePreviewTile::new(light, theme_seed)
177 .style(ThemePreviewStyle::SideBySide(dark)),
178 )
179 } else {
180 this.child(
181 ThemePreviewTile::new(theme.clone(), theme_seed)
182 .style(ThemePreviewStyle::Bordered),
183 )
184 }
185 }),
186 )
187 .child(
188 Label::new(FAMILY_NAMES[index].clone())
189 .color(Color::Muted)
190 .size(LabelSize::Small),
191 )
192 })
193 }
194
195 fn write_mode_change(mode: ThemeAppearanceMode, cx: &mut App) {
196 let fs = <dyn Fs>::global(cx);
197 update_settings_file(fs, cx, move |settings, _cx| {
198 theme_settings::set_mode(settings, mode);
199 });
200 }
201
202 fn write_theme_change(
203 theme: impl Into<Arc<str>>,
204 theme_mode: ThemeAppearanceMode,
205 cx: &mut App,
206 ) {
207 let fs = <dyn Fs>::global(cx);
208 let theme = theme.into();
209 update_settings_file(fs, cx, move |settings, cx| match theme_mode {
210 ThemeAppearanceMode::System => {
211 let (light_theme, dark_theme) =
212 get_theme_family_themes(&theme).unwrap_or((theme.as_ref(), theme.as_ref()));
213
214 settings.theme.theme = Some(settings::ThemeSelection::Dynamic {
215 mode: ThemeAppearanceMode::System,
216 light: ThemeName(light_theme.into()),
217 dark: ThemeName(dark_theme.into()),
218 });
219 }
220 ThemeAppearanceMode::Light => theme_settings::set_theme(
221 settings,
222 theme,
223 Appearance::Light,
224 *SystemAppearance::global(cx),
225 ),
226 ThemeAppearanceMode::Dark => theme_settings::set_theme(
227 settings,
228 theme,
229 Appearance::Dark,
230 *SystemAppearance::global(cx),
231 ),
232 });
233 }
234}
235
236fn render_telemetry_section(tab_index: &mut isize, cx: &App) -> impl IntoElement {
237 let fs = <dyn Fs>::global(cx);
238
239 v_flex()
240 .gap_4()
241 .child(
242 SwitchField::new(
243 "onboarding-telemetry-metrics",
244 None::<&str>,
245 Some("Help improve Zed by sending anonymous usage data".into()),
246 if TelemetrySettings::get_global(cx).metrics {
247 ui::ToggleState::Selected
248 } else {
249 ui::ToggleState::Unselected
250 },
251 {
252 let fs = fs.clone();
253 move |selection, _, cx| {
254 let enabled = match selection {
255 ToggleState::Selected => true,
256 ToggleState::Unselected => false,
257 ToggleState::Indeterminate => {
258 return;
259 }
260 };
261
262 update_settings_file(fs.clone(), cx, move |setting, _| {
263 setting.telemetry.get_or_insert_default().metrics = Some(enabled);
264 });
265
266 // This telemetry event shouldn't fire when it's off. If it does we'll be alerted
267 // and can fix it in a timely manner to respect a user's choice.
268 telemetry::event!(
269 "Welcome Page Telemetry Metrics Toggled",
270 options = if enabled { "on" } else { "off" }
271 );
272 }
273 },
274 )
275 .tab_index({
276 *tab_index += 1;
277 *tab_index
278 }),
279 )
280 .child(
281 SwitchField::new(
282 "onboarding-telemetry-crash-reports",
283 None::<&str>,
284 Some(
285 "Help fix Zed by sending crash reports so we can fix critical issues fast"
286 .into(),
287 ),
288 if TelemetrySettings::get_global(cx).diagnostics {
289 ui::ToggleState::Selected
290 } else {
291 ui::ToggleState::Unselected
292 },
293 {
294 let fs = fs.clone();
295 move |selection, _, cx| {
296 let enabled = match selection {
297 ToggleState::Selected => true,
298 ToggleState::Unselected => false,
299 ToggleState::Indeterminate => {
300 return;
301 }
302 };
303
304 update_settings_file(fs.clone(), cx, move |setting, _| {
305 setting.telemetry.get_or_insert_default().diagnostics = Some(enabled);
306 });
307
308 // This telemetry event shouldn't fire when it's off. If it does we'll be alerted
309 // and can fix it in a timely manner to respect a user's choice.
310 telemetry::event!(
311 "Welcome Page Telemetry Diagnostics Toggled",
312 options = if enabled { "on" } else { "off" }
313 );
314 }
315 },
316 )
317 .tab_index({
318 *tab_index += 1;
319 *tab_index
320 }),
321 )
322}
323
324fn render_base_keymap_section(tab_index: &mut isize, cx: &mut App) -> impl IntoElement {
325 let base_keymap = match BaseKeymap::get_global(cx) {
326 BaseKeymap::VSCode => Some(0),
327 BaseKeymap::JetBrains => Some(1),
328 BaseKeymap::SublimeText => Some(2),
329 BaseKeymap::Atom => Some(3),
330 BaseKeymap::Emacs => Some(4),
331 BaseKeymap::Cursor => Some(5),
332 BaseKeymap::TextMate | BaseKeymap::None => None,
333 };
334
335 return v_flex().gap_2().child(Label::new("Base Keymap")).child(
336 ToggleButtonGroup::two_rows(
337 "base_keymap_selection",
338 [
339 ToggleButtonWithIcon::new("VS Code", IconName::EditorVsCode, |_, _, cx| {
340 write_keymap_base(BaseKeymap::VSCode, cx);
341 }),
342 ToggleButtonWithIcon::new("JetBrains", IconName::EditorJetBrains, |_, _, cx| {
343 write_keymap_base(BaseKeymap::JetBrains, cx);
344 }),
345 ToggleButtonWithIcon::new("Sublime Text", IconName::EditorSublime, |_, _, cx| {
346 write_keymap_base(BaseKeymap::SublimeText, cx);
347 }),
348 ],
349 [
350 ToggleButtonWithIcon::new("Atom", IconName::EditorAtom, |_, _, cx| {
351 write_keymap_base(BaseKeymap::Atom, cx);
352 }),
353 ToggleButtonWithIcon::new("Emacs", IconName::EditorEmacs, |_, _, cx| {
354 write_keymap_base(BaseKeymap::Emacs, cx);
355 }),
356 ToggleButtonWithIcon::new("Cursor", IconName::EditorCursor, |_, _, cx| {
357 write_keymap_base(BaseKeymap::Cursor, cx);
358 }),
359 ],
360 )
361 .when_some(base_keymap, |this, base_keymap| {
362 this.selected_index(base_keymap)
363 })
364 .full_width()
365 .tab_index(tab_index)
366 .size(ui::ToggleButtonGroupSize::Medium)
367 .style(ui::ToggleButtonGroupStyle::Outlined),
368 );
369
370 fn write_keymap_base(keymap_base: BaseKeymap, cx: &App) {
371 let fs = <dyn Fs>::global(cx);
372
373 update_settings_file(fs, cx, move |setting, _| {
374 setting.base_keymap = Some(keymap_base.into());
375 });
376
377 telemetry::event!("Welcome Keymap Changed", keymap = keymap_base);
378 }
379}
380
381fn render_vim_mode_switch(tab_index: &mut isize, cx: &mut App) -> impl IntoElement {
382 let toggle_state = if VimModeSetting::get_global(cx).0 {
383 ui::ToggleState::Selected
384 } else {
385 ui::ToggleState::Unselected
386 };
387 SwitchField::new(
388 "onboarding-vim-mode",
389 Some("Vim Mode"),
390 Some("Coming from Neovim? Use our first-class implementation of Vim Mode".into()),
391 toggle_state,
392 {
393 let fs = <dyn Fs>::global(cx);
394 move |&selection, _, cx| {
395 let vim_mode = match selection {
396 ToggleState::Selected => true,
397 ToggleState::Unselected => false,
398 ToggleState::Indeterminate => {
399 return;
400 }
401 };
402 update_settings_file(fs.clone(), cx, move |setting, _| {
403 setting.vim_mode = Some(vim_mode);
404 });
405
406 telemetry::event!(
407 "Welcome Vim Mode Toggled",
408 options = if vim_mode { "on" } else { "off" },
409 );
410 }
411 },
412 )
413 .tab_index({
414 *tab_index += 1;
415 *tab_index - 1
416 })
417}
418
419fn render_worktree_auto_trust_switch(tab_index: &mut isize, cx: &mut App) -> impl IntoElement {
420 let toggle_state = if ProjectSettings::get_global(cx).session.trust_all_worktrees {
421 ui::ToggleState::Selected
422 } else {
423 ui::ToggleState::Unselected
424 };
425
426 let tooltip_description = "Zed can only allow services like language servers, project settings, and MCP servers to run after you mark a new project as trusted.";
427
428 SwitchField::new(
429 "onboarding-auto-trust-worktrees",
430 Some("Trust All Projects By Default"),
431 Some("Automatically mark all new projects as trusted to unlock all Zed's features".into()),
432 toggle_state,
433 {
434 let fs = <dyn Fs>::global(cx);
435 move |&selection, _, cx| {
436 let trust = match selection {
437 ToggleState::Selected => true,
438 ToggleState::Unselected => false,
439 ToggleState::Indeterminate => {
440 return;
441 }
442 };
443 update_settings_file(fs.clone(), cx, move |setting, _| {
444 setting.session.get_or_insert_default().trust_all_worktrees = Some(trust);
445 });
446
447 telemetry::event!(
448 "Welcome Page Worktree Auto Trust Toggled",
449 options = if trust { "on" } else { "off" }
450 );
451 }
452 },
453 )
454 .tab_index({
455 *tab_index += 1;
456 *tab_index - 1
457 })
458 .tooltip(Tooltip::text(tooltip_description))
459}
460
461fn render_setting_import_button(
462 tab_index: isize,
463 label: SharedString,
464 action: &dyn Action,
465 imported: bool,
466) -> impl IntoElement + 'static {
467 let action = action.boxed_clone();
468
469 Button::new(label.clone(), label.clone())
470 .style(ButtonStyle::OutlinedGhost)
471 .size(ButtonSize::Medium)
472 .label_size(LabelSize::Small)
473 .selected_style(ButtonStyle::Tinted(TintColor::Accent))
474 .toggle_state(imported)
475 .tab_index(tab_index)
476 .when(imported, |this| {
477 this.end_icon(Icon::new(IconName::Check).size(IconSize::Small))
478 .color(Color::Success)
479 })
480 .on_click(move |_, window, cx| {
481 telemetry::event!("Welcome Import Settings", import_source = label,);
482 window.dispatch_action(action.boxed_clone(), cx);
483 })
484}
485
486fn render_import_settings_section(tab_index: &mut isize, cx: &mut App) -> impl IntoElement {
487 let import_state = SettingsImportState::global(cx);
488 let imports: [(SharedString, &dyn Action, bool); 2] = [
489 (
490 "VS Code".into(),
491 &ImportVsCodeSettings { skip_prompt: false },
492 import_state.vscode,
493 ),
494 (
495 "Cursor".into(),
496 &ImportCursorSettings { skip_prompt: false },
497 import_state.cursor,
498 ),
499 ];
500
501 let [vscode, cursor] = imports.map(|(label, action, imported)| {
502 *tab_index += 1;
503 render_setting_import_button(*tab_index - 1, label, action, imported)
504 });
505
506 h_flex()
507 .gap_2()
508 .flex_wrap()
509 .justify_between()
510 .child(
511 v_flex()
512 .gap_0p5()
513 .max_w_5_6()
514 .child(Label::new("Import Settings"))
515 .child(
516 Label::new("Automatically pull your settings from other editors")
517 .color(Color::Muted),
518 ),
519 )
520 .child(h_flex().gap_1().child(vscode).child(cursor))
521}
522
523pub(crate) fn render_basics_page(cx: &mut App) -> impl IntoElement {
524 let mut tab_index = 0;
525 v_flex()
526 .id("basics-page")
527 .gap_6()
528 .child(render_theme_section(&mut tab_index, cx))
529 .child(render_base_keymap_section(&mut tab_index, cx))
530 .child(render_import_settings_section(&mut tab_index, cx))
531 .child(render_vim_mode_switch(&mut tab_index, cx))
532 .child(render_worktree_auto_trust_switch(&mut tab_index, cx))
533 .child(Divider::horizontal().color(ui::DividerColor::BorderVariant))
534 .child(render_telemetry_section(&mut tab_index, cx))
535}