@kitlangton/ghui 0.1.12 → 0.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@kitlangton/ghui",
-	"version": "0.1.12",
+	"version": "0.1.14",
 	"description": "Terminal UI for GitHub pull requests",
 	"type": "module",
 	"license": "MIT",

package/src/App.tsx

@@ -198,7 +198,7 @@ const copyPullRequestMetadata = async (pullRequest: PullRequestItem) => {
 
 const isShiftG = (key: { readonly name: string; readonly shift?: boolean }) => key.name === "G" || key.name === "g" && key.shift
 
-const isShiftT = (key: { readonly name: string; readonly shift?: boolean }) => key.name === "T" || key.name === "t" && key.shift
+const isThemeKey = (key: { readonly name: string; readonly ctrl?: boolean; readonly meta?: boolean }) => !key.ctrl && !key.meta && key.name.toLowerCase() === "t"
 
 const getDetailPlaceholderContent = ({
 	status,
@@ -278,8 +278,10 @@ export const App = () => {
 	const getPullRequestDiff = useAtomSet(getPullRequestDiffAtom, { mode: "promise" })
 	const getPullRequestMergeInfo = useAtomSet(getPullRequestMergeInfoAtom, { mode: "promise" })
 	const mergePullRequest = useAtomSet(mergePullRequestAtom, { mode: "promise" })
-	const contentWidth = Math.max(60, width ?? 100)
-	const isWideLayout = (width ?? 100) >= 100
+	const terminalWidth = width ?? 100
+	const terminalHeight = height ?? 24
+	const contentWidth = Math.max(1, terminalWidth)
+	const isWideLayout = terminalWidth >= 100
 	const splitGap = 1
 	const sectionPadding = 1
 	const leftPaneWidth = isWideLayout ? Math.max(44, Math.floor((contentWidth - splitGap) * 0.56)) : contentWidth
@@ -287,8 +289,8 @@ export const App = () => {
 	const dividerJunctionAt = Math.max(1, leftPaneWidth)
 	const leftContentWidth = isWideLayout ? Math.max(24, leftPaneWidth - 3) : Math.max(24, contentWidth - sectionPadding * 2)
 	const rightContentWidth = isWideLayout ? Math.max(24, rightPaneWidth - sectionPadding * 2) : Math.max(24, contentWidth - sectionPadding * 2)
-	const wideDetailLines = Math.max(8, (height ?? 24) - 8) // fill available vertical space
-	const wideBodyHeight = Math.max(8, (height ?? 24) - 4)
+	const wideDetailLines = Math.max(8, terminalHeight - 8) // fill available vertical space
+	const wideBodyHeight = Math.max(8, terminalHeight - 4)
 	const noticeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 	const pendingGTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 	const diffPrefetchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
@@ -557,13 +559,12 @@ export const App = () => {
 		setMergeModal(initialMergeModalState)
 		setThemeModal({
 			open: true,
-			selectedIndex: Math.max(0, themeDefinitions.findIndex((theme) => theme.id === themeId)),
 			initialThemeId: themeId,
 		})
 	}
 
 	const closeThemeModal = (confirm: boolean) => {
-		const selectedTheme = themeDefinitions[themeModal.selectedIndex]
+		const selectedTheme = themeDefinitions.find((theme) => theme.id === themeId)
 		if (!confirm) {
 			setThemeId(themeModal.initialThemeId)
 		} else if (selectedTheme) {
@@ -573,11 +574,11 @@ export const App = () => {
 	}
 
 	const moveThemeSelection = (delta: number) => {
-		const selectedIndex = Math.max(0, Math.min(themeDefinitions.length - 1, themeModal.selectedIndex + delta))
-		if (selectedIndex === themeModal.selectedIndex) return
+		const currentIndex = Math.max(0, themeDefinitions.findIndex((theme) => theme.id === themeId))
+		const selectedIndex = Math.max(0, Math.min(themeDefinitions.length - 1, currentIndex + delta))
+		if (selectedIndex === currentIndex) return
 		const theme = themeDefinitions[selectedIndex]
 		if (theme && theme.id !== themeId) setThemeId(theme.id)
-		setThemeModal((current) => ({ ...current, selectedIndex }))
 	}
 
 	const openLabelModal = () => {
@@ -1032,7 +1033,7 @@ export const App = () => {
 			}
 		}
 
-		if (isShiftT(key)) {
+		if (isThemeKey(key)) {
 			openThemeModal()
 			return
 		}
@@ -1183,7 +1184,7 @@ export const App = () => {
 	})
 
 	const fullscreenContentWidth = Math.max(24, contentWidth - 2)
-	const fullscreenBodyLines = Math.max(8, (height ?? 24) - 8)
+	const fullscreenBodyLines = Math.max(8, terminalHeight - 8)
 	const wideFullscreenDetailScrollable = getDetailsPaneHeight({
 		pullRequest: selectedPullRequest,
 		contentWidth: fullscreenContentWidth,
@@ -1214,20 +1215,20 @@ export const App = () => {
 
 	const longestLabelName = labelModal.availableLabels.reduce((max, label) => Math.max(max, label.name.length), 0)
 	const labelModalWidth = Math.min(Math.max(42, longestLabelName + 16), 56, contentWidth - 4)
-	const labelModalHeight = Math.min(20, (height ?? 24) - 4)
+	const labelModalHeight = Math.min(20, terminalHeight - 4)
 	const labelModalLeft = Math.floor((contentWidth - labelModalWidth) / 2)
-	const labelModalTop = Math.floor(((height ?? 24) - labelModalHeight) / 2)
+	const labelModalTop = Math.floor((terminalHeight - labelModalHeight) / 2)
 	const mergeModalWidth = Math.min(68, Math.max(46, contentWidth - 12))
-	const mergeModalHeight = Math.min(16, (height ?? 24) - 4)
+	const mergeModalHeight = Math.min(16, terminalHeight - 4)
 	const mergeModalLeft = Math.floor((contentWidth - mergeModalWidth) / 2)
-	const mergeModalTop = Math.floor(((height ?? 24) - mergeModalHeight) / 2)
+	const mergeModalTop = Math.floor((terminalHeight - mergeModalHeight) / 2)
 	const themeModalWidth = Math.min(58, Math.max(38, contentWidth - 12))
-	const themeModalHeight = Math.min(10, (height ?? 24) - 4)
+	const themeModalHeight = Math.min(16, terminalHeight - 4)
 	const themeModalLeft = Math.floor((contentWidth - themeModalWidth) / 2)
-	const themeModalTop = Math.floor(((height ?? 24) - themeModalHeight) / 2)
+	const themeModalTop = Math.floor((terminalHeight - themeModalHeight) / 2)
 
 	return (
-		<box flexGrow={1} flexDirection="column" backgroundColor={colors.background}>
+		<box width={terminalWidth} height={terminalHeight} flexDirection="column" backgroundColor={colors.background}>
 			<box paddingLeft={1} paddingRight={1} flexDirection="column" backgroundColor={colors.panel}>
 				<PlainLine text={headerLine} fg={colors.muted} bold />
 			</box>
@@ -1262,6 +1263,7 @@ export const App = () => {
 							showChecks
 							placeholderContent={detailPlaceholderContent}
 							loadingIndicator={loadingIndicator}
+							themeId={themeId}
 						/>
 					</scrollbox>
 				</box>
@@ -1278,7 +1280,7 @@ export const App = () => {
 							<>
 								<DetailHeader pullRequest={selectedPullRequest} contentWidth={rightContentWidth} paneWidth={rightPaneWidth} showChecks />
 								<scrollbox flexGrow={1} verticalScrollbarOptions={{ visible: wideDetailBodyScrollable }}>
-									<DetailBody pullRequest={selectedPullRequest} contentWidth={rightContentWidth} bodyLines={wideDetailLines} loadingIndicator={loadingIndicator} />
+									<DetailBody pullRequest={selectedPullRequest} contentWidth={rightContentWidth} bodyLines={wideDetailLines} loadingIndicator={loadingIndicator} themeId={themeId} />
 								</scrollbox>
 							</>
 						) : (
@@ -1296,12 +1298,13 @@ export const App = () => {
 							paneWidth={contentWidth}
 							placeholderContent={detailPlaceholderContent}
 							loadingIndicator={loadingIndicator}
+							themeId={themeId}
 						/>
 					</scrollbox>
 				</box>
 			) : (
-				<>
-					<DetailsPane pullRequest={selectedPullRequest} contentWidth={rightContentWidth} paneWidth={contentWidth} placeholderContent={detailPlaceholderContent} loadingIndicator={loadingIndicator} />
+				<box height={wideBodyHeight} flexDirection="column">
+					<DetailsPane pullRequest={selectedPullRequest} contentWidth={rightContentWidth} paneWidth={contentWidth} placeholderContent={detailPlaceholderContent} loadingIndicator={loadingIndicator} themeId={themeId} />
 					<Divider width={contentWidth} />
 					<box flexGrow={1} flexDirection="column">
 						<scrollbox flexGrow={1}>
@@ -1310,7 +1313,7 @@ export const App = () => {
 							</box>
 						</scrollbox>
 					</box>
-				</>
+				</box>
 			)}
 
 			{isWideLayout && !detailFullView && !diffFullView && !isInitialLoading ? (
@@ -1318,7 +1321,7 @@ export const App = () => {
 			) : (
 				<Divider width={contentWidth} />
 			)}
-			<box paddingLeft={1} paddingRight={1} backgroundColor={colors.panel}>
+			<box paddingLeft={1} paddingRight={1} backgroundColor={colors.footer}>
 				{footerNotice ? (
 					<PlainLine text={footerNotice} fg={colors.count} />
 				) : (

package/src/ui/DetailsPane.tsx

@@ -2,7 +2,7 @@ import { TextAttributes } from "@opentui/core"
 import { Fragment, useMemo } from "react"
 import { formatRelativeDate } from "../date.js"
 import type { CheckItem, PullRequestItem } from "../domain.js"
-import { colors } from "./colors.js"
+import { colors, type ThemeId } from "./colors.js"
 import { diffStatText } from "./diff.js"
 import { centerCell, Divider, fitCell, PlainLine, TextLine } from "./primitives.js"
 import { labelColor, labelTextColor, reviewLabel, shortRepoName, statusColor } from "./pullRequests.js"
@@ -387,15 +387,17 @@ export const DetailBody = ({
 	contentWidth,
 	bodyLines = DETAIL_BODY_LINES,
 	loadingIndicator,
+	themeId,
 }: {
 	pullRequest: PullRequestItem
 	contentWidth: number
 	bodyLines?: number
 	loadingIndicator: string
+	themeId: ThemeId
 }) => {
 	const previewLines = useMemo(
 		() => bodyPreview(pullRequest.body, contentWidth, bodyLines),
-		[pullRequest.body, contentWidth, bodyLines],
+		[pullRequest.body, contentWidth, bodyLines, themeId],
 	)
 
 	if (!pullRequest.detailLoaded) {
@@ -486,6 +488,7 @@ export const DetailsPane = ({
 	showChecks = false,
 	placeholderContent,
 	loadingIndicator,
+	themeId,
 }: {
 	pullRequest: PullRequestItem | null
 	contentWidth: number
@@ -494,6 +497,7 @@ export const DetailsPane = ({
 	showChecks?: boolean
 	placeholderContent: DetailPlaceholderContent
 	loadingIndicator: string
+	themeId: ThemeId
 }) => {
 	const contentHeight = getDetailsPaneHeight({ pullRequest, contentWidth, bodyLines, paneWidth, showChecks })
 
@@ -502,7 +506,7 @@ export const DetailsPane = ({
 			{pullRequest ? (
 				<>
 					<DetailHeader pullRequest={pullRequest} contentWidth={contentWidth} paneWidth={paneWidth} showChecks={showChecks} />
-					<DetailBody pullRequest={pullRequest} contentWidth={contentWidth} bodyLines={bodyLines} loadingIndicator={loadingIndicator} />
+					<DetailBody pullRequest={pullRequest} contentWidth={contentWidth} bodyLines={bodyLines} loadingIndicator={loadingIndicator} themeId={themeId} />
 				</>
 			) : (
 				<>

package/src/ui/FooterHints.tsx

@@ -86,7 +86,7 @@ export const FooterHints = ({
 		<TextLine>
 			<span fg={colors.count}>/</span>
 			<span fg={colors.muted}> filter  </span>
-			<span fg={colors.count}>T</span>
+			<span fg={colors.count}>t</span>
 			<span fg={colors.muted}> theme  </span>
 			{showFilterClear ? (
 				<>

package/src/ui/colors.ts

@@ -1,8 +1,9 @@
-export type ThemeId = "ghui" | "tokyo-night" | "opencode"
+export type ThemeId = "ghui" | "tokyo-night" | "catppuccin" | "rose-pine" | "gruvbox" | "nord" | "dracula" | "opencode"
 
 export interface ColorPalette {
 	readonly background: string
 	readonly panel: string
+	readonly footer: string
 	readonly modalBackground: string
 	readonly text: string
 	readonly muted: string
@@ -50,6 +51,7 @@ export interface ThemeDefinition {
 const ghuiColors: ColorPalette = {
 	background: "#111018",
 	panel: "#161923",
+	footer: "#1d2430",
 	modalBackground: "#1a1a2e",
 	text: "#ede7da",
 	muted: "#9f9788",
@@ -90,6 +92,7 @@ const ghuiColors: ColorPalette = {
 const tokyoNightColors: ColorPalette = {
 	background: "#1a1b26",
 	panel: "#16161e",
+	footer: "#24283b",
 	modalBackground: "#24283b",
 	text: "#c0caf5",
 	muted: "#787c99",
@@ -130,6 +133,7 @@ const tokyoNightColors: ColorPalette = {
 const opencodeColors: ColorPalette = {
 	background: "#0a0a0a",
 	panel: "#141414",
+	footer: "#1e1e1e",
 	modalBackground: "#1e1e1e",
 	text: "#eeeeee",
 	muted: "#808080",
@@ -167,9 +171,219 @@ const opencodeColors: ColorPalette = {
 	},
 }
 
+const catppuccinColors: ColorPalette = {
+	background: "#1e1e2e",
+	panel: "#181825",
+	footer: "#313244",
+	modalBackground: "#313244",
+	text: "#cdd6f4",
+	muted: "#7f849c",
+	separator: "#45475a",
+	accent: "#cba6f7",
+	inlineCode: "#f5c2e7",
+	error: "#f38ba8",
+	selectedBg: "#45475a",
+	selectedText: "#f5e0dc",
+	count: "#fab387",
+	status: {
+		draft: "#f9e2af",
+		approved: "#a6e3a1",
+		changes: "#f38ba8",
+		review: "#89b4fa",
+		none: "#7f849c",
+		passing: "#a6e3a1",
+		pending: "#f9e2af",
+		failing: "#f38ba8",
+	},
+	repos: {
+		opencode: "#89b4fa",
+		"effect-smol": "#a6e3a1",
+		"opencode-console": "#f5c2e7",
+		opencontrol: "#fab387",
+		default: "#74c7ec",
+	},
+	diff: {
+		addedBg: "#243927",
+		removedBg: "#3b2532",
+		contextBg: "transparent",
+		lineNumberBg: "#181825",
+		addedLineNumberBg: "#203524",
+		removedLineNumberBg: "#36232f",
+	},
+}
+
+const rosePineColors: ColorPalette = {
+	background: "#191724",
+	panel: "#1f1d2e",
+	footer: "#26233a",
+	modalBackground: "#26233a",
+	text: "#e0def4",
+	muted: "#908caa",
+	separator: "#524f67",
+	accent: "#c4a7e7",
+	inlineCode: "#f6c177",
+	error: "#eb6f92",
+	selectedBg: "#403d52",
+	selectedText: "#f6f1ff",
+	count: "#ebbcba",
+	status: {
+		draft: "#f6c177",
+		approved: "#9ccfd8",
+		changes: "#eb6f92",
+		review: "#31748f",
+		none: "#908caa",
+		passing: "#9ccfd8",
+		pending: "#f6c177",
+		failing: "#eb6f92",
+	},
+	repos: {
+		opencode: "#31748f",
+		"effect-smol": "#9ccfd8",
+		"opencode-console": "#c4a7e7",
+		opencontrol: "#f6c177",
+		default: "#ebbcba",
+	},
+	diff: {
+		addedBg: "#23343a",
+		removedBg: "#3a2534",
+		contextBg: "transparent",
+		lineNumberBg: "#1f1d2e",
+		addedLineNumberBg: "#203137",
+		removedLineNumberBg: "#352330",
+	},
+}
+
+const gruvboxColors: ColorPalette = {
+	background: "#282828",
+	panel: "#1d2021",
+	footer: "#3c3836",
+	modalBackground: "#3c3836",
+	text: "#ebdbb2",
+	muted: "#928374",
+	separator: "#665c54",
+	accent: "#fabd2f",
+	inlineCode: "#d3869b",
+	error: "#fb4934",
+	selectedBg: "#504945",
+	selectedText: "#fbf1c7",
+	count: "#fe8019",
+	status: {
+		draft: "#fabd2f",
+		approved: "#b8bb26",
+		changes: "#fb4934",
+		review: "#83a598",
+		none: "#928374",
+		passing: "#b8bb26",
+		pending: "#fabd2f",
+		failing: "#fb4934",
+	},
+	repos: {
+		opencode: "#83a598",
+		"effect-smol": "#b8bb26",
+		"opencode-console": "#d3869b",
+		opencontrol: "#fe8019",
+		default: "#8ec07c",
+	},
+	diff: {
+		addedBg: "#32361f",
+		removedBg: "#3c2927",
+		contextBg: "transparent",
+		lineNumberBg: "#1d2021",
+		addedLineNumberBg: "#2f331e",
+		removedLineNumberBg: "#382726",
+	},
+}
+
+const nordColors: ColorPalette = {
+	background: "#2e3440",
+	panel: "#242933",
+	footer: "#3b4252",
+	modalBackground: "#3b4252",
+	text: "#eceff4",
+	muted: "#8892a7",
+	separator: "#4c566a",
+	accent: "#88c0d0",
+	inlineCode: "#b48ead",
+	error: "#bf616a",
+	selectedBg: "#434c5e",
+	selectedText: "#eceff4",
+	count: "#ebcb8b",
+	status: {
+		draft: "#ebcb8b",
+		approved: "#a3be8c",
+		changes: "#bf616a",
+		review: "#81a1c1",
+		none: "#8892a7",
+		passing: "#a3be8c",
+		pending: "#ebcb8b",
+		failing: "#bf616a",
+	},
+	repos: {
+		opencode: "#81a1c1",
+		"effect-smol": "#a3be8c",
+		"opencode-console": "#b48ead",
+		opencontrol: "#d08770",
+		default: "#88c0d0",
+	},
+	diff: {
+		addedBg: "#334033",
+		removedBg: "#433238",
+		contextBg: "transparent",
+		lineNumberBg: "#242933",
+		addedLineNumberBg: "#303d31",
+		removedLineNumberBg: "#3f3036",
+	},
+}
+
+const draculaColors: ColorPalette = {
+	background: "#282a36",
+	panel: "#21222c",
+	footer: "#343746",
+	modalBackground: "#343746",
+	text: "#f8f8f2",
+	muted: "#8f94b8",
+	separator: "#4f5268",
+	accent: "#bd93f9",
+	inlineCode: "#ff79c6",
+	error: "#ff5555",
+	selectedBg: "#44475a",
+	selectedText: "#f8f8f2",
+	count: "#ffb86c",
+	status: {
+		draft: "#f1fa8c",
+		approved: "#50fa7b",
+		changes: "#ff5555",
+		review: "#8be9fd",
+		none: "#8f94b8",
+		passing: "#50fa7b",
+		pending: "#f1fa8c",
+		failing: "#ff5555",
+	},
+	repos: {
+		opencode: "#8be9fd",
+		"effect-smol": "#50fa7b",
+		"opencode-console": "#ff79c6",
+		opencontrol: "#ffb86c",
+		default: "#bd93f9",
+	},
+	diff: {
+		addedBg: "#203a29",
+		removedBg: "#43272f",
+		contextBg: "transparent",
+		lineNumberBg: "#21222c",
+		addedLineNumberBg: "#1d3627",
+		removedLineNumberBg: "#3d252c",
+	},
+}
+
 export const themeDefinitions: readonly ThemeDefinition[] = [
 	{ id: "ghui", name: "GHUI", description: "Warm parchment accents on a deep slate background", colors: ghuiColors },
 	{ id: "tokyo-night", name: "Tokyo Night", description: "Cool indigo surfaces with neon editor accents", colors: tokyoNightColors },
+	{ id: "catppuccin", name: "Catppuccin", description: "Mocha lavender, peach, and soft pastel contrast", colors: catppuccinColors },
+	{ id: "rose-pine", name: "Rose Pine", description: "Muted rose, pine, and gold on dusky violet", colors: rosePineColors },
+	{ id: "gruvbox", name: "Gruvbox", description: "Retro warm earth tones with punchy semantic accents", colors: gruvboxColors },
+	{ id: "nord", name: "Nord", description: "Arctic blue-gray surfaces with frosty accents", colors: nordColors },
+	{ id: "dracula", name: "Dracula", description: "High-contrast purple, pink, cyan, and green", colors: draculaColors },
 	{ id: "opencode", name: "OpenCode", description: "Charcoal panels with peach, violet, and blue highlights", colors: opencodeColors },
 ] as const
 
@@ -180,6 +394,7 @@ export const colors: ColorPalette = { ...ghuiColors }
 export const getThemeDefinition = (id: ThemeId) => themeDefinitions.find((theme) => theme.id === id) ?? themeDefinitions[0]!
 
 export const setActiveTheme = (id: ThemeId) => {
+	if (activeTheme.id === id) return
 	activeTheme = getThemeDefinition(id)
 	Object.assign(colors, activeTheme.colors)
 }

package/src/ui/modals.tsx

@@ -27,7 +27,6 @@ export interface MergeModalState {
 
 export interface ThemeModalState {
 	readonly open: boolean
-	readonly selectedIndex: number
 	readonly initialThemeId: ThemeId
 }
 
@@ -53,7 +52,6 @@ export const initialMergeModalState: MergeModalState = {
 
 export const initialThemeModalState: ThemeModalState = {
 	open: false,
-	selectedIndex: 0,
 	initialThemeId: "ghui",
 }
 
@@ -279,7 +277,8 @@ export const ThemeModal = ({
 	const contentWidth = Math.max(14, innerWidth - 2)
 	const rowWidth = innerWidth
 	const maxVisible = Math.max(1, modalHeight - 7)
-	const selectedIndex = Math.max(0, Math.min(state.selectedIndex, themeDefinitions.length - 1))
+	const activeIndex = themeDefinitions.findIndex((theme) => theme.id === activeThemeId)
+	const selectedIndex = Math.max(0, activeIndex)
 	const selectedTheme = themeDefinitions[selectedIndex]!
 	const scrollStart = Math.min(
 		Math.max(0, themeDefinitions.length - maxVisible),