abbyswag/qwen-code
1
0
Fork 0
mirror of https://github.com/QwenLM/qwen-code.git synced 2025-12-20 08:47:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI Polish for theme selector (#294)

Browse Source
This commit is contained in:
Miguel Solorio
2025-05-08 16:00:55 -07:00
committed by GitHub
parent 6b0ac084b8
commit a685597b70
16 changed files with 171 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
packages/cli/src/ui/components/ThemeDialog.tsx
View File

@@ -32,16 +32,22 @@ export function ThemeDialog({
SettingScope.User,
);
const themeItems = themeManager.getAvailableThemes().map((theme) => ({
label: theme.active ? `${theme.name} (Active)` : theme.name,
value: theme.name,
}));
// Generate theme items
const themeItems = themeManager.getAvailableThemes().map((theme) => {
const typeString = theme.type.charAt(0).toUpperCase() + theme.type.slice(1);
return {
label: theme.name,
value: theme.name,
themeNameDisplay: theme.name,
themeTypeDisplay: typeString,
};
});
const [selectInputKey, setSelectInputKey] = useState(Date.now());
// Determine which radio button should be initially selected in the theme list
// This should reflect the theme *saved* for the selected scope, or the default
const initialThemeIndex = themeItems.findIndex(
(item) =>
item.value ===
(settings.forScope(selectedScope).settings.theme || DEFAULT_THEME.name),
(item) => item.value === (settings.merged.theme || DEFAULT_THEME.name),
);
const scopeItems = [
@@ -88,45 +94,49 @@ export function ThemeDialog({
return (
<Box
borderStyle="round"
borderColor={Colors.AccentCyan}
flexDirection="column"
borderColor={Colors.AccentPurple}
flexDirection="row"
padding={1}
width="50%"
width="100%"
>
<Text bold={focusedSection === 'theme'}>
{focusedSection === 'theme' ? '> ' : ' '}Select Theme{' '}
<Text color={Colors.SubtleComment}>{otherScopeModifiedMessage}</Text>
</Text>
<RadioButtonSelect
key={selectInputKey}
items={themeItems}
initialIndex={initialThemeIndex}
onSelect={handleThemeSelect} // Use the wrapper handler
onHighlight={onHighlight}
isFocused={focusedSection === 'theme'}
/>
{/* Scope Selection */}
<Box marginTop={1} flexDirection="column">
<Text bold={focusedSection === 'scope'}>
{focusedSection === 'scope' ? '> ' : ' '}Apply To
{/* Left Column: Selection */}
<Box flexDirection="column" width="50%" paddingRight={2}>
<Text bold={focusedSection === 'theme'}>
{focusedSection === 'theme' ? '> ' : ' '}Select Theme{' '}
<Text color={Colors.SubtleComment}>{otherScopeModifiedMessage}</Text>
</Text>
<RadioButtonSelect
items={scopeItems}
initialIndex={0} // Default to User Settings
onSelect={handleScopeSelect}
onHighlight={handleScopeHighlight}
isFocused={focusedSection === 'scope'}
key={selectInputKey}
items={themeItems}
initialIndex={initialThemeIndex}
onSelect={handleThemeSelect}
onHighlight={onHighlight}
isFocused={focusedSection === 'theme'}
/>
{/* Scope Selection */}
<Box marginTop={1} flexDirection="column">
<Text bold={focusedSection === 'scope'}>
{focusedSection === 'scope' ? '> ' : ' '}Apply To
</Text>
<RadioButtonSelect
items={scopeItems}
initialIndex={0} // Default to User Settings
onSelect={handleScopeSelect}
onHighlight={handleScopeHighlight}
isFocused={focusedSection === 'scope'}
/>
</Box>
<Box marginTop={1}>
<Text color={Colors.SubtleComment}>
(Use ↑/↓ arrows and Enter to select, Tab to change focus)
</Text>
</Box>
</Box>
<Box marginTop={1}>
<Text color={Colors.SubtleComment}>
(Use ↑/↓ arrows and Enter to select, Tab to change focus)
</Text>
</Box>
<Box marginTop={1} flexDirection="column">
{/* Right Column: Preview */}
<Box flexDirection="column" width="50%" paddingLeft={3}>
<Text bold>Preview</Text>
<Box
borderStyle="single"