feat(frontend): reorder DescriptionSection fields, expose currentTitle bindable, add Optional divider
Field order: Titel → Schlagworte → Kurzinhalt → [Optional divider] → Aufbewahrungsort. currentTitle is now bindable so the enrich page can derive the required-fields progress bar. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -5,6 +5,7 @@ import { m } from '$lib/paraglide/messages.js';
|
||||
|
||||
let {
|
||||
tags = $bindable<Tag[]>([]),
|
||||
currentTitle = $bindable(''),
|
||||
initialTitle = '',
|
||||
initialDocumentLocation = '',
|
||||
initialSummary = '',
|
||||
@@ -13,6 +14,7 @@ let {
|
||||
hideTitle = false
|
||||
}: {
|
||||
tags?: Tag[];
|
||||
currentTitle?: string;
|
||||
initialTitle?: string;
|
||||
initialDocumentLocation?: string;
|
||||
initialSummary?: string;
|
||||
@@ -22,8 +24,8 @@ let {
|
||||
} = $props();
|
||||
|
||||
let titleDirty = $state(false);
|
||||
let titleOverride = $state(untrack(() => initialTitle));
|
||||
let titleValue = $derived(titleDirty ? titleOverride : suggestedTitle || titleOverride);
|
||||
currentTitle = untrack(() => initialTitle);
|
||||
const titleValue = $derived(titleDirty ? currentTitle : suggestedTitle || currentTitle);
|
||||
</script>
|
||||
|
||||
<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
|
||||
@@ -33,7 +35,7 @@ let titleValue = $derived(titleDirty ? titleOverride : suggestedTitle || titleOv
|
||||
|
||||
<div class="space-y-5">
|
||||
{#if !hideTitle}
|
||||
<!-- Titel -->
|
||||
<!-- Titel (required) -->
|
||||
<div>
|
||||
<label for="title" class="mb-1 block text-sm font-medium text-ink-2"
|
||||
>{m.form_label_title()}{#if titleRequired}
|
||||
@@ -45,7 +47,7 @@ let titleValue = $derived(titleDirty ? titleOverride : suggestedTitle || titleOv
|
||||
name="title"
|
||||
value={titleValue}
|
||||
oninput={(e) => {
|
||||
titleOverride = (e.target as HTMLInputElement).value;
|
||||
currentTitle = (e.target as HTMLInputElement).value;
|
||||
titleDirty = true;
|
||||
}}
|
||||
required={titleRequired}
|
||||
@@ -54,22 +56,6 @@ let titleValue = $derived(titleDirty ? titleOverride : suggestedTitle || titleOv
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Aufbewahrungsort -->
|
||||
<div>
|
||||
<label for="documentLocation" class="mb-1 block text-sm font-medium text-ink-2"
|
||||
>{m.form_label_archive_location()}</label
|
||||
>
|
||||
<input
|
||||
id="documentLocation"
|
||||
type="text"
|
||||
name="documentLocation"
|
||||
value={initialDocumentLocation}
|
||||
placeholder={m.form_placeholder_archive_location()}
|
||||
class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
|
||||
/>
|
||||
<p class="mt-1 text-xs text-ink-3">{m.form_helper_archive_location()}</p>
|
||||
</div>
|
||||
|
||||
<!-- Schlagworte -->
|
||||
<div>
|
||||
<p class="mb-1 block text-sm font-medium text-ink-2">{m.form_label_tags()}</p>
|
||||
@@ -91,5 +77,28 @@ let titleValue = $derived(titleDirty ? titleOverride : suggestedTitle || titleOv
|
||||
>{initialSummary}</textarea
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Optional divider -->
|
||||
<div class="my-3 flex items-center gap-2">
|
||||
<div class="flex-1 border-t border-line"></div>
|
||||
<span class="text-[9px] font-bold tracking-widest text-ink-3 uppercase">Optional</span>
|
||||
<div class="flex-1 border-t border-line"></div>
|
||||
</div>
|
||||
|
||||
<!-- Aufbewahrungsort (optional) -->
|
||||
<div>
|
||||
<label for="documentLocation" class="mb-1 block text-sm font-medium text-ink-2"
|
||||
>{m.form_label_archive_location()}</label
|
||||
>
|
||||
<input
|
||||
id="documentLocation"
|
||||
type="text"
|
||||
name="documentLocation"
|
||||
value={initialDocumentLocation}
|
||||
placeholder={m.form_placeholder_archive_location()}
|
||||
class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
|
||||
/>
|
||||
<p class="mt-1 text-xs text-ink-3">{m.form_helper_archive_location()}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user