@kitlangton/ghui 0.2.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@kitlangton/ghui",
-	"version": "0.2.0",
+	"version": "0.2.1",
 	"description": "Terminal UI for GitHub pull requests",
 	"type": "module",
 	"license": "MIT",

package/src/App.tsx

@@ -8,7 +8,7 @@ import { Cause, Effect, Layer, Schedule } from "effect"
 import * as AsyncResult from "effect/unstable/reactivity/AsyncResult"
 import * as Atom from "effect/unstable/reactivity/Atom"
 import * as AtomRegistry from "effect/unstable/reactivity/AtomRegistry"
-import { useContext, useEffect, useMemo, useRef, useState } from "react"
+import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"
 import { buildAppCommands } from "./appCommands.js"
 import type { AppCommand } from "./commands.js"
 import { clampCommandIndex, commandEnabled, defineCommand, filterCommands, sortCommandsByScope } from "./commands.js"
@@ -603,6 +603,7 @@ export const App = () => {
 	const [terminalFocused, setTerminalFocused] = useState(true)
 	const [startupLoadComplete, setStartupLoadComplete] = useState(false)
 	const [loadingMoreKey, setLoadingMoreKey] = useState<string | null>(null)
+	const [detailPreviewScrollTop, setDetailPreviewScrollTop] = useState(0)
 	const usernameResult = useAtomValue(usernameAtom)
 	const loadRepoLabels = useAtomSet(listRepoLabelsAtom, { mode: "promise" })
 	const loadPullRequestPage = useAtomSet(listOpenPullRequestPageAtom, { mode: "promise" })
@@ -644,6 +645,7 @@ export const App = () => {
 	const maybeRefreshPullRequestsRef = useRef<(minimumAgeMs: number) => void>(() => {})
 	const detailScrollRef = useRef<ScrollBoxRenderable | null>(null)
 	const detailPreviewScrollRef = useRef<ScrollBoxRenderable | null>(null)
+	const detailPreviewScrollTopRef = useRef(0)
 	const diffScrollRef = useRef<ScrollBoxRenderable | null>(null)
 	const prListScrollRef = useRef<ScrollBoxRenderable | null>(null)
 	const diffRenderableRefs = useRef(new Map<number, DiffRenderable>())
@@ -1071,6 +1073,10 @@ export const App = () => {
 		setDiffPreferredSide(null)
 		setDiffCommentRangeStartIndex(null)
 		detailPreviewScrollRef.current?.scrollTo({ x: 0, y: 0 })
+		if (detailPreviewScrollTopRef.current !== 0) {
+			detailPreviewScrollTopRef.current = 0
+			setDetailPreviewScrollTop(0)
+		}
 	}, [selectedIndex])
 
 	useEffect(() => {
@@ -1211,8 +1217,6 @@ export const App = () => {
 		title: `${loadingIndicator} Loading pull request details`,
 		hint: `${selectedPullRequest.repository} #${selectedPullRequest.number}`,
 	} : detailPlaceholderContent
-	const detailJunctions = isSelectedPullRequestDetailLoading ? [] : getDetailJunctionRows(selectedPullRequest, rightPaneWidth, true, rightContentWidth, selectedConversationItems, selectedConversationStatus)
-
 	const halfPage = Math.max(1, Math.floor(wideBodyHeight / 2))
 
 	const loadPullRequestComments = (pullRequest: PullRequestItem, force = false) => {
@@ -1334,8 +1338,23 @@ export const App = () => {
 		setDiffFileIndex((current) => current === nextIndex ? current : nextIndex)
 	}
 
-	const scrollDetailPreviewBy = (y: number) => detailPreviewScrollRef.current?.scrollBy({ x: 0, y })
-	const scrollDetailPreviewTo = (y: number) => detailPreviewScrollRef.current?.scrollTo({ x: 0, y })
+	const syncDetailPreviewScrollState = useCallback(() => {
+		const scrollTop = detailPreviewScrollRef.current?.scrollTop
+		if (scrollTop === undefined) return
+		const nextTop = Math.max(0, Math.floor(scrollTop))
+		if (detailPreviewScrollTopRef.current === nextTop) return
+		detailPreviewScrollTopRef.current = nextTop
+		setDetailPreviewScrollTop(nextTop)
+	}, [])
+
+	const scrollDetailPreviewBy = (y: number) => {
+		detailPreviewScrollRef.current?.scrollBy({ x: 0, y })
+		syncDetailPreviewScrollState()
+	}
+	const scrollDetailPreviewTo = (y: number) => {
+		detailPreviewScrollRef.current?.scrollTo({ x: 0, y })
+		syncDetailPreviewScrollState()
+	}
 
 	const ensureDiffLineVisible = (line: number) => {
 		const scroll = diffScrollRef.current
@@ -1354,6 +1373,16 @@ export const App = () => {
 		return () => globalThis.clearInterval(interval)
 	}, [diffFullView, stackedDiffFiles])
 
+	useLayoutEffect(() => {
+		if (!isWideLayout || detailFullView || diffFullView) return
+		const scroll = detailPreviewScrollRef.current
+		if (!scroll) return
+		const sync = () => { syncDetailPreviewScrollState() }
+		scroll.verticalScrollBar.on("change", sync)
+		syncDetailPreviewScrollState()
+		return () => { scroll.verticalScrollBar.off("change", sync) }
+	}, [isWideLayout, detailFullView, diffFullView, syncDetailPreviewScrollState])
+
 	const jumpDiffFile = (delta: 1 | -1) => {
 		if (readyDiffFiles.length === 0) return
 		const nextIndex = safeDiffFileIndex(readyDiffFiles, diffFileIndex + delta)
@@ -2284,6 +2313,16 @@ export const App = () => {
 	const wideDetailBodyViewportHeight = Math.max(1, wideBodyHeight - wideDetailHeaderHeight)
 	const wideDetailBodyHeight = getScrollableDetailBodyHeight(selectedPullRequest, rightContentWidth, selectedConversationItems, selectedConversationStatus)
 	const wideDetailBodyScrollable = wideDetailBodyHeight > wideDetailBodyViewportHeight
+	const detailJunctions = isSelectedPullRequestDetailLoading ? [] : getDetailJunctionRows({
+		pullRequest: selectedPullRequest,
+		paneWidth: rightPaneWidth,
+		showChecks: true,
+		contentWidth: rightContentWidth,
+		conversationItems: selectedConversationItems,
+		conversationStatus: selectedConversationStatus,
+		bodyScrollTop: detailPreviewScrollTop,
+		bodyViewportHeight: wideDetailBodyViewportHeight,
+	})
 
 	const prListProps = {
 		groups: visibleGroups,

package/src/ui/DetailsPane.tsx

@@ -345,35 +345,43 @@ const ChecksSection = ({ checks, contentWidth }: { checks: readonly CheckItem[];
 
 const conversationDividerBodyRow = (pullRequest: PullRequestItem, contentWidth: number, conversationItems: readonly PullRequestConversationItem[], conversationStatus: DetailConversationStatus) => {
 	if (!pullRequest.detailLoaded) return null
-	const summaryRows = bodyPreview(pullRequest.body, contentWidth, DETAIL_BODY_SCROLL_LIMIT)
-	const conversationRows = conversationPreview({
-		items: conversationItems,
-		status: conversationStatus,
-		width: contentWidth,
-		limit: Math.max(0, DETAIL_BODY_SCROLL_LIMIT - summaryRows.length - 1),
-	})
-	return conversationRows.length > 0 ? summaryRows.length : null
+	const dividerIndex = detailBodyPreview({ pullRequest, contentWidth, limit: DETAIL_BODY_SCROLL_LIMIT, conversationItems, conversationStatus })
+		.findIndex((line) => line.divider === true)
+	return dividerIndex >= 0 ? dividerIndex : null
 }
 
-export const getDetailJunctionRows = (
-	pullRequest: PullRequestItem | null,
-	paneWidth: number,
+export const getDetailJunctionRows = ({
+	pullRequest,
+	paneWidth,
 	showChecks = false,
-	contentWidth = Math.max(1, paneWidth - 2),
-	conversationItems: readonly PullRequestConversationItem[] = [],
-	conversationStatus: DetailConversationStatus = "idle",
-): readonly number[] => {
+	contentWidth,
+	conversationItems = [],
+	conversationStatus = "idle",
+	bodyScrollTop = 0,
+	bodyViewportHeight = Number.POSITIVE_INFINITY,
+}: {
+	readonly pullRequest: PullRequestItem | null
+	readonly paneWidth: number
+	readonly showChecks?: boolean
+	readonly contentWidth?: number
+	readonly conversationItems?: readonly PullRequestConversationItem[]
+	readonly conversationStatus?: DetailConversationStatus
+	readonly bodyScrollTop?: number
+	readonly bodyViewportHeight?: number
+}): readonly number[] => {
 	if (!pullRequest) return [DETAIL_PLACEHOLDER_ROWS]
+	const resolvedContentWidth = contentWidth ?? Math.max(1, paneWidth - 2)
 	const titleLines = wrapText(pullRequest.title, Math.max(1, paneWidth - 2)).length
 	const detailDividerRow = 1 + titleLines + 1
 	const checks = deduplicateChecks(pullRequest.checks)
 	const checksDividerRow = checks.length > 0 ? detailDividerRow + 1 + checksRowCount(checks) + 1 : -1
 	const headerHeight = getDetailHeaderHeight(pullRequest, paneWidth, showChecks)
-	const conversationDivider = conversationDividerBodyRow(pullRequest, contentWidth, conversationItems, conversationStatus)
+	const conversationDivider = conversationDividerBodyRow(pullRequest, resolvedContentWidth, conversationItems, conversationStatus)
+	const visibleConversationDivider = conversationDivider === null ? null : conversationDivider - Math.max(0, Math.floor(bodyScrollTop))
 	return [
 		detailDividerRow,
 		showChecks && checks.length > 0 ? checksDividerRow : -1,
-		conversationDivider === null ? -1 : headerHeight + conversationDivider,
+		visibleConversationDivider === null || visibleConversationDivider < 0 || visibleConversationDivider >= bodyViewportHeight ? -1 : headerHeight + visibleConversationDivider,
 	].filter((row) => row >= 0)
 }