@open-mercato/documents 0.6.8-develop.7016.1.4ed7b1e49d

package/src/modules/documents/backend/documents/FolderDialog.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import * as React from 'react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@open-mercato/ui/primitives/dialog'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Label } from '@open-mercato/ui/primitives/label'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { FolderRow } from './documentsListTypes'
+
+export type FolderDialogState = { mode: 'create'; parentFolderId: string | null } | { mode: 'rename'; folder: FolderRow }
+
+export function FolderDialog({ state, onOpenChange, onSubmit }: {
+  state: FolderDialogState | null
+  onOpenChange: (open: boolean) => void
+  onSubmit: (name: string) => boolean | void | Promise<boolean | void>
+}) {
+  const t = useT()
+  const inputId = React.useId()
+  const [name, setName] = React.useState('')
+  const [isSubmitting, setIsSubmitting] = React.useState(false)
+  React.useEffect(() => setName(state?.mode === 'rename' ? state.folder.name : ''), [state])
+
+  const submit = React.useCallback(async () => {
+    const nextName = name.trim()
+    if (!nextName || isSubmitting) return
+    setIsSubmitting(true)
+    try {
+      const result = await onSubmit(nextName)
+      // Preserve the legacy void callback contract while allowing callers to
+      // keep the dialog open by returning false after a handled failure.
+      if (result !== false) onOpenChange(false)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }, [isSubmitting, name, onOpenChange, onSubmit])
+
+  const handleOpenChange = React.useCallback((open: boolean) => {
+    if (!isSubmitting) onOpenChange(open)
+  }, [isSubmitting, onOpenChange])
+
+  return (
+    <Dialog open={state !== null} onOpenChange={handleOpenChange}>
+      <DialogContent onKeyDown={(event) => {
+        if ((event.metaKey || event.ctrlKey) && event.key === 'Enter' && name.trim() && !isSubmitting) { event.preventDefault(); void submit() }
+        if (event.key === 'Escape' && !isSubmitting) onOpenChange(false)
+      }}>
+        <DialogHeader><DialogTitle>{state?.mode === 'rename' ? t('documents.folders.renameTitle') : t('documents.folders.createTitle')}</DialogTitle></DialogHeader>
+        <form className="space-y-4" onSubmit={(event) => { event.preventDefault(); void submit() }}>
+          <div className="space-y-2">
+            <Label htmlFor={inputId}>{t('documents.folders.name')}</Label>
+            <Input id={inputId} value={name} onChange={(event) => setName(event.target.value)} placeholder={t('documents.folders.namePlaceholder')} disabled={isSubmitting} />
+          </div>
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isSubmitting}>{t('documents.actions.cancel')}</Button>
+            <Button type="submit" disabled={!name.trim() || isSubmitting}>{state?.mode === 'rename' ? t('documents.folders.actions.rename') : t('documents.folders.actions.create')}</Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/modules/documents/backend/documents/FolderTree.tsx

@@ -0,0 +1,72 @@
+"use client"
+
+import * as React from 'react'
+import { RowActions } from '@open-mercato/ui/backend/RowActions'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { buildFolderTree, type FolderNode, type FolderRow } from './documentsListTypes'
+
+type FolderTreeProps = {
+  folders: FolderRow[]
+  selectedFolderId: string | null
+  onSelect: (folderId: string | null) => void
+  onCreate: (parentFolderId: string | null) => void
+  onRename: (folder: FolderRow) => void
+  onDelete: (folder: FolderRow) => void
+  canCreateFolder: boolean
+}
+
+function FolderNodes({ nodes, selectedFolderId, onSelect, onRename, onDelete }: {
+  nodes: FolderNode[]
+  selectedFolderId: string | null
+  onSelect: (folderId: string) => void
+  onRename: (folder: FolderRow) => void
+  onDelete: (folder: FolderRow) => void
+}) {
+  const t = useT()
+  return (
+    <ul className="space-y-1">
+      {nodes.map((node) => (
+        <li key={node.id} className="space-y-1">
+          <div className="flex items-center gap-1">
+            <Button type="button" aria-current={selectedFolderId === node.id ? 'page' : undefined} variant={selectedFolderId === node.id ? 'secondary' : 'ghost'} className="min-w-0 flex-1 justify-start" onClick={() => onSelect(node.id)}>
+              <span className={node.visibility === 'ancestor' ? 'truncate text-muted-foreground' : 'truncate'}>{node.name}</span>
+            </Button>
+            {node.canEdit ? (
+              <RowActions items={[
+                { id: 'rename', label: t('documents.folders.actions.rename'), onSelect: () => onRename(node) },
+                { id: 'delete', label: t('documents.actions.delete'), destructive: true, onSelect: () => onDelete(node) },
+              ]} />
+            ) : null}
+          </div>
+          {node.visibility === 'ancestor' ? <p className="pl-3 text-xs text-muted-foreground">{t('documents.folders.visibility.ancestor')}</p> : null}
+          {node.visibility === 'contains-visible' ? <p className="pl-3 text-xs text-muted-foreground">{t('documents.folders.visibility.shared')}</p> : null}
+          {node.children.length > 0 ? <div className="ml-4"><FolderNodes nodes={node.children} selectedFolderId={selectedFolderId} onSelect={onSelect} onRename={onRename} onDelete={onDelete} /></div> : null}
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export function FolderTree(props: FolderTreeProps) {
+  const t = useT()
+  const tree = React.useMemo(() => buildFolderTree(props.folders), [props.folders])
+  const selected = props.selectedFolderId ? props.folders.find((folder) => folder.id === props.selectedFolderId) : null
+  return (
+    <aside className="space-y-3 rounded-lg border border-border bg-card p-4 lg:col-span-1 lg:max-h-screen lg:self-start lg:overflow-y-auto">
+      <div className="flex items-center justify-between gap-2">
+        <h2 className="text-sm font-semibold">{t('documents.folders.title')}</h2>
+        {props.canCreateFolder ? (
+          <Button type="button" size="sm" variant="outline" onClick={() => props.onCreate(selected?.canEdit ? selected.id : null)}>
+            {t(selected && !selected.canEdit ? 'documents.folders.actions.newAtRoot' : 'documents.folders.actions.new')}
+          </Button>
+        ) : null}
+      </div>
+      {props.canCreateFolder && selected && !selected.canEdit ? <p className="text-xs text-muted-foreground">{t('documents.folders.newAtRootHint')}</p> : null}
+      <Button type="button" aria-current={props.selectedFolderId === null ? 'page' : undefined} variant={props.selectedFolderId === null ? 'secondary' : 'ghost'} className="w-full justify-start" onClick={() => props.onSelect(null)}>{t('documents.folders.root')}</Button>
+      {tree.length > 0 ? (
+        <FolderNodes nodes={tree} selectedFolderId={props.selectedFolderId} onSelect={(id) => props.onSelect(id)} onRename={props.onRename} onDelete={props.onDelete} />
+      ) : <p className="rounded-md border border-border bg-muted/20 p-3 text-sm text-muted-foreground">{t('documents.folders.empty')}</p>}
+    </aside>
+  )
+}

package/src/modules/documents/backend/documents/MoveDocumentDialog.tsx

@@ -0,0 +1,70 @@
+"use client"
+
+import * as React from 'react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@open-mercato/ui/primitives/dialog'
+import { Label } from '@open-mercato/ui/primitives/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@open-mercato/ui/primitives/select'
+import { useDialogKeyHandler } from '@open-mercato/ui/hooks/useDialogKeyHandler'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { DocumentRow, FolderRow } from './documentsListTypes'
+
+const ROOT_VALUE = '__documents_root__'
+
+export function MoveDocumentDialog({ document, folders, open, onOpenChange, onMove }: {
+  document: DocumentRow | null
+  folders: FolderRow[]
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onMove: (document: DocumentRow, folderId: string | null) => Promise<boolean | void>
+}) {
+  const t = useT()
+  const [value, setValue] = React.useState(ROOT_VALUE)
+  const [saving, setSaving] = React.useState(false)
+  const writableFolders = React.useMemo(() => folders.filter((folder) => folder.canEdit), [folders])
+  React.useEffect(() => {
+    if (document && open) setValue(document.folderId ?? ROOT_VALUE)
+  }, [document, open])
+  const submit = React.useCallback(async () => {
+    if (!document || saving || (document.folderId ?? ROOT_VALUE) === value) return
+    setSaving(true)
+    try {
+      const result = await onMove(document, value === ROOT_VALUE ? null : value)
+      if (result !== false) onOpenChange(false)
+    } finally {
+      setSaving(false)
+    }
+  }, [document, onMove, onOpenChange, saving, value])
+  const onKeyDown = useDialogKeyHandler({
+    onConfirm: () => { if (!saving) void submit() },
+    onCancel: () => { if (!saving) onOpenChange(false) },
+  })
+  const handleOpenChange = React.useCallback((nextOpen: boolean) => {
+    if (!saving) onOpenChange(nextOpen)
+  }, [onOpenChange, saving])
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent onKeyDown={onKeyDown}>
+        <DialogHeader>
+          <DialogTitle>{t('documents.folders.moveDocument.title')}</DialogTitle>
+          <DialogDescription>{t('documents.folders.moveDocument.description', { title: document?.title ?? '' })}</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-2">
+          <Label htmlFor="documents-move-folder">{t('documents.columns.folder')}</Label>
+          <Select value={value} onValueChange={setValue} disabled={saving}>
+            <SelectTrigger id="documents-move-folder"><SelectValue /></SelectTrigger>
+            <SelectContent>
+              <SelectItem value={ROOT_VALUE}>{t('documents.folders.root')}</SelectItem>
+              {writableFolders.map((folder) => <SelectItem key={folder.id} value={folder.id}>{folder.name}</SelectItem>)}
+            </SelectContent>
+          </Select>
+        </div>
+        <DialogFooter>
+          <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={saving}>{t('documents.actions.cancel')}</Button>
+          <Button type="button" onClick={() => void submit()} disabled={saving || !document || (document.folderId ?? ROOT_VALUE) === value}>{t('documents.folders.actions.moveDocument')}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/modules/documents/backend/documents/[id]/CommentAnchorNavigation.ts

@@ -0,0 +1,88 @@
+import type { Editor } from '@tiptap/core'
+// Keep this aligned with @tiptap/extension-collaboration. The similarly named
+// y-prosemirror plugin key is a different instance and cannot read its binding.
+import {
+  absolutePositionToRelativePosition,
+  relativePositionToAbsolutePosition,
+  ySyncPluginKey,
+  type ProsemirrorBinding,
+} from '@tiptap/y-tiptap'
+import * as Y from 'yjs'
+
+export type LegacyCommentAnchor = { from: number; to: number }
+export type RelativeCommentAnchor = { version: 2; relativeFrom: string; relativeTo: string }
+export type CommentAnchor = LegacyCommentAnchor | RelativeCommentAnchor
+
+type YSyncState = { binding?: ProsemirrorBinding | null }
+
+function encodeBase64(value: Uint8Array): string {
+  let binary = ''
+  for (const byte of value) binary += String.fromCharCode(byte)
+  return window.btoa(binary)
+}
+
+function decodeBase64(value: string): Uint8Array | null {
+  try {
+    const binary = window.atob(value)
+    return Uint8Array.from(binary, (character) => character.charCodeAt(0))
+  } catch {
+    return null
+  }
+}
+
+function readBinding(editor: Editor): ProsemirrorBinding | null {
+  const pluginState = ySyncPluginKey.getState(editor.state) as YSyncState | undefined
+  return pluginState?.binding ?? null
+}
+
+function validRange(editor: Editor, from: number, to: number): boolean {
+  const docSize = editor.state.doc.content.size
+  return from >= 0 && to >= 0 && from < to && from <= docSize && to <= docSize
+}
+
+export function captureCommentAnchor(editor: Editor): CommentAnchor | null {
+  const { from, to } = editor.state.selection
+  if (!validRange(editor, from, to)) return null
+  const binding = readBinding(editor)
+  if (!binding) return { from, to }
+  const relativeFrom = absolutePositionToRelativePosition(from, binding.type, binding.mapping)
+  const relativeTo = absolutePositionToRelativePosition(to, binding.type, binding.mapping)
+  return {
+    version: 2,
+    relativeFrom: encodeBase64(Y.encodeRelativePosition(relativeFrom)),
+    relativeTo: encodeBase64(Y.encodeRelativePosition(relativeTo)),
+  }
+}
+
+export function resolveCommentAnchor(editor: Editor, anchor: CommentAnchor): LegacyCommentAnchor | null {
+  if (!('version' in anchor)) return validRange(editor, anchor.from, anchor.to) ? anchor : null
+  const binding = readBinding(editor)
+  const encodedFrom = decodeBase64(anchor.relativeFrom)
+  const encodedTo = decodeBase64(anchor.relativeTo)
+  if (!binding || !encodedFrom || !encodedTo) return null
+  try {
+    const from = relativePositionToAbsolutePosition(
+      binding.doc,
+      binding.type,
+      Y.decodeRelativePosition(encodedFrom),
+      binding.mapping,
+    )
+    const to = relativePositionToAbsolutePosition(
+      binding.doc,
+      binding.type,
+      Y.decodeRelativePosition(encodedTo),
+      binding.mapping,
+    )
+    return from !== null && to !== null && validRange(editor, from, to) ? { from, to } : null
+  } catch {
+    return null
+  }
+}
+
+export function jumpToCommentAnchor(editor: Editor, anchor: CommentAnchor): boolean {
+  const range = resolveCommentAnchor(editor, anchor)
+  if (!range) return false
+  editor.commands.setTextSelection(range)
+  editor.commands.focus()
+  return true
+}

package/src/modules/documents/backend/documents/[id]/CommentComposer.tsx

@@ -0,0 +1,136 @@
+"use client"
+
+import * as React from 'react'
+import { AtSign, CornerDownRight, Send, X } from 'lucide-react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Label } from '@open-mercato/ui/primitives/label'
+import { Textarea } from '@open-mercato/ui/primitives/textarea'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { MentionPicker } from './MentionPicker'
+import {
+  bodyContainsPendingMention,
+  removePendingMentionOccurrences,
+  type PendingMention,
+} from './commentTypes'
+
+type CommentComposerProps = {
+  documentId: string
+  body: string
+  pendingMentions: PendingMention[]
+  replyToName: string | null
+  isSubmitting: boolean
+  onBodyChange: (body: string) => void
+  onMentionsChange: React.Dispatch<React.SetStateAction<PendingMention[]>>
+  onSubmit: () => void
+  onCancel: () => void
+  focusSignal?: number | string
+}
+
+export const CommentComposer = React.forwardRef<HTMLFormElement, CommentComposerProps>(function CommentComposer({
+  documentId,
+  body,
+  pendingMentions,
+  replyToName,
+  isSubmitting,
+  onBodyChange,
+  onMentionsChange,
+  onSubmit,
+  onCancel,
+  focusSignal,
+}, forwardedRef) {
+  const t = useT()
+  const composerId = React.useId()
+  const textareaRef = React.useRef<HTMLTextAreaElement | null>(null)
+  const [mentionPickerOpen, setMentionPickerOpen] = React.useState(false)
+
+  React.useEffect(() => {
+    if (focusSignal === undefined) return
+    window.setTimeout(() => textareaRef.current?.focus(), 0)
+  }, [focusSignal])
+
+  const handleMentionPick = React.useCallback((user: { id: string; name: string }) => {
+    const userId = user.id.toLowerCase()
+    onMentionsChange((current) => current.some((mention) => mention.userId === userId)
+      ? current
+      : [...current, { userId, name: user.name }])
+    onBodyChange(`${body}${body.length > 0 && !/\s$/.test(body) ? ' ' : ''}@${user.name} `)
+    setMentionPickerOpen(false)
+    window.setTimeout(() => textareaRef.current?.focus(), 0)
+  }, [body, onBodyChange, onMentionsChange])
+
+  const handleBodyChange = React.useCallback((nextBody: string) => {
+    onBodyChange(nextBody)
+    onMentionsChange((current) => current.filter((mention) => bodyContainsPendingMention(nextBody, mention)))
+  }, [onBodyChange, onMentionsChange])
+
+  const removeMention = React.useCallback((mention: PendingMention) => {
+    onBodyChange(removePendingMentionOccurrences(body, mention, pendingMentions))
+    onMentionsChange((current) => current.filter((candidate) => candidate.userId !== mention.userId))
+    window.setTimeout(() => textareaRef.current?.focus(), 0)
+  }, [body, onBodyChange, onMentionsChange, pendingMentions])
+
+  return (
+    <form
+      ref={forwardedRef}
+      className="space-y-3 rounded-lg border border-border bg-muted/20 p-3"
+      onSubmit={(event) => { event.preventDefault(); onSubmit() }}
+      onKeyDown={(event) => {
+        if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+          event.preventDefault()
+          onSubmit()
+        }
+        if (event.key === 'Escape') {
+          event.preventDefault()
+          setMentionPickerOpen(false)
+          onCancel()
+        }
+      }}
+    >
+      <div className="space-y-2">
+        <Label htmlFor={composerId}>{t('documents.comments.title')}</Label>
+        {replyToName ? (
+          <p className="inline-flex items-center gap-2 rounded-full bg-muted px-2 py-1 text-xs text-muted-foreground">
+            <CornerDownRight className="size-3" aria-hidden="true" />
+            {t('documents.comments.replyTo', { name: replyToName })}
+          </p>
+        ) : null}
+        <Textarea
+          ref={textareaRef}
+          id={composerId}
+          value={body}
+          onChange={(event) => handleBodyChange(event.target.value)}
+          placeholder={t('documents.comments.composer.placeholder')}
+          maxLength={8000}
+          showCount
+          disabled={isSubmitting}
+        />
+        {pendingMentions.length > 0 ? (
+          <div className="flex flex-wrap gap-2" role="group" aria-label={t('documents.comments.mentions.selected')}>
+            {pendingMentions.map((mention) => (
+              <Button
+                key={mention.userId}
+                type="button"
+                size="sm"
+                variant="secondary"
+                onClick={() => removeMention(mention)}
+                disabled={isSubmitting}
+                aria-label={t('documents.comments.mentions.remove', { name: mention.name })}
+              >
+                @{mention.name}<X aria-hidden="true" />
+              </Button>
+            ))}
+          </div>
+        ) : null}
+      </div>
+      {mentionPickerOpen ? <MentionPicker documentId={documentId} onPick={handleMentionPick} disabled={isSubmitting} /> : null}
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <Button type="button" variant="outline" onClick={() => setMentionPickerOpen((open) => !open)} disabled={isSubmitting}>
+          <AtSign />{t('documents.comments.actions.mention')}
+        </Button>
+        <Button type="submit" disabled={isSubmitting || body.trim().length === 0}>
+          <Send />{t('documents.comments.actions.send')}
+        </Button>
+      </div>
+    </form>
+  )
+})

package/src/modules/documents/backend/documents/[id]/CommentThreadList.tsx

@@ -0,0 +1,131 @@
+"use client"
+
+import * as React from 'react'
+import { CheckCircle2, CornerDownRight, RotateCcw } from 'lucide-react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { StatusBadge } from '@open-mercato/ui/primitives/status-badge'
+import type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'
+import type { DocumentComment } from './commentTypes'
+
+type LabelFor = (userId: string) => string
+type CommentThreadListProps = {
+  comments: DocumentComment[]
+  canComment: boolean
+  resolvingCommentId: string | null
+  labelFor: LabelFor
+  onJump: (comment: DocumentComment) => void
+  onReply: (comment: DocumentComment) => void
+  onResolve: (comment: DocumentComment) => void
+  t: TranslateFn
+}
+
+const MENTION_TOKEN_PATTERN = /@\[([0-9a-f-]{36})\]/gi
+
+function formatDateTime(value: string): string {
+  const timestamp = Date.parse(value)
+  return Number.isFinite(timestamp)
+    ? new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(new Date(timestamp))
+    : ''
+}
+
+/**
+ * Chips are built from the mention tokens themselves. Rendering display
+ * labels back into the text and re-matching them corrupted every label that
+ * shares a prefix with another mention, and expanded the `$&`/`$1` sequences
+ * a user-controlled label may carry into the replacement string.
+ */
+function formatBody(body: string, labelFor: LabelFor): React.ReactNode[] {
+  const parts: React.ReactNode[] = []
+  let cursor = 0
+  for (const match of body.matchAll(MENTION_TOKEN_PATTERN)) {
+    const userId = match[1]
+    const start = match.index ?? 0
+    if (userId === undefined) continue
+    if (start > cursor) parts.push(body.slice(cursor, start))
+    parts.push(
+      <span key={`mention:${start}`} className="inline-flex rounded-full bg-muted px-2 py-1 text-xs font-medium text-primary">
+        @{labelFor(userId)}
+      </span>,
+    )
+    cursor = start + match[0].length
+  }
+  if (cursor < body.length) parts.push(body.slice(cursor))
+  return parts
+}
+
+function CommentItem({
+  comment,
+  canComment,
+  resolvingCommentId,
+  labelFor,
+  onJump,
+  onReply,
+  onResolve,
+  t,
+}: CommentThreadListProps & { comment: DocumentComment }) {
+  const resolved = comment.resolvedAt !== null
+  const canJump = comment.anchor !== null && comment.anchor !== 'changed'
+  const content = (
+    <>
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <p className="truncate text-sm font-medium">{labelFor(comment.authorUserId)}</p>
+          <p className="text-xs text-muted-foreground">{formatDateTime(comment.createdAt)}</p>
+        </div>
+        {resolved ? <StatusBadge variant="success" dot>{t('documents.comments.resolved')}</StatusBadge> : null}
+      </div>
+      <p className="whitespace-pre-wrap text-sm text-foreground">{formatBody(comment.body, labelFor)}</p>
+      {comment.anchor === 'changed' ? (
+        <p className="text-xs text-muted-foreground">{t('documents.comments.anchor.changed')}</p>
+      ) : null}
+    </>
+  )
+  return (
+    <article className="space-y-3 rounded-lg border border-border bg-background p-3">
+      {canJump ? (
+        <Button type="button" variant="ghost" className="h-auto w-full flex-col items-stretch gap-2 p-0 text-left hover:bg-transparent" onClick={() => onJump(comment)}>
+          {content}
+        </Button>
+      ) : <div className="space-y-2">{content}</div>}
+      <div className="flex flex-wrap items-center gap-2">
+        {canComment && comment.parentCommentId === null ? (
+          <Button type="button" size="sm" variant="ghost" onClick={() => onReply(comment)}>
+            <CornerDownRight />{t('documents.comments.actions.reply')}
+          </Button>
+        ) : null}
+        {comment.canResolve ? (
+          <Button type="button" size="sm" variant="outline" onClick={() => onResolve(comment)} disabled={resolvingCommentId === comment.id}>
+            {resolved ? <RotateCcw /> : <CheckCircle2 />}
+            {resolved ? t('documents.comments.actions.reopen') : t('documents.comments.actions.resolve')}
+          </Button>
+        ) : null}
+      </div>
+      {comment.replies.length > 0 ? (
+        <div className="space-y-2 border-l border-border pl-3">
+          {comment.replies.map((reply) => (
+            <CommentItem
+              key={reply.id}
+              comment={reply}
+              comments={[]}
+              canComment={false}
+              resolvingCommentId={resolvingCommentId}
+              labelFor={labelFor}
+              onJump={onJump}
+              onReply={onReply}
+              onResolve={onResolve}
+              t={t}
+            />
+          ))}
+        </div>
+      ) : null}
+    </article>
+  )
+}
+
+export function CommentThreadList(props: CommentThreadListProps) {
+  return (
+    <div className="space-y-3">
+      {props.comments.map((comment) => <CommentItem key={comment.id} {...props} comment={comment} />)}
+    </div>
+  )
+}