1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
/**
* @license
* Copyright 2025 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import { useState, useCallback, useEffect } from 'react';
import { themeManager } from '../themes/theme-manager.js';
import { LoadedSettings, SettingScope } from '../../config/settings.js'; // Import LoadedSettings, AppSettings, MergedSetting
interface UseThemeCommandReturn {
isThemeDialogOpen: boolean;
openThemeDialog: () => void;
handleThemeSelect: (
themeName: string | undefined,
scope: SettingScope,
) => void; // Added scope
handleThemeHighlight: (themeName: string | undefined) => void;
}
export const useThemeCommand = (
loadedSettings: LoadedSettings,
setThemeError: (error: string | null) => void,
): UseThemeCommandReturn => {
// Determine the effective theme
const effectiveTheme = loadedSettings.merged.theme;
// Initial state: Open dialog if no theme is set in either user or workspace settings
const [isThemeDialogOpen, setIsThemeDialogOpen] = useState(false);
// TODO: refactor how theme's are accessed to avoid requiring a forced render.
const [, setForceRender] = useState(0);
// Apply initial theme on component mount
useEffect(() => {
try {
themeManager.setActiveTheme(effectiveTheme);
setThemeError(null); // Clear any previous theme error on success
} catch (error: unknown) {
// If theme is not found during initial load, open the theme selection dialog and set error message
if (
error instanceof Error &&
error.message.includes('Theme') &&
error.message.includes('not found')
) {
setIsThemeDialogOpen(true);
setThemeError(
`Error: ${error instanceof Error ? error.message : String(error)}`,
);
} else {
console.error(
`Error setting initial theme: ${error instanceof Error ? error.message : String(error)}`,
);
setThemeError(
`Error setting initial theme: ${error instanceof Error ? error.message : String(error)}`,
);
}
}
}, [effectiveTheme, setThemeError]); // Re-run if effectiveTheme or setThemeError changes
const openThemeDialog = useCallback(() => {
setIsThemeDialogOpen(true);
}, []);
const applyTheme = useCallback(
(themeName: string | undefined) => {
try {
themeManager.setActiveTheme(themeName);
setForceRender((v) => v + 1); // Trigger potential re-render
setThemeError(null); // Clear any previous theme error on success
} catch (error: unknown) {
// If theme is not found, open the theme selection dialog and set error message
if (
error instanceof Error &&
error.message.includes('Theme') &&
error.message.includes('not found')
) {
setIsThemeDialogOpen(true);
setThemeError(
`Error: ${error instanceof Error ? error.message : String(error)}`,
);
} else {
console.error(
`Error setting theme: ${error instanceof Error ? error.message : String(error)}`,
);
setThemeError(
`Error setting theme: ${error instanceof Error ? error.message : String(error)}`,
);
}
}
},
[setForceRender, setThemeError],
);
const handleThemeHighlight = useCallback(
(themeName: string | undefined) => {
applyTheme(themeName);
},
[applyTheme],
);
const handleThemeSelect = useCallback(
(themeName: string | undefined, scope: SettingScope) => {
// Added scope parameter
try {
loadedSettings.setValue(scope, 'theme', themeName); // Update the merged settings
applyTheme(loadedSettings.merged.theme); // Apply the current theme
} finally {
setIsThemeDialogOpen(false); // Close the dialog
}
},
[applyTheme, loadedSettings],
);
return {
isThemeDialogOpen,
openThemeDialog,
handleThemeSelect,
handleThemeHighlight,
};
};
|
