reya/signed
1
0
Fork 0
Code Issues Pull Requests Actions Releases 3 Activity

Follow the OS native theme on macOS, Windows and Linux

Browse Source
This commit is contained in:
reya
2026-10-21 13:57:01 +07:00
parent f7865780d9
commit 6122474f9e
8 changed files with 797 additions and 513 deletions
Download Patch File Download Diff File Expand all files Collapse all files
crates/workspace/src/views/sidebar/settings_dialog.rs
+4 -348
View File
@@ -1,22 +1,15 @@
use std::cell::Cell;
use std::path::PathBuf;
use std::rc::Rc;
use gpui::prelude::*;
use gpui::{
AnyWindowHandle, App, Entity, PathPromptOptions, SharedString, Subscription, Window, div, px,
};
use gpui::{App, Entity, PathPromptOptions, SharedString, Subscription, Window, div, px};
use gpui_component::button::{Button, ButtonVariants};
use gpui_component::input::{
Input, InputEvent, InputState, NumberInput, NumberInputEvent, StepAction,
};
use gpui_component::input::{Input, InputState};
use gpui_component::select::{Select, SelectEvent, SelectState};
use gpui_component::separator::Separator;
use gpui_component::setting::NumberFieldOptions;
use gpui_component::switch::Switch;
use gpui_component::{
ActiveTheme, IconName, IndexPath, Sizable, Theme, ThemeMode, ThemeRegistry, WindowExt, h_flex,
v_flex,
ActiveTheme, IconName, IndexPath, Sizable, Theme, ThemeMode, WindowExt, h_flex, v_flex,
};
use settings::{AppearanceMode, EventFetchingStrategy, Settings, SettingsStore};
use signed_ui::{SelectOption, setting_block, setting_row};
@@ -31,34 +24,10 @@ fn selected_index(options: &[SelectOption], value: &str) -> Option<IndexPath> {
.map(|row| IndexPath::default().row(row))
}
/// Registered themes split into light and dark options, light first.
fn theme_options(cx: &App) -> (Vec<SelectOption>, Vec<SelectOption>) {
let registry = ThemeRegistry::global(cx);
let mut light = Vec::new();
let mut dark = Vec::new();
for config in registry.themes().values() {
let name = config.name.clone();
if config.mode.is_dark() {
dark.push(SelectOption::new(name.clone(), name));
} else {
light.push(SelectOption::new(name.clone(), name));
}
}
light.sort_by(|a, b| a.label().as_ref().cmp(b.label().as_ref()));
dark.sort_by(|a, b| a.label().as_ref().cmp(b.label().as_ref()));
(light, dark)
}
/// Created once when the dialog opens, so control state survives re-renders.
struct SettingsControls {
appearance: Entity<SelectState<Vec<SelectOption>>>,
event_fetching: Entity<SelectState<Vec<SelectOption>>>,
light_theme: Entity<SelectState<Vec<SelectOption>>>,
dark_theme: Entity<SelectState<Vec<SelectOption>>>,
font_size: Entity<InputState>,
mono_font_size: Entity<InputState>,
radius: Entity<InputState>,
radius_lg: Entity<InputState>,
grasp_server_input: Entity<InputState>,
/// The effective create-repository folder, shown in a disabled input.
default_folder: Entity<InputState>,
@@ -107,38 +76,9 @@ impl SettingsControls {
)
});
let (light_options, dark_options) = theme_options(cx);
let light_theme = cx.new(|cx| {
SelectState::new(
light_options.clone(),
selected_index(&light_options, &settings.theme.light_theme),
window,
cx,
)
});
let dark_theme = cx.new(|cx| {
SelectState::new(
dark_options.clone(),
selected_index(&dark_options, &settings.theme.dark_theme),
window,
cx,
)
});
let font_size = cx.new(|cx| {
InputState::new(window, cx).default_value(settings.theme.font_size.to_string())
});
let mono_font_size = cx.new(|cx| {
InputState::new(window, cx).default_value(settings.theme.mono_font_size.to_string())
});
let radius = cx
.new(|cx| InputState::new(window, cx).default_value(settings.theme.radius.to_string()));
let radius_lg = cx.new(|cx| {
InputState::new(window, cx).default_value(settings.theme.radius_lg.to_string())
});
let grasp_server_input =
cx.new(|cx| InputState::new(window, cx).placeholder("wss://relay.example.com"));
let default_folder = cx.new(|cx| {
let folder = settings
.create_repository
@@ -178,118 +118,9 @@ impl SettingsControls {
}
}));
subscriptions.push(cx.subscribe(&light_theme, |_, event, cx| {
if let SelectEvent::Confirm(Some(value)) = event {
let store = SettingsStore::global(cx);
store.update(cx, |store, cx| {
store.edit(
|settings| settings.theme.light_theme = value.to_string(),
cx,
);
});
apply_theme(cx);
}
}));
subscriptions.push(cx.subscribe(&dark_theme, |_, event, cx| {
if let SelectEvent::Confirm(Some(value)) = event {
let store = SettingsStore::global(cx);
store.update(cx, |store, cx| {
store.edit(|settings| settings.theme.dark_theme = value.to_string(), cx);
});
apply_theme(cx);
}
}));
wire_number_input(
&font_size,
&mut subscriptions,
window.window_handle(),
cx,
NumberFieldOptions {
min: 10.,
max: 32.,
..Default::default()
},
settings.theme.font_size as f64,
|value, cx| {
let store = SettingsStore::global(cx);
store.update(cx, |store, cx| {
store.edit(|settings| settings.theme.font_size = value as f32, cx);
});
apply_theme(cx);
},
);
wire_number_input(
&mono_font_size,
&mut subscriptions,
window.window_handle(),
cx,
NumberFieldOptions {
min: 8.,
max: 32.,
..Default::default()
},
settings.theme.mono_font_size as f64,
|value, cx| {
let store = SettingsStore::global(cx);
store.update(cx, |store, cx| {
store.edit(|settings| settings.theme.mono_font_size = value as f32, cx);
});
apply_theme(cx);
},
);
wire_number_input(
&radius,
&mut subscriptions,
window.window_handle(),
cx,
NumberFieldOptions {
min: 0.,
max: 24.,
..Default::default()
},
settings.theme.radius as f64,
|value, cx| {
let store = SettingsStore::global(cx);
store.update(cx, |store, cx| {
store.edit(|settings| settings.theme.radius = value as f32, cx);
});
apply_theme(cx);
},
);
wire_number_input(
&radius_lg,
&mut subscriptions,
window.window_handle(),
cx,
NumberFieldOptions {
min: 0.,
max: 24.,
..Default::default()
},
settings.theme.radius_lg as f64,
|value, cx| {
let store = SettingsStore::global(cx);
store.update(cx, |store, cx| {
store.edit(|settings| settings.theme.radius_lg = value as f32, cx);
});
apply_theme(cx);
},
);
Self {
appearance,
event_fetching,
light_theme,
dark_theme,
font_size,
mono_font_size,
radius,
radius_lg,
grasp_server_input,
default_folder,
_subscriptions: subscriptions,
@@ -320,8 +151,6 @@ fn settings_view(controls: &SettingsControls, cx: &mut App) -> impl IntoElement
.w_full()
.child(appearance_section(controls, cx))
.child(Separator::horizontal())
.child(theme_section(&settings, controls, cx))
.child(Separator::horizontal())
.child(tab_bar_section(&settings, cx))
.child(Separator::horizontal())
.child(grasp_servers_section(&settings, controls, cx))
@@ -350,76 +179,6 @@ fn event_fetching_section(controls: &SettingsControls, cx: &App) -> impl IntoEle
))
}
fn theme_section(settings: &Settings, controls: &SettingsControls, cx: &App) -> impl IntoElement {
v_flex()
.gap_3()
.w_full()
.child(setting_row(
cx,
"Light Theme",
"The theme to use when the appearance is light.",
Select::new(&controls.light_theme).w_full(),
))
.child(setting_row(
cx,
"Dark Theme",
"The theme to use when the appearance is dark.",
Select::new(&controls.dark_theme).w_full(),
))
.child(setting_row(
cx,
"UI Font Size",
"Font size for the UI.",
NumberInput::new(&controls.font_size).w_full(),
))
.child(setting_row(
cx,
"Editor Font Size",
"Font size for editor text.",
NumberInput::new(&controls.mono_font_size).w_full(),
))
.child(setting_row(
cx,
"Corner Radius",
"The corner radius for UI elements.",
NumberInput::new(&controls.radius).w_full(),
))
.child(setting_row(
cx,
"Large Corner Radius",
"The corner radius for large UI elements (dialogs, notifications).",
NumberInput::new(&controls.radius_lg).w_full(),
))
.child(setting_row(
cx,
"Focus Ring",
"Draw a ring around focused controls.",
Switch::new("focus-ring")
.checked(settings.theme.focus_ring)
.on_click(move |checked: &bool, _window, cx| {
let store = SettingsStore::global(cx);
store.update(cx, |store, cx| {
store.edit(|settings| settings.theme.focus_ring = *checked, cx);
});
apply_theme(cx);
}),
))
.child(setting_row(
cx,
"Shadows",
"The shadow effect for UI elements.",
Switch::new("shadows")
.checked(settings.theme.shadow)
.on_click(move |checked: &bool, _window, cx| {
let store = SettingsStore::global(cx);
store.update(cx, |store, cx| {
store.edit(|settings| settings.theme.shadow = *checked, cx);
});
apply_theme(cx);
}),
))
}
/// Tab bar chrome, such as its next/previous tab buttons.
fn tab_bar_section(settings: &Settings, cx: &App) -> impl IntoElement {
v_flex().w_full().gap_3().child(setting_row(
@@ -724,79 +483,6 @@ fn choose_default_folder(default_folder: &Entity<InputState>, window: &mut Windo
.detach();
}
/// Step actions clamp and persist the value; typed changes parse, clamp and persist.
fn wire_number_input(
state: &Entity<InputState>,
subscriptions: &mut Vec<Subscription>,
window_handle: AnyWindowHandle,
cx: &mut App,
options: NumberFieldOptions,
initial: f64,
on_change: impl Fn(f64, &mut App) + 'static,
) {
let on_change = Rc::new(on_change);
let initial_value = Rc::new(Cell::new(initial));
let (min, max, step) = (options.min, options.max, options.step);
subscriptions.push(cx.subscribe(&state.clone(), {
let state = state.clone();
let initial_value = initial_value.clone();
let on_change = on_change.clone();
move |_, event: &NumberInputEvent, cx| {
let NumberInputEvent::Step(action) = event;
let value = state.read(cx).value();
if let Ok(value) = value.parse::<f64>() {
let new_value = match action {
StepAction::Increment => value + step,
StepAction::Decrement => value - step,
};
let clamped = new_value.clamp(min, max);
window_handle
.update(cx, |_, window, cx| {
state.update(cx, |input, cx| {
input.set_value(SharedString::from(clamped.to_string()), window, cx);
});
})
.ok();
initial_value.set(clamped);
on_change(clamped, cx);
}
}
}));
subscriptions.push(cx.subscribe(&state.clone(), {
let state = state.clone();
let initial_value = initial_value.clone();
let on_change = on_change.clone();
move |_, event: &InputEvent, cx| {
if matches!(event, InputEvent::Change) {
let value = state.read(cx).value();
if value == initial_value.get().to_string() {
return;
}
if let Ok(parsed) = value.parse::<f64>() {
let clamped = parsed.clamp(min, max);
initial_value.set(clamped);
on_change(clamped, cx);
if clamped != parsed {
window_handle
.update(cx, |_, window, cx| {
state.update(cx, |input, cx| {
input.set_value(
SharedString::from(clamped.to_string()),
window,
cx,
);
});
})
.ok();
}
}
}
}
}));
}
fn apply_appearance(appearance: AppearanceMode, cx: &mut App) {
match appearance {
AppearanceMode::System => Theme::sync_system_appearance(None, cx),
@@ -804,33 +490,3 @@ fn apply_appearance(appearance: AppearanceMode, cx: &mut App) {
AppearanceMode::Dark => Theme::change(ThemeMode::Dark, None, cx),
}
}
fn apply_theme(cx: &mut App) {
let store = SettingsStore::global(cx);
let settings = store.read(cx).settings().theme.clone();
let registry = ThemeRegistry::global(cx);
let light_config = registry
.themes()
.get(settings.light_theme.as_str())
.cloned();
let dark_config = registry.themes().get(settings.dark_theme.as_str()).cloned();
let mode = Theme::global(cx).mode;
let theme = Theme::global_mut(cx);
theme.radius = px(settings.radius);
theme.radius_lg = px(settings.radius_lg);
theme.focus_ring = settings.focus_ring;
theme.shadow = settings.shadow;
theme.font_size = px(settings.font_size);
theme.mono_font_size = px(settings.mono_font_size);
if let Some(config) = light_config {
theme.light_theme = config;
}
if let Some(config) = dark_config {
theme.dark_theme = config;
}
// Re-apply the active mode so the updated configs take effect.
Theme::change(mode, None, cx);
}