feat(shopping): add AddCustomItem.svelte component

Expandable inline form for adding custom items to the shopping list. Includes name, quantity, and unit fields with cancel/submit actions. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-04 18:54:47 +02:00
parent 7bdadbe962
commit 5ac8f1768f
1 changed files with 86 additions and 0 deletions
--- a/frontend/src/lib/shopping/AddCustomItem.svelte
+++ b/frontend/src/lib/shopping/AddCustomItem.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+
+	interface Props {
+		listId: string;
+	}
+
+	let { listId }: Props = $props();
+
+	let expanded = $state(false);
+	let customName = $state('');
+	let quantity = $state('1');
+	let unit = $state('');
+</script>
+
+{#if !expanded}
+	<button
+		type="button"
+		onclick={() => (expanded = true)}
+		class="flex w-full items-center gap-2 rounded-[var(--radius-md)] border border-dashed border-[var(--color-border)] px-3 py-2 font-[var(--font-sans)] text-[13px] text-[var(--color-text-muted)] hover:border-[var(--green-light)] hover:text-[var(--color-text)]"
+	>
+		<span class="text-[16px]">+</span>
+		Artikel hinzufügen
+	</button>
+{:else}
+	<form
+		method="POST"
+		action="?/addItem"
+		use:enhance={() => {
+			return async ({ update }) => {
+				await update();
+				customName = '';
+				quantity = '1';
+				unit = '';
+				expanded = false;
+			};
+		}}
+		class="flex flex-col gap-2 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] p-3"
+	>
+		<input type="hidden" name="listId" value={listId} />
+
+		<input
+			type="text"
+			name="customName"
+			bind:value={customName}
+			placeholder="Artikelname"
+			required
+			class="rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-page)] px-3 py-1.5 font-[var(--font-sans)] text-[14px] text-[var(--color-text)] placeholder:text-[var(--color-text-muted)] focus:border-[var(--green)] focus:outline-none"
+		/>
+
+		<div class="flex gap-2">
+			<input
+				type="number"
+				name="quantity"
+				bind:value={quantity}
+				min="0"
+				step="any"
+				class="w-20 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-page)] px-3 py-1.5 font-[var(--font-sans)] text-[14px] text-[var(--color-text)] focus:border-[var(--green)] focus:outline-none"
+			/>
+			<input
+				type="text"
+				name="unit"
+				bind:value={unit}
+				placeholder="Einheit"
+				class="flex-1 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-page)] px-3 py-1.5 font-[var(--font-sans)] text-[14px] text-[var(--color-text)] placeholder:text-[var(--color-text-muted)] focus:border-[var(--green)] focus:outline-none"
+			/>
+		</div>
+
+		<div class="flex justify-end gap-2">
+			<button
+				type="button"
+				onclick={() => (expanded = false)}
+				class="rounded-[var(--radius-md)] px-3 py-1.5 font-[var(--font-sans)] text-[13px] text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
+			>
+				Abbrechen
+			</button>
+			<button
+				type="submit"
+				disabled={!customName.trim()}
+				class="rounded-[var(--radius-md)] bg-[var(--green-dark)] px-3 py-1.5 font-[var(--font-sans)] text-[13px] font-medium text-white disabled:opacity-50"
+			>
+				Hinzufügen
+			</button>
+		</div>
+	</form>
+{/if}