jpmschweitzer/clide
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

promote the Ctrl+K theme picker into a Settings modal

Browse Source 
The status-bar popover already handles quick theme switching, so a
separate theme-only modal was redundant. Repurpose it as a general
Settings surface whose first (currently only) section is Appearance:
base themes, sorted, with a High-contrast toggle for -hc siblings,
reusing the theme_families helpers shared with the popover.

Command id stays theme.pick (the welcome theme-link and tests
reference it); only the title and the view it opens change.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
jpmschweitzer
2026-06-06 09:32:20 +02:00
co-authored by Claude
parent ffd22069a7
commit 968c3dbfa8
8 changed files with 413 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/builtin/theme_picker/src/extension.dart
+6 -3
View File
@@ -1,5 +1,5 @@
import 'package:clide/clide.dart';
import 'package:clide/builtin/theme_picker/src/picker_view.dart';
import 'package:clide/builtin/theme_picker/src/settings_view.dart';
import 'package:clide/builtin/theme_picker/src/theme_status_item.dart';
import 'package:clide/extension/extension.dart';
@@ -20,10 +20,13 @@ class ThemePickerExtension extends ClideExtension {
@override
List<ContributionPoint> get contributions => [
// Opens the settings modal (T-238). Command id kept as `theme.pick`
// (the welcome theme-link and other callers reference it); ⌘K opens
// Settings, whose only section today is the theme picker.
CommandContribution(
id: 'theme.pick',
command: 'theme.pick',
title: 'Theme: Pick…',
title: 'Settings…',
defaultBinding: 'ctrl+k',
run: _pick,
),
@@ -50,7 +53,7 @@ class ThemePickerExtension extends ClideExtension {
);
}
final selected = await ctx.dialog.show<String>(
(context, dismiss) => ThemePickerView(
(context, dismiss) => SettingsView(
controller: ctx.theme,
onDismiss: dismiss,
),
lib/builtin/theme_picker/src/picker_view.dart
-159
View File
@@ -1,159 +0,0 @@
import 'package:clide/kernel/kernel.dart';
import 'package:clide/widgets/widgets.dart';
import 'package:flutter/widgets.dart';
class ThemePickerView extends StatefulWidget {
const ThemePickerView({
super.key,
required this.controller,
required this.onDismiss,
});
final ThemeController controller;
final void Function([String? selected]) onDismiss;
static const ns = 'builtin.theme-picker';
@override
State<ThemePickerView> createState() => _ThemePickerViewState();
}
class _ThemePickerViewState extends State<ThemePickerView> {
String? _hovered;
@override
Widget build(BuildContext context) {
final kernel = ClideKernel.of(context);
final tokens = ClideTheme.of(context).surface;
final themes = widget.controller.available;
final currentName = widget.controller.currentName;
final i = kernel.i18n;
return Semantics(
container: true,
label: i.string('modal.title', namespace: ThemePickerView.ns, placeholder: 'Select theme'),
explicitChildNodes: true,
child: ClideSurface(
width: 420,
color: tokens.modalSurfaceBackground,
border: tokens.modalSurfaceBorder,
padding: const EdgeInsets.all(16),
borderRadius: BorderRadius.circular(4),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
ClideText(
i.string('modal.title', namespace: ThemePickerView.ns, placeholder: 'Select theme'),
fontSize: 15,
fontWeight: FontWeight.w600,
),
const SizedBox(height: 8),
ClideDivider(),
const SizedBox(height: 8),
ConstrainedBox(
constraints: const BoxConstraints(maxHeight: 360),
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
for (final t in themes)
_ThemeRow(
name: t.name,
displayName: t.displayName,
selected: t.name == currentName,
hovered: _hovered == t.name,
hint: i.string('row.select.hint', namespace: ThemePickerView.ns, placeholder: 'Activate this theme'),
onEnter: () => setState(() => _hovered = t.name),
onExit: () => setState(() => _hovered = null),
onTap: () {
widget.controller.select(t.name);
widget.onDismiss(t.name);
},
),
],
),
),
),
const SizedBox(height: 12),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
ClideButton(
label: i.string('modal.cancel', namespace: ThemePickerView.ns, placeholder: 'Cancel'),
semanticHint:
i.string('modal.cancel.hint', namespace: ThemePickerView.ns, placeholder: 'Close the theme picker without changing the current theme'),
onPressed: () => widget.onDismiss(),
),
],
),
],
),
),
);
}
}
class _ThemeRow extends StatelessWidget {
const _ThemeRow({
required this.name,
required this.displayName,
required this.selected,
required this.hovered,
required this.hint,
required this.onEnter,
required this.onExit,
required this.onTap,
});
final String name;
final String displayName;
final bool selected;
final bool hovered;
final String hint;
final VoidCallback onEnter;
final VoidCallback onExit;
final VoidCallback onTap;
@override
Widget build(BuildContext context) {
final tokens = ClideTheme.of(context).surface;
final bg = selected ? tokens.listItemSelectedBackground : (hovered ? tokens.listItemHoverBackground : tokens.listItemBackground);
final fg = selected ? tokens.listItemSelectedForeground : tokens.listItemForeground;
return Semantics(
button: true,
selected: selected,
label: displayName,
hint: hint,
onTap: onTap,
excludeSemantics: true,
child: MouseRegion(
cursor: SystemMouseCursors.click,
onEnter: (_) => onEnter(),
onExit: (_) => onExit(),
child: GestureDetector(
onTap: onTap,
child: Container(
color: bg,
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
child: Row(
children: [
if (selected)
Padding(
padding: const EdgeInsets.only(right: 8),
child: ClideIcon(const CheckIcon(), size: 12, color: fg),
)
else
const SizedBox(width: 20),
Expanded(
child: ClideText(displayName, color: fg),
),
ClideText(name, color: tokens.globalTextMuted, fontSize: clideFontCaption),
],
),
),
),
),
);
}
}
lib/builtin/theme_picker/src/settings_view.dart
+247
View File
@@ -0,0 +1,247 @@
import 'package:clide/builtin/theme_picker/src/theme_families.dart';
import 'package:clide/kernel/kernel.dart';
import 'package:clide/widgets/widgets.dart';
import 'package:flutter/widgets.dart';
/// The ⌘K settings modal. Promoted from the old theme-only picker (T-238): a
/// general Settings surface that today holds a single **Appearance** section —
/// the theme list. Like the status-bar popover (T-237) it shows base themes
/// only (sorted) with a "High contrast" toggle that maps to the `-hc` sibling
/// (D-69); the shared `theme_families` helpers keep both surfaces in sync.
/// Selecting a theme applies it live and dismisses; Cancel just closes.
class SettingsView extends StatefulWidget {
const SettingsView({
super.key,
required this.controller,
required this.onDismiss,
});
final ThemeController controller;
final void Function([String? selected]) onDismiss;
static const ns = 'builtin.theme-picker';
@override
State<SettingsView> createState() => _SettingsViewState();
}
class _SettingsViewState extends State<SettingsView> {
String? _hovered;
late bool _hc;
@override
void initState() {
super.initState();
_hc = isHcName(widget.controller.currentName);
}
void _toggleHc() {
setState(() => _hc = !_hc);
// Re-apply the current base with the new variant, live.
final base = baseThemeName(widget.controller.currentName);
widget.controller.select(resolveThemeName(widget.controller.available, base, highContrast: _hc));
}
void _pick(ThemeDefinition base) {
widget.controller.select(resolveThemeName(widget.controller.available, base.name, highContrast: _hc));
widget.onDismiss(base.name);
}
@override
Widget build(BuildContext context) {
final kernel = ClideKernel.of(context);
final tokens = ClideTheme.of(context).surface;
final i = kernel.i18n;
final themes = baseThemes(widget.controller.available);
final currentBase = baseThemeName(widget.controller.currentName);
final title = i.string('modal.title', namespace: SettingsView.ns, placeholder: 'Settings');
return Semantics(
container: true,
label: title,
explicitChildNodes: true,
child: ClideSurface(
width: 420,
color: tokens.modalSurfaceBackground,
border: tokens.modalSurfaceBorder,
padding: const EdgeInsets.all(16),
borderRadius: BorderRadius.circular(4),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
ClideText(title, fontSize: 15, fontWeight: FontWeight.w600),
const SizedBox(height: 8),
ClideDivider(),
const SizedBox(height: 12),
// --- Appearance section (the only one for now) ---
ClideText(
i.string('section.appearance', namespace: SettingsView.ns, placeholder: 'Appearance'),
fontSize: clideFontCaption,
color: tokens.sidebarSectionHeader,
fontFamily: clideMonoFamily,
),
const SizedBox(height: 8),
_HighContrastToggle(
checked: _hc,
label: i.string('toggle.highContrast', namespace: SettingsView.ns, placeholder: 'High contrast'),
onTap: _toggleHc,
),
const SizedBox(height: 4),
ConstrainedBox(
constraints: const BoxConstraints(maxHeight: 320),
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
for (final t in themes)
_ThemeRow(
name: t.name,
displayName: t.displayName,
selected: t.name == currentBase,
hovered: _hovered == t.name,
hint: i.string('row.select.hint', namespace: SettingsView.ns, placeholder: 'Activate this theme'),
onEnter: () => setState(() => _hovered = t.name),
onExit: () => setState(() => _hovered = null),
onTap: () => _pick(t),
),
],
),
),
),
const SizedBox(height: 12),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
ClideButton(
label: i.string('modal.cancel', namespace: SettingsView.ns, placeholder: 'Cancel'),
semanticHint: i.string('modal.cancel.hint', namespace: SettingsView.ns, placeholder: 'Close settings without changing anything'),
onPressed: () => widget.onDismiss(),
),
],
),
],
),
),
);
}
}
/// "High contrast" checkbox row — toggles the `-hc` sibling for the current
/// theme (mirrors the status-bar popover's toggle).
class _HighContrastToggle extends StatefulWidget {
const _HighContrastToggle({required this.checked, required this.label, required this.onTap});
final bool checked;
final String label;
final VoidCallback onTap;
@override
State<_HighContrastToggle> createState() => _HighContrastToggleState();
}
class _HighContrastToggleState extends State<_HighContrastToggle> {
bool _hover = false;
@override
Widget build(BuildContext context) {
final tokens = ClideTheme.of(context).surface;
return Semantics(
checked: widget.checked,
label: widget.label,
excludeSemantics: true,
child: MouseRegion(
cursor: SystemMouseCursors.click,
onEnter: (_) => setState(() => _hover = true),
onExit: (_) => setState(() => _hover = false),
child: GestureDetector(
onTap: widget.onTap,
child: Container(
color: _hover ? tokens.listItemHoverBackground : null,
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
child: Row(
children: [
Container(
width: 13,
height: 13,
decoration: BoxDecoration(
color: widget.checked ? tokens.buttonBackground : null,
border: Border.all(color: widget.checked ? tokens.buttonBackground : tokens.modalSurfaceBorder),
borderRadius: BorderRadius.circular(3),
),
child: widget.checked ? ClideIcon(const CheckIcon(), size: 9, color: tokens.buttonForeground) : null,
),
const SizedBox(width: 8),
Expanded(child: ClideText(widget.label, color: tokens.listItemForeground)),
],
),
),
),
),
);
}
}
class _ThemeRow extends StatelessWidget {
const _ThemeRow({
required this.name,
required this.displayName,
required this.selected,
required this.hovered,
required this.hint,
required this.onEnter,
required this.onExit,
required this.onTap,
});
final String name;
final String displayName;
final bool selected;
final bool hovered;
final String hint;
final VoidCallback onEnter;
final VoidCallback onExit;
final VoidCallback onTap;
@override
Widget build(BuildContext context) {
final tokens = ClideTheme.of(context).surface;
final bg = selected ? tokens.listItemSelectedBackground : (hovered ? tokens.listItemHoverBackground : tokens.listItemBackground);
final fg = selected ? tokens.listItemSelectedForeground : tokens.listItemForeground;
return Semantics(
button: true,
selected: selected,
label: displayName,
hint: hint,
onTap: onTap,
excludeSemantics: true,
child: MouseRegion(
cursor: SystemMouseCursors.click,
onEnter: (_) => onEnter(),
onExit: (_) => onExit(),
child: GestureDetector(
onTap: onTap,
child: Container(
color: bg,
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
child: Row(
children: [
if (selected)
Padding(
padding: const EdgeInsets.only(right: 8),
child: ClideIcon(const CheckIcon(), size: 12, color: fg),
)
else
const SizedBox(width: 20),
Expanded(
child: ClideText(displayName, color: fg),
),
ClideText(name, color: tokens.globalTextMuted, fontSize: clideFontCaption),
],
),
),
),
),
);
}
}
lib/builtin/theme_picker/theme_picker.dart
+1 -1
View File
@@ -1,2 +1,2 @@
export 'src/extension.dart';
export 'src/picker_view.dart';
export 'src/settings_view.dart';