feat(comments): inline edit on click + trash icon for own 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) Has been cancelled
CI / Backend Unit Tests (pull_request) Has been cancelled
CI / E2E Tests (pull_request) Has been cancelled

Own comments:
- Click the text to open inline edit (textarea replaces text)
- Enter saves, Escape cancels
- Small trash icon always visible in bottom-right corner
- Hover on text shows cursor-text + subtle bg highlight

Other people's comments: read-only, no edit/delete affordances.

Re-add currentUserId prop chain for ownership check.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-05 22:42:24 +02:00
parent e6432846a1
commit 351f31b183
5 changed files with 122 additions and 5 deletions

View File

@@ -10,12 +10,21 @@ type Props = {
documentId: string;
blocks: TranscriptionBlockData[];
canComment: boolean;
currentUserId: string | null;
onBlockFocus: (blockId: string) => void;
onSaveBlock: (blockId: string, text: string) => Promise<void>;
onDeleteBlock: (blockId: string) => Promise<void>;
};
let { documentId, blocks, canComment, onBlockFocus, onSaveBlock, onDeleteBlock }: Props = $props();
let {
documentId,
blocks,
canComment,
currentUserId,
onBlockFocus,
onSaveBlock,
onDeleteBlock
}: Props = $props();
let activeBlockId: string | null = $state(null);
let saveStates = new SvelteMap<string, SaveState>();
@@ -156,6 +165,7 @@ $effect(() => {
active={activeBlockId === block.id}
saveState={getSaveState(block.id)}
canComment={canComment}
currentUserId={currentUserId}
onTextChange={(text) => handleTextChange(block.id, text)}
onFocus={() => handleFocus(block.id)}
onDeleteClick={() => handleDelete(block.id)}