frontend/src/routes/documents/new/FileSectionNew.svelte

@@ -8,9 +8,12 @@ let {
 	onfileParsed?: (result: FilenameParseResult) => void;
 } = $props();
 
+let selectedFilename = $state<string | null>(null);
+
 function handleFileChange(e: Event) {
 	const file = (e.target as HTMLInputElement).files?.[0];
 	if (!file) return;
+	selectedFilename = file.name;
 	const parsed = parseFilename(file.name);
 	const result: FilenameParseResult = {
 		...parsed,
@@ -45,23 +48,12 @@ function handleFileChange(e: Event) {
 				d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
 			/>
 		</svg>
-		<span class="text-sm font-medium text-ink-2">
-			{m.doc_file_upload_label()}
-		</span>
-		<span class="text-xs text-ink-3">{m.doc_file_upload_note()}</span>
+		{#if selectedFilename}
+			<span class="text-ink-1 text-sm font-medium">{selectedFilename}</span>
+		{:else}
+			<span class="text-sm font-medium text-ink-2">{m.doc_file_upload_label()}</span>
+			<span class="text-xs text-ink-3">{m.doc_file_upload_note()}</span>
+		{/if}
 	</label>
-	<div class="px-6 pb-6">
-		<input
-			id="file-upload"
-			type="file"
-			name="file"
-			onchange={handleFileChange}
-			class="block w-full cursor-pointer rounded border border-dashed border-line p-2 text-sm
-			       text-ink-2 file:mr-4 file:rounded
-			       file:border-0 file:bg-muted
-			       file:px-4 file:py-2
-			       file:text-sm file:font-semibold
-			       file:text-ink hover:file:bg-muted"
-		/>
-	</div>
+	<input id="file-upload" type="file" name="file" onchange={handleFileChange} class="sr-only" />
 </div>