Skip to content

style: simplify TUI borders — remove redundant nested frames #64

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nazozokc merged 2 commits into from
Jun 29, 2026
Merged

style: simplify TUI borders — remove redundant nested frames #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
211f149
edit
nazozokc Jun 29, 2026
585b4a0
Merge origin/main into AI-agent
nazozokc Jun 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 12 additions & 17 deletions subtrack/src/tui/screens/config.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ import { useState, useMemo, useEffect, useCallback } from "react"
import { useTui, useSetFormActive } from "../context/app-context.tsx"
import { loadConfig, setConfig, CONFIG_KEYS } from "../../config.ts"
import type { ConfigKey } from "../../config.ts"
import { colors, borderStyle } from "../theme.ts"
import { Header } from "../components/header.tsx"

export function ConfigScreen() {
const { dispatch } = useTui()
Expand Down Expand Up @@ -47,21 +45,18 @@ export function ConfigScreen() {
}, [])

return (
<Box flexDirection="column" flexGrow={1}>
<Header>Configuration</Header>
<Box flexDirection="column" flexGrow={1} paddingX={1}>
<Box marginBottom={1}>
<Text bold inverse color="cyan">
{" Configuration "}
</Text>
</Box>

<Box
borderStyle={borderStyle}
borderColor={colors.border}
paddingX={1}
paddingY={1}
flexDirection="column"
flexGrow={1}
>
<Box flexDirection="column">
{CONFIG_KEYS.map((k, i) => (
<Box key={k}>
<Box width={4}>
<Text color={colors.textDim}>{i + 1}.</Text>
<Text dimColor>{i + 1}.</Text>
</Box>
<Box width={20}>
<Text bold>{k}:</Text>
Expand All @@ -74,21 +69,21 @@ export function ConfigScreen() {
onSubmit={(v) => save(k, v)}
/>
) : (
<Text color={colors.textDim}>{String(config[k])}</Text>
<Text dimColor>{String(config[k])}</Text>
)}
</Box>
</Box>
))}
</Box>

{result && (
<Box marginTop={1} borderStyle={borderStyle} borderColor={colors.success} paddingX={1}>
<Text color={colors.success}>{result}</Text>
<Box marginTop={1} borderStyle="round" borderColor="green" paddingX={1}>
<Text color="green">{result}</Text>
</Box>
)}

<Box marginTop={1}>
<Text color={colors.textDim}>
<Text dimColor>
Press a number to edit, Enter to save, Esc to go back
</Text>
</Box>
Expand Down
42 changes: 18 additions & 24 deletions subtrack/src/tui/screens/delete.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ import { useMemo, useState, useEffect } from "react"
import { getSubscription, deleteSubscription } from "../../db.ts"
import { useTui, useSetFormActive } from "../context/app-context.tsx"
import { formatPrice } from "../../price.ts"
import { colors, borderStyle } from "../theme.ts"
import { Header } from "../components/header.tsx"

export function DeleteScreen() {
const { state, dispatch } = useTui()
Expand Down Expand Up @@ -46,66 +44,62 @@ export function DeleteScreen() {
if (!sub) {
return (
<Box flexGrow={1} alignItems="center" justifyContent="center" flexDirection="column">
<Text color={colors.textDim}>Subscription not found</Text>
<Text dimColor>Subscription not found</Text>
</Box>
)
}

return (
<Box flexGrow={1} alignItems="center" justifyContent="center" flexDirection="column">
{error && (
<Box marginBottom={1} borderStyle={borderStyle} borderColor={colors.borderDanger} paddingX={1}>
<Text color={colors.danger}>{error}</Text>
<Box marginBottom={1} borderStyle="round" borderColor="red" paddingX={1}>
<Text color="red">{error}</Text>
</Box>
)}

{/* Warning header */}
<Box marginBottom={1} borderStyle={borderStyle} borderColor={colors.borderDanger} paddingX={2} paddingY={1}>
<Box marginBottom={1} borderStyle="round" borderColor="red" paddingX={2} paddingY={1}>
<Box flexDirection="column" alignItems="center">
<Header danger>Delete Subscription</Header>
<Text color={colors.textDim}>This action cannot be undone</Text>
<Text bold color="red" inverse>
{" Delete Subscription "}
</Text>
<Text dimColor>This action cannot be undone</Text>
</Box>
</Box>

{/* Subscription details */}
<Box
borderStyle={borderStyle}
borderColor={colors.border}
paddingX={2}
paddingY={1}
flexDirection="column"
>
<Box paddingX={2} paddingY={1} flexDirection="column">
<Box>
<Box width={14}><Text color={colors.textDim}>Name:</Text></Box>
<Box width={14}><Text dimColor>Name:</Text></Box>
<Text bold>{sub.name}</Text>
</Box>
<Box>
<Box width={14}><Text color={colors.textDim}>Price:</Text></Box>
<Text bold color={colors.warning}>{formatPrice(sub.price, sub.currency)}</Text>
<Box width={14}><Text dimColor>Price:</Text></Box>
<Text bold color="yellow">{formatPrice(sub.price, sub.currency)}</Text>
</Box>
<Box>
<Box width={14}><Text color={colors.textDim}>Cycle:</Text></Box>
<Box width={14}><Text dimColor>Cycle:</Text></Box>
<Text bold>{sub.cycle}</Text>
</Box>
<Box>
<Box width={14}><Text color={colors.textDim}>Status:</Text></Box>
<Box width={14}><Text dimColor>Status:</Text></Box>
<Text bold>{sub.status}</Text>
</Box>
{sub.tags.length > 0 && (
<Box>
<Box width={14}><Text color={colors.textDim}>Tags:</Text></Box>
<Box width={14}><Text dimColor>Tags:</Text></Box>
<Text bold>{sub.tags.join(", ")}</Text>
</Box>
)}
</Box>

{/* Confirmation */}
<Box marginTop={1} paddingX={2} paddingY={1} borderStyle={borderStyle} borderColor={colors.warning}>
<Box marginTop={1} paddingX={2} paddingY={1} borderStyle="round" borderColor="yellow">
<Text>
Are you sure?{" "}
<Text bold color={colors.success} inverse> y </Text>
<Text bold color="green" inverse> y </Text>
{" to delete "}
<Text bold color={colors.danger} inverse> n </Text>
<Text bold color="red" inverse> n </Text>
{" to cancel"}
</Text>
</Box>
Expand Down
Loading
Loading