From d2cf8223e287b3230c0fa12891d92cb7dcde524a Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Fri, 17 Apr 2026 14:06:13 +0200
Subject: [PATCH] feat(library): move search to top of the controls
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

New control order: search (full-width, flex) + "+ Neu" button → KindTabs
→ status chips + favourites toggle. Search is the primary entry point
when the user knows what they're looking for; tabs + filters refine the
grid when browsing. The create button stays aligned with search because
that's where the user's eye already is when they decide "nope, not here,
I'll add it".

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/lib/modules/library/ListView.svelte   | 27 +++++++++----------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/apps/mana/apps/web/src/lib/modules/library/ListView.svelte b/apps/mana/apps/web/src/lib/modules/library/ListView.svelte
index 7e009fa0d..52d53dec2 100644
--- a/apps/mana/apps/web/src/lib/modules/library/ListView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/library/ListView.svelte
@@ -49,8 +49,13 @@
 
 <div class="library-shell">
 	<div class="controls">
-		<div class="tabs-row">
-			<KindTabs active={activeKind} {counts} onselect={(k) => (activeKind = k)} />
+		<div class="search-row">
+			<input
+				type="search"
+				class="search"
+				bind:value={searchQuery}
+				placeholder="Suche nach Titel oder Creator…"
+			/>
 			<button
 				type="button"
 				class="create-btn"
@@ -62,6 +67,8 @@
 			</button>
 		</div>
 
+		<KindTabs active={activeKind} {counts} onselect={(k) => (activeKind = k)} />
+
 		<div class="filter-row">
 			<StatusFilter active={activeStatus} onselect={(s) => (activeStatus = s)} />
 			<label class="fav-toggle">
@@ -69,13 +76,6 @@
 				<span>Nur Favoriten</span>
 			</label>
 		</div>
-
-		<input
-			type="search"
-			class="search"
-			bind:value={searchQuery}
-			placeholder="Suche nach Titel oder Creator…"
-		/>
 	</div>
 
 	{#if showCreate}
@@ -146,15 +146,11 @@
 		gap: 0.75rem;
 		margin-bottom: 1.5rem;
 	}
-	.tabs-row {
+	.search-row {
 		display: flex;
 		align-items: center;
 		gap: 0.75rem;
 	}
-	.tabs-row :global(.tabs) {
-		flex: 1;
-		min-width: 0;
-	}
 	.create-btn {
 		padding: 0.45rem 0.9rem;
 		border-radius: 0.55rem;
@@ -191,13 +187,14 @@
 		cursor: pointer;
 	}
 	.search {
+		flex: 1;
+		min-width: 0;
 		padding: 0.55rem 0.85rem;
 		border-radius: 0.5rem;
 		border: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
 		background: var(--color-surface, transparent);
 		font: inherit;
 		color: inherit;
-		max-width: 320px;
 	}
 	.search:focus {
 		outline: 2px solid #a855f7;