@kitlangton/ghui 0.1.17 → 0.1.18

package/src/ui/diff.ts

@@ -1,5 +1,5 @@
 import { parseColor, SyntaxStyle } from "@opentui/core"
-import type { PullRequestItem } from "../domain.js"
+import type { DiffCommentSide, PullRequestItem, PullRequestReviewComment } from "../domain.js"
 import { colors } from "./colors.js"
 
 export interface DiffFilePatch {
@@ -8,6 +8,33 @@ export interface DiffFilePatch {
 	readonly patch: string
 }
 
+export interface DiffFileStats {
+	readonly additions: number
+	readonly deletions: number
+}
+
+export interface StackedDiffFilePatch {
+	readonly file: DiffFilePatch
+	readonly index: number
+	readonly headerLine: number
+	readonly diffStartLine: number
+	readonly diffHeight: number
+}
+
+export interface DiffCommentAnchor {
+	readonly path: string
+	readonly line: number
+	readonly side: DiffCommentSide
+	readonly kind: "addition" | "deletion" | "context"
+	readonly renderLine: number
+	readonly text: string
+}
+
+export type StackedDiffCommentAnchor = DiffCommentAnchor & {
+	readonly fileIndex: number
+	readonly localRenderLine: number
+}
+
 export type PullRequestDiffState =
 	| { readonly status: "loading" }
 	| { readonly status: "ready"; readonly patch: string; readonly files: readonly DiffFilePatch[] }
@@ -144,6 +171,32 @@ export const splitPatchFiles = (patch: string): readonly DiffFilePatch[] => {
 
 export const pullRequestDiffKey = (pullRequest: PullRequestItem) => `${pullRequest.repository}#${pullRequest.number}`
 
+export const safeDiffFileIndex = (files: readonly DiffFilePatch[], index: number) =>
+	files.length > 0 ? Math.max(0, Math.min(index, files.length - 1)) : 0
+
+export const buildStackedDiffFiles = (
+	files: readonly DiffFilePatch[],
+	view: "unified" | "split",
+	wrapMode: "none" | "word",
+	width: number,
+): readonly StackedDiffFilePatch[] => {
+	let offset = 0
+	return files.map((file, index) => {
+		const diffHeight = patchRenderableLineCount(file.patch, view, wrapMode, width)
+		const separatorBefore = index === 0 ? 0 : 1
+		const headerLine = offset + separatorBefore
+		const stackedFile = {
+			file,
+			index,
+			headerLine,
+			diffStartLine: headerLine + 2,
+			diffHeight,
+		} satisfies StackedDiffFilePatch
+		offset += separatorBefore + 2 + diffHeight
+		return stackedFile
+	})
+}
+
 export const diffStatText = (pullRequest: PullRequestItem) => {
 	if (!pullRequest.detailLoaded) return "loading details"
 	const files = pullRequest.changedFiles === 1 ? "1 file" : `${pullRequest.changedFiles} files`
@@ -154,6 +207,153 @@ export const diffStatText = (pullRequest: PullRequestItem) => {
 	].filter((part): part is string => part !== null).join(" ")
 }
 
+export const diffCommentLocationKey = (location: Pick<PullRequestReviewComment, "path" | "side" | "line">) => `${location.path}:${location.side}:${location.line}`
+
+export const diffCommentAnchorKey = diffCommentLocationKey
+
+type PendingDiffCommentAnchor = Omit<DiffCommentAnchor, "renderLine">
+
+const diffContentWidth = (lines: readonly string[], view: "unified" | "split", width: number) => {
+	const lineNumberGutterWidth = patchLineNumberGutterWidth(lines)
+	return view === "split"
+		? Math.max(1, Math.floor(width / 2) - lineNumberGutterWidth)
+		: Math.max(1, width - lineNumberGutterWidth)
+}
+
+export const diffFileStats = (file: DiffFilePatch): DiffFileStats => {
+	let additions = 0
+	let deletions = 0
+	let inHunk = false
+
+	for (const line of file.patch.split("\n")) {
+		const hunk = line.match(hunkHeaderPattern)
+		if (hunk) {
+			inHunk = true
+			continue
+		}
+
+		if (!inHunk) continue
+		const firstChar = line[0]
+		if (firstChar === "+") additions++
+		else if (firstChar === "-") deletions++
+	}
+
+	return { additions, deletions }
+}
+
+export const diffFileStatText = (file: DiffFilePatch) => {
+	const stats = diffFileStats(file)
+	return [
+		stats.additions > 0 ? `+${stats.additions}` : null,
+		stats.deletions > 0 ? `-${stats.deletions}` : null,
+	].filter((part): part is string => part !== null).join(" ")
+}
+
+export const getDiffCommentAnchors = (file: DiffFilePatch, view: "unified" | "split" = "unified", wrapMode: "none" | "word" = "none", width = 120): readonly DiffCommentAnchor[] => {
+	const anchors: DiffCommentAnchor[] = []
+	const lines = file.patch.split("\n")
+	const contentWidth = diffContentWidth(lines, view, width)
+	let oldLine = 0
+	let newLine = 0
+	let renderLine = 0
+	let inHunk = false
+	let deletions: Array<PendingDiffCommentAnchor & { readonly height: number }> = []
+	let additions: Array<PendingDiffCommentAnchor & { readonly height: number }> = []
+
+	const flushChangeBlock = () => {
+		if (deletions.length === 0 && additions.length === 0) return
+		if (view === "split") {
+			const rowCount = Math.max(deletions.length, additions.length)
+			for (let index = 0; index < rowCount; index++) {
+				const deletion = deletions[index]
+				const addition = additions[index]
+				if (deletion) anchors.push({ path: deletion.path, line: deletion.line, side: deletion.side, kind: deletion.kind, text: deletion.text, renderLine })
+				if (addition) anchors.push({ path: addition.path, line: addition.line, side: addition.side, kind: addition.kind, text: addition.text, renderLine })
+				renderLine += Math.max(deletion?.height ?? 1, addition?.height ?? 1)
+			}
+		} else {
+			for (const deletion of deletions) {
+				anchors.push({ path: deletion.path, line: deletion.line, side: deletion.side, kind: deletion.kind, text: deletion.text, renderLine })
+				renderLine += deletion.height
+			}
+			for (const addition of additions) {
+				anchors.push({ path: addition.path, line: addition.line, side: addition.side, kind: addition.kind, text: addition.text, renderLine })
+				renderLine += addition.height
+			}
+		}
+		deletions = []
+		additions = []
+	}
+
+	for (const line of lines) {
+		const hunk = line.match(hunkHeaderPattern)
+		if (hunk) {
+			flushChangeBlock()
+			oldLine = Number(hunk[1])
+			newLine = Number(hunk[3])
+			inHunk = true
+			continue
+		}
+
+		if (!inHunk) continue
+
+		const firstChar = line[0]
+		if (firstChar === "\\") continue
+
+		if (firstChar === "+") {
+			const text = line.slice(1)
+			additions.push({ path: file.name, line: newLine, side: "RIGHT", kind: "addition", text, height: estimatedWrappedLineCount(text, contentWidth, wrapMode) })
+			newLine++
+			continue
+		}
+
+		if (firstChar === "-") {
+			const text = line.slice(1)
+			deletions.push({ path: file.name, line: oldLine, side: "LEFT", kind: "deletion", text, height: estimatedWrappedLineCount(text, contentWidth, wrapMode) })
+			oldLine++
+			continue
+		}
+
+		if (firstChar === " ") {
+			flushChangeBlock()
+			const text = line.slice(1)
+			anchors.push({ path: file.name, line: newLine, side: "RIGHT", kind: "context", renderLine, text })
+			oldLine++
+			newLine++
+			renderLine += estimatedWrappedLineCount(text, contentWidth, wrapMode)
+		}
+	}
+
+	flushChangeBlock()
+	return anchors
+}
+
+export const getStackedDiffCommentAnchors = (
+	stackedFiles: readonly StackedDiffFilePatch[],
+	view: "unified" | "split" = "unified",
+	wrapMode: "none" | "word" = "none",
+	width = 120,
+): readonly StackedDiffCommentAnchor[] =>
+	stackedFiles.flatMap((stackedFile) => getDiffCommentAnchors(stackedFile.file, view, wrapMode, width).map((anchor) => ({
+		...anchor,
+		fileIndex: stackedFile.index,
+		localRenderLine: anchor.renderLine,
+		renderLine: stackedFile.diffStartLine + anchor.renderLine,
+	})))
+
+export const nearestDiffCommentAnchorIndex = (anchors: readonly DiffCommentAnchor[], renderLine: number) => {
+	if (anchors.length === 0) return 0
+	const nextIndex = anchors.findIndex((anchor) => anchor.renderLine >= renderLine)
+	return nextIndex >= 0 ? nextIndex : anchors.length - 1
+}
+
+export const scrollTopForVisibleLine = (currentTop: number, viewportHeight: number, line: number, margin = 1) => {
+	const safeViewportHeight = Math.max(1, viewportHeight)
+	if (line < currentTop + margin) return Math.max(0, line - margin)
+	if (line >= currentTop + safeViewportHeight - margin) return Math.max(0, line - safeViewportHeight + margin + 1)
+	return currentTop
+}
+
 const estimatedWrappedLineCount = (text: string, width: number, wrapMode: "none" | "word") => {
 	if (wrapMode === "none") return 1
 	return Math.max(1, Math.ceil(Bun.stringWidth(text) / Math.max(1, width)))
@@ -166,10 +366,10 @@ const patchLineNumberGutterWidth = (lines: readonly string[]) => {
 	let newLine = 0
 
 	for (const line of lines) {
-		const hunk = line.match(/^@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/)
+		const hunk = line.match(hunkHeaderPattern)
 		if (hunk) {
 			oldLine = Number(hunk[1])
-			newLine = Number(hunk[2])
+			newLine = Number(hunk[3])
 			maxLineNumber = Math.max(maxLineNumber, oldLine, newLine)
 			continue
 		}
@@ -196,10 +396,7 @@ const patchLineNumberGutterWidth = (lines: readonly string[]) => {
 
 export const patchRenderableLineCount = (patch: string, view: "unified" | "split", wrapMode: "none" | "word", width: number) => {
 	const lines = patch.split("\n")
-	const lineNumberGutterWidth = patchLineNumberGutterWidth(lines)
-	const splitPaneWidth = Math.max(1, Math.floor(width / 2) - lineNumberGutterWidth)
-	const unifiedPaneWidth = Math.max(1, width - lineNumberGutterWidth)
-	const contentWidth = view === "split" ? splitPaneWidth : unifiedPaneWidth
+	const contentWidth = diffContentWidth(lines, view, width)
 	let count = 0
 	let inHunk = false
 	let deletions: number[] = []

package/src/ui/modals.tsx

@@ -1,12 +1,14 @@
 import { TextAttributes } from "@opentui/core"
-import type { PullRequestLabel, PullRequestMergeInfo } from "../domain.js"
+import { Data } from "effect"
+import { formatShortDate, formatTimestamp } from "../date.js"
+import type { PullRequestLabel, PullRequestMergeInfo, PullRequestReviewComment } from "../domain.js"
 import { availableMergeActions } from "../mergeActions.js"
+import { clampCursor, commentEditorLines, cursorLineIndexForLines } from "./commentEditor.js"
 import { colors, filterThemeDefinitions, themeDefinitions, type ThemeId } from "./colors.js"
 import { centerCell, Divider, fitCell, ModalFrame, PlainLine, TextLine } from "./primitives.js"
 import { labelColor, shortRepoName } from "./pullRequests.js"
 
 export interface LabelModalState {
-	readonly open: boolean
 	readonly repository: string | null
 	readonly query: string
 	readonly selectedIndex: number
@@ -15,7 +17,6 @@ export interface LabelModalState {
 }
 
 export interface MergeModalState {
-	readonly open: boolean
 	readonly repository: string | null
 	readonly number: number | null
 	readonly selectedIndex: number
@@ -26,7 +27,6 @@ export interface MergeModalState {
 }
 
 export interface CloseModalState {
-	readonly open: boolean
 	readonly repository: string | null
 	readonly number: number | null
 	readonly title: string
@@ -35,15 +35,23 @@ export interface CloseModalState {
 	readonly error: string | null
 }
 
+export interface CommentModalState {
+	readonly body: string
+	readonly cursor: number
+	readonly error: string | null
+}
+
+export interface CommentThreadModalState {
+	readonly scrollOffset: number
+}
+
 export interface ThemeModalState {
-	readonly open: boolean
 	readonly query: string
 	readonly filterMode: boolean
 	readonly initialThemeId: ThemeId
 }
 
 export const initialLabelModalState: LabelModalState = {
-	open: false,
 	repository: null,
 	query: "",
 	selectedIndex: 0,
@@ -52,7 +60,6 @@ export const initialLabelModalState: LabelModalState = {
 }
 
 export const initialMergeModalState: MergeModalState = {
-	open: false,
 	repository: null,
 	number: null,
 	selectedIndex: 0,
@@ -63,7 +70,6 @@ export const initialMergeModalState: MergeModalState = {
 }
 
 export const initialCloseModalState: CloseModalState = {
-	open: false,
 	repository: null,
 	number: null,
 	title: "",
@@ -72,13 +78,47 @@ export const initialCloseModalState: CloseModalState = {
 	error: null,
 }
 
+export const initialCommentModalState: CommentModalState = {
+	body: "",
+	cursor: 0,
+	error: null,
+}
+
+export const initialCommentThreadModalState: CommentThreadModalState = {
+	scrollOffset: 0,
+}
+
 export const initialThemeModalState: ThemeModalState = {
-	open: false,
 	query: "",
 	filterMode: false,
 	initialThemeId: "ghui",
 }
 
+export type Modal = Data.TaggedEnum<{
+	None: {}
+	Label: { readonly state: LabelModalState }
+	Close: { readonly state: CloseModalState }
+	Merge: { readonly state: MergeModalState }
+	Comment: { readonly state: CommentModalState }
+	CommentThread: { readonly state: CommentThreadModalState }
+	Theme: { readonly state: ThemeModalState }
+}>
+
+export const Modal = Data.taggedEnum<Modal>()
+export const initialModal: Modal = Modal.None()
+
+export type ModalTag = Modal["_tag"]
+export type ModalState<Tag extends Exclude<ModalTag, "None">> = Extract<Modal, { _tag: Tag }>["state"]
+
+export const modalInitialStates = {
+	Label: initialLabelModalState,
+	Close: initialCloseModalState,
+	Merge: initialMergeModalState,
+	Comment: initialCommentModalState,
+	CommentThread: initialCommentThreadModalState,
+	Theme: initialThemeModalState,
+} as const satisfies { [Tag in Exclude<ModalTag, "None">]: ModalState<Tag> }
+
 const mergeUnavailableReason = (info: PullRequestMergeInfo | null) => {
 	if (!info) return "Loading merge status from GitHub."
 	if (info.state !== "open") return "This pull request is not open."
@@ -349,6 +389,193 @@ export const CloseModal = ({
 	)
 }
 
+export const CommentModal = ({
+	state,
+	anchorLabel,
+	modalWidth,
+	modalHeight,
+	offsetLeft,
+	offsetTop,
+}: {
+	state: CommentModalState
+	anchorLabel: string
+	modalWidth: number
+	modalHeight: number
+	offsetLeft: number
+	offsetTop: number
+}) => {
+	const innerWidth = Math.max(16, modalWidth - 2)
+	const contentWidth = Math.max(14, innerWidth - 2)
+	const title = "Comment"
+	const rightText = "enter save"
+	const headerGap = Math.max(1, contentWidth - title.length - rightText.length)
+	const bodyHeight = Math.max(1, modalHeight - 7)
+	const editorHeight = Math.max(1, bodyHeight - (state.error ? 1 : 0))
+	const lineRanges = commentEditorLines(state.body)
+	const cursor = clampCursor(state.body, state.cursor)
+	const cursorLineIndex = cursorLineIndexForLines(lineRanges, cursor)
+	const visibleStart = Math.min(
+		Math.max(0, lineRanges.length - editorHeight),
+		Math.max(0, cursorLineIndex - editorHeight + 1),
+	)
+	const visibleLines = lineRanges.slice(visibleStart, visibleStart + editorHeight)
+	const renderEditorLine = (line: { readonly text: string; readonly start: number; readonly end: number }, index: number) => {
+		const lineIndex = visibleStart + index
+		const isCursorLine = lineIndex === cursorLineIndex
+		const cursorColumn = Math.max(0, Math.min(cursor - line.start, line.text.length))
+		const viewStart = isCursorLine ? Math.max(0, cursorColumn - contentWidth + 1) : 0
+		const visibleText = line.text.slice(viewStart, viewStart + contentWidth)
+
+		if (!isCursorLine) {
+			return <PlainLine key={lineIndex} text={fitCell(visibleText, contentWidth)} fg={state.body.length > 0 ? colors.text : colors.muted} />
+		}
+
+		const cursorInView = cursorColumn - viewStart
+		const before = visibleText.slice(0, cursorInView)
+		const placeholder = state.body.length === 0 ? "Write a comment..." : ""
+		const cursorChar = placeholder ? placeholder[0] ?? " " : visibleText[cursorInView] ?? " "
+		const after = placeholder ? placeholder.slice(1) : visibleText.slice(cursorInView + 1)
+
+		return (
+			<TextLine key={lineIndex}>
+				{before ? <span fg={colors.text}>{before}</span> : null}
+				<span bg={colors.accent} fg={colors.background}>{cursorChar}</span>
+				{after ? <span fg={placeholder ? colors.muted : colors.text}>{after}</span> : null}
+			</TextLine>
+		)
+	}
+
+	return (
+		<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>
+					<span fg={colors.muted}>{" ".repeat(headerGap)}</span>
+					<span fg={colors.muted}>{rightText}</span>
+				</TextLine>
+			</box>
+			<box height={1} paddingLeft={1} paddingRight={1}>
+				<PlainLine text={fitCell(anchorLabel, contentWidth)} fg={colors.muted} />
+			</box>
+			<Divider width={innerWidth} />
+			<box height={bodyHeight} flexDirection="column" paddingLeft={1} paddingRight={1}>
+				{state.error ? <PlainLine text={fitCell(state.error, contentWidth)} fg={colors.error} /> : null}
+				{visibleLines.map(renderEditorLine)}
+			</box>
+			<Divider width={innerWidth} />
+			<box height={1} paddingLeft={1} paddingRight={1}>
+				<TextLine>
+					<span fg={colors.count}>enter</span>
+					<span fg={colors.muted}> save  </span>
+					<span fg={colors.count}>shift-enter</span>
+					<span fg={colors.muted}> newline  </span>
+					<span fg={colors.count}>esc</span>
+					<span fg={colors.muted}> cancel</span>
+				</TextLine>
+			</box>
+		</ModalFrame>
+	)
+}
+
+type CommentThreadRow = {
+	readonly key: string
+	readonly text: string
+	readonly fg: string
+	readonly bold?: boolean
+}
+
+const wrapCommentBody = (body: string, width: number) => {
+	const lines = body.length === 0 ? [""] : body.split("\n")
+	return lines.flatMap((line) => {
+		if (line.length === 0) return [""]
+		const wrapped: string[] = []
+		for (let index = 0; index < line.length; index += width) {
+			wrapped.push(line.slice(index, index + width))
+		}
+		return wrapped
+	})
+}
+
+const formatCommentDate = (date: Date | null) => date ? `${formatShortDate(date)} ${formatTimestamp(date)}` : ""
+
+const commentThreadRows = (comments: readonly PullRequestReviewComment[], width: number): readonly CommentThreadRow[] =>
+	comments.flatMap((comment, commentIndex) => {
+		const timestamp = formatCommentDate(comment.createdAt)
+		const header = timestamp ? `${comment.author}  ${timestamp}` : comment.author
+		return [
+			{ key: `${comment.id}:header`, text: header, fg: colors.count, bold: true },
+			...wrapCommentBody(comment.body, width).map((line, lineIndex) => ({
+				key: `${comment.id}:body:${lineIndex}`,
+				text: line,
+				fg: colors.text,
+			})),
+			...(commentIndex < comments.length - 1 ? [{ key: `${comment.id}:gap`, text: "", fg: colors.muted }] : []),
+		]
+	})
+
+export const CommentThreadModal = ({
+	state,
+	anchorLabel,
+	comments,
+	modalWidth,
+	modalHeight,
+	offsetLeft,
+	offsetTop,
+}: {
+	state: CommentThreadModalState
+	anchorLabel: string
+	comments: readonly PullRequestReviewComment[]
+	modalWidth: number
+	modalHeight: number
+	offsetLeft: number
+	offsetTop: number
+}) => {
+	const innerWidth = Math.max(16, modalWidth - 2)
+	const contentWidth = Math.max(14, innerWidth - 2)
+	const title = "Thread"
+	const countText = comments.length === 1 ? "1 comment" : `${comments.length} comments`
+	const headerGap = Math.max(1, contentWidth - title.length - countText.length)
+	const bodyHeight = Math.max(1, modalHeight - 7)
+	const rows = commentThreadRows(comments, contentWidth)
+	const maxScroll = Math.max(0, rows.length - bodyHeight)
+	const scrollOffset = Math.max(0, Math.min(state.scrollOffset, maxScroll))
+	const visibleRows = rows.slice(scrollOffset, scrollOffset + bodyHeight)
+
+	return (
+		<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>
+					<span fg={colors.muted}>{" ".repeat(headerGap)}</span>
+					<span fg={colors.muted}>{countText}</span>
+				</TextLine>
+			</box>
+			<box height={1} paddingLeft={1} paddingRight={1}>
+				<PlainLine text={fitCell(anchorLabel, contentWidth)} fg={colors.muted} />
+			</box>
+			<Divider width={innerWidth} />
+			<box height={bodyHeight} flexDirection="column" paddingLeft={1} paddingRight={1}>
+				{visibleRows.length === 0 ? (
+					<PlainLine text={fitCell("No comments on this line.", contentWidth)} fg={colors.muted} />
+				) : visibleRows.map((row) => (
+					<PlainLine key={row.key} text={fitCell(row.text, contentWidth)} fg={row.fg} bold={row.bold ?? false} />
+				))}
+			</box>
+			<Divider width={innerWidth} />
+			<box height={1} paddingLeft={1} paddingRight={1}>
+				<TextLine>
+					<span fg={colors.count}>↑↓</span>
+					<span fg={colors.muted}> scroll  </span>
+					<span fg={colors.count}>a</span>
+					<span fg={colors.muted}> comment  </span>
+					<span fg={colors.count}>esc</span>
+					<span fg={colors.muted}> close</span>
+				</TextLine>
+			</box>
+		</ModalFrame>
+	)
+}
+
 export const ThemeModal = ({
 	state,
 	activeThemeId,