MediaMetz/gemini-cli
1
0
Fork 0
mirror of https://github.com/google-gemini/gemini-cli.git synced 2026-04-07 11:51:14 -07:00
Code Issues Packages Projects Releases Wiki Activity

feat(themes): add built-in holiday theme 🎁 (#14301)

Browse Source 
Co-authored-by: jacob314 <jacob314@gmail.com>
This commit is contained in:
Jack Wotherspoon
2025-12-01 14:09:55 -05:00
committed by GitHub
parent 62f890b5aa
commit bde8b78a88
5 changed files with 244 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
packages/cli/src/ui/components/ThemeDialog.test.tsx
View File

@@ -4,13 +4,11 @@
* SPDX-License-Identifier: Apache-2.0
*/
import { render } from '../../test-utils/render.js';
import { renderWithProviders } from '../../test-utils/render.js';
import { waitFor } from '../../test-utils/async.js';
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
import { ThemeDialog } from './ThemeDialog.js';
import { LoadedSettings } from '../../config/settings.js';
import { KeypressProvider } from '../contexts/KeypressContext.js';
import { SettingsContext } from '../contexts/SettingsContext.js';
import { DEFAULT_THEME, themeManager } from '../themes/theme-manager.js';
import { act } from 'react';
@@ -76,12 +74,9 @@ describe('ThemeDialog Snapshots', () => {
it('should render correctly in theme selection mode', () => {
const settings = createMockSettings();
const { lastFrame } = render(
<SettingsContext.Provider value={settings}>
<KeypressProvider>
<ThemeDialog {...baseProps} settings={settings} />
</KeypressProvider>
</SettingsContext.Provider>,
const { lastFrame } = renderWithProviders(
<ThemeDialog {...baseProps} settings={settings} />,
{ settings },
);
expect(lastFrame()).toMatchSnapshot();
@@ -89,12 +84,9 @@ describe('ThemeDialog Snapshots', () => {
it('should render correctly in scope selector mode', async () => {
const settings = createMockSettings();
const { lastFrame, stdin } = render(
<SettingsContext.Provider value={settings}>
<KeypressProvider>
<ThemeDialog {...baseProps} settings={settings} />
</KeypressProvider>
</SettingsContext.Provider>,
const { lastFrame, stdin } = renderWithProviders(
<ThemeDialog {...baseProps} settings={settings} />,
{ settings },
);
// Press Tab to switch to scope selector mode
@@ -111,16 +103,13 @@ describe('ThemeDialog Snapshots', () => {
it('should call onCancel when ESC is pressed', async () => {
const mockOnCancel = vi.fn();
const settings = createMockSettings();
const { stdin } = render(
<SettingsContext.Provider value={settings}>
<KeypressProvider>
<ThemeDialog
{...baseProps}
onCancel={mockOnCancel}
settings={settings}
/>
</KeypressProvider>
</SettingsContext.Provider>,
const { stdin } = renderWithProviders(
<ThemeDialog
{...baseProps}
onCancel={mockOnCancel}
settings={settings}
/>,
{ settings },
);
act(() => {
@@ -131,4 +120,26 @@ describe('ThemeDialog Snapshots', () => {
expect(mockOnCancel).toHaveBeenCalled();
});
});
it('should call refreshStatic when a theme is selected', async () => {
const mockRefreshStatic = vi.fn();
const settings = createMockSettings();
const { stdin } = renderWithProviders(
<ThemeDialog {...baseProps} settings={settings} />,
{
settings,
uiActions: { refreshStatic: mockRefreshStatic },
},
);
// Press Enter to select the theme
act(() => {
stdin.write('\r');
});
await waitFor(() => {
expect(mockRefreshStatic).toHaveBeenCalled();
expect(baseProps.onSelect).toHaveBeenCalled();
});
});
});

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

@@ -21,6 +21,7 @@ import { getScopeMessageForSetting } from '../../utils/dialogScopeUtils.js';
import { useKeypress } from '../hooks/useKeypress.js';
import { useAlternateBuffer } from '../hooks/useAlternateBuffer.js';
import { ScopeSelector } from './shared/ScopeSelector.js';
import { useUIActions } from '../contexts/UIActionsContext.js';
interface ThemeDialogProps {
/** Callback function when a theme is selected */
@@ -46,6 +47,7 @@ export function ThemeDialog({
terminalWidth,
}: ThemeDialogProps): React.JSX.Element {
const isAlternateBuffer = useAlternateBuffer();
const { refreshStatic } = useUIActions();
const [selectedScope, setSelectedScope] = useState<LoadableSettingScope>(
SettingScope.User,
);
@@ -93,8 +95,9 @@ export function ThemeDialog({
const handleThemeSelect = useCallback(
(themeName: string) => {
onSelect(themeName, selectedScope);
refreshStatic();
},
[onSelect, selectedScope],
[onSelect, selectedScope, refreshStatic],
);
const handleThemeHighlight = (themeName: string) => {
@@ -109,8 +112,9 @@ export function ThemeDialog({
const handleScopeSelect = useCallback(
(scope: LoadableSettingScope) => {
onSelect(highlightedThemeName, scope);
refreshStatic();
},
[onSelect, highlightedThemeName],
[onSelect, highlightedThemeName, refreshStatic],
);
const [mode, setMode] = useState<'theme' | 'scope'>('theme');

62
packages/cli/src/ui/components/__snapshots__/ThemeDialog.test.tsx.snap
View File

@@ -1,38 +1,38 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`ThemeDialog Snapshots > should render correctly in scope selector mode 1`] = `
"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ > Apply To │
│ ● 1. User Settings │
│ 2. Workspace Settings │
│ 3. System Settings │
│ │
│ (Use Enter to apply scope, Tab to select theme, Esc to close) │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
"╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ > Apply To │
│ ● 1. User Settings │
│ 2. Workspace Settings │
│ 3. System Settings │
│ │
│ (Use Enter to apply scope, Tab to select theme, Esc to close) │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯"
`;
exports[`ThemeDialog Snapshots > should render correctly in theme selection mode 1`] = `
"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ > Select Theme Preview │
│ ▲ ┌─────────────────────────────────────────────────┐ │
│ 1. ANSI Dark │ │ │
│ 2. Atom One Dark │ 1 # function │ │
│ 3. Ayu Dark │ 2 def fibonacci(n): │ │
│ ● 4. Default Dark │ 3 a, b = 0, 1 │ │
│ 5. Dracula Dark │ 4 for _ in range(n): │ │
│ 6. GitHub Dark │ 5 a, b = b, a + b │ │
│ 7. Shades Of Purple Dark │ 6 return a │ │
│ 8. ANSI Light Light │ │ │
│ 9. Ayu Light Light │ 1 - print("Hello, " + name) │ │
│ 10. Default Light Light │ 1 + print(f"Hello, {name}!") │ │
│ 11. GitHub Light Light │ │ │
│ 12. Google Code Light └─────────────────────────────────────────────────┘ │
│ ▼ │
│ │
│ (Use Enter to select, Tab to configure scope, Esc to close) │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
"╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ > Select Theme Preview │
│ ▲ ┌────────────────────────────────────────────────────────────┐ │
│ 1. ANSI Dark │ │ │
│ 2. Atom One Dark │ 1 # function │ │
│ 3. Ayu Dark │ 2 def fibonacci(n): │ │
│ ● 4. Default Dark │ 3 a, b = 0, 1 │ │
│ 5. Dracula Dark │ 4 for _ in range(n): │ │
│ 6. GitHub Dark │ 5 a, b = b, a + b │ │
│ 7. Holiday Dark │ 6 return a │ │
│ 8. Shades Of Purple Dark │ │ │
│ 9. ANSI Light Light │ 1 - print("Hello, " + name) │ │
│ 10. Ayu Light Light │ 1 + print(f"Hello, {name}!") │ │
│ 11. Default Light Light │ │ │
│ 12. GitHub Light Light └────────────────────────────────────────────────────────────┘ │
│ ▼ │
│ │
│ (Use Enter to select, Tab to configure scope, Esc to close) │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯"
`;