feat(tui): migrate core surfaces to V2 themes (#37145)

This commit is contained in:
James Long 2026-07-16 10:22:29 -04:00 committed by GitHub
commit 5fcef6773c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
37 changed files with 1389 additions and 815 deletions

View file

@ -8,7 +8,7 @@ import { abbreviateHome } from "../../runtime"
import { FilePath } from "../../ui/file-path"
function Directory(props: { context: Plugin.Context; maxWidth: number }) {
const { theme } = useTheme()
const { themeV2 } = useTheme()
const paths = useTuiPaths()
const directory = createMemo(() =>
props.context.location ? abbreviateHome(props.context.location.directory, paths.home) : undefined,
@ -16,13 +16,13 @@ function Directory(props: { context: Plugin.Context; maxWidth: number }) {
return (
<Show when={directory()}>
{(value) => <FilePath value={value()} maxWidth={props.maxWidth} fg={theme.textMuted} />}
{(value) => <FilePath value={value()} maxWidth={props.maxWidth} fg={themeV2.text.subdued()} />}
</Show>
)
}
function Mcp(props: { context: Plugin.Context }) {
const { theme } = useTheme()
const { themeV2 } = useTheme()
const list = createMemo(() => props.context.data.location.mcp.server.list(props.context.location) ?? [])
const failed = createMemo(() => list().some((item) => item.status.status === "failed"))
const count = createMemo(() => list().filter((item) => item.status.status === "connected").length)
@ -30,25 +30,27 @@ function Mcp(props: { context: Plugin.Context }) {
return (
<Show when={list().length}>
<box gap={1} flexDirection="row" flexShrink={0}>
<text fg={theme.text}>
<text fg={themeV2.text()}>
<Switch>
<Match when={failed()}>
<span style={{ fg: theme.error }}> </span>
<span style={{ fg: themeV2.text.feedback.error() }}> </span>
</Match>
<Match when={true}>
<span style={{ fg: count() > 0 ? theme.success : theme.textMuted }}> </span>
<span style={{ fg: count() > 0 ? themeV2.text.feedback.success() : themeV2.text.subdued() }}>
{" "}
</span>
</Match>
</Switch>
{count()} MCP
</text>
<text fg={theme.textMuted}>/status</text>
<text fg={themeV2.text.subdued()}>/status</text>
</box>
</Show>
)
}
function View(props: { context: Plugin.Context }) {
const { theme } = useTheme()
const { themeV2 } = useTheme()
const dimensions = useTerminalDimensions()
const mcpWidth = createMemo(() => {
const list = props.context.data.location.mcp.server.list(props.context.location) ?? []
@ -75,7 +77,7 @@ function View(props: { context: Plugin.Context }) {
<Mcp context={props.context} />
<box flexGrow={1} />
<box flexShrink={0}>
<text fg={theme.textMuted}>{InstallationVersion}</text>
<text fg={themeV2.text.subdued()}>{InstallationVersion}</text>
</box>
</box>
)