diff --git a/packages/opencode/src/cli/cmd/tui/component/dialog-theme-list.tsx b/packages/opencode/src/cli/cmd/tui/component/dialog-theme-list.tsx index 0135cfd2..60411e56 100644 --- a/packages/opencode/src/cli/cmd/tui/component/dialog-theme-list.tsx +++ b/packages/opencode/src/cli/cmd/tui/component/dialog-theme-list.tsx @@ -12,15 +12,16 @@ export function DialogThemeList() { const dialog = useDialog() let confirmed = false let ref: DialogSelectRef - const initial = theme.selectedTheme + const initial = theme.selected onMount(() => { // highlight the first theme in the list when we open it for UX - theme.setSelectedTheme(Object.keys(THEMES)[0] as keyof typeof THEMES) + theme.set(Object.keys(THEMES)[0] as keyof typeof THEMES) }) + onCleanup(() => { // if we close the dialog without confirming, reset back to the initial theme - if (!confirmed) theme.setSelectedTheme(initial) + if (!confirmed) theme.set(initial) }) return ( @@ -28,10 +29,10 @@ export function DialogThemeList() { title="Themes" options={options} onMove={(opt) => { - theme.setSelectedTheme(opt.value) + theme.set(opt.value) }} onSelect={(opt) => { - theme.setSelectedTheme(opt.value) + theme.set(opt.value) confirmed = true dialog.clear() }} @@ -40,12 +41,12 @@ export function DialogThemeList() { }} onFilter={(query) => { if (query.length === 0) { - theme.setSelectedTheme(initial) + theme.set(initial) return } const first = ref.filtered[0] - if (first) theme.setSelectedTheme(first.value) + if (first) theme.set(first.value) }} /> ) diff --git a/packages/opencode/src/cli/cmd/tui/context/theme.tsx b/packages/opencode/src/cli/cmd/tui/context/theme.tsx index b2c92ff1..b5c8f21f 100644 --- a/packages/opencode/src/cli/cmd/tui/context/theme.tsx +++ b/packages/opencode/src/cli/cmd/tui/context/theme.tsx @@ -642,10 +642,11 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({ return values()[prop] }, }), - get selectedTheme() { + get selected() { return kv.data.theme }, - setSelectedTheme(theme: string) { + set(theme: string) { + if (!THEMES[theme]) return setTheme(theme) kv.set("theme", theme) }, diff --git a/packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx b/packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx index 668ffb8d..7689b377 100644 --- a/packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx +++ b/packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx @@ -59,7 +59,8 @@ export function DialogSelect(props: DialogSelectProps) { props.options, filter((x) => x.disabled !== true), take(props.limit ?? Infinity), - (x) => (!needle ? x : fuzzysort.go(needle, x, { keys: ["title", "category"] }).map((x) => x.obj)), + (x) => + !needle ? x : fuzzysort.go(needle, x, { keys: ["title", "category"] }).map((x) => x.obj), ) return result }) @@ -128,8 +129,10 @@ export function DialogSelect(props: DialogSelectProps) { if (evt.name === "pagedown") move(10) if (evt.name === "return") { const option = selected() - if (option.onSelect) option.onSelect(dialog) - props.onSelect?.(option) + if (option) { + if (option.onSelect) option.onSelect(dialog) + props.onSelect?.(option) + } } for (const item of props.keybind ?? []) { @@ -206,11 +209,15 @@ export function DialogSelect(props: DialogSelectProps) { props.onSelect?.(option) }} onMouseOver={() => { - const index = filtered().findIndex((x) => isDeepEqual(x.value, option.value)) + const index = filtered().findIndex((x) => + isDeepEqual(x.value, option.value), + ) if (index === -1) return moveTo(index) }} - backgroundColor={active() ? (option.bg ?? theme.primary) : RGBA.fromInts(0, 0, 0, 0)} + backgroundColor={ + active() ? (option.bg ?? theme.primary) : RGBA.fromInts(0, 0, 0, 0) + } paddingLeft={1} paddingRight={1} gap={1} @@ -218,7 +225,9 @@ export function DialogSelect(props: DialogSelectProps) {