@kitlangton/ghui 0.1.18 → 0.1.20

package/src/ui/primitives.tsx

@@ -29,8 +29,8 @@ export const PlainLine = ({ text, fg = colors.text, bold = false }: { text: stri
 	</box>
 )
 
-export const TextLine = ({ children, fg = colors.text, bg }: { children: React.ReactNode; fg?: string; bg?: string | undefined }) => (
-	<box height={1}>
+export const TextLine = ({ children, fg = colors.text, bg, width }: { children: React.ReactNode; fg?: string; bg?: string | undefined; width?: number }) => (
+	<box height={1} {...(width === undefined ? {} : { width })}>
 		{bg ? (
 			<text wrapMode="none" truncate fg={fg} bg={bg}>
 				{children}
@@ -51,6 +51,13 @@ export const SectionTitle = ({ title }: { title: string }) => (
 	</TextLine>
 )
 
+export const Filler = ({ rows, prefix }: { rows: number; prefix: string }) =>
+	<>{Array.from({ length: rows }, (_, index) => <box key={`${prefix}-${index}`} height={1} />)}</>
+
+export const PaddedRow = ({ children, backgroundColor }: { children: React.ReactNode; backgroundColor?: string }) => (
+	<box height={1} paddingLeft={1} paddingRight={1} {...(backgroundColor ? { backgroundColor } : {})}>{children}</box>
+)
+
 export const Divider = ({ width, junctionAt, junctionChar }: { width: number; junctionAt?: number; junctionChar?: string }) => {
 	if (junctionAt === undefined || junctionChar === undefined || junctionAt < 0 || junctionAt >= width) {
 		return <PlainLine text={"─".repeat(Math.max(1, width))} fg={colors.separator} />
@@ -70,6 +77,89 @@ export const SeparatorColumn = ({ height, junctionRows }: { height: number; junc
 	)
 }
 
+export type StandardModalDims = {
+	readonly innerWidth: number
+	readonly contentWidth: number
+	readonly bodyHeight: number
+	readonly rowWidth: number
+}
+
+export const standardModalDims = (modalWidth: number, modalHeight: number): StandardModalDims => {
+	const innerWidth = Math.max(16, modalWidth - 2)
+	const contentWidth = Math.max(14, innerWidth - 2)
+	const bodyHeight = Math.max(1, modalHeight - 7)
+	return { innerWidth, contentWidth, bodyHeight, rowWidth: innerWidth }
+}
+
+export type HintItem = {
+	readonly key: string
+	readonly label: string
+	readonly when?: boolean
+	readonly keyFg?: string
+}
+
+export const HintRow = ({ items }: { items: readonly HintItem[] }) => {
+	const visible = items.filter((item) => item.when !== false)
+	return (
+		<TextLine>
+			{visible.flatMap((item, index) => [
+				<span key={`k${index}`} fg={item.keyFg ?? colors.count}>{item.key}</span>,
+				<span key={`l${index}`} fg={colors.muted}>{` ${item.label}${index < visible.length - 1 ? "  " : ""}`}</span>,
+			])}
+		</TextLine>
+	)
+}
+
+export const StandardModal = ({
+	left,
+	top,
+	width,
+	height,
+	title,
+	titleFg = colors.accent,
+	headerRight,
+	subtitle,
+	footer,
+	bodyPadding = 0,
+	children,
+}: {
+	left: number
+	top: number
+	width: number
+	height: number
+	title: string
+	titleFg?: string
+	headerRight?: { readonly text: string; readonly pending?: boolean }
+	subtitle: React.ReactNode
+	footer: React.ReactNode
+	bodyPadding?: number
+	children: React.ReactNode
+}) => {
+	const { innerWidth, contentWidth, bodyHeight } = standardModalDims(width, height)
+	const rightText = headerRight?.text ?? ""
+	const headerGap = Math.max(1, contentWidth - title.length - rightText.length)
+	return (
+		<ModalFrame left={left} top={top} width={width} height={height} junctionRows={[2, height - 4]}>
+			<PaddedRow>
+				<TextLine>
+					<span fg={titleFg} attributes={TextAttributes.BOLD}>{title}</span>
+					{headerRight ? (
+						<>
+							<span fg={colors.muted}>{" ".repeat(headerGap)}</span>
+							<span fg={headerRight.pending ? colors.status.pending : colors.muted}>{headerRight.text}</span>
+						</>
+					) : null}
+				</TextLine>
+			</PaddedRow>
+			<PaddedRow>{subtitle}</PaddedRow>
+			<Divider width={innerWidth} />
+			<box height={bodyHeight} flexDirection="column" paddingLeft={bodyPadding} paddingRight={bodyPadding}>{children}</box>
+			<Divider width={innerWidth} />
+			<PaddedRow>{footer}</PaddedRow>
+		</ModalFrame>
+	)
+}
+
 export const ModalFrame = ({
 	children,
 	left,

package/src/ui/pullRequests.ts

@@ -1,31 +1,63 @@
-import type { PullRequestItem, PullRequestLabel } from "../domain.js"
+import type { PullRequestItem, PullRequestLabel, ReviewStatus } from "../domain.js"
 import { colors } from "./colors.js"
 
 export const shortRepoName = (repository: string) => repository.split("/")[1] ?? repository
 
 export const repoColor = (repository: string) => colors.repos[shortRepoName(repository) as keyof typeof colors.repos] ?? colors.repos.default
 
-export const reviewLabel = (pullRequest: PullRequestItem) => {
-	if (pullRequest.reviewStatus === "draft") return "draft"
-	if (pullRequest.reviewStatus === "approved") return "approved"
-	if (pullRequest.reviewStatus === "changes") return "changes"
-	if (pullRequest.reviewStatus === "review") return "review"
-	return null
+const REVIEW_LABEL: Partial<Record<ReviewStatus, string>> = {
+	draft: "draft",
+	approved: "approved",
+	changes: "changes",
+	review: "review",
 }
 
+export const reviewLabel = (pullRequest: PullRequestItem) => REVIEW_LABEL[pullRequest.reviewStatus] ?? null
+
 export const checkLabel = (pullRequest: PullRequestItem) => pullRequest.checkSummary
 
 export const statusColor = (status: PullRequestItem["reviewStatus"] | PullRequestItem["checkStatus"]) => colors.status[status]
 
+const REVIEW_ICON: Record<ReviewStatus, string> = {
+	draft: "◌",
+	approved: "✓",
+	changes: "!",
+	review: "◐",
+	none: "·",
+}
+
 export const reviewIcon = (pullRequest: PullRequestItem) => {
 	if (pullRequest.state === "merged") return "✓"
 	if (pullRequest.state === "closed") return "×"
 	if (pullRequest.autoMergeEnabled) return "↻"
-	if (pullRequest.reviewStatus === "draft") return "◌"
-	if (pullRequest.reviewStatus === "approved") return "✓"
-	if (pullRequest.reviewStatus === "changes") return "!"
-	if (pullRequest.reviewStatus === "review") return "◐"
-	return "·"
+	return REVIEW_ICON[pullRequest.reviewStatus]
+}
+
+export interface PullRequestRowDisplay {
+	readonly indicatorFg: string
+	readonly rowFg: string
+	readonly numberFg: string
+	readonly checkFg: string
+	readonly checkText: string
+}
+
+export const pullRequestRowDisplay = (pullRequest: PullRequestItem, selected: boolean): PullRequestRowDisplay => {
+	const isMerged = pullRequest.state === "merged"
+	const isClosed = pullRequest.state === "closed"
+	const isFinal = isMerged || isClosed
+	const indicatorFg = isMerged ? colors.status.passing
+		: isClosed ? colors.muted
+		: pullRequest.autoMergeEnabled ? colors.accent
+		: statusColor(pullRequest.reviewStatus)
+	const checkFg = isMerged ? colors.status.passing : isClosed ? colors.muted : statusColor(pullRequest.checkStatus)
+	const checkText = isMerged ? "merged" : isClosed ? "closed" : pullRequest.checkSummary?.replace(/^checks\s+/, "") ?? ""
+	return {
+		indicatorFg,
+		rowFg: selected ? colors.selectedText : isFinal ? colors.muted : colors.text,
+		numberFg: selected ? colors.accent : isFinal ? colors.muted : colors.count,
+		checkFg,
+		checkText,
+	}
 }
 
 const fallbackLabelColor = (name: string) => {

package/src/ui/singleLineInput.ts

@@ -0,0 +1,25 @@
+export interface SingleLineInputKey {
+	readonly name: string
+	readonly sequence: string
+	readonly ctrl?: boolean
+	readonly meta?: boolean
+}
+
+export const deleteLastWord = (value: string) => value.replace(/\s*\S+\s*$/, "")
+
+export const singleLineText = (text: string) => text.replace(/[\r\n]+/g, " ")
+
+export const printableKeyText = (key: Pick<SingleLineInputKey, "ctrl" | "meta" | "sequence">) => {
+	if (key.ctrl || key.meta || key.sequence.length === 0) return null
+	return /^[^\x00-\x1f\x7f]+$/.test(key.sequence) ? key.sequence : null
+}
+
+export const editSingleLineInput = (value: string, key: SingleLineInputKey) => {
+	if (key.ctrl && key.name === "u") return ""
+	if (key.ctrl && key.name === "w") return deleteLastWord(value)
+	if (key.name === "backspace") return value.slice(0, -1)
+	const text = printableKeyText(key)
+	return text ? value + text : null
+}
+
+export const isSingleLineInputKey = (key: SingleLineInputKey) => editSingleLineInput("", key) !== null