@kitlangton/ghui 0.1.19 → 0.1.21

package/src/ui/FooterHints.tsx

@@ -1,6 +1,6 @@
 import { Data } from "effect"
 import { colors } from "./colors.js"
-import { TextLine } from "./primitives.js"
+import { HintRow, type HintItem } from "./primitives.js"
 
 export type RetryProgress = Data.TaggedEnum<{
 	Idle: {}
@@ -10,185 +10,90 @@ export type RetryProgress = Data.TaggedEnum<{
 export const RetryProgress = Data.taggedEnum<RetryProgress>()
 export const initialRetryProgress: RetryProgress = RetryProgress.Idle()
 
-export const FooterHints = ({
-	filterEditing,
-	showFilterClear,
-	detailFullView,
-	diffFullView,
-	diffCommentMode,
-	hasSelection,
-	canCloseSelection,
-	hasError,
-	isLoading,
-	loadingIndicator,
-	retryProgress,
-}: {
-	filterEditing: boolean
-	showFilterClear: boolean
-	detailFullView: boolean
-	diffFullView: boolean
-	diffCommentMode: boolean
-	hasSelection: boolean
-	canCloseSelection: boolean
-	hasError: boolean
-	isLoading: boolean
-	loadingIndicator: string
-	retryProgress: RetryProgress
-}) => {
-	if (filterEditing) {
-		return (
-			<TextLine>
-				<span fg={colors.count}>search</span>
-				<span fg={colors.muted}> typing  </span>
-				<span fg={colors.count}>↑↓</span>
-				<span fg={colors.muted}> move  </span>
-				<span fg={colors.count}>enter</span>
-				<span fg={colors.muted}> apply  </span>
-				<span fg={colors.count}>esc</span>
-				<span fg={colors.muted}> cancel  </span>
-				<span fg={colors.count}>ctrl-u</span>
-				<span fg={colors.muted}> clear  </span>
-				<span fg={colors.count}>ctrl-w</span>
-				<span fg={colors.muted}> word</span>
-			</TextLine>
-		)
-	}
+interface HintsContext {
+	readonly filterEditing: boolean
+	readonly showFilterClear: boolean
+	readonly detailFullView: boolean
+	readonly diffFullView: boolean
+	readonly diffCommentMode: boolean
+	readonly hasSelection: boolean
+	readonly canCloseSelection: boolean
+	readonly hasError: boolean
+	readonly isLoading: boolean
+	readonly loadingIndicator: string
+	readonly retryProgress: RetryProgress
+}
+
+const filterEditingHints: readonly HintItem[] = [
+	{ key: "search", label: "typing" },
+	{ key: "↑↓", label: "move" },
+	{ key: "enter", label: "apply" },
+	{ key: "esc", label: "cancel" },
+	{ key: "ctrl-u", label: "clear" },
+	{ key: "ctrl-w", label: "word" },
+]
+
+const diffCommentModeHints: readonly HintItem[] = [
+	{ key: "↑↓", label: "line" },
+	{ key: "pgup/pgdn", label: "jump" },
+	{ key: "←→", label: "side" },
+	{ key: "enter", label: "open" },
+	{ key: "a", label: "comment" },
+	{ key: "c", label: "done" },
+	{ key: "[]", label: "files" },
+	{ key: "esc", label: "back" },
+]
 
-	if (diffFullView) {
-		if (diffCommentMode) {
-			return (
-				<TextLine>
-					<span fg={colors.count}>↑↓</span>
-					<span fg={colors.muted}> line  </span>
-					<span fg={colors.count}>pgup/pgdn</span>
-					<span fg={colors.muted}> jump  </span>
-					<span fg={colors.count}>←→</span>
-					<span fg={colors.muted}> side  </span>
-					<span fg={colors.count}>enter</span>
-					<span fg={colors.muted}> open  </span>
-					<span fg={colors.count}>a</span>
-					<span fg={colors.muted}> comment  </span>
-					<span fg={colors.count}>c</span>
-					<span fg={colors.muted}> done  </span>
-					<span fg={colors.count}>[]</span>
-					<span fg={colors.muted}> files  </span>
-					<span fg={colors.count}>esc</span>
-					<span fg={colors.muted}> back</span>
-				</TextLine>
-			)
-		}
-		return (
-			<TextLine>
-				<span fg={colors.count}>esc</span>
-				<span fg={colors.muted}> back  </span>
-				<span fg={colors.count}>v</span>
-				<span fg={colors.muted}> view  </span>
-				<span fg={colors.count}>w</span>
-				<span fg={colors.muted}> wrap  </span>
-				<span fg={colors.count}>c</span>
-				<span fg={colors.muted}> comment  </span>
-				<span fg={colors.count}>[]</span>
-				<span fg={colors.muted}> files  </span>
-				<span fg={colors.count}>r</span>
-				<span fg={colors.muted}> reload  </span>
-				<span fg={colors.count}>o</span>
-				<span fg={colors.muted}> open  </span>
-				<span fg={colors.count}>q</span>
-				<span fg={colors.muted}> quit</span>
-			</TextLine>
-		)
-	}
+const diffViewHints: readonly HintItem[] = [
+	{ key: "esc", label: "back" },
+	{ key: "v", label: "view" },
+	{ key: "w", label: "wrap" },
+	{ key: "c", label: "comment" },
+	{ key: "[]", label: "files" },
+	{ key: "r", label: "reload" },
+	{ key: "o", label: "open" },
+	{ key: "q", label: "quit" },
+]
 
-	if (detailFullView) {
-		return (
-			<TextLine>
-				<span fg={colors.count}>esc</span>
-				<span fg={colors.muted}> back  </span>
-				<span fg={colors.count}>↑↓</span>
-				<span fg={colors.muted}> scroll  </span>
-				<span fg={colors.count}>r</span>
-				<span fg={colors.muted}>{hasError ? " retry  " : " refresh  "}</span>
-				<span fg={colors.count}>t</span>
-				<span fg={colors.muted}> theme  </span>
-				{hasSelection ? (
-					<>
-						<span fg={colors.count}>s</span>
-						<span fg={colors.muted}> state  </span>
-						<span fg={colors.count}>d</span>
-						<span fg={colors.muted}> diff  </span>
-						<span fg={colors.count}>l</span>
-						<span fg={colors.muted}> labels  </span>
-						<span fg={colors.count}>m</span>
-						<span fg={colors.muted}> merge  </span>
-						{canCloseSelection ? (
-							<>
-								<span fg={colors.count}>x</span>
-								<span fg={colors.muted}> close  </span>
-							</>
-						) : null}
-					</>
-				) : null}
-				<span fg={colors.count}>o</span>
-				<span fg={colors.muted}> open  </span>
-				<span fg={colors.count}>y</span>
-				<span fg={colors.muted}> copy  </span>
-				<span fg={colors.count}>q</span>
-				<span fg={colors.muted}> quit</span>
-			</TextLine>
-		)
-	}
+const detailFullViewHints = (ctx: HintsContext): readonly HintItem[] => [
+	{ key: "esc", label: "back" },
+	{ key: "↑↓", label: "scroll" },
+	{ key: "r", label: ctx.hasError ? "retry" : "refresh" },
+	{ key: "t", label: "theme" },
+	{ key: "s", label: "state", when: ctx.hasSelection },
+	{ key: "d", label: "diff", when: ctx.hasSelection },
+	{ key: "l", label: "labels", when: ctx.hasSelection },
+	{ key: "m", label: "merge", when: ctx.hasSelection },
+	{ key: "x", label: "close", when: ctx.hasSelection && ctx.canCloseSelection },
+	{ key: "o", label: "open" },
+	{ key: "y", label: "copy" },
+	{ key: "q", label: "quit" },
+]
 
-	return (
-		<TextLine>
-			<span fg={colors.count}>tab</span>
-			<span fg={colors.muted}> queue  </span>
-			<span fg={colors.count}>/</span>
-			<span fg={colors.muted}> filter  </span>
-			<span fg={colors.count}>t</span>
-			<span fg={colors.muted}> theme  </span>
-			{showFilterClear ? (
-				<>
-					<span fg={colors.count}>esc</span>
-					<span fg={colors.muted}> clear  </span>
-				</>
-			) : null}
-			{retryProgress._tag === "Retrying" ? (
-				<>
-					<span fg={colors.status.pending}>retry</span>
-					<span fg={colors.muted}> {retryProgress.attempt}/{retryProgress.max}  </span>
-				</>
-			) : isLoading ? (
-				<>
-					<span fg={colors.status.pending}>{loadingIndicator}</span>
-					<span fg={colors.muted}> loading  </span>
-				</>
-			) : null}
-			<span fg={colors.count}>r</span>
-			<span fg={colors.muted}>{hasError ? " retry  " : " refresh  "}</span>
-			{hasSelection ? (
-				<>
-					<span fg={colors.count}>s</span>
-					<span fg={colors.muted}> state  </span>
-					<span fg={colors.count}>d</span>
-					<span fg={colors.muted}> diff  </span>
-					<span fg={colors.count}>l</span>
-					<span fg={colors.muted}> labels  </span>
-					<span fg={colors.count}>m</span>
-					<span fg={colors.muted}> merge  </span>
-					{canCloseSelection ? (
-						<>
-							<span fg={colors.count}>x</span>
-							<span fg={colors.muted}> close  </span>
-						</>
-					) : null}
-					<span fg={colors.count}>o</span>
-					<span fg={colors.muted}> open  </span>
-					<span fg={colors.count}>y</span>
-					<span fg={colors.muted}> copy  </span>
-				</>
-			) : null}
-			<span fg={colors.count}>q</span>
-			<span fg={colors.muted}> quit</span>
-		</TextLine>
-	)
+const defaultHints = (ctx: HintsContext): readonly HintItem[] => {
+	const retrying = ctx.retryProgress._tag === "Retrying"
+	return [
+		{ key: "/", label: "filter" },
+		{ key: "t", label: "theme" },
+		{ key: "esc", label: "clear", when: ctx.showFilterClear },
+		{ key: "retry", label: retrying ? `${(ctx.retryProgress as { attempt: number; max: number }).attempt}/${(ctx.retryProgress as { attempt: number; max: number }).max}` : "", when: retrying, keyFg: colors.status.pending },
+		{ key: ctx.loadingIndicator, label: "loading", when: !retrying && ctx.isLoading, keyFg: colors.status.pending },
+		{ key: "r", label: "retry", when: ctx.hasError },
+		{ key: "d", label: "diff", when: ctx.hasSelection },
+		{ key: "l", label: "labels", when: ctx.hasSelection },
+		{ key: "m", label: "merge", when: ctx.hasSelection },
+		{ key: "x", label: "close", when: ctx.hasSelection && ctx.canCloseSelection },
+		{ key: "o", label: "open", when: ctx.hasSelection },
+		{ key: "y", label: "copy", when: ctx.hasSelection },
+		{ key: "ctrl-p", label: "commands" },
+	]
 }
+
+const footerHints = (ctx: HintsContext): readonly HintItem[] => {
+	if (ctx.filterEditing) return filterEditingHints
+	if (ctx.diffFullView) return ctx.diffCommentMode ? diffCommentModeHints : diffViewHints
+	if (ctx.detailFullView) return detailFullViewHints(ctx)
+	return defaultHints(ctx)
+}
+
+export const FooterHints = (props: HintsContext) => <HintRow items={footerHints(props)} />

package/src/ui/PullRequestDiffPane.tsx

@@ -4,26 +4,24 @@ import type { DiffCommentSide, PullRequestItem, PullRequestReviewComment } from
 import { colors, type ThemeId } from "./colors.js"
 import { createDiffSyntaxStyle, diffFileStats, diffFileStatsText, diffStatText, stackedDiffFileAtLine, type DiffFileStats, type DiffView, type DiffWrapMode, type PullRequestDiffState, type StackedDiffCommentAnchor, type StackedDiffFilePatch } from "./diff.js"
 import { LoadingPane, StatusCard } from "./DetailsPane.js"
-import { Divider, fitCell, PlainLine, TextLine } from "./primitives.js"
+import { DiffStats } from "./diffStats.js"
+import { Divider, fitCell, PaddedRow, 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)
-
+const DiffPaneHeader = ({ pullRequest, paneWidth }: { pullRequest: PullRequestItem; paneWidth: number }) => {
+	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)
 	return (
-		<>
-			{parts.map((part, index) => (
-				<span key={part.key} fg={part.color}>{`${index > 0 ? " " : ""}${part.text}`}</span>
-			))}
-		</>
+		<PaddedRow>
+			<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>
+		</PaddedRow>
 	)
 }
 
@@ -109,22 +107,10 @@ export const PullRequestDiffPane = ({
 		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._tag === "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>
+				<DiffPaneHeader pullRequest={pullRequest} paneWidth={paneWidth} />
 				<Divider width={paneWidth} />
 				<LoadingPane content={{ title: `${loadingIndicator} Loading diff`, hint: "Fetching patch from GitHub" }} width={paneWidth} height={Math.max(1, height - 2)} />
 			</box>
@@ -134,9 +120,9 @@ export const PullRequestDiffPane = ({
 	if (diffState._tag === "Error") {
 		return (
 			<box height={height} flexDirection="column">
-				<box height={1} paddingLeft={1} paddingRight={1}>
+				<PaddedRow>
 					<PlainLine text={`#${pullRequest.number} ${shortRepoName(pullRequest.repository)} diff`} fg={colors.count} bold />
-				</box>
+				</PaddedRow>
 				<Divider width={paneWidth} />
 				<StatusCard content={{ title: "Could not load diff", hint: diffState.error }} width={paneWidth} />
 			</box>
@@ -184,22 +170,15 @@ export const PullRequestDiffPane = ({
 
 	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>
+			<DiffPaneHeader pullRequest={pullRequest} paneWidth={paneWidth} />
 			<Divider width={paneWidth} />
 			<scrollbox ref={scrollRef} focused={!commentMode} flexGrow={1} scrollY scrollX={false} onMouseDown={handleDiffMouseDown}>
 				{stackedFiles.map((stackedFile) => (
 					<box key={`${pullRequest.url}-${stackedFile.index}-${view}-${wrapMode}`} flexDirection="column" flexShrink={0}>
 						{stackedFile.index > 0 ? <Divider width={paneWidth} /> : null}
-						<box height={1} paddingLeft={1} paddingRight={1}>
+						<PaddedRow>
 							<FileHeader file={stackedFile.file} index={stackedFile.index} count={readyFiles.length} width={paneWidth} />
-						</box>
+						</PaddedRow>
 						<Divider width={paneWidth} />
 						<diff
 							ref={(diff: DiffRenderable | null) => setDiffRef(stackedFile.index, diff)}
@@ -232,15 +211,15 @@ export const PullRequestDiffPane = ({
 					{incomingFile ? (
 						<>
 							<Divider width={paneWidth} />
-							<box height={1} paddingLeft={1} paddingRight={1} backgroundColor={colors.background}>
+							<PaddedRow backgroundColor={colors.background}>
 								<FileHeader file={incomingFile.file} index={incomingFile.index} count={readyFiles.length} width={paneWidth} suffix={stickyCommentLabelFor(incomingFile)} suffixColor={stickyCommentColor} />
-							</box>
+							</PaddedRow>
 						</>
 					) : (
 						<>
-							<box height={1} paddingLeft={1} paddingRight={1} backgroundColor={colors.background}>
+							<PaddedRow backgroundColor={colors.background}>
 								<FileHeader file={stickyFile.file} index={stickyFile.index} count={readyFiles.length} width={paneWidth} suffix={stickyCommentLabelFor(stickyFile)} suffixColor={stickyCommentColor} />
-							</box>
+							</PaddedRow>
 							<Divider width={paneWidth} />
 						</>
 					)}
@@ -249,12 +228,12 @@ export const PullRequestDiffPane = ({
 			{commentPeek ? (
 				<>
 					<Divider width={paneWidth} />
-					<box height={1} paddingLeft={1} paddingRight={1}>
+					<PaddedRow>
 						<PlainLine text={fitCell(commentPeekMeta, Math.max(1, paneWidth - 2))} fg={colors.count} />
-					</box>
-					<box height={1} paddingLeft={1} paddingRight={1}>
+					</PaddedRow>
+					<PaddedRow>
 						<PlainLine text={fitCell(commentPeekBody, Math.max(1, paneWidth - 2))} fg={colors.text} />
-					</box>
+					</PaddedRow>
 				</>
 			) : null}
 		</box>

package/src/ui/PullRequestList.tsx

@@ -3,16 +3,23 @@ import type { LoadStatus, PullRequestItem } from "../domain.js"
 import { daysOpen } from "../date.js"
 import { colors } from "./colors.js"
 import { fitCell, PlainLine, SectionTitle, TextLine } from "./primitives.js"
-import { checkLabel, repoColor, reviewIcon, statusColor } from "./pullRequests.js"
+import { pullRequestRowDisplay, repoColor, reviewIcon } from "./pullRequests.js"
 
 export type PullRequestGroups = Array<[string, PullRequestItem[]]>
 
+export type PullRequestListRow =
+	| { readonly _tag: "title" }
+	| { readonly _tag: "filter" }
+	| { readonly _tag: "message"; readonly text: string; readonly color: string }
+	| { readonly _tag: "group"; readonly repository: string; readonly pullRequests: readonly PullRequestItem[] }
+	| { readonly _tag: "pull-request"; readonly pullRequest: PullRequestItem; readonly groupPullRequests: readonly PullRequestItem[] }
+	| { readonly _tag: "load-more"; readonly text: string }
+
 const GROUP_ICON = "◆"
 
-const getRowLayout = (contentWidth: number, numberWidth = 6) => {
+const getRowLayout = (contentWidth: number, numberWidth: number, ageWidth: number) => {
 	const reviewWidth = 1
 	const checkWidth = 6
-	const ageWidth = 4
 	const fixedWidth = reviewWidth + 1 + numberWidth + 1 + checkWidth + ageWidth
 	const titleWidth = Math.max(8, contentWidth - fixedWidth)
 	return { reviewWidth, checkWidth, ageWidth, numberWidth, titleWidth }
@@ -24,6 +31,12 @@ const groupNumberWidth = (pullRequests: readonly PullRequestItem[]) => {
 	return maxLen + 1
 }
 
+const groupAgeWidth = (pullRequests: readonly PullRequestItem[]) => {
+	if (pullRequests.length === 0) return 4
+	const maxLen = Math.max(...pullRequests.map((pr) => `${daysOpen(pr.createdAt)}d`.length))
+	return Math.max(4, maxLen + 1)
+}
+
 const MatchedCell = ({ text, width, query, align = "left" }: { text: string; width: number; query: string; align?: "left" | "right" }) => {
 	const fitted = fitCell(text, width, align)
 	const needle = query.trim().toLowerCase()
@@ -47,11 +60,53 @@ const GroupTitle = ({ label, color, filterText }: { label: string; color: string
 	</TextLine>
 )
 
+export const buildPullRequestListRows = ({
+	groups,
+	status,
+	error,
+	filterText,
+	showFilterBar,
+	loadedCount,
+	hasMore,
+	isLoadingMore,
+}: {
+	readonly groups: PullRequestGroups
+	readonly status: LoadStatus
+	readonly error: string | null
+	readonly filterText: string
+	readonly showFilterBar: boolean
+	readonly loadedCount: number
+	readonly hasMore: boolean
+	readonly isLoadingMore: boolean
+}): readonly PullRequestListRow[] => {
+	const itemCount = groups.reduce((count, [, pullRequests]) => count + pullRequests.length, 0)
+	const rows: PullRequestListRow[] = [{ _tag: "title" }]
+	if (showFilterBar) rows.push({ _tag: "filter" })
+	if (status === "loading" && itemCount === 0) rows.push({ _tag: "message", text: "- Loading pull requests...", color: colors.muted })
+	if (status === "error") rows.push({ _tag: "message", text: `- ${error ?? "Could not load pull requests."}`, color: colors.error })
+	if (status === "ready" && itemCount === 0) rows.push({ _tag: "message", text: filterText.length > 0 ? "- No matching pull requests." : "- No open pull requests.", color: colors.muted })
+	for (const [repository, pullRequests] of groups) {
+		rows.push({ _tag: "group", repository, pullRequests })
+		for (const pullRequest of pullRequests) rows.push({ _tag: "pull-request", pullRequest, groupPullRequests: pullRequests })
+	}
+	if (status === "ready" && itemCount > 0 && (hasMore || isLoadingMore)) {
+		rows.push({ _tag: "load-more", text: isLoadingMore ? `- Loading more pull requests... (${loadedCount} loaded)` : `- ${loadedCount} loaded, more available` })
+	}
+	return rows
+}
+
+export const pullRequestListRowIndex = (rows: readonly PullRequestListRow[], url: string | null) => {
+	if (!url) return null
+	const index = rows.findIndex((row) => row._tag === "pull-request" && row.pullRequest.url === url)
+	return index >= 0 ? index : null
+}
+
 const PullRequestRow = ({
 	pullRequest,
 	selected,
 	contentWidth,
 	numWidth,
+	ageColWidth,
 	filterText,
 	onSelect,
 }: {
@@ -59,31 +114,25 @@ const PullRequestRow = ({
 	selected: boolean
 	contentWidth: number
 	numWidth: number
+	ageColWidth: number
 	filterText: string
 	onSelect: () => void
 }) => {
-	const isClosed = pullRequest.state === "closed"
-	const isMerged = pullRequest.state === "merged"
-	const isFinal = isClosed || isMerged
-	const checkText = isMerged ? "merged" : isClosed ? "closed" : checkLabel(pullRequest)?.replace(/^checks\s+/, "") ?? ""
 	const ageText = `${daysOpen(pullRequest.createdAt)}d`
-	const { reviewWidth, checkWidth, ageWidth, numberWidth, titleWidth } = getRowLayout(contentWidth, numWidth)
+	const { reviewWidth, checkWidth, ageWidth, numberWidth, titleWidth } = getRowLayout(contentWidth, numWidth, ageColWidth)
 	const rowWidth = reviewWidth + 1 + numberWidth + 1 + titleWidth + checkWidth + ageWidth
 	const fillerWidth = Math.max(0, contentWidth - rowWidth)
-	const indicatorColor = isMerged ? colors.status.passing : isClosed ? colors.muted : pullRequest.autoMergeEnabled ? colors.accent : statusColor(pullRequest.reviewStatus)
-	const rowTextColor = selected ? colors.selectedText : isFinal ? colors.muted : colors.text
-	const numberColor = selected ? colors.accent : isFinal ? colors.muted : colors.count
-	const checkColor = isMerged ? colors.status.passing : isClosed ? colors.muted : statusColor(pullRequest.checkStatus)
+	const display = pullRequestRowDisplay(pullRequest, selected)
 
 	return (
 		<box width={contentWidth} height={1} onMouseDown={onSelect}>
-			<TextLine width={contentWidth} fg={rowTextColor} bg={selected ? colors.selectedBg : undefined}>
-				<span fg={indicatorColor}>{fitCell(reviewIcon(pullRequest), reviewWidth)}</span>
+			<TextLine width={contentWidth} fg={display.rowFg} bg={selected ? colors.selectedBg : undefined}>
+				<span fg={display.indicatorFg}>{fitCell(reviewIcon(pullRequest), reviewWidth)}</span>
 				<span> </span>
-				<span fg={numberColor}><MatchedCell text={`#${pullRequest.number}`} width={numberWidth} query={filterText} align="right" /></span>
+				<span fg={display.numberFg}><MatchedCell text={`#${pullRequest.number}`} width={numberWidth} query={filterText} align="right" /></span>
 				<span> </span>
 				<span><MatchedCell text={pullRequest.title} width={titleWidth} query={filterText} /></span>
-				<span fg={checkColor}>{fitCell(checkText, checkWidth, "right")}</span>
+				<span fg={display.checkFg}>{fitCell(display.checkText, checkWidth, "right")}</span>
 				<span fg={colors.muted}>{fitCell(ageText, ageWidth, "right")}</span>
 				{fillerWidth > 0 ? <span>{" ".repeat(fillerWidth)}</span> : null}
 			</TextLine>
@@ -100,6 +149,9 @@ export const PullRequestList = ({
 	filterText,
 	showFilterBar,
 	isFilterEditing,
+	loadedCount,
+	hasMore,
+	isLoadingMore,
 	onSelectPullRequest,
 }: {
 	groups: PullRequestGroups
@@ -110,41 +162,43 @@ export const PullRequestList = ({
 	filterText: string
 	showFilterBar: boolean
 	isFilterEditing: boolean
+	loadedCount: number
+	hasMore: boolean
+	isLoadingMore: boolean
 	onSelectPullRequest: (url: string) => void
 }) => {
-	const itemCount = groups.reduce((count, [, pullRequests]) => count + pullRequests.length, 0)
-	const emptyText = filterText.length > 0 ? "- No matching pull requests." : "- No open pull requests."
+	const rows = buildPullRequestListRows({ groups, status, error, filterText, showFilterBar, loadedCount, hasMore, isLoadingMore })
 
 	return (
 		<box width={contentWidth} flexDirection="column">
-			<SectionTitle title="PULL REQUESTS" />
-			{showFilterBar ? (
-				<TextLine>
-					<span fg={colors.count}>/</span>
-					<span fg={colors.muted}> </span>
-					<span fg={isFilterEditing ? colors.text : colors.count}>{filterText.length > 0 ? filterText : "type to filter..."}</span>
-				</TextLine>
-			) : null}
-			{status === "loading" && itemCount === 0 ? <PlainLine text="- Loading pull requests..." fg={colors.muted} /> : null}
-			{status === "error" ? <PlainLine text={`- ${error ?? "Could not load pull requests."}`} fg={colors.error} /> : null}
-			{status === "ready" && itemCount === 0 ? <PlainLine text={emptyText} fg={colors.muted} /> : null}
-			{groups.map(([repo, pullRequests]) => {
-				const numWidth = groupNumberWidth(pullRequests)
+			{rows.map((row, index) => {
+				if (row._tag === "title") return <SectionTitle key="title" title="PULL REQUESTS" />
+				if (row._tag === "filter") {
+					return (
+						<TextLine key="filter">
+							<span fg={colors.count}>/</span>
+							<span fg={colors.muted}> </span>
+							<span fg={isFilterEditing ? colors.text : colors.count}>{filterText.length > 0 ? filterText : "type to filter..."}</span>
+						</TextLine>
+					)
+				}
+				if (row._tag === "message") return <PlainLine key={`message-${index}`} text={row.text} fg={row.color} />
+				if (row._tag === "load-more") return <PlainLine key="load-more" text={row.text} fg={colors.muted} />
+				if (row._tag === "group") return <GroupTitle key={`group-${row.repository}`} label={row.repository} color={repoColor(row.repository)} filterText={filterText} />
+
+				const numWidth = groupNumberWidth(row.groupPullRequests)
+				const ageColWidth = groupAgeWidth(row.groupPullRequests)
 				return (
-					<box key={repo} flexDirection="column">
-						<GroupTitle label={repo} color={repoColor(repo)} filterText={filterText} />
-						{pullRequests.map((pullRequest) => (
-							<PullRequestRow
-								key={pullRequest.url}
-								pullRequest={pullRequest}
-								selected={pullRequest.url === selectedUrl}
-								contentWidth={contentWidth}
-								numWidth={numWidth}
-								filterText={filterText}
-								onSelect={() => onSelectPullRequest(pullRequest.url)}
-							/>
-						))}
-					</box>
+					<PullRequestRow
+						key={row.pullRequest.url}
+						pullRequest={row.pullRequest}
+						selected={row.pullRequest.url === selectedUrl}
+						contentWidth={contentWidth}
+						numWidth={numWidth}
+						ageColWidth={ageColWidth}
+						filterText={filterText}
+						onSelect={() => onSelectPullRequest(row.pullRequest.url)}
+					/>
 				)
 			})}
 		</box>