Add icon theme selector (#23976)

This PR adds an icon theme selector for switching between icon themes:


https://github.com/user-attachments/assets/2cdc7ab7-d9f4-4968-a2e9-724e8ad4ef4d

Release Notes:

- N/A
This commit is contained in:
Marshall Bowers 2025-01-30 16:11:42 -05:00 committed by GitHub
parent e23e03592b
commit 7adf9cb1a0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 330 additions and 6 deletions

View file

@ -0,0 +1,274 @@
use fs::Fs;
use fuzzy::{match_strings, StringMatch, StringMatchCandidate};
use gpui::{
App, Context, DismissEvent, Entity, EventEmitter, Focusable, Render, UpdateGlobal, WeakEntity,
Window,
};
use picker::{Picker, PickerDelegate};
use settings::{update_settings_file, Settings as _, SettingsStore};
use std::sync::Arc;
use theme::{IconTheme, ThemeMeta, ThemeRegistry, ThemeSettings};
use ui::{prelude::*, v_flex, ListItem, ListItemSpacing};
use util::ResultExt;
use workspace::{ui::HighlightedLabel, ModalView};
pub(crate) struct IconThemeSelector {
picker: Entity<Picker<IconThemeSelectorDelegate>>,
}
impl EventEmitter<DismissEvent> for IconThemeSelector {}
impl Focusable for IconThemeSelector {
fn focus_handle(&self, cx: &App) -> gpui::FocusHandle {
self.picker.focus_handle(cx)
}
}
impl ModalView for IconThemeSelector {}
impl IconThemeSelector {
pub fn new(
delegate: IconThemeSelectorDelegate,
window: &mut Window,
cx: &mut Context<Self>,
) -> Self {
let picker = cx.new(|cx| Picker::uniform_list(delegate, window, cx));
Self { picker }
}
}
impl Render for IconThemeSelector {
fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
v_flex().w(rems(34.)).child(self.picker.clone())
}
}
pub(crate) struct IconThemeSelectorDelegate {
fs: Arc<dyn Fs>,
themes: Vec<ThemeMeta>,
matches: Vec<StringMatch>,
original_theme: Arc<IconTheme>,
selection_completed: bool,
selected_index: usize,
selector: WeakEntity<IconThemeSelector>,
}
impl IconThemeSelectorDelegate {
pub fn new(
selector: WeakEntity<IconThemeSelector>,
fs: Arc<dyn Fs>,
themes_filter: Option<&Vec<String>>,
cx: &mut Context<IconThemeSelector>,
) -> Self {
let theme_settings = ThemeSettings::get_global(cx);
let original_theme = theme_settings.active_icon_theme.clone();
let registry = ThemeRegistry::global(cx);
let mut themes = registry
.list_icon_themes()
.into_iter()
.filter(|meta| {
if let Some(theme_filter) = themes_filter {
theme_filter.contains(&meta.name.to_string())
} else {
true
}
})
.collect::<Vec<_>>();
themes.sort_unstable_by(|a, b| {
a.appearance
.is_light()
.cmp(&b.appearance.is_light())
.then(a.name.cmp(&b.name))
});
let matches = themes
.iter()
.map(|meta| StringMatch {
candidate_id: 0,
score: 0.0,
positions: Default::default(),
string: meta.name.to_string(),
})
.collect();
let mut this = Self {
fs,
themes,
matches,
original_theme: original_theme.clone(),
selected_index: 0,
selection_completed: false,
selector,
};
this.select_if_matching(&original_theme.name);
this
}
fn show_selected_theme(&mut self, cx: &mut Context<Picker<IconThemeSelectorDelegate>>) {
if let Some(mat) = self.matches.get(self.selected_index) {
let registry = ThemeRegistry::global(cx);
match registry.get_icon_theme(&mat.string) {
Ok(theme) => {
Self::set_icon_theme(theme, cx);
}
Err(err) => {
log::error!("error loading icon theme {}: {err}", mat.string);
}
}
}
}
fn select_if_matching(&mut self, theme_name: &str) {
self.selected_index = self
.matches
.iter()
.position(|mat| mat.string == theme_name)
.unwrap_or(self.selected_index);
}
fn set_icon_theme(theme: Arc<IconTheme>, cx: &mut App) {
SettingsStore::update_global(cx, |store, cx| {
let mut theme_settings = store.get::<ThemeSettings>(None).clone();
theme_settings.active_icon_theme = theme;
store.override_global(theme_settings);
cx.refresh_windows();
});
}
}
impl PickerDelegate for IconThemeSelectorDelegate {
type ListItem = ui::ListItem;
fn placeholder_text(&self, _window: &mut Window, _cx: &mut App) -> Arc<str> {
"Select Icon Theme...".into()
}
fn match_count(&self) -> usize {
self.matches.len()
}
fn confirm(
&mut self,
_: bool,
_window: &mut Window,
cx: &mut Context<Picker<IconThemeSelectorDelegate>>,
) {
self.selection_completed = true;
let theme_settings = ThemeSettings::get_global(cx);
let theme_name = theme_settings.active_icon_theme.name.clone();
telemetry::event!(
"Settings Changed",
setting = "icon_theme",
value = theme_name
);
update_settings_file::<ThemeSettings>(self.fs.clone(), cx, move |settings, _| {
settings.icon_theme = Some(theme_name.to_string());
});
self.selector
.update(cx, |_, cx| {
cx.emit(DismissEvent);
})
.ok();
}
fn dismissed(&mut self, _: &mut Window, cx: &mut Context<Picker<IconThemeSelectorDelegate>>) {
if !self.selection_completed {
Self::set_icon_theme(self.original_theme.clone(), cx);
self.selection_completed = true;
}
self.selector
.update(cx, |_, cx| cx.emit(DismissEvent))
.log_err();
}
fn selected_index(&self) -> usize {
self.selected_index
}
fn set_selected_index(
&mut self,
ix: usize,
_: &mut Window,
cx: &mut Context<Picker<IconThemeSelectorDelegate>>,
) {
self.selected_index = ix;
self.show_selected_theme(cx);
}
fn update_matches(
&mut self,
query: String,
window: &mut Window,
cx: &mut Context<Picker<IconThemeSelectorDelegate>>,
) -> gpui::Task<()> {
let background = cx.background_executor().clone();
let candidates = self
.themes
.iter()
.enumerate()
.map(|(id, meta)| StringMatchCandidate::new(id, &meta.name))
.collect::<Vec<_>>();
cx.spawn_in(window, |this, mut cx| async move {
let matches = if query.is_empty() {
candidates
.into_iter()
.enumerate()
.map(|(index, candidate)| StringMatch {
candidate_id: index,
string: candidate.string,
positions: Vec::new(),
score: 0.0,
})
.collect()
} else {
match_strings(
&candidates,
&query,
false,
100,
&Default::default(),
background,
)
.await
};
this.update(&mut cx, |this, cx| {
this.delegate.matches = matches;
this.delegate.selected_index = this
.delegate
.selected_index
.min(this.delegate.matches.len().saturating_sub(1));
this.delegate.show_selected_theme(cx);
})
.log_err();
})
}
fn render_match(
&self,
ix: usize,
selected: bool,
_window: &mut Window,
_cx: &mut Context<Picker<Self>>,
) -> Option<Self::ListItem> {
let theme_match = &self.matches[ix];
Some(
ListItem::new(ix)
.inset(true)
.spacing(ListItemSpacing::Sparse)
.toggle_state(selected)
.child(HighlightedLabel::new(
theme_match.string.clone(),
theme_match.positions.clone(),
)),
)
}
}

View file

@ -1,3 +1,5 @@
mod icon_theme_selector;
use fs::Fs;
use fuzzy::{match_strings, StringMatch, StringMatchCandidate};
use gpui::{
@ -11,22 +13,25 @@ use theme::{Appearance, Theme, ThemeMeta, ThemeRegistry, ThemeSettings};
use ui::{prelude::*, v_flex, ListItem, ListItemSpacing};
use util::ResultExt;
use workspace::{ui::HighlightedLabel, ModalView, Workspace};
use zed_actions::theme_selector::Toggle;
use crate::icon_theme_selector::{IconThemeSelector, IconThemeSelectorDelegate};
actions!(theme_selector, [Reload]);
pub fn init(cx: &mut App) {
cx.observe_new(
|workspace: &mut Workspace, _window, _cx: &mut Context<Workspace>| {
workspace.register_action(toggle);
workspace
.register_action(toggle_theme_selector)
.register_action(toggle_icon_theme_selector);
},
)
.detach();
}
pub fn toggle(
fn toggle_theme_selector(
workspace: &mut Workspace,
toggle: &Toggle,
toggle: &zed_actions::theme_selector::Toggle,
window: &mut Window,
cx: &mut Context<Workspace>,
) {
@ -42,9 +47,27 @@ pub fn toggle(
});
}
fn toggle_icon_theme_selector(
workspace: &mut Workspace,
toggle: &zed_actions::icon_theme_selector::Toggle,
window: &mut Window,
cx: &mut Context<Workspace>,
) {
let fs = workspace.app_state().fs.clone();
workspace.toggle_modal(window, cx, |window, cx| {
let delegate = IconThemeSelectorDelegate::new(
cx.entity().downgrade(),
fs,
toggle.themes_filter.as_ref(),
cx,
);
IconThemeSelector::new(delegate, window, cx)
});
}
impl ModalView for ThemeSelector {}
pub struct ThemeSelector {
struct ThemeSelector {
picker: Entity<Picker<ThemeSelectorDelegate>>,
}
@ -73,7 +96,7 @@ impl ThemeSelector {
}
}
pub struct ThemeSelectorDelegate {
struct ThemeSelectorDelegate {
fs: Arc<dyn Fs>,
themes: Vec<ThemeMeta>,
matches: Vec<StringMatch>,