fix(app): cleanup comment component usage

This commit is contained in:
adamelmore
2026-01-25 06:20:44 -06:00
parent a5c058e584
commit ddc4e89359
5 changed files with 207 additions and 229 deletions

View File

@@ -4,7 +4,7 @@ import { RadioGroup } from "./radio-group"
import { DiffChanges } from "./diff-changes"
import { FileIcon } from "./file-icon"
import { Icon } from "./icon"
import { LineCommentAnchor } from "./line-comment"
import { LineComment, LineCommentEditor } from "./line-comment"
import { StickyAccordionHeader } from "./sticky-accordion-header"
import { useDiffComponent } from "../context/diff"
import { useI18n } from "../context/i18n"
@@ -305,7 +305,6 @@ export const SessionReview = (props: SessionReviewProps) => {
<For each={props.diffs}>
{(diff) => {
let wrapper: HTMLDivElement | undefined
let textarea: HTMLTextAreaElement | undefined
const comments = createMemo(() => (props.comments ?? []).filter((c) => c.file === diff.file))
const commentedLines = createMemo(() => comments().map((c) => c.selection))
@@ -396,7 +395,6 @@ export const SessionReview = (props: SessionReviewProps) => {
if (!range) return
setDraft("")
scheduleAnchors()
requestAnimationFrame(() => textarea?.focus())
})
createEffect(() => {
@@ -565,7 +563,7 @@ export const SessionReview = (props: SessionReviewProps) => {
<For each={comments()}>
{(comment) => (
<LineCommentAnchor
<LineComment
id={comment.id}
top={positions()[comment.id]}
onMouseEnter={() => setSelection({ file: comment.file, range: comment.selection })}
@@ -578,83 +576,31 @@ export const SessionReview = (props: SessionReviewProps) => {
openComment(comment)
}}
open={isCommentOpen(comment)}
>
<div data-slot="session-review-comment-content">
<div data-slot="session-review-comment-text">{comment.comment}</div>
<div data-slot="session-review-comment-label">
Comment on {selectionLabel(comment.selection)}
</div>
</div>
</LineCommentAnchor>
comment={comment.comment}
selection={selectionLabel(comment.selection)}
/>
)}
</For>
<Show when={draftRange()}>
{(range) => (
<Show when={draftTop() !== undefined}>
<LineCommentAnchor
<LineCommentEditor
top={draftTop()}
onClick={() => textarea?.focus()}
open={true}
variant="editor"
>
<div data-slot="session-review-comment-draft">
<textarea
ref={textarea}
data-slot="session-review-comment-textarea"
rows={3}
placeholder="Add comment"
value={draft()}
onInput={(e) => setDraft(e.currentTarget.value)}
onKeyDown={(e) => {
if (e.key === "Escape") {
e.preventDefault()
e.stopPropagation()
setCommenting(null)
return
}
if (e.key !== "Enter") return
if (e.shiftKey) return
e.preventDefault()
const value = draft().trim()
if (!value) return
props.onLineComment?.({
file: diff.file,
selection: range(),
comment: value,
preview: selectionPreview(diff, range()),
})
setCommenting(null)
}}
/>
<div data-slot="session-review-comment-actions">
<div data-slot="session-review-comment-draft-label">
Commenting on {selectionLabel(range())}
</div>
<Button size="small" variant="ghost" onClick={() => setCommenting(null)}>
Cancel
</Button>
<Button
size="small"
variant="primary"
disabled={draft().trim().length === 0}
onClick={() => {
const value = draft().trim()
if (!value) return
props.onLineComment?.({
file: diff.file,
selection: range(),
comment: value,
preview: selectionPreview(diff, range()),
})
setCommenting(null)
}}
>
Comment
</Button>
</div>
</div>
</LineCommentAnchor>
value={draft()}
selection={selectionLabel(range())}
onInput={setDraft}
onCancel={() => setCommenting(null)}
onSubmit={(comment) => {
props.onLineComment?.({
file: diff.file,
selection: range(),
comment,
preview: selectionPreview(diff, range()),
})
setCommenting(null)
}}
/>
</Show>
)}
</Show>