diff --git a/frontend/src/lib/components/TranscriptionBlock.svelte b/frontend/src/lib/components/TranscriptionBlock.svelte index 6c11626e..90d7c0bc 100644 --- a/frontend/src/lib/components/TranscriptionBlock.svelte +++ b/frontend/src/lib/components/TranscriptionBlock.svelte @@ -14,6 +14,7 @@ type Props = { saveState: SaveState; canComment: boolean; currentUserId: string | null; + commentCount: number; onTextChange: (text: string) => void; onFocus: () => void; onDeleteClick: () => void; @@ -30,6 +31,7 @@ let { saveState, canComment, currentUserId, + commentCount, onTextChange, onFocus, onDeleteClick, @@ -37,7 +39,7 @@ let { }: Props = $props(); let localText = $state(text); -let commentOpen = $state(false); +let commentOpen = $state(commentCount > 0); let selectedQuote = $state(null); let textareaEl = $state(null); diff --git a/frontend/src/lib/components/TranscriptionBlock.svelte.spec.ts b/frontend/src/lib/components/TranscriptionBlock.svelte.spec.ts index 7489ed52..bd536d4d 100644 --- a/frontend/src/lib/components/TranscriptionBlock.svelte.spec.ts +++ b/frontend/src/lib/components/TranscriptionBlock.svelte.spec.ts @@ -16,6 +16,7 @@ function renderBlock(overrides: Record = {}) { saveState: 'idle' as const, canComment: true, currentUserId: 'user-1', + commentCount: 0, onTextChange: vi.fn(), onFocus: vi.fn(), onDeleteClick: vi.fn(), diff --git a/frontend/src/lib/components/TranscriptionEditView.svelte b/frontend/src/lib/components/TranscriptionEditView.svelte index 65fba8f0..31c40f5f 100644 --- a/frontend/src/lib/components/TranscriptionEditView.svelte +++ b/frontend/src/lib/components/TranscriptionEditView.svelte @@ -30,10 +30,34 @@ let activeBlockId: string | null = $state(null); let saveStates = new SvelteMap(); let debounceTimers = new SvelteMap>(); let pendingTexts = new SvelteMap(); +let commentCounts = new SvelteMap(); let sortedBlocks = $derived([...blocks].sort((a, b) => a.sortOrder - b.sortOrder)); let hasBlocks = $derived(blocks.length > 0); +async function loadCommentCounts() { + for (const block of blocks) { + try { + const res = await fetch( + `/api/documents/${documentId}/transcription-blocks/${block.id}/comments` + ); + if (res.ok) { + const comments = (await res.json()) as Array<{ replies: unknown[] }>; + const total = comments.reduce((s, c) => s + 1 + (c.replies?.length ?? 0), 0); + commentCounts.set(block.id, total); + } + } catch { + // ignore + } + } +} + +$effect(() => { + if (blocks.length > 0) { + loadCommentCounts(); + } +}); + function getSaveState(blockId: string): SaveState { return saveStates.get(blockId) ?? 'idle'; } @@ -167,6 +191,7 @@ $effect(() => { saveState={getSaveState(block.id)} canComment={canComment} currentUserId={currentUserId} + commentCount={commentCounts.get(block.id) ?? 0} onTextChange={(text) => handleTextChange(block.id, text)} onFocus={() => handleFocus(block.id)} onDeleteClick={() => handleDelete(block.id)}