marcel/familienarchiv
1
0
Fork 0
Code Issues 118 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat(frontend): reorder DescriptionSection fields, expose currentTitle bindable, add Optional divider

Browse Source 
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:
Marcel
2026-04-18 13:55:38 +02:00
committed by marcel
parent 047b7c71ff
commit c62bf9085c
1 changed files with 29 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
frontend/src/lib/components/document/DescriptionSection.svelte
View File

@@ -5,6 +5,7 @@ import { m } from '$lib/paraglide/messages.js';
let { let {
tags = $bindable<Tag[]>([]), tags = $bindable<Tag[]>([]),
currentTitle = $bindable(''),
initialTitle = '', initialTitle = '',
initialDocumentLocation = '', initialDocumentLocation = '',
initialSummary = '', initialSummary = '',
@@ -13,6 +14,7 @@ let {
hideTitle = false hideTitle = false
}: { }: {
tags?: Tag[]; tags?: Tag[];
currentTitle?: string;
initialTitle?: string; initialTitle?: string;
initialDocumentLocation?: string; initialDocumentLocation?: string;
initialSummary?: string; initialSummary?: string;
@@ -22,8 +24,8 @@ let {
} = $props(); } = $props();
let titleDirty = $state(false); let titleDirty = $state(false);
let titleOverride = $state(untrack(() => initialTitle)); currentTitle = untrack(() => initialTitle);
let titleValue = $derived(titleDirty ? titleOverride : suggestedTitle || titleOverride); const titleValue = $derived(titleDirty ? currentTitle : suggestedTitle || currentTitle);
</script> </script>
<div class="rounded-sm border border-line bg-surface p-6 shadow-sm"> <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"> <div class="space-y-5">
{#if !hideTitle} {#if !hideTitle}
<!-- Titel --> <!-- Titel (required) -->
<div> <div>
<label for="title" class="mb-1 block text-sm font-medium text-ink-2" <label for="title" class="mb-1 block text-sm font-medium text-ink-2"
>{m.form_label_title()}{#if titleRequired} >{m.form_label_title()}{#if titleRequired}
@@ -45,7 +47,7 @@ let titleValue = $derived(titleDirty ? titleOverride : suggestedTitle || titleOv
name="title" name="title"
value={titleValue} value={titleValue}
oninput={(e) => { oninput={(e) => {
titleOverride = (e.target as HTMLInputElement).value; currentTitle = (e.target as HTMLInputElement).value;
titleDirty = true; titleDirty = true;
}} }}
required={titleRequired} required={titleRequired}
@@ -54,22 +56,6 @@ let titleValue = $derived(titleDirty ? titleOverride : suggestedTitle || titleOv
</div> </div>
{/if} {/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 --> <!-- Schlagworte -->
<div> <div>
<p class="mb-1 block text-sm font-medium text-ink-2">{m.form_label_tags()}</p> <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 >{initialSummary}</textarea
> >
</div> </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>
</div> </div>