Function CommentsPanel

packages/app-core/src/components/CommentsPanel.tsx:57–356

({
  note,
  draft,
  onCaptureDraft,
  onClearDraft,
  onJump
}: Props)

}

export function CommentsPanel({
  note,
  draft,
  onCaptureDraft,
  onClearDraft,
  onJump
}: Props): JSX.Element {
  const comments = useStore((s) => s.noteComments[note.path] ?? EMPTY_COMMENTS)
  const activeCommentId = useStore((s) => s.activeCommentId)
  const loadNoteComments = useStore((s) => s.loadNoteComments)
  const addNoteComment = useStore((s) => s.addNoteComment)
  const updateNoteComment = useStore((s) => s.updateNoteComment)
  const deleteNoteComment = useStore((s) => s.deleteNoteComment)
  const setActiveCommentId = useStore((s) => s.setActiveCommentId)
  const setFocusedPanel = useStore((s) => s.setFocusedPanel)
  const focusedPanel = useStore((s) => s.focusedPanel)
  const panelWidth = useStore((s) => s.panelWidths.comments)
  const setPanelWidth = useStore((s) => s.setPanelWidth)
  const { startResize } = usePanelResize(panelWidth, (px) => setPanelWidth('comments', px))

  const [body, setBody] = useState('')
  const [editingId, setEditingId] = useState<string | null>(null)
  const [editBody, setEditBody] = useState('')
  const textareaRef = useRef<HTMLTextAreaElement | null>(null)
  const panelRef = useRef<HTMLElement | null>(null)
  const notePathRef = useRef(note.path)
  const commentsFocused = focusedPanel === 'comments'

  useEffect(() => {
    void loadNoteComments(note.path)
  }, [loadNoteComments, note.path])

  useEffect(() => {
    if (!draft) return
    const raf = requestAnimationFrame(() => textareaRef.current?.focus())
    return () => cancelAnimationFrame(raf)
  }, [draft])

  useEffect(() => {
    if (notePathRef.current === note.path) return
    notePathRef.current = note.path
    setBody('')
    setEditingId(null)
    setEditBody('')
    onClearDraft()
  }, [note.path])

  useEffect(() => {
    if (!activeCommentId) return
    const raf = requestAnimationFrame(() => {
      document
        .querySelector<HTMLElement>(`[data-comment-card-id="${cssEscape(activeCommentId)}"]`)
        ?.scrollIntoView({ block: 'nearest' })
    })
    return () => cancelAnimationFrame(raf)
  }, [activeCommentId, comments])

  const unresolved = useMemo(