@kitlangton/ghui 0.1.15 → 0.1.16

package/package.json

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

package/src/App.tsx

@@ -11,6 +11,7 @@ import { formatShortDate, formatTimestamp } from "./date.js"
 import { availableMergeActions, mergeInfoFromPullRequest } from "./mergeActions.js"
 import { Observability } from "./observability.js"
 import { GitHubService } from "./services/GitHubService.js"
+import { loadStoredThemeId, saveStoredThemeId } from "./themeStore.js"
 import { colors, filterThemeDefinitions, setActiveTheme, themeDefinitions, type ThemeId } from "./ui/colors.js"
 import { pullRequestDiffKey, splitPatchFiles, type PullRequestDiffState } from "./ui/diff.js"
 import { DetailBody, DetailHeader, DetailPlaceholder, DetailsPane, getDetailBodyHeight, getDetailHeaderHeight, getDetailJunctionRows, getDetailsPaneHeight, LoadingPane, type DetailPlaceholderContent } from "./ui/DetailsPane.js"
@@ -22,6 +23,7 @@ import { PullRequestDiffPane } from "./ui/PullRequestDiffPane.js"
 import { PullRequestList } from "./ui/PullRequestList.js"
 
 const githubRuntime = Atom.runtime(GitHubService.layer.pipe(Layer.provideMerge(Observability.layer)))
+const initialThemeId = await Effect.runPromise(loadStoredThemeId)
 
 type LoadStatus = "loading" | "ready" | "error"
 
@@ -81,7 +83,7 @@ const pullRequestDiffCacheAtom = Atom.make<Record<string, PullRequestDiffState>>
 
 const labelModalAtom = Atom.make(initialLabelModalState).pipe(Atom.keepAlive)
 const mergeModalAtom = Atom.make(initialMergeModalState).pipe(Atom.keepAlive)
-const themeIdAtom = Atom.make<ThemeId>("ghui").pipe(Atom.keepAlive)
+const themeIdAtom = Atom.make<ThemeId>(initialThemeId).pipe(Atom.keepAlive)
 const themeModalAtom = Atom.make(initialThemeModalState).pipe(Atom.keepAlive)
 const labelCacheAtom = Atom.make<Record<string, readonly PullRequestLabel[]>>({}).pipe(Atom.keepAlive)
 const pullRequestOverridesAtom = Atom.make<Record<string, PullRequestItem>>({}).pipe(Atom.keepAlive)
@@ -574,6 +576,7 @@ export const App = () => {
 		if (!confirm) {
 			setThemeId(themeModal.initialThemeId)
 		} else if (selectedTheme) {
+			void Effect.runPromise(saveStoredThemeId(selectedTheme.id)).catch((error) => flashNotice(errorMessage(error)))
 			flashNotice(`Theme: ${selectedTheme.name}`)
 		}
 		setThemeModal(initialThemeModalState)

package/src/themeStore.ts

@@ -0,0 +1,43 @@
+import { mkdir } from "node:fs/promises"
+import { homedir } from "node:os"
+import { dirname, join } from "node:path"
+import { Effect } from "effect"
+import { isThemeId, type ThemeId } from "./ui/colors.js"
+
+interface StoredConfig {
+	readonly theme?: unknown
+}
+
+const configDirectory = () => {
+	if (process.env.GHUI_CONFIG_DIR) return process.env.GHUI_CONFIG_DIR
+	if (process.env.XDG_CONFIG_HOME) return join(process.env.XDG_CONFIG_HOME, "ghui")
+	if (process.platform === "win32" && process.env.APPDATA) return join(process.env.APPDATA, "ghui")
+	return join(homedir(), ".config", "ghui")
+}
+
+export const configPath = () => join(configDirectory(), "config.json")
+
+const parseConfig = (text: string): StoredConfig => {
+	const value = JSON.parse(text) as unknown
+	return value && typeof value === "object" ? value : {}
+}
+
+export const loadStoredThemeId: Effect.Effect<ThemeId> = Effect.catchCause(Effect.tryPromise(async () => {
+	const file = Bun.file(configPath())
+	if (!(await file.exists())) return "ghui" satisfies ThemeId
+
+	const config = parseConfig(await file.text())
+	return isThemeId(config.theme) ? config.theme : "ghui"
+}), () => Effect.succeed("ghui" satisfies ThemeId))
+
+export const saveStoredThemeId = (theme: ThemeId): Effect.Effect<void> => Effect.tryPromise(async () => {
+	const path = configPath()
+	const file = Bun.file(path)
+	const config = await file.exists()
+		? parseConfig(await file.text())
+		: {}
+	if (config.theme === theme) return
+
+	await mkdir(dirname(path), { recursive: true })
+	await Bun.write(path, `${JSON.stringify({ ...config, theme }, null, "\t")}\n`)
+})

package/src/ui/colors.ts

@@ -588,6 +588,8 @@ export const colors: ColorPalette = { ...ghuiColors }
 
 export const getThemeDefinition = (id: ThemeId) => themeDefinitions.find((theme) => theme.id === id) ?? themeDefinitions[0]!
 
+export const isThemeId = (value: unknown): value is ThemeId => typeof value === "string" && themeDefinitions.some((theme) => theme.id === value)
+
 export const filterThemeDefinitions = (query: string) => {
 	const normalized = query.trim().toLowerCase()
 	if (normalized.length === 0) return themeDefinitions

package/src/ui/modals.tsx

@@ -281,7 +281,7 @@ export const ThemeModal = ({
 	const contentWidth = Math.max(14, innerWidth - 2)
 	const rowWidth = innerWidth
 	const filteredThemes = filterThemeDefinitions(state.query)
-	const maxVisible = Math.max(1, modalHeight - 8)
+	const maxVisible = Math.max(1, modalHeight - 7)
 	const activeIndex = filteredThemes.findIndex((theme) => theme.id === activeThemeId)
 	const selectedIndex = Math.max(0, activeIndex)
 	const selectedTheme = filteredThemes[selectedIndex] ?? themeDefinitions.find((theme) => theme.id === activeThemeId) ?? themeDefinitions[0]!
@@ -293,14 +293,14 @@ export const ThemeModal = ({
 	const countText = `${filteredThemes.length === 0 ? 0 : selectedIndex + 1}/${filteredThemes.length}`
 	const title = "Themes"
 	const headerGap = Math.max(1, contentWidth - title.length - countText.length)
-	const queryText = state.query.length > 0 ? state.query : "type to filter themes"
+	const subtitleText = state.filterMode ? (state.query.length > 0 ? state.query : "type to filter themes") : selectedTheme.description
 	const queryPrefix = "/ "
-	const queryWidth = Math.max(1, contentWidth - queryPrefix.length)
+	const subtitleWidth = Math.max(1, contentWidth - (state.filterMode ? queryPrefix.length : 0))
 	const messageTopRows = Math.max(0, Math.floor((maxVisible - 1) / 2))
 	const messageBottomRows = Math.max(0, maxVisible - messageTopRows - 1)
 
 	return (
-		<ModalFrame left={offsetLeft} top={offsetTop} width={modalWidth} height={modalHeight} junctionRows={[3, modalHeight - 4]}>
+		<ModalFrame left={offsetLeft} top={offsetTop} width={modalWidth} height={modalHeight} junctionRows={[2, modalHeight - 4]}>
 			<box height={1} paddingLeft={1} paddingRight={1}>
 				<TextLine>
 					<span fg={colors.accent} attributes={TextAttributes.BOLD}>{title}</span>
@@ -309,13 +309,14 @@ export const ThemeModal = ({
 				</TextLine>
 			</box>
 			<box height={1} paddingLeft={1} paddingRight={1}>
-				<PlainLine text={fitCell(selectedTheme.description, contentWidth)} fg={colors.muted} />
-			</box>
-			<box height={1} paddingLeft={1} paddingRight={1}>
-				<TextLine>
-					<span fg={colors.count}>{queryPrefix}</span>
-					<span fg={state.query.length > 0 ? colors.text : colors.muted}>{fitCell(queryText, queryWidth)}</span>
-				</TextLine>
+				{state.filterMode ? (
+					<TextLine>
+						<span fg={colors.count}>{queryPrefix}</span>
+						<span fg={state.query.length > 0 ? colors.text : colors.muted}>{fitCell(subtitleText, subtitleWidth)}</span>
+					</TextLine>
+				) : (
+					<PlainLine text={fitCell(subtitleText, subtitleWidth)} fg={colors.muted} />
+				)}
 			</box>
 			<Divider width={innerWidth} />
 			<box height={maxVisible} flexDirection="column">