@kitlangton/ghui 0.1.21 → 0.2.0

package/src/ui/modals.tsx

@@ -1,9 +1,9 @@
 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 { commentDisplayRows, CommentSegmentsLine, type CommentDisplayLine } from "./comments.js"
 import { centerCell, Filler, fitCell, HintRow, PlainLine, StandardModal, standardModalDims, TextLine } from "./primitives.js"
 import { labelColor, shortRepoName } from "./pullRequests.js"
 
@@ -484,41 +484,8 @@ export const CommentModal = ({
 	)
 }
 
-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 }] : []),
-		]
-	})
+const commentThreadRows = (comments: readonly PullRequestReviewComment[], width: number): readonly CommentDisplayLine[] =>
+	comments.flatMap((comment) => commentDisplayRows({ item: comment, width }))
 
 export const CommentThreadModal = ({
 	state,
@@ -559,9 +526,7 @@ export const CommentThreadModal = ({
 		>
 			{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} />
-			))}
+			) : visibleRows.map((row) => <CommentSegmentsLine key={row.key} segments={row.segments} />)}
 		</StandardModal>
 	)
 }

package/src/ui/primitives.tsx

@@ -167,6 +167,7 @@ export const ModalFrame = ({
 	width,
 	height,
 	junctionRows = [],
+	topJunctionColumns = [],
 	backgroundColor = colors.modalBackground,
 }: {
 	children: React.ReactNode
@@ -175,15 +176,18 @@ export const ModalFrame = ({
 	width: number
 	height: number
 	junctionRows?: readonly number[]
+	topJunctionColumns?: readonly number[]
 	backgroundColor?: string
 }) => {
 	const innerWidth = Math.max(1, width - 2)
 	const innerHeight = Math.max(1, height - 2)
 	const junctions = new Set(junctionRows)
+	const topJunctions = new Set(topJunctionColumns)
+	const topBorder = Array.from({ length: innerWidth }, (_, index) => topJunctions.has(index) ? "┬" : "─").join("")
 
 	return (
 		<box position="absolute" left={left} top={top} width={width} height={height} flexDirection="column" backgroundColor={backgroundColor}>
-			<PlainLine text={`┌${"─".repeat(innerWidth)}┐`} fg={colors.separator} />
+			<PlainLine text={`┌${topBorder}┐`} fg={colors.separator} />
 			<box height={innerHeight} flexDirection="row">
 				<box width={1} height={innerHeight} flexDirection="column">
 					{Array.from({ length: innerHeight }, (_, index) => <PlainLine key={index} text={junctions.has(index) ? "├" : "│"} fg={colors.separator} />)}

package/src/ui/singleLineInput.ts

@@ -11,7 +11,8 @@ 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
+	// oxlint-disable-next-line no-control-regex -- intentional: skip control characters
+	return /^[^\u0000-\u001f\u007f]+$/.test(key.sequence) ? key.sequence : null
 }
 
 export const editSingleLineInput = (value: string, key: SingleLineInputKey) => {

package/src/ui/spinner.ts

@@ -0,0 +1 @@
+export const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"] as const;