feat: single-line category add form with + button

2 files changed, 48 insertions, 19 deletions

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 57f912d..12a088a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -24,7 +24,7 @@
 			.filter((cat) => groups[cat.name]?.length > 0)
 			.map((cat) => [cat.name, groups[cat.name]]);
 		if (groups['Non catégorisé']?.length > 0) {
-			result.push(['Non catégorisé', groups['Non catégorisé']]);
+			result.unshift(['Non catégorisé', groups['Non catégorisé']]);
 		}
 		return result;
 	}
diff --git a/src/routes/categories/+page.svelte b/src/routes/categories/+page.svelte
index 9c91578..b5ef3f7 100644
--- a/src/routes/categories/+page.svelte
+++ b/src/routes/categories/+page.svelte
@@ -36,24 +36,16 @@
 </script>
 
 <main>
-	<form
-		class="form-card form-card--compact"
-		method="POST"
-		action="?/add"
-		use:enhance
-	>
-		<label>
-			<span class="form-label">Nouvelle catégorie</span>
-			<input
-				class="form-input"
-				type="text"
-				name="name"
-				bind:value={name}
-				placeholder="ex. Boissons"
-				autocomplete="off"
-			/>
-		</label>
-		<button class="btn-primary" type="submit">Ajouter</button>
+	<form class="cat-add-bar" method="POST" action="?/add" use:enhance>
+		<input
+			class="form-input"
+			type="text"
+			name="name"
+			bind:value={name}
+			placeholder="Nouvelle catégorie..."
+			autocomplete="off"
+		/>
+		<button class="btn-accent" type="submit" aria-label="Ajouter">+</button>
 	</form>
 
 	{#if form?.error}
@@ -127,6 +119,43 @@
 		margin-bottom: 0.5rem;
 	}
 
+	.cat-add-bar {
+		display: flex;
+		gap: 0.5rem;
+		padding: 0.75rem 0;
+	}
+
+	.cat-add-bar input {
+		flex: 1;
+		background: var(--surface);
+	}
+
+	.btn-accent {
+		width: 3rem;
+		height: 3rem;
+		flex-shrink: 0;
+		padding: 0;
+		border: none;
+		border-radius: 0.75rem;
+		background: var(--accent);
+		color: var(--white);
+		font-size: 1.25rem;
+		font-weight: 500;
+		font-family: inherit;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: all 0.2s ease;
+		box-shadow: 0 1px 2px var(--shadow);
+	}
+
+	.btn-accent:hover {
+		background: var(--accent-hover);
+		transform: translateY(-1px);
+		box-shadow: 0 4px 8px var(--shadow-accent-lg);
+	}
+
 	.empty {
 		margin-top: 1rem;
 		padding: 2rem;