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

refactor(tui): migrate selection views to V2 theme (#38001)

Browse source
This commit is contained in:
James Long 2026-07-22 16:19:00 -04:00 • committed by GitHub
commit 88f572cfce
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 77 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

13
packages/tui/src/component/dialog-session-list.tsx
View file

@ -20,7 +20,7 @@ export function DialogSessionList() {
const dialog = useDialog()
const route = useRoute()
const data = useData()
const { theme } = useTheme()
const { themeV2, mode } = useTheme().contextual("elevated")
const client = useClient()
const local = useLocal()
const toast = useToast()
@ -109,12 +109,13 @@ export function DialogSessionList() {
value: session.id,
category,
footer,
bg: deleting ? theme.error : undefined,
bg: deleting ? themeV2.background.action.destructive.focused : undefined,
fg: deleting ? themeV2.text.action.destructive.focused : undefined,
gutter: data.session.family(session.id).some((id) => data.session.status(id) === "running")
? () => <Spinner />
: slot === undefined
? undefined
: () => <text fg={theme.accent}>{slot}</text>,
: () => <text fg={themeV2.hue.accent[mode() === "light" ? 800 : 200]}>{slot}</text>,
}
}
@ -142,12 +143,14 @@ export function DialogSessionList() {
}}
emptyView={
<box paddingLeft={4} paddingRight={4} paddingTop={1}>
<text fg={theme.textMuted}>No sessions available</text>
<text fg={themeV2.text.subdued}>No sessions available</text>
</box>
}
noMatchView={
<box paddingLeft={4} paddingRight={4} paddingTop={1}>
<text fg={searchState().error ? theme.error : theme.textMuted}>{searchState().message}</text>
<text fg={searchState().error ? themeV2.text.feedback.error.default : themeV2.text.subdued}>
{searchState().message}
</text>
</box>
}
onMove={() => setToDelete(undefined)}

5
packages/tui/src/component/dialog-stash.tsx
View file

@ -29,7 +29,7 @@ function getStashPreview(input: string, maxLength: number = 50): string {
export function DialogStash(props: { onSelect: (entry: StashEntry) => void }) {
const dialog = useDialog()
const stash = usePromptStash()
const { theme } = useTheme()
const { themeV2 } = useTheme().contextual("elevated")
const shortcuts = Keymap.useShortcuts()
const [toDelete, setToDelete] = createSignal<number>()
@ -45,7 +45,8 @@ export function DialogStash(props: { onSelect: (entry: StashEntry) => void }) {
title: isDeleting
? `Press ${shortcuts.get("stash.delete")} again to confirm`
: getStashPreview(entry.prompt.text),
bg: isDeleting ? theme.error : undefined,
bg: isDeleting ? themeV2.background.action.destructive.focused : undefined,
fg: isDeleting ? themeV2.text.action.destructive.focused : undefined,
value: index,
description: getRelativeTime(entry.timestamp),
footer: lineCount > 1 ? `~${lineCount} lines` : undefined,

24
packages/tui/src/component/prompt/autocomplete.tsx
View file

@ -12,7 +12,7 @@ import { getScrollAcceleration } from "../../util/scroll"
import { useTuiPaths } from "../../context/runtime"
import { useConfig } from "../../config"
import { useLocation } from "../../context/location"
import { useTheme, selectedForeground } from "../../context/theme"
import { useTheme } from "../../context/theme"
import { SplitBorder } from "../../ui/border"
import { useTerminalDimensions } from "@opentui/solid"
import { Locale } from "../../util/locale"
@ -57,7 +57,7 @@ export function Autocomplete(props: {
const data = useData()
const keymap = Keymap.use()
const keymapCommands = Keymap.useCommands()
const { theme } = useTheme()
const { themeV2 } = useTheme().contextual("overlay")
const dimensions = useTerminalDimensions()
const frecency = useFrecency()
const config = useConfig().data
@ -698,11 +698,11 @@ export function Autocomplete(props: {
width={position().width}
zIndex={100}
{...SplitBorder}
borderColor={theme.border}
borderColor={themeV2.border.default}
>
<scrollbox
ref={(r: ScrollBoxRenderable) => (scroll = r)}
backgroundColor={theme.backgroundMenu}
backgroundColor={themeV2.background.default}
height={height()}
scrollbarOptions={{ visible: false }}
scrollAcceleration={scrollAcceleration()}
@ -711,7 +711,9 @@ export function Autocomplete(props: {
each={options()}
fallback={
<box paddingLeft={1} paddingRight={1}>
<text fg={emptyError() ? theme.error : theme.textMuted}>{emptyMessage()}</text>
<text fg={emptyError() ? themeV2.text.feedback.error.default : themeV2.text.subdued}>
{emptyMessage()}
</text>
</box>
}
>
@ -719,7 +721,7 @@ export function Autocomplete(props: {
<box
paddingLeft={1}
paddingRight={1}
backgroundColor={index === store.selected ? theme.primary : undefined}
backgroundColor={index === store.selected ? themeV2.background.action.primary.focused : undefined}
flexDirection="row"
onMouseMove={() => {
setStore("input", "mouse")
@ -734,11 +736,17 @@ export function Autocomplete(props: {
}}
onMouseUp={() => select()}
>
<text fg={index === store.selected ? selectedForeground(theme) : theme.text} flexShrink={0}>
<text
fg={index === store.selected ? themeV2.text.action.primary.focused : themeV2.text.default}
flexShrink={0}
>
{option().display}
</text>
<Show when={option().description}>
<text fg={index === store.selected ? selectedForeground(theme) : theme.textMuted} wrapMode="none">
<text
fg={index === store.selected ? themeV2.text.action.primary.focused : themeV2.text.subdued}
wrapMode="none"
>
{" " + option().description?.trimStart()}
</text>
</Show>