till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-14 22:21:10 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

feat(library): move search to top of the controls

Browse source 
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>
This commit is contained in:
Till JS 2026-04-17 14:06:13 +02:00
parent 5bdacaa5ea
commit d2cf8223e2
1 changed files with 12 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

27
apps/mana/apps/web/src/lib/modules/library/ListView.svelte
View file

@ -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;