feat(#68): lead new document form with file upload, all metadata optional
Restructure the "New Document" page so users can save quickly: - FileSectionNew becomes the first element, redesigned as a prominent upload zone with an icon and large click target - Title field is rendered standalone below the upload zone; it auto-populates from the filename (via parseFilename + stripExtension fallback) unless the user has already typed something - All remaining metadata (who/when, description, transcription) moves into a collapsible "Weitere Details" section that auto-expands when URL prefill data or a form error is present, or when filename parsing detects a date/person - title is no longer required — the form can be saved with only a file - DescriptionSection gains a `hideTitle` prop for use in this layout - `form_label_title` translation key no longer carries a hardcoded `*`; the asterisk is rendered by the template only when `titleRequired` is set (currently only the edit form) - E2E tests added for all three scenarios from the issue Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -9,7 +9,8 @@ let {
|
||||
initialDocumentLocation = '',
|
||||
initialSummary = '',
|
||||
titleRequired = false,
|
||||
suggestedTitle = ''
|
||||
suggestedTitle = '',
|
||||
hideTitle = false
|
||||
}: {
|
||||
tags?: string[];
|
||||
initialTitle?: string;
|
||||
@@ -17,17 +18,12 @@ let {
|
||||
initialSummary?: string;
|
||||
titleRequired?: boolean;
|
||||
suggestedTitle?: string;
|
||||
hideTitle?: boolean;
|
||||
} = $props();
|
||||
|
||||
let titleValue = $state(untrack(() => initialTitle));
|
||||
let titleDirty = $state(false);
|
||||
|
||||
$effect(() => {
|
||||
const suggested = suggestedTitle;
|
||||
if (suggested && !untrack(() => titleDirty)) {
|
||||
titleValue = suggested;
|
||||
}
|
||||
});
|
||||
let titleOverride = $state(untrack(() => initialTitle));
|
||||
let titleValue = $derived(titleDirty ? titleOverride : suggestedTitle || titleOverride);
|
||||
</script>
|
||||
|
||||
<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
|
||||
@@ -36,25 +32,27 @@ $effect(() => {
|
||||
</h2>
|
||||
|
||||
<div class="space-y-5">
|
||||
<!-- Titel -->
|
||||
<div>
|
||||
<label for="title" class="mb-1 block text-sm font-medium text-ink-2"
|
||||
>{m.form_label_title()}{#if titleRequired}
|
||||
*{/if}</label
|
||||
>
|
||||
<input
|
||||
id="title"
|
||||
type="text"
|
||||
name="title"
|
||||
value={titleValue}
|
||||
oninput={(e) => {
|
||||
titleValue = (e.target as HTMLInputElement).value;
|
||||
titleDirty = true;
|
||||
}}
|
||||
required={titleRequired}
|
||||
class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
|
||||
/>
|
||||
</div>
|
||||
{#if !hideTitle}
|
||||
<!-- Titel -->
|
||||
<div>
|
||||
<label for="title" class="mb-1 block text-sm font-medium text-ink-2"
|
||||
>{m.form_label_title()}{#if titleRequired}
|
||||
*{/if}</label
|
||||
>
|
||||
<input
|
||||
id="title"
|
||||
type="text"
|
||||
name="title"
|
||||
value={titleValue}
|
||||
oninput={(e) => {
|
||||
titleOverride = (e.target as HTMLInputElement).value;
|
||||
titleDirty = true;
|
||||
}}
|
||||
required={titleRequired}
|
||||
class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Aufbewahrungsort -->
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user