@kitlangton/ghui 0.1.8 → 0.1.9

package/src/ui/PullRequestDiffPane.tsx

@@ -0,0 +1,148 @@
+import type { ScrollBoxRenderable } from "@opentui/core"
+import { useMemo, type Ref } from "react"
+import type { PullRequestItem } from "../domain.js"
+import { colors } from "./colors.js"
+import { diffStatText, diffSyntaxStyle, patchRenderableLineCount, type PullRequestDiffState } from "./diff.js"
+import { LoadingPane, StatusCard } from "./DetailsPane.js"
+import { Divider, fitCell, PlainLine, TextLine } from "./primitives.js"
+import { shortRepoName } from "./pullRequests.js"
+
+const DiffStats = ({ pullRequest }: { pullRequest: PullRequestItem }) => {
+	if (!pullRequest.detailLoaded) return <span fg={colors.muted}>loading details</span>
+	const files = pullRequest.changedFiles === 1 ? "1 file" : `${pullRequest.changedFiles} files`
+	type Part = { key: string; text: string; color: string }
+	const rawParts: Array<Part | null> = [
+		pullRequest.additions > 0 ? { key: "additions", text: `+${pullRequest.additions}`, color: colors.status.passing } : null,
+		pullRequest.deletions > 0 ? { key: "deletions", text: `-${pullRequest.deletions}`, color: colors.status.failing } : null,
+		{ key: "files", text: files, color: colors.muted },
+	]
+	const parts = rawParts.filter((part): part is Part => part !== null)
+
+	return (
+		<>
+			{parts.map((part, index) => (
+				<span key={part.key} fg={part.color}>{`${index > 0 ? " " : ""}${part.text}`}</span>
+			))}
+		</>
+	)
+}
+
+export const PullRequestDiffPane = ({
+	pullRequest,
+	diffState,
+	fileIndex,
+	view,
+	wrapMode,
+	paneWidth,
+	height,
+	loadingIndicator,
+	scrollRef,
+}: {
+	pullRequest: PullRequestItem | null
+	diffState: PullRequestDiffState | undefined
+	fileIndex: number
+	view: "unified" | "split"
+	wrapMode: "none" | "word"
+	paneWidth: number
+	height: number
+	loadingIndicator: string
+	scrollRef: Ref<ScrollBoxRenderable>
+}) => {
+	const readyFiles = diffState?.status === "ready" ? diffState.files : []
+	const safeIndex = readyFiles.length > 0 ? Math.max(0, Math.min(fileIndex, readyFiles.length - 1)) : 0
+	const file = readyFiles[safeIndex] ?? null
+	const diffHeight = useMemo(
+		() => file ? patchRenderableLineCount(file.patch, view, wrapMode, paneWidth) : 1,
+		[file?.patch, view, wrapMode, paneWidth],
+	)
+
+	if (!pullRequest) {
+		return <LoadingPane content={{ title: "No pull request selected", hint: "Press esc to go back" }} width={paneWidth} height={height} />
+	}
+
+	const stats = diffStatText(pullRequest)
+	const headerWidth = Math.max(24, paneWidth - 2)
+	const leftHeader = `#${pullRequest.number} ${shortRepoName(pullRequest.repository)}`
+	const headerGap = Math.max(2, headerWidth - leftHeader.length - stats.length)
+
+	if (!diffState || diffState.status === "loading") {
+		return (
+			<box height={height} flexDirection="column">
+				<box height={1} paddingLeft={1} paddingRight={1}>
+					<TextLine>
+						<span fg={colors.count}>#{pullRequest.number}</span>
+						<span fg={colors.muted}> {shortRepoName(pullRequest.repository)}</span>
+						<span fg={colors.muted}>{" ".repeat(headerGap)}</span>
+						<DiffStats pullRequest={pullRequest} />
+					</TextLine>
+				</box>
+				<Divider width={paneWidth} />
+				<LoadingPane content={{ title: `${loadingIndicator} Loading diff`, hint: "Fetching patch from GitHub" }} width={paneWidth} height={Math.max(1, height - 2)} />
+			</box>
+		)
+	}
+
+	if (diffState.status === "error") {
+		return (
+			<box height={height} flexDirection="column">
+				<box height={1} paddingLeft={1} paddingRight={1}>
+					<PlainLine text={`#${pullRequest.number} ${shortRepoName(pullRequest.repository)} diff`} fg={colors.count} bold />
+				</box>
+				<Divider width={paneWidth} />
+				<StatusCard content={{ title: "Could not load diff", hint: diffState.error }} width={paneWidth} />
+			</box>
+		)
+	}
+
+	if (readyFiles.length === 0 || !file) {
+		return <LoadingPane content={{ title: "No diff", hint: "This PR has no patch contents" }} width={paneWidth} height={height} />
+	}
+
+	const fileCounter = `${safeIndex + 1}/${readyFiles.length}`
+	const fileNameWidth = Math.max(8, headerWidth - fileCounter.length - 2)
+
+	return (
+		<box height={height} flexDirection="column">
+			<box height={1} paddingLeft={1} paddingRight={1}>
+				<TextLine>
+					<span fg={colors.count}>#{pullRequest.number}</span>
+					<span fg={colors.muted}> {shortRepoName(pullRequest.repository)}</span>
+					<span fg={colors.muted}>{" ".repeat(headerGap)}</span>
+					<DiffStats pullRequest={pullRequest} />
+				</TextLine>
+			</box>
+			<box height={1} paddingLeft={1} paddingRight={1}>
+				<TextLine>
+					<span fg={colors.text}>{fitCell(file.name, fileNameWidth)}</span>
+					<span fg={colors.muted}>  {fileCounter}</span>
+				</TextLine>
+			</box>
+			<Divider width={paneWidth} />
+			<scrollbox ref={scrollRef} focused flexGrow={1} scrollY scrollX={false}>
+				<diff
+					key={`${pullRequest.url}-${safeIndex}-${view}-${wrapMode}`}
+					diff={file.patch}
+					view={view}
+					syncScroll
+					filetype={file.filetype ?? "text"}
+					syntaxStyle={diffSyntaxStyle}
+					showLineNumbers
+					wrapMode={wrapMode}
+					addedBg="#17351f"
+					removedBg="#3a1e22"
+					contextBg="transparent"
+					addedSignColor={colors.status.passing}
+					removedSignColor={colors.status.failing}
+					lineNumberFg={colors.muted}
+					lineNumberBg="#151515"
+					addedLineNumberBg="#12301a"
+					removedLineNumberBg="#35171b"
+					selectionBg={colors.selectedBg}
+					selectionFg={colors.selectedText}
+					height={diffHeight}
+					style={{ flexShrink: 0 }}
+				/>
+			</scrollbox>
+		</box>
+	)
+}

package/src/ui/modals.tsx

@@ -1,5 +1,6 @@
 import { TextAttributes } from "@opentui/core"
-import type { PullRequestLabel, PullRequestMergeAction, PullRequestMergeInfo } from "../domain.js"
+import type { PullRequestLabel, PullRequestMergeInfo } from "../domain.js"
+import { availableMergeActions } from "../mergeActions.js"
 import { colors } from "./colors.js"
 import { centerCell, Divider, fitCell, ModalFrame, PlainLine, TextLine } from "./primitives.js"
 import { labelColor, shortRepoName } from "./pullRequests.js"
@@ -24,13 +25,6 @@ export interface MergeModalState {
 	readonly error: string | null
 }
 
-interface MergeModalOption {
-	readonly action: PullRequestMergeAction
-	readonly title: string
-	readonly description: string
-	readonly danger?: boolean
-}
-
 export const initialLabelModalState: LabelModalState = {
 	open: false,
 	repository: null,
@@ -51,55 +45,6 @@ export const initialMergeModalState: MergeModalState = {
 	error: null,
 }
 
-const isCleanlyMergeable = (info: PullRequestMergeInfo) =>
-	info.state === "open" &&
-	!info.isDraft &&
-	info.mergeable === "mergeable" &&
-	info.reviewStatus !== "changes" &&
-	info.reviewStatus !== "review" &&
-	info.checkStatus !== "pending" &&
-	info.checkStatus !== "failing"
-
-export const mergeModalOptions = (info: PullRequestMergeInfo | null): readonly MergeModalOption[] => {
-	if (!info || info.state !== "open") return []
-	const options: MergeModalOption[] = []
-
-	if (isCleanlyMergeable(info)) {
-		options.push({
-			action: "squash",
-			title: "Squash merge now",
-			description: "Merge this pull request and delete the branch.",
-		})
-	}
-
-	if (!info.autoMergeEnabled && !info.isDraft && info.mergeable !== "conflicting") {
-		options.push({
-			action: "auto",
-			title: "Enable auto-merge",
-			description: "Squash merge automatically after GitHub requirements pass.",
-		})
-	}
-
-	if (info.autoMergeEnabled) {
-		options.push({
-			action: "disable-auto",
-			title: "Disable auto-merge",
-			description: "Cancel the pending GitHub auto-merge request.",
-		})
-	}
-
-	if (!info.isDraft && info.mergeable !== "conflicting") {
-		options.push({
-			action: "admin",
-			title: "Admin override merge",
-			description: "Bypass unmet merge requirements with --admin.",
-			danger: true,
-		})
-	}
-
-	return options
-}
-
 const mergeUnavailableReason = (info: PullRequestMergeInfo | null) => {
 	if (!info) return "Loading merge status from GitHub."
 	if (info.state !== "open") return "This pull request is not open."
@@ -108,13 +53,6 @@ const mergeUnavailableReason = (info: PullRequestMergeInfo | null) => {
 	return "No merge actions are currently available."
 }
 
-export const mergeActionPastTense = (action: PullRequestMergeAction) => {
-	if (action === "auto") return "Enabled auto-merge"
-	if (action === "disable-auto") return "Disabled auto-merge"
-	if (action === "admin") return "Admin merged"
-	return "Merged"
-}
-
 export const LabelModal = ({
 	state,
 	currentLabels,
@@ -134,11 +72,14 @@ export const LabelModal = ({
 }) => {
 	const innerWidth = Math.max(16, modalWidth - 2)
 	const contentWidth = Math.max(14, innerWidth - 2)
+	const rowWidth = innerWidth
 	const currentNames = new Set(currentLabels.map((l) => l.name.toLowerCase()))
 	const filtered = state.availableLabels.filter((label) =>
 		state.query.length === 0 || label.name.toLowerCase().includes(state.query.toLowerCase()),
 	)
-	const maxVisible = Math.max(1, modalHeight - 8)
+	const maxVisible = Math.max(1, modalHeight - 7)
+	const labelMessageTopRows = Math.max(0, Math.floor((maxVisible - 1) / 2))
+	const labelMessageBottomRows = Math.max(0, maxVisible - labelMessageTopRows - 1)
 	const selectedIndex = filtered.length === 0 ? 0 : Math.max(0, Math.min(state.selectedIndex, filtered.length - 1))
 	const scrollStart = Math.min(
 		Math.max(0, filtered.length - maxVisible),
@@ -168,18 +109,26 @@ export const LabelModal = ({
 				</TextLine>
 			</box>
 			<Divider width={innerWidth} />
-			<box flexDirection="column" paddingLeft={1} paddingRight={1}>
+			<box height={maxVisible} flexDirection="column">
 				{state.loading ? (
-					<PlainLine text={centerCell(`${loadingIndicator} Loading labels`, contentWidth)} fg={colors.muted} />
+					<>
+						{Array.from({ length: labelMessageTopRows }, (_, index) => <box key={`top-${index}`} height={1} />)}
+						<PlainLine text={centerCell(`${loadingIndicator} Loading labels`, rowWidth)} fg={colors.muted} />
+						{Array.from({ length: labelMessageBottomRows }, (_, index) => <box key={`bottom-${index}`} height={1} />)}
+					</>
 				) : visibleLabels.length === 0 ? (
-					<PlainLine text={centerCell(state.query.length > 0 ? "No matching labels" : "No labels found", contentWidth)} fg={colors.muted} />
+					<>
+						{Array.from({ length: labelMessageTopRows }, (_, index) => <box key={`top-${index}`} height={1} />)}
+						<PlainLine text={centerCell(state.query.length > 0 ? "No matching labels" : "No labels found", rowWidth)} fg={colors.muted} />
+						{Array.from({ length: labelMessageBottomRows }, (_, index) => <box key={`bottom-${index}`} height={1} />)}
+					</>
 				) : (
 					visibleLabels.map((label, index) => {
 						const actualIndex = scrollStart + index
 						const isActive = currentNames.has(label.name.toLowerCase())
 						const isSelected = actualIndex === selectedIndex
 						const marker = isActive ? "✓" : " "
-						const nameWidth = Math.max(1, contentWidth - 5)
+						const nameWidth = Math.max(1, rowWidth - 5)
 						return (
 							<box key={label.name} height={1}>
 								<TextLine bg={isSelected ? colors.selectedBg : undefined} fg={isSelected ? colors.selectedText : colors.text}>
@@ -193,7 +142,6 @@ export const LabelModal = ({
 					})
 				)}
 			</box>
-			<box flexGrow={1} />
 			<Divider width={innerWidth} />
 			<box height={1} paddingLeft={1} paddingRight={1}>
 				<TextLine>
@@ -225,7 +173,8 @@ export const MergeModal = ({
 }) => {
 	const innerWidth = Math.max(16, modalWidth - 2)
 	const contentWidth = Math.max(14, innerWidth - 2)
-	const options = mergeModalOptions(state.info)
+	const rowWidth = innerWidth
+	const options = availableMergeActions(state.info)
 	const selectedIndex = options.length === 0 ? 0 : Math.max(0, Math.min(state.selectedIndex, options.length - 1))
 	const title = state.info ? `Merge  #${state.info.number}` : state.number ? `Merge  #${state.number}` : "Merge"
 	const rightText = state.running ? "running" : state.loading ? "loading" : state.info?.autoMergeEnabled ? "auto on" : "manual"
@@ -234,8 +183,11 @@ export const MergeModal = ({
 	const statusLine = state.info
 		? `${shortRepoName(state.info.repository)}  ${state.info.mergeable}  ${state.info.reviewStatus}  ${state.info.checkSummary ?? state.info.checkStatus}`
 		: repo ? shortRepoName(repo) : ""
-	const optionRows = Math.max(1, Math.floor((modalHeight - 9) / 2))
+	const optionAreaHeight = Math.max(1, modalHeight - 7)
+	const optionRows = Math.max(1, Math.floor(optionAreaHeight / 2))
 	const visibleOptions = options.slice(0, optionRows)
+	const loadingTopRows = Math.max(0, Math.floor((optionAreaHeight - 1) / 2))
+	const loadingBottomRows = Math.max(0, optionAreaHeight - loadingTopRows - 1)
 
 	return (
 		<ModalFrame left={offsetLeft} top={offsetTop} width={modalWidth} height={modalHeight} junctionRows={[2, modalHeight - 4]}>
@@ -250,19 +202,23 @@ export const MergeModal = ({
 				<PlainLine text={fitCell(statusLine, contentWidth)} fg={colors.muted} />
 			</box>
 			<Divider width={innerWidth} />
-			<box flexDirection="column" paddingLeft={1} paddingRight={1}>
+			<box height={optionAreaHeight} flexDirection="column">
 				{state.loading ? (
-					<PlainLine text={centerCell(`${loadingIndicator} Loading merge status`, contentWidth)} fg={colors.muted} />
+					<>
+						{Array.from({ length: loadingTopRows }, (_, index) => <box key={`top-${index}`} height={1} />)}
+						<PlainLine text={centerCell(`${loadingIndicator} Loading merge status`, rowWidth)} fg={colors.muted} />
+						{Array.from({ length: loadingBottomRows }, (_, index) => <box key={`bottom-${index}`} height={1} />)}
+					</>
 				) : state.error ? (
-					<PlainLine text={centerCell(state.error, contentWidth)} fg={colors.error} />
+					<PlainLine text={centerCell(state.error, rowWidth)} fg={colors.error} />
 				) : visibleOptions.length === 0 ? (
-					<PlainLine text={centerCell(mergeUnavailableReason(state.info), contentWidth)} fg={colors.muted} />
+					<PlainLine text={centerCell(mergeUnavailableReason(state.info), rowWidth)} fg={colors.muted} />
 				) : (
 					visibleOptions.map((option, index) => {
 						const isSelected = index === selectedIndex
 						const titleColor = option.danger ? colors.error : isSelected ? colors.selectedText : colors.text
-						const titleWidth = Math.max(1, contentWidth - 1)
-						const descriptionWidth = Math.max(1, contentWidth - 1)
+						const titleWidth = Math.max(1, rowWidth - 1)
+						const descriptionWidth = Math.max(1, rowWidth - 1)
 
 						return (
 							<box key={option.action} height={2} flexDirection="column">
@@ -277,7 +233,6 @@ export const MergeModal = ({
 					})
 				)}
 			</box>
-			<box flexGrow={1} />
 			<Divider width={innerWidth} />
 			<box height={1} paddingLeft={1} paddingRight={1}>
 				<TextLine>