Compare commits

..

3 Commits

Author SHA1 Message Date
Kit Langton 33da5586e5 fix(tui): limit destructive style to focus 2026-08-06 20:21:12 -04:00
Kit Langton d20558769c fix(tui): keep destructive actions visible 2026-08-06 20:17:47 -04:00
Kit Langton 4a7e5a3897 fix(tui): style destructive dialog actions 2026-08-06 20:11:20 -04:00
6 changed files with 13 additions and 9 deletions
@@ -128,6 +128,7 @@ export function DialogMcp() {
{
title: toggleTitle(),
command: "dialog.mcp.toggle",
variant: toggleTitle() === "disconnect" ? "destructive" : "primary",
onTrigger: (option) => {
setFocused(option.value as string)
toggle(option.value as string)
@@ -372,6 +372,7 @@ export function DialogMoveSession(props: DialogMoveSessionProps) {
{
command: "dialog.move_session.delete",
title: "delete",
variant: "destructive",
disabled: (option) => {
const value = option?.value
if (!value || value.type !== "directory" || value.subdirectory) return true
@@ -236,6 +236,7 @@ export function DialogSessionList() {
{
command: "session.delete",
title: "delete",
variant: "destructive",
onTrigger: (option: { value: string }) => {
if (toDelete() !== option.value) {
setToDelete(option.value)
@@ -75,6 +75,7 @@ export function DialogStash(props: { onSelect: (entry: StashEntry) => void }) {
{
command: "stash.delete",
title: "delete",
variant: "destructive",
onTrigger: (option) => {
if (toDelete() === option.value) {
stash.remove(option.value)
@@ -200,12 +200,10 @@ export function DialogExportOptions(props: DialogExportOptionsProps) {
<box
paddingLeft={4}
paddingRight={4}
backgroundColor={
store.active === "copy" ? theme.background.action.primary.focused : overlayTheme.background.default
}
backgroundColor={overlayTheme.background.default}
onMouseUp={() => confirm("copy")}
>
<text fg={store.active === "copy" ? theme.text.action.primary.focused : overlayTheme.text.default}>Copy</text>
<text fg={overlayTheme.text.default}>Copy</text>
</box>
<box
paddingLeft={4}
+7 -5
View File
@@ -45,6 +45,7 @@ export interface DialogSelectProps<T> {
type DialogSelectActionBase<T> = {
command: string
title: string
variant?: "primary" | "destructive"
side?: "left" | "right"
hidden?: boolean
disabled?: boolean | ((option: DialogSelectOption<T> | undefined) => boolean)
@@ -551,18 +552,19 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
const item = action.item
const active = createMemo(() => isActionFocused(item))
const disabled = createMemo(() => isActionDisabled(item))
const variant = () => item.variant ?? "primary"
return (
<box
flexDirection="row"
backgroundColor={active() ? theme.background.action.primary.focused : RGBA.fromInts(0, 0, 0, 0)}
backgroundColor={active() ? theme.background.action[variant()].focused : RGBA.fromInts(0, 0, 0, 0)}
onMouseUp={() => trigger(item)}
>
<text
fg={
disabled()
? theme.text.action.primary.disabled
? theme.text.action[variant()].disabled
: active()
? theme.text.action.primary.focused
? theme.text.action[variant()].focused
: theme.text.default
}
attributes={active() ? TextAttributes.BOLD : undefined}
@@ -572,9 +574,9 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
<text
fg={
disabled()
? theme.text.action.primary.disabled
? theme.text.action[variant()].disabled
: active()
? theme.text.action.primary.focused
? theme.text.action[variant()].focused
: theme.text.subdued
}
>