From bc3678461c3000c2394e355b7aaa73b774a33fff Mon Sep 17 00:00:00 2001
From: Martin Kagamino Lehoux <martin@lehoux.net>
Date: Mon, 27 Jul 2026 21:00:10 +0200
Subject: feat: compact sticky add form with Add + Edit buttons

- Sticky navbar + sticky add bar on list page
- Add button: quick add to list
- Edit button: add + redirect to detail page for references
- Removed layout top padding for seamless sticky behavior
---
 src/routes/+page.svelte | 74 +++++++++++++++++++++----------------------------
 1 file changed, 31 insertions(+), 43 deletions(-)

(limited to 'src/routes/+page.svelte')

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 57ce3d0..767c87e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -17,27 +17,16 @@
 	}
 </script>
 
-<form class="add-form" method="POST" action="?/add" use:enhance>
-	<label>
-		<span class="label">Item</span>
-		<input
-			type="text"
-			name="name"
-			bind:value={name}
-			placeholder="Add an item..."
-			autocomplete="off"
-		/>
-	</label>
-	<label>
-		<span class="label">Category</span>
-		<select name="category_id">
-			<option value="">—</option>
-			{#each data?.categories ?? [] as cat (cat.id)}
-				<option value={cat.id}>{cat.name}</option>
-			{/each}
-		</select>
-	</label>
+<form class="add-bar" method="POST" action="?/add" use:enhance>
+	<input
+		type="text"
+		name="name"
+		bind:value={name}
+		placeholder="Add an item..."
+		autocomplete="off"
+	/>
 	<button type="submit">Add</button>
+	<button type="submit" formaction="?/addAndEdit">Edit</button>
 </form>
 
 {#if form?.error}
@@ -75,49 +64,48 @@
 {/if}
 
 <style>
-	.add-form {
+	.add-bar {
 		display: flex;
-		flex-direction: column;
 		gap: 0.5rem;
-		margin-bottom: 1rem;
+		padding: 0.5rem 1rem 0.5rem;
+		position: sticky;
+		top: 3rem;
+		background: #fafafa;
+		z-index: 10;
 	}
 
-	.add-form label {
-		display: flex;
-		flex-direction: column;
-		gap: 0.25rem;
-	}
-
-	.label {
-		font-size: 0.75rem;
-		font-weight: 600;
-		text-transform: uppercase;
-		color: #999;
-	}
-
-	input,
-	select {
+	input {
+		flex: 1;
 		padding: 0.75rem;
 		border: 1px solid #ccc;
 		border-radius: 0.5rem;
 		font-size: 1rem;
 		font-family: inherit;
 		background: #fff;
+		min-width: 0;
 	}
 
-	.add-form button[type='submit'] {
-		padding: 0.75rem 1.25rem;
+	.add-bar button {
+		padding: 0.75rem 1rem;
 		border: none;
 		border-radius: 0.5rem;
+		font-size: 1rem;
+		font-family: inherit;
+		cursor: pointer;
+	}
+
+	.add-bar button[type='submit']:not([formaction]) {
 		background: #333;
 		color: #fff;
-		font-size: 1rem;
-		align-self: flex-start;
+	}
+
+	.add-bar button[formaction] {
+		background: #e0e0e0;
+		color: #333;
 	}
 
 	.error {
 		color: #d00;
-		margin-top: -0.5rem;
 		margin-bottom: 1rem;
 	}
 
-- 
cgit v1.3