ceos/opencode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(tui): migrate leaf views to V2 themes (#37510)

Browse source
This commit is contained in:
James Long 2026-07-17 11:19:03 -04:00 • committed by GitHub
commit d67e035c18
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 46 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

16
packages/tui/src/component/dialog-debug.tsx
View file

@ -11,7 +11,7 @@ import { useToast } from "../ui/toast"
import { describeOS, describeTerminal } from "../util/system"
export function DialogDebug() {
const { theme } = useTheme()
const { themeV2 } = useTheme()
const dialog = useDialog()
const route = useRoute()
const local = useLocal()
@ -54,10 +54,10 @@ export function DialogDebug() {
return (
<box paddingLeft={2} paddingRight={2} gap={1} paddingBottom={1}>
<box flexDirection="row" justifyContent="space-between">
<text fg={theme.text} attributes={TextAttributes.BOLD}>
<text fg={themeV2.text()} attributes={TextAttributes.BOLD}>
Debug
</text>
<text fg={theme.textMuted} onMouseUp={() => dialog.clear()}>
<text fg={themeV2.text.subdued()} onMouseUp={() => dialog.clear()}>
esc
</text>
</box>
@ -67,10 +67,10 @@ export function DialogDebug() {
<For each={entries()}>
{(entry) => (
<box flexDirection="row" gap={1}>
<text flexShrink={0} fg={theme.textMuted}>
<text flexShrink={0} fg={themeV2.text.subdued()}>
{entry.label.padEnd(10)}
</text>
<text fg={theme.text} wrapMode="word">
<text fg={themeV2.text()} wrapMode="word">
{entry.value}
</text>
</box>
@ -78,12 +78,12 @@ export function DialogDebug() {
</For>
</box>
<box flexDirection="row" justifyContent="space-between">
<text fg={theme.textMuted}>Share this when reporting an issue.</text>
<text fg={themeV2.text.subdued()}>Share this when reporting an issue.</text>
<text onMouseUp={copy}>
<span style={{ fg: copied() ? theme.success : theme.text }}>
<span style={{ fg: copied() ? themeV2.text.feedback.success() : themeV2.text() }}>
<b>{copied() ? "✓ copied" : "copy"}</b>{" "}
</span>
<span style={{ fg: theme.textMuted }}>enter</span>
<span style={{ fg: themeV2.text.subdued() }}>enter</span>
</text>
</box>
</box>

14
packages/tui/src/component/dialog-skill.tsx
View file

@ -15,7 +15,7 @@ export type DialogSkillProps = {
export function DialogSkill(props: DialogSkillProps) {
const dialog = useDialog()
const data = useData()
const { theme } = useTheme()
const { themeV2 } = useTheme()
dialog.setSize("large")
const [loadError, setLoadError] = createSignal<unknown>()
@ -63,29 +63,29 @@ export function DialogSkill(props: DialogSkillProps) {
<Switch
fallback={
<box paddingLeft={4} paddingRight={4} paddingTop={1}>
<text fg={theme.textMuted}>No skills available</text>
<text fg={themeV2.text.subdued()}>No skills available</text>
</box>
}
>
<Match when={showError()}>
<box paddingLeft={4} paddingRight={4} paddingTop={1}>
<text fg={theme.error} attributes={TextAttributes.BOLD}>
<text fg={themeV2.text.feedback.error()} attributes={TextAttributes.BOLD}>
Could not load skills
</text>
<text fg={theme.textMuted}>{errorMessage(loadError())}</text>
<text fg={theme.textMuted}>Close and reopen Skills to try again.</text>
<text fg={themeV2.text.subdued()}>{errorMessage(loadError())}</text>
<text fg={themeV2.text.subdued()}>Close and reopen Skills to try again.</text>
</box>
</Match>
<Match when={skills.loading}>
<box paddingLeft={4} paddingRight={4} paddingTop={1}>
<text fg={theme.textMuted}>Loading skills…</text>
<text fg={themeV2.text.subdued()}>Loading skills…</text>
</box>
</Match>
</Switch>
}
noMatchView={
<box paddingLeft={4} paddingRight={4} paddingTop={1}>
<text fg={theme.textMuted}>No skills found</text>
<text fg={themeV2.text.subdued()}>No skills found</text>
</box>
}
/>

4
packages/tui/src/component/spinner.tsx
View file

@ -10,9 +10,9 @@ registerOpencodeSpinner()
export const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"]
export function Spinner(props: { children?: JSX.Element; color?: RGBA }) {
const { theme } = useTheme()
const { themeV2 } = useTheme()
const config = useConfig().data
const color = () => props.color ?? theme.textMuted
const color = () => props.color ?? themeV2.text.subdued()
return (
<Show
when={config.animations ?? true}