main
import { ErrorPanel, modalTextareaClass, PanelNote } from '@app/components'
import type { ReviewIntent } from '@app/domains/pulls/model'
import {
createComment,
type InlineDraft,
listCommentTree,
listPullFiles,
type PullRef,
submitReview,
} from '@app/domains/pulls/model'
import type { MessageKey } from '@app/i18n'
import { t as tr, useT } from '@app/i18n'
import { useAsync } from '@app/lib'
import { Button } from '@app/ui'
import { useEffect, useMemo, useState } from 'react'
import { type AnchoredComment, anchorKey, changedFileToDiff, type InlineAnchor } from '../model/meta'
import { Copyable, InlineDiffCard } from './parts'
export interface FilesTabProps {
refObj: PullRef
headSha: string
/** File path to expand/scroll to when jumping from an inline comment. */
focusPath: string
/** One-based line to scroll to inside `focusPath`; 0 disables scrolling. */
focusLine?: number
onChanged: () => void
}
/** 变更文件页签：逐文件 diff + 行内评论 + 待提交评审草稿。 */
export function FilesTab({ refObj, headSha, focusPath, focusLine = 0, onChanged }: FilesTabProps) {
const { t, tc } = useT()
const [tick, setTick] = useState(0)
const [collapsed, setCollapsed] = useState<Record<string, boolean>>({})
const [draftAnchor, setDraftAnchor] = useState<InlineAnchor | null>(null)
const [draftBody, setDraftBody] = useState('')
const [pending, setPending] = useState<InlineDraft[]>([])
const [reviewBody, setReviewBody] = useState('')
const [busy, setBusy] = useState(false)
const [error, setError] = useState<string | null>(null)
const files = useAsync(() => listPullFiles(refObj), [refObj.space, refObj.repo, refObj.pull, tick])
const threads = useAsync(() => listCommentTree(refObj), [refObj.space, refObj.repo, refObj.pull, tick])
const commentsByLine = useMemo(() => {
const map = new Map<string, AnchoredComment[]>()
for (const thread of threads.data ?? []) {
const root = thread.root
if (!root.path || root.line == null) continue
// 评论自带 side（left/right），必须按实际值归位，否则删除行上的评论会落到新增侧。
const key = anchorKey(root.path, root.line, root.side === 'left' ? 'left' : 'right')
const list = map.get(key) ?? []
list.push({ id: root.id, body: root.body }, ...thread.replies.map((r) => ({ id: r.id, body: r.body })))
map.set(key, list)
}
return map
}, [threads.data])
const rows = useMemo(() => (files.data ?? []).map((file) => changedFileToDiff(file)), [files.data])
// 从行内评论跳转过来时，滚动到目标行（两侧都试，命中即止）。
useEffect(() => {
if (!focusLine || !focusPath) return
const id = `diff-right-${encodeURIComponent(focusPath)}-${focusLine}`
const alt = `diff-left-${encodeURIComponent(focusPath)}-${focusLine}`
const target = document.getElementById(id) ?? document.getElementById(alt)
if (target) {
target.scrollIntoView({ block: 'center' })
target.classList.add('bg-[rgba(240,178,50,0.16)]')
const timer = window.setTimeout(() => target.classList.remove('bg-[rgba(240,178,50,0.16)]'), 2000)
return () => window.clearTimeout(timer)
}
}, [focusLine, focusPath, rows.length])
const totalAdd = rows.reduce((sum, row) => sum + row.additions, 0)
const totalDel = rows.reduce((sum, row) => sum + row.deletions, 0)
const failure = files.error as { code?: number; message?: string } | undefined
async function postLineComment() {
if (!draftAnchor || !draftBody.trim()) return
setBusy(true)
setError(null)
try {
await createComment(refObj, {
body: draftBody.trim(),
path: draftAnchor.path,
line: draftAnchor.line,
side: draftAnchor.side === 'left' ? 'left' : 'right',
commit_sha: headSha || null,
})
setDraftAnchor(null)
setDraftBody('')
setTick((t) => t + 1)
onChanged()
} catch (f) {
setError(f instanceof Error ? f.message : t('pull.files.commentFailed'))
} finally {
setBusy(false)
}
}
function queueAsReviewDraft() {
if (!draftAnchor || !draftBody.trim()) return
setPending((prev) => [
...prev,
{ path: draftAnchor.path, line: draftAnchor.line, side: draftAnchor.side, body: draftBody.trim() },
])
setDraftAnchor(null)
setDraftBody('')
}
async function submitPendingReview(state: ReviewIntent) {
setBusy(true)
setError(null)
try {
await submitReview(refObj, { state, body: reviewBody || null, comments: pending })
setPending([])
setReviewBody('')
setTick((t) => t + 1)
onChanged()
} catch (f) {
setError(f instanceof Error ? f.message : t('pull.files.reviewFailed'))
} finally {
setBusy(false)
}
}
if (files.loading && !files.data) return <PanelNote text={t('pull.files.loading')} />
if (failure)
return (
<ErrorPanel
status={failure.code ?? 0}
what={t('pull.files.errorFiles')}
note={failure.message}
onRetry={() => setTick((tick) => tick + 1)}
/>
)
if (!rows.length) return <PanelNote text={t('pull.files.empty')} />
return (
<div className="space-y-3">
<p className="text-[12.5px] text-shell-ink-muted">
{tc('pull.files.summary', rows.length)} · <span className="text-[#1a7f37]">+{totalAdd}</span>{' '}
<span className="text-[#b42318]">−{totalDel}</span>
{headSha ? (
<>
{' '}
· {t('pull.files.compareVersion')} <Copyable text={headSha} />
</>
) : null}
</p>
{rows.map((diff) => {
const open = !(collapsed[diff.path] ?? false) || diff.path === focusPath
return (
<section
key={diff.path}
id={`file-${encodeURIComponent(diff.path)}`}
className="group/diff overflow-hidden rounded-xl border border-shell-hairline bg-shell-surface"
>
<button
type="button"
aria-expanded={open}
onClick={() => setCollapsed((prev) => ({ ...prev, [diff.path]: open }))}
className="flex w-full items-center gap-2 border-b border-shell-hairline bg-shell-field px-3 py-2 text-left transition-colors hover:brightness-95"
>
<span className={`shrink-0 font-mono text-[11px] font-semibold ${statusTone(diff.status)}`}>
{statusLabel(diff.status)}
</span>
<span className="min-w-0 flex-1 truncate font-mono text-[12.5px]" title={diff.path}>
{diff.oldPath && diff.oldPath !== diff.path ? `${diff.oldPath} → ${diff.path}` : diff.path}
</span>
<span className="shrink-0 font-mono text-[11.5px]">
<span className="text-[#1a7f37]">+{diff.additions}</span>{' '}
<span className="text-[#b42318]">−{diff.deletions}</span>
</span>
</button>
{open ? (
<InlineDiffCard
file={diff}
commentsByLine={commentsByLine}
onRequestComment={(anchor) => {
setDraftAnchor(anchor)
setDraftBody('')
}}
renderDraft={(anchor) =>
draftAnchor &&
draftAnchor.path === anchor.path &&
draftAnchor.line === anchor.line &&
draftAnchor.side === anchor.side ? (
<div className="space-y-1.5">
<textarea
autoFocus
value={draftBody}
onChange={(event) => setDraftBody(event.target.value)}
rows={3}
placeholder={t('pull.files.linePlaceholder', {
path: anchor.path,
line: anchor.line,
side: anchor.side === 'left' ? t('pull.files.sideOld') : t('pull.files.sideNew'),
})}
className={modalTextareaClass}
/>
{error ? <p className="text-[12px] text-[#b42318]">{error}</p> : null}
<div className="flex items-center gap-2">
<Button className="h-7 text-[12px]" disabled={busy} onClick={() => void postLineComment()}>
{t('pull.files.postLine')}
</Button>
<Button
variant="secondary"
className="h-7 text-[12px]"
disabled={busy}
onClick={queueAsReviewDraft}
>
{t('pull.files.queueReview')}
</Button>
<Button variant="ghost" className="h-7 text-[12px]" onClick={() => setDraftAnchor(null)}>
{t('common.action.cancel')}
</Button>
</div>
</div>
) : null
}
/>
) : null}
</section>
)
})}
{pending.length > 0 ? (
<div className="sticky bottom-3 rounded-xl border-2 border-shell-tile bg-shell-surface p-4 shadow-lg">
<h4 className="mb-2 text-[13px] font-semibold">{t('pull.files.pendingTitle', { count: pending.length })}</h4>
<ul className="mb-2 max-h-32 space-y-1 overflow-y-auto text-[12px] text-shell-ink-muted">
{pending.map((draft, index) => (
<li key={index} className="flex items-center gap-2">
<span className="min-w-0 flex-1 truncate font-mono">
{draft.path}:{draft.line}
</span>
<span className="min-w-0 max-w-[50%] truncate">{draft.body}</span>
<button
type="button"
aria-label={t('pull.files.removeDraft')}
onClick={() => setPending((prev) => prev.filter((_, i) => i !== index))}
className="text-shell-ink-muted hover:text-[#b42318]"
>
×
</button>
</li>
))}
</ul>
<textarea
value={reviewBody}
onChange={(event) => setReviewBody(event.target.value)}
rows={2}
placeholder={t('pull.files.reviewSummaryPlaceholder')}
className={modalTextareaClass}
/>
<div className="mt-2 flex items-center gap-2">
<Button className="h-8 text-[12.5px]" disabled={busy} onClick={() => void submitPendingReview('approve')}>
{t('pull.files.approve')}
</Button>
<Button
variant="secondary"
className="h-8 text-[12.5px]"
disabled={busy}
onClick={() => void submitPendingReview('request_changes')}
>
{t('pull.files.requestChanges')}
</Button>
<Button
variant="secondary"
className="h-8 text-[12.5px]"
disabled={busy}
onClick={() => void submitPendingReview('comment')}
>
{t('pull.files.commentOnly')}
</Button>
<Button
variant="secondary"
className="h-8 text-[12.5px]"
disabled={busy}
onClick={() => void submitPendingReview('pending')}
>
{t('pull.files.saveAsPending')}
</Button>
<Button variant="ghost" className="h-8 text-[12px]" onClick={() => setPending([])}>
{t('pull.files.discard')}
</Button>
</div>
</div>
) : null}
</div>
)
}
function statusLabel(status: string): string {
const key = STATUS_KEYS[status]
return key ? tr(key) : tr('pull.files.status.modified')
}
const STATUS_KEYS: Record<string, MessageKey> = {
added: 'pull.files.status.added',
deleted: 'pull.files.status.deleted',
renamed: 'pull.files.status.renamed',
copied: 'pull.files.status.copied',
binary: 'pull.files.status.binary',
modified: 'pull.files.status.modified',
}
const statusTone = (status: string) =>
status === 'added'
? 'text-[#1a7f37]'
: status === 'deleted'
? 'text-[#b42318]'
: status === 'binary'
? 'text-[#8a6100]'
: 'text-shell-ink-muted'