fix(transcription): auto-expand comment thread when block has comments
Some checks failed
CI / Unit & Component Tests (push) Has been cancelled
CI / Backend Unit Tests (push) Has been cancelled
CI / E2E Tests (push) Has been cancelled
CI / Unit & Component Tests (pull_request) Failing after 1m20s
CI / Backend Unit Tests (pull_request) Failing after 2m38s
CI / E2E Tests (pull_request) Has been cancelled
Some checks failed
CI / Unit & Component Tests (push) Has been cancelled
CI / Backend Unit Tests (push) Has been cancelled
CI / E2E Tests (push) Has been cancelled
CI / Unit & Component Tests (pull_request) Failing after 1m20s
CI / Backend Unit Tests (pull_request) Failing after 2m38s
CI / E2E Tests (pull_request) Has been cancelled
Comments were only shown after clicking "Kommentieren". Now: - Load comment counts per block when blocks are loaded - Pass commentCount prop to TranscriptionBlock - If commentCount > 0, the comment thread is expanded by default - If commentCount is 0, thread stays collapsed behind the button Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -14,6 +14,7 @@ type Props = {
|
|||||||
saveState: SaveState;
|
saveState: SaveState;
|
||||||
canComment: boolean;
|
canComment: boolean;
|
||||||
currentUserId: string | null;
|
currentUserId: string | null;
|
||||||
|
commentCount: number;
|
||||||
onTextChange: (text: string) => void;
|
onTextChange: (text: string) => void;
|
||||||
onFocus: () => void;
|
onFocus: () => void;
|
||||||
onDeleteClick: () => void;
|
onDeleteClick: () => void;
|
||||||
@@ -30,6 +31,7 @@ let {
|
|||||||
saveState,
|
saveState,
|
||||||
canComment,
|
canComment,
|
||||||
currentUserId,
|
currentUserId,
|
||||||
|
commentCount,
|
||||||
onTextChange,
|
onTextChange,
|
||||||
onFocus,
|
onFocus,
|
||||||
onDeleteClick,
|
onDeleteClick,
|
||||||
@@ -37,7 +39,7 @@ let {
|
|||||||
}: Props = $props();
|
}: Props = $props();
|
||||||
|
|
||||||
let localText = $state(text);
|
let localText = $state(text);
|
||||||
let commentOpen = $state(false);
|
let commentOpen = $state(commentCount > 0);
|
||||||
let selectedQuote = $state<string | null>(null);
|
let selectedQuote = $state<string | null>(null);
|
||||||
let textareaEl = $state<HTMLTextAreaElement | null>(null);
|
let textareaEl = $state<HTMLTextAreaElement | null>(null);
|
||||||
|
|
||||||
|
|||||||
@@ -16,6 +16,7 @@ function renderBlock(overrides: Record<string, unknown> = {}) {
|
|||||||
saveState: 'idle' as const,
|
saveState: 'idle' as const,
|
||||||
canComment: true,
|
canComment: true,
|
||||||
currentUserId: 'user-1',
|
currentUserId: 'user-1',
|
||||||
|
commentCount: 0,
|
||||||
onTextChange: vi.fn(),
|
onTextChange: vi.fn(),
|
||||||
onFocus: vi.fn(),
|
onFocus: vi.fn(),
|
||||||
onDeleteClick: vi.fn(),
|
onDeleteClick: vi.fn(),
|
||||||
|
|||||||
@@ -30,10 +30,34 @@ let activeBlockId: string | null = $state(null);
|
|||||||
let saveStates = new SvelteMap<string, SaveState>();
|
let saveStates = new SvelteMap<string, SaveState>();
|
||||||
let debounceTimers = new SvelteMap<string, ReturnType<typeof setTimeout>>();
|
let debounceTimers = new SvelteMap<string, ReturnType<typeof setTimeout>>();
|
||||||
let pendingTexts = new SvelteMap<string, string>();
|
let pendingTexts = new SvelteMap<string, string>();
|
||||||
|
let commentCounts = new SvelteMap<string, number>();
|
||||||
|
|
||||||
let sortedBlocks = $derived([...blocks].sort((a, b) => a.sortOrder - b.sortOrder));
|
let sortedBlocks = $derived([...blocks].sort((a, b) => a.sortOrder - b.sortOrder));
|
||||||
let hasBlocks = $derived(blocks.length > 0);
|
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 {
|
function getSaveState(blockId: string): SaveState {
|
||||||
return saveStates.get(blockId) ?? 'idle';
|
return saveStates.get(blockId) ?? 'idle';
|
||||||
}
|
}
|
||||||
@@ -167,6 +191,7 @@ $effect(() => {
|
|||||||
saveState={getSaveState(block.id)}
|
saveState={getSaveState(block.id)}
|
||||||
canComment={canComment}
|
canComment={canComment}
|
||||||
currentUserId={currentUserId}
|
currentUserId={currentUserId}
|
||||||
|
commentCount={commentCounts.get(block.id) ?? 0}
|
||||||
onTextChange={(text) => handleTextChange(block.id, text)}
|
onTextChange={(text) => handleTextChange(block.id, text)}
|
||||||
onFocus={() => handleFocus(block.id)}
|
onFocus={() => handleFocus(block.id)}
|
||||||
onDeleteClick={() => handleDelete(block.id)}
|
onDeleteClick={() => handleDelete(block.id)}
|
||||||
|
|||||||
Reference in New Issue
Block a user