f10b0cb73e
Addresses the remaining #792 review blockers and concerns in the journey editor cluster: - Interlude rows show 'Zwischentext' (dedicated key), not the add-button text - All four mutation handlers route the backend ErrorCode through getErrorMessage (a 409 duplicate no longer says 'bitte Seite neu laden') and console.error their failures so client-side errors leave a trace - Remove implements the spec'd pending state: row stays dimmed with an aria-live 'wird entfernt…' until the DELETE resolves; failure keeps the row - Move announcements fire after the reorder resolves (no false 'verschoben') - Touch targets ≥44px (remove ×, note links, create submit); focus moves to the new row after add, to a sensible neighbor after remove, back to × on confirm-cancel; drag handle is pointer-only; title/intro get aria-labels; publish-disabled reason is a visible hint, not a title tooltip - Amber warning styles use new --color-warning-* tokens with dark remaps - Blocked interlude-clear restores the draft instead of showing phantom text - useBlockDragDrop moves to $lib/shared/hooks — geschichte no longer imports another domain's internals - Test hardening: reorder-failure rollback (non-ok + reject), publish/ unpublish/empty-warning surface, destructive confirm path, maxlength assertions, JourneyCreate failure path, edit-page STORY/JOURNEY branch, fixture factory, m.* assertions, all fixed sleeps replaced with polling 67 component tests green across 6 spec files; transcription consumer of the moved hook re-verified (30 green). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
106 lines
3.3 KiB
Svelte
106 lines
3.3 KiB
Svelte
<script lang="ts">
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
import DocumentPickerDropdown from '$lib/document/DocumentPickerDropdown.svelte';
|
|
import type { DocumentOption } from '$lib/document/documentTypeahead';
|
|
|
|
interface Props {
|
|
alreadyAddedIds?: Set<string>;
|
|
onAddDocument: (doc: DocumentOption) => void;
|
|
onAddInterlude: (text: string) => void;
|
|
}
|
|
|
|
let { alreadyAddedIds = new Set(), onAddDocument, onAddInterlude }: Props = $props();
|
|
|
|
let showPicker = $state(false);
|
|
let showInterludeForm = $state(false);
|
|
let interludeDraft = $state('');
|
|
|
|
const canConfirmInterlude = $derived(interludeDraft.trim().length > 0);
|
|
|
|
function handleDocumentSelect(doc: DocumentOption) {
|
|
showPicker = false;
|
|
onAddDocument(doc);
|
|
}
|
|
|
|
function handleInterludeConfirm() {
|
|
if (!canConfirmInterlude) return;
|
|
const text = interludeDraft.trim();
|
|
interludeDraft = '';
|
|
showInterludeForm = false;
|
|
onAddInterlude(text);
|
|
}
|
|
|
|
function handleInterludeCancel() {
|
|
interludeDraft = '';
|
|
showInterludeForm = false;
|
|
}
|
|
</script>
|
|
|
|
<div class="flex flex-col gap-3">
|
|
<div class="flex flex-wrap gap-2">
|
|
<button
|
|
type="button"
|
|
data-add-document
|
|
onclick={() => {
|
|
showPicker = !showPicker;
|
|
showInterludeForm = false;
|
|
}}
|
|
class="inline-flex h-11 items-center rounded border border-line bg-surface px-4 font-sans text-sm font-medium text-ink hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
|
|
>
|
|
+ {m.journey_add_document()}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onclick={() => {
|
|
showInterludeForm = !showInterludeForm;
|
|
showPicker = false;
|
|
}}
|
|
class="inline-flex h-11 items-center rounded border border-line bg-surface px-4 font-sans text-sm font-medium text-ink hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
|
|
>
|
|
+ {m.journey_add_interlude()}
|
|
</button>
|
|
</div>
|
|
|
|
{#if showPicker}
|
|
<DocumentPickerDropdown
|
|
alreadyAddedIds={alreadyAddedIds}
|
|
onSelect={handleDocumentSelect}
|
|
placeholder={m.journey_add_document()}
|
|
/>
|
|
{/if}
|
|
|
|
{#if showInterludeForm}
|
|
<div class="flex flex-col gap-2">
|
|
<textarea
|
|
bind:value={interludeDraft}
|
|
placeholder={m.journey_interlude_placeholder()}
|
|
rows={3}
|
|
maxlength={2000}
|
|
class="block w-full resize-y rounded border border-line bg-surface px-3 py-2 font-sans text-sm text-ink placeholder:text-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
|
|
></textarea>
|
|
<div class="flex gap-2">
|
|
<button
|
|
type="button"
|
|
onclick={handleInterludeConfirm}
|
|
disabled={!canConfirmInterlude}
|
|
class={[
|
|
'inline-flex h-11 items-center rounded px-4 font-sans text-sm font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring',
|
|
canConfirmInterlude
|
|
? 'bg-primary text-primary-fg hover:opacity-90'
|
|
: 'cursor-not-allowed bg-primary/40 text-primary-fg/60'
|
|
].join(' ')}
|
|
>
|
|
{m.journey_add_interlude_confirm()}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onclick={handleInterludeCancel}
|
|
class="inline-flex h-11 items-center rounded border border-line bg-surface px-4 font-sans text-sm font-medium text-ink hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
|
|
>
|
|
{m.journey_remove_confirm_cancel()}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|