73237b9595
The panel footer's delete and review-toggle controls were icon-only ~16px hit areas. After #722 removed the on-canvas delete button, the panel delete button became the only touch-reachable delete path, so it must meet the WCAG 2.2 §2.5.8 minimum target size (44×44px). Give both icon-only footer actions a >=44px inline-flex hit area with negative margins so the row layout and the visible icon size are unchanged. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
293 lines
8.6 KiB
Svelte
293 lines
8.6 KiB
Svelte
<script lang="ts">
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
import { getConfirmService } from '$lib/shared/services/confirm.svelte.js';
|
|
import CommentThread from '$lib/shared/discussion/CommentThread.svelte';
|
|
import PersonMentionEditor from '$lib/shared/discussion/PersonMentionEditor.svelte';
|
|
import type { PersonMention } from '$lib/shared/types';
|
|
|
|
const { confirm } = getConfirmService();
|
|
|
|
type SaveState = 'idle' | 'saving' | 'saved' | 'fading' | 'error';
|
|
|
|
type Props = {
|
|
blockId: string;
|
|
documentId: string;
|
|
blockNumber: number;
|
|
text: string;
|
|
mentionedPersons: PersonMention[];
|
|
label: string | null;
|
|
active: boolean;
|
|
reviewed: boolean;
|
|
saveState: SaveState;
|
|
canComment: boolean;
|
|
currentUserId: string | null;
|
|
onTextChange: (text: string, mentionedPersons: PersonMention[]) => void;
|
|
onFocus: () => void;
|
|
onDeleteClick: () => void;
|
|
onRetry: () => void;
|
|
onReviewToggle: () => void;
|
|
onMoveUp?: () => void;
|
|
onMoveDown?: () => void;
|
|
isFirst?: boolean;
|
|
isLast?: boolean;
|
|
source?: 'MANUAL' | 'OCR';
|
|
};
|
|
|
|
let {
|
|
blockId,
|
|
documentId,
|
|
blockNumber,
|
|
text,
|
|
mentionedPersons,
|
|
label = null,
|
|
active,
|
|
reviewed,
|
|
saveState,
|
|
canComment,
|
|
currentUserId,
|
|
onTextChange,
|
|
onFocus,
|
|
onDeleteClick,
|
|
onRetry,
|
|
onReviewToggle,
|
|
onMoveUp,
|
|
onMoveDown,
|
|
isFirst = false,
|
|
isLast = false,
|
|
source = 'MANUAL'
|
|
}: Props = $props();
|
|
|
|
let localText = $state(text);
|
|
let localMentions = $state<PersonMention[]>([...mentionedPersons]);
|
|
let commentOpen = $state(false);
|
|
let commentCount = $state(0);
|
|
let selectedQuote = $state<string | null>(null);
|
|
|
|
const hasComments = $derived(commentCount > 0);
|
|
|
|
// Sync from prop only when switching to a different block (not on save responses)
|
|
let prevBlockId = $state(blockId);
|
|
$effect(() => {
|
|
if (blockId !== prevBlockId) {
|
|
localText = text;
|
|
localMentions = [...mentionedPersons];
|
|
prevBlockId = blockId;
|
|
}
|
|
});
|
|
|
|
let leftBorderClass = $derived(
|
|
saveState === 'error' ? 'border-l-2 border-error' : active ? 'border-l-2 border-turquoise' : ''
|
|
);
|
|
|
|
function emitChange() {
|
|
onTextChange(localText, localMentions);
|
|
}
|
|
|
|
async function handleDelete() {
|
|
const confirmed = await confirm({
|
|
title: m.transcription_block_delete_confirm(),
|
|
destructive: true
|
|
});
|
|
if (confirmed) onDeleteClick();
|
|
}
|
|
</script>
|
|
|
|
<div
|
|
class="relative flex overflow-visible rounded border border-line {leftBorderClass}"
|
|
data-block-id={blockId}
|
|
>
|
|
<!-- Turquoise numbered badge — overlaps top-left of card -->
|
|
<span
|
|
class="absolute -top-2 -left-2 z-10 flex h-6 w-6 items-center justify-center rounded-full bg-turquoise text-xs font-bold text-turquoise-fg shadow-sm"
|
|
>
|
|
{blockNumber}
|
|
</span>
|
|
|
|
<!-- Drag handle (desktop) / Arrow buttons (mobile) -->
|
|
<div class="flex shrink-0 flex-col items-center justify-center border-r border-line px-1">
|
|
<!-- Mobile: arrow buttons -->
|
|
<button
|
|
type="button"
|
|
class="flex h-7 w-7 cursor-pointer items-center justify-center rounded text-ink-3 transition-colors hover:bg-muted hover:text-ink disabled:opacity-20 md:hidden"
|
|
disabled={isFirst}
|
|
aria-label="Nach oben"
|
|
onclick={() => onMoveUp?.()}
|
|
>
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" />
|
|
</svg>
|
|
</button>
|
|
<!-- Desktop: grip handle (drag target) -->
|
|
<div
|
|
class="hidden cursor-grab text-ink-3 transition-colors select-none hover:text-ink active:cursor-grabbing md:block"
|
|
data-drag-handle
|
|
aria-label="Ziehen zum Sortieren"
|
|
>
|
|
⠿
|
|
</div>
|
|
<!-- Mobile: arrow down -->
|
|
<button
|
|
type="button"
|
|
class="flex h-7 w-7 cursor-pointer items-center justify-center rounded text-ink-3 transition-colors hover:bg-muted hover:text-ink disabled:opacity-20 md:hidden"
|
|
disabled={isLast}
|
|
aria-label="Nach unten"
|
|
onclick={() => onMoveDown?.()}
|
|
>
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="min-w-0 flex-1 p-4 pl-3">
|
|
<!-- Header -->
|
|
<div class="mb-2 flex items-center gap-2">
|
|
{#if label}
|
|
<span class="text-xs font-medium tracking-wide text-ink-2 uppercase">
|
|
{label}
|
|
</span>
|
|
{/if}
|
|
{#if (!text || text.trim() === '') && source === 'MANUAL'}
|
|
<span class="rounded bg-muted px-1.5 py-0.5 text-xs font-medium text-ink-3"
|
|
>{m.transcription_block_segmentation_only()}</span
|
|
>
|
|
{/if}
|
|
</div>
|
|
|
|
<!-- Editor powered by PersonMentionEditor (Tiptap) for @-mention typeahead -->
|
|
<PersonMentionEditor
|
|
bind:value={() => localText,
|
|
(v) => {
|
|
localText = v;
|
|
emitChange();
|
|
}}
|
|
bind:mentionedPersons={() => localMentions,
|
|
(next) => {
|
|
localMentions = next;
|
|
emitChange();
|
|
}}
|
|
placeholder={m.transcription_block_placeholder()}
|
|
onfocus={onFocus}
|
|
onSelectionChange={(text) => (selectedQuote = text)}
|
|
/>
|
|
|
|
{#if selectedQuote}
|
|
<p class="mt-1 text-xs text-ink-3">{m.transcription_block_quote_hint()}</p>
|
|
{/if}
|
|
|
|
<!-- Footer -->
|
|
<div class="flex items-center justify-between border-t border-line pt-2">
|
|
<div>
|
|
{#if !hasComments}
|
|
<button
|
|
type="button"
|
|
class="flex cursor-pointer items-center gap-1 text-xs font-medium text-ink-2 transition-colors hover:text-ink"
|
|
onclick={() => (commentOpen = true)}
|
|
>
|
|
<svg
|
|
class="h-3 w-3"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 011.037-.443 48.282 48.282 0 005.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"
|
|
/>
|
|
</svg>
|
|
{m.transcription_block_comment_btn()}
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<!-- Save state indicator -->
|
|
{#if saveState === 'saving'}
|
|
<span class="animate-pulse text-xs text-ink-3">
|
|
{m.transcription_block_save_saving()}
|
|
</span>
|
|
{:else if saveState === 'saved' || saveState === 'fading'}
|
|
<span
|
|
class="text-xs text-green-600 transition-opacity duration-300 {saveState === 'fading' ? 'opacity-0' : 'opacity-100'}"
|
|
>
|
|
{m.transcription_block_save_saved()} <span class="inline-block">✓</span>
|
|
</span>
|
|
{:else if saveState === 'error'}
|
|
<span class="text-error text-xs">
|
|
{m.transcription_block_save_error()}
|
|
<span class="mx-1">—</span>
|
|
<button
|
|
type="button"
|
|
class="underline transition-colors hover:text-ink"
|
|
onclick={onRetry}
|
|
>
|
|
{m.transcription_block_save_retry()}
|
|
</button>
|
|
</span>
|
|
{/if}
|
|
|
|
<!-- Review toggle -->
|
|
<button
|
|
type="button"
|
|
class="-my-2 inline-flex min-h-[44px] min-w-[44px] cursor-pointer items-center justify-center transition-colors {reviewed ? 'text-turquoise hover:text-turquoise/70' : 'text-ink-3 hover:text-turquoise'}"
|
|
aria-label={reviewed ? m.transcription_block_unreview() : m.transcription_block_review()}
|
|
title={reviewed ? m.transcription_block_unreview() : m.transcription_block_review()}
|
|
onclick={onReviewToggle}
|
|
>
|
|
<svg
|
|
class="h-4 w-4"
|
|
fill={reviewed ? 'currentColor' : 'none'}
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Delete button -->
|
|
<button
|
|
type="button"
|
|
class="hover:text-error -my-2 -mr-2 inline-flex min-h-[44px] min-w-[44px] cursor-pointer items-center justify-center text-ink-3 transition-colors"
|
|
aria-label={m.btn_delete()}
|
|
onclick={handleDelete}
|
|
>
|
|
<svg
|
|
class="h-4 w-4"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Comment thread — list always visible, compose toggled by Kommentieren -->
|
|
<div class="mt-3">
|
|
<CommentThread
|
|
documentId={documentId}
|
|
blockId={blockId}
|
|
loadOnMount={true}
|
|
canComment={canComment}
|
|
currentUserId={currentUserId}
|
|
quotedText={selectedQuote}
|
|
showCompose={commentOpen}
|
|
onCountChange={(count) => (commentCount = count)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|