@kitlangton/ghui 0.1.7 → 0.1.9

package/src/ui/modals.tsx

@@ -0,0 +1,249 @@
+import { TextAttributes } from "@opentui/core"
+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"
+
+export interface LabelModalState {
+	readonly open: boolean
+	readonly repository: string | null
+	readonly query: string
+	readonly selectedIndex: number
+	readonly availableLabels: readonly PullRequestLabel[]
+	readonly loading: boolean
+}
+
+export interface MergeModalState {
+	readonly open: boolean
+	readonly repository: string | null
+	readonly number: number | null
+	readonly selectedIndex: number
+	readonly loading: boolean
+	readonly running: boolean
+	readonly info: PullRequestMergeInfo | null
+	readonly error: string | null
+}
+
+export const initialLabelModalState: LabelModalState = {
+	open: false,
+	repository: null,
+	query: "",
+	selectedIndex: 0,
+	availableLabels: [],
+	loading: false,
+}
+
+export const initialMergeModalState: MergeModalState = {
+	open: false,
+	repository: null,
+	number: null,
+	selectedIndex: 0,
+	loading: false,
+	running: false,
+	info: null,
+	error: null,
+}
+
+const mergeUnavailableReason = (info: PullRequestMergeInfo | null) => {
+	if (!info) return "Loading merge status from GitHub."
+	if (info.state !== "open") return "This pull request is not open."
+	if (info.isDraft) return "Draft pull requests cannot be merged."
+	if (info.mergeable === "conflicting") return "This branch has merge conflicts."
+	return "No merge actions are currently available."
+}
+
+export const LabelModal = ({
+	state,
+	currentLabels,
+	modalWidth,
+	modalHeight,
+	offsetLeft,
+	offsetTop,
+	loadingIndicator,
+}: {
+	state: LabelModalState
+	currentLabels: readonly PullRequestLabel[]
+	modalWidth: number
+	modalHeight: number
+	offsetLeft: number
+	offsetTop: number
+	loadingIndicator: string
+}) => {
+	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 - 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),
+		Math.max(0, selectedIndex - maxVisible + 1),
+	)
+	const visibleLabels = filtered.slice(scrollStart, scrollStart + maxVisible)
+	const title = state.repository ? `Labels  ${shortRepoName(state.repository)}` : "Labels"
+	const countText = state.loading ? "loading" : `${filtered.length}/${state.availableLabels.length}`
+	const headerGap = Math.max(1, contentWidth - title.length - countText.length)
+	const queryText = state.query.length > 0 ? state.query : "type to filter labels"
+	const queryPrefix = state.query.length > 0 ? "/ " : "/ "
+	const queryWidth = Math.max(1, contentWidth - queryPrefix.length)
+
+	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}>
+				<TextLine>
+					<span fg={colors.count}>{queryPrefix}</span>
+					<span fg={state.query.length > 0 ? colors.text : colors.muted}>{fitCell(queryText, queryWidth)}</span>
+				</TextLine>
+			</box>
+			<Divider width={innerWidth} />
+			<box height={maxVisible} flexDirection="column">
+				{state.loading ? (
+					<>
+						{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 ? (
+					<>
+						{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, rowWidth - 5)
+						return (
+							<box key={label.name} height={1}>
+								<TextLine bg={isSelected ? colors.selectedBg : undefined} fg={isSelected ? colors.selectedText : colors.text}>
+									<span fg={isActive ? colors.status.passing : colors.muted}>{marker}</span>
+									<span> </span>
+									<span bg={labelColor(label)}>  </span>
+									<span> {fitCell(label.name, nameWidth)}</span>
+								</TextLine>
+							</box>
+						)
+					})
+				)}
+			</box>
+			<Divider width={innerWidth} />
+			<box height={1} paddingLeft={1} paddingRight={1}>
+				<TextLine>
+					<span fg={colors.count}>↑↓</span>
+					<span fg={colors.muted}> move  </span>
+					<span fg={colors.count}>esc</span>
+					<span fg={colors.muted}> close</span>
+					{filtered.length > maxVisible ? <span fg={colors.muted}>  {selectedIndex + 1}/{filtered.length}</span> : null}
+				</TextLine>
+			</box>
+		</ModalFrame>
+	)
+}
+
+export const MergeModal = ({
+	state,
+	modalWidth,
+	modalHeight,
+	offsetLeft,
+	offsetTop,
+	loadingIndicator,
+}: {
+	state: MergeModalState
+	modalWidth: number
+	modalHeight: number
+	offsetLeft: number
+	offsetTop: number
+	loadingIndicator: string
+}) => {
+	const innerWidth = Math.max(16, modalWidth - 2)
+	const contentWidth = Math.max(14, innerWidth - 2)
+	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"
+	const headerGap = Math.max(1, contentWidth - title.length - rightText.length)
+	const repo = state.info?.repository ?? state.repository
+	const statusLine = state.info
+		? `${shortRepoName(state.info.repository)}  ${state.info.mergeable}  ${state.info.reviewStatus}  ${state.info.checkSummary ?? state.info.checkStatus}`
+		: repo ? shortRepoName(repo) : ""
+	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]}>
+			<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={state.running || state.loading ? colors.status.pending : colors.muted}>{rightText}</span>
+				</TextLine>
+			</box>
+			<box height={1} paddingLeft={1} paddingRight={1}>
+				<PlainLine text={fitCell(statusLine, contentWidth)} fg={colors.muted} />
+			</box>
+			<Divider width={innerWidth} />
+			<box height={optionAreaHeight} flexDirection="column">
+				{state.loading ? (
+					<>
+						{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, rowWidth)} fg={colors.error} />
+				) : visibleOptions.length === 0 ? (
+					<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, rowWidth - 1)
+						const descriptionWidth = Math.max(1, rowWidth - 1)
+
+						return (
+							<box key={option.action} height={2} flexDirection="column">
+								<TextLine bg={isSelected ? colors.selectedBg : undefined}>
+									<span fg={titleColor}> {fitCell(option.title, titleWidth)}</span>
+								</TextLine>
+								<TextLine bg={isSelected ? colors.selectedBg : undefined}>
+									<span fg={colors.muted}> {fitCell(option.description, descriptionWidth)}</span>
+								</TextLine>
+							</box>
+						)
+					})
+				)}
+			</box>
+			<Divider width={innerWidth} />
+			<box height={1} paddingLeft={1} paddingRight={1}>
+				<TextLine>
+					<span fg={colors.count}>↑↓</span>
+					<span fg={colors.muted}> move  </span>
+					<span fg={colors.count}>enter</span>
+					<span fg={colors.muted}> confirm  </span>
+					<span fg={colors.count}>esc</span>
+					<span fg={colors.muted}> close</span>
+				</TextLine>
+			</box>
+		</ModalFrame>
+	)
+}

package/src/ui/primitives.tsx

@@ -0,0 +1,111 @@
+import { TextAttributes } from "@opentui/core"
+import type React from "react"
+import { colors } from "./colors.js"
+
+export const fitCell = (text: string, width: number, align: "left" | "right" = "left") => {
+	const trimmed = text.length > width ? `${text.slice(0, Math.max(0, width - 1))}…` : text
+	return align === "right" ? trimmed.padStart(width, " ") : trimmed.padEnd(width, " ")
+}
+
+export const trimCell = (text: string, width: number) => text.length > width ? `${text.slice(0, Math.max(0, width - 1))}…` : text
+
+export const centerCell = (text: string, width: number) => {
+	const trimmed = text.length > width ? `${text.slice(0, Math.max(0, width - 1))}…` : text
+	const left = Math.floor((width - trimmed.length) / 2)
+	return `${" ".repeat(Math.max(0, left))}${trimmed}`.padEnd(width, " ")
+}
+
+export const PlainLine = ({ text, fg = colors.text, bold = false }: { text: string; fg?: string; bold?: boolean }) => (
+	<box height={1}>
+		{bold ? (
+			<text wrapMode="none" truncate fg={fg} attributes={TextAttributes.BOLD}>
+				{text}
+			</text>
+		) : (
+			<text wrapMode="none" truncate fg={fg}>
+				{text}
+			</text>
+		)}
+	</box>
+)
+
+export const TextLine = ({ children, fg = colors.text, bg }: { children: React.ReactNode; fg?: string; bg?: string | undefined }) => (
+	<box height={1}>
+		{bg ? (
+			<text wrapMode="none" truncate fg={fg} bg={bg}>
+				{children}
+			</text>
+		) : (
+			<text wrapMode="none" truncate fg={fg}>
+				{children}
+			</text>
+		)}
+	</box>
+)
+
+export const SectionTitle = ({ title }: { title: string }) => (
+	<TextLine>
+		<span fg={colors.accent} attributes={TextAttributes.BOLD}>
+			{title}
+		</span>
+	</TextLine>
+)
+
+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} />
+	}
+
+	return <PlainLine text={`${"─".repeat(junctionAt)}${junctionChar}${"─".repeat(Math.max(0, width - junctionAt - 1))}`} fg={colors.separator} />
+}
+
+export const SeparatorColumn = ({ height, junctionRows }: { height: number; junctionRows?: readonly number[] }) => {
+	const junctions = new Set(junctionRows)
+	return (
+		<box width={1} height={height} flexDirection="column">
+			{Array.from({ length: height }, (_, index) => (
+				<PlainLine key={index} text={junctions.has(index) ? "├" : "│"} fg={colors.separator} />
+			))}
+		</box>
+	)
+}
+
+export const ModalFrame = ({
+	children,
+	left,
+	top,
+	width,
+	height,
+	junctionRows = [],
+	backgroundColor = "#1a1a2e",
+}: {
+	children: React.ReactNode
+	left: number
+	top: number
+	width: number
+	height: number
+	junctionRows?: readonly number[]
+	backgroundColor?: string
+}) => {
+	const innerWidth = Math.max(1, width - 2)
+	const innerHeight = Math.max(1, height - 2)
+	const junctions = new Set(junctionRows)
+
+	return (
+		<box position="absolute" left={left} top={top} width={width} height={height} flexDirection="column" backgroundColor={backgroundColor}>
+			<PlainLine text={`┌${"─".repeat(innerWidth)}┐`} 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} />)}
+				</box>
+				<box width={innerWidth} height={innerHeight} flexDirection="column">
+					{children}
+				</box>
+				<box width={1} height={innerHeight} flexDirection="column">
+					{Array.from({ length: innerHeight }, (_, index) => <PlainLine key={index} text={junctions.has(index) ? "┤" : "│"} fg={colors.separator} />)}
+				</box>
+			</box>
+			<PlainLine text={`└${"─".repeat(innerWidth)}┘`} fg={colors.separator} />
+		</box>
+	)
+}

package/src/ui/pullRequests.ts

@@ -0,0 +1,72 @@
+import type { PullRequestItem, PullRequestLabel } 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
+}
+
+export const checkLabel = (pullRequest: PullRequestItem) => pullRequest.checkSummary
+
+export const statusColor = (status: PullRequestItem["reviewStatus"] | PullRequestItem["checkStatus"]) => colors.status[status]
+
+export const reviewIcon = (pullRequest: PullRequestItem) => {
+	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 "·"
+}
+
+const fallbackLabelColor = (name: string) => {
+	let hash = 0
+	for (const char of name) {
+		hash = (hash * 31 + char.charCodeAt(0)) >>> 0
+	}
+	const hue = hash % 360
+	return `hsl(${hue} 55% 35%)`
+}
+
+export const labelColor = (label: PullRequestLabel) => label.color ?? fallbackLabelColor(label.name)
+
+export const labelTextColor = (color: string) => {
+	if (color.startsWith("#") && color.length === 7) {
+		const red = Number.parseInt(color.slice(1, 3), 16)
+		const green = Number.parseInt(color.slice(3, 5), 16)
+		const blue = Number.parseInt(color.slice(5, 7), 16)
+		const luminance = (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255
+		return luminance > 0.6 ? "#111111" : "#f8fafc"
+	}
+	return "#f8fafc"
+}
+
+export const groupBy = <T,>(items: readonly T[], getKey: (item: T) => string, orderedKeys: readonly string[] = []) => {
+	const groups = new Map<string, T[]>()
+	for (const item of items) {
+		const key = getKey(item)
+		const existing = groups.get(key)
+		if (existing) {
+			existing.push(item)
+		} else {
+			groups.set(key, [item])
+		}
+	}
+
+	const order = new Map(orderedKeys.map((key, index) => [key, index]))
+	return [...groups.entries()].sort((left, right) => {
+		const leftIndex = order.get(left[0])
+		const rightIndex = order.get(right[0])
+		if (leftIndex !== undefined && rightIndex !== undefined) return leftIndex - rightIndex
+		if (leftIndex !== undefined) return -1
+		if (rightIndex !== undefined) return 1
+		return left[0].localeCompare(right[0])
+	})
+}