till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-26 18:17:44 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

fix(ui): move PillNav toggle inside QuickInputBar via leftAction snippet

Browse source 
Toggle button now renders inside the InputBar pill (left side) instead of
as a separate element next to it. Uses the existing leftAction snippet prop.

- Button is 28px circle, subtle background, no border/shadow (lives inside pill)
- Remove bottom-stack-row wrapper (no longer needed)
- Cleaner visual: toggle is part of the input bar, not floating beside it

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-04-03 00:15:29 +02:00
parent 81f781c133
commit fb5271acc8
1 changed files with 41 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

103
apps/manacore/apps/web/src/routes/(app)/+layout.svelte
View file

@ -388,35 +388,36 @@
<div class="min-h-screen bg-background"> <div class="min-h-screen bg-background">
<!-- Bottom Stack: all fixed-bottom elements in one flex container --> <!-- Bottom Stack: all fixed-bottom elements in one flex container -->
<div class="bottom-stack" bind:clientHeight={bottomStackHeight}> <div class="bottom-stack" bind:clientHeight={bottomStackHeight}>
<!-- QuickInputBar + toggle button row --> <!-- QuickInputBar with inline nav toggle -->
<div class="bottom-stack-row"> <QuickInputBar
<QuickInputBar onSearch={inputBarAdapter.onSearch}
onSearch={inputBarAdapter.onSearch} onSelect={inputBarAdapter.onSelect}
onSelect={inputBarAdapter.onSelect} onParseCreate={inputBarAdapter.onParseCreate}
onParseCreate={inputBarAdapter.onParseCreate} onCreate={inputBarAdapter.onCreate}
onCreate={inputBarAdapter.onCreate} onSearchChange={inputBarAdapter.onSearchChange}
onSearchChange={inputBarAdapter.onSearchChange} placeholder={inputBarAdapter.placeholder}
placeholder={inputBarAdapter.placeholder} appIcon={inputBarAdapter.appIcon}
appIcon={inputBarAdapter.appIcon} emptyText={inputBarAdapter.emptyText}
emptyText={inputBarAdapter.emptyText} createText={inputBarAdapter.createText}
createText={inputBarAdapter.createText} deferSearch={inputBarAdapter.deferSearch}
deferSearch={inputBarAdapter.deferSearch} locale={$locale || 'de'}
locale={$locale || 'de'} defaultOptions={inputBarAdapter.defaultOptions}
defaultOptions={inputBarAdapter.defaultOptions} selectedDefaultId={inputBarAdapter.selectedDefaultId}
selectedDefaultId={inputBarAdapter.selectedDefaultId} defaultOptionLabel={inputBarAdapter.defaultOptionLabel}
defaultOptionLabel={inputBarAdapter.defaultOptionLabel} onDefaultChange={inputBarAdapter.onDefaultChange}
onDefaultChange={inputBarAdapter.onDefaultChange} highlightPatterns={inputBarAdapter.highlightPatterns}
highlightPatterns={inputBarAdapter.highlightPatterns} positioning="static"
positioning="static" >
/> {#snippet leftAction()}
<button <button
class="pill-nav-toggle" class="pill-nav-toggle"
onclick={() => handleCollapsedChange(!isCollapsed)} onclick={() => handleCollapsedChange(!isCollapsed)}
title={isCollapsed ? 'Navigation einblenden' : 'Navigation ausblenden'} title={isCollapsed ? 'Navigation einblenden' : 'Navigation ausblenden'}
> >
<span class="pill-nav-toggle-icon" class:collapsed={isCollapsed}>▼</span> <span class="pill-nav-toggle-icon" class:collapsed={isCollapsed}>▼</span>
</button> </button>
</div> {/snippet}
</QuickInputBar>
<!-- TagStrip (between QuickInputBar and PillNav) --> <!-- TagStrip (between QuickInputBar and PillNav) -->
{#if isTagStripVisible} {#if isTagStripVisible}
@ -531,49 +532,27 @@
pointer-events: auto; pointer-events: auto;
} }
.bottom-stack-row {
display: flex;
align-items: center;
gap: 0;
pointer-events: none;
padding: 0 0.5rem;
}
.bottom-stack-row > :global(*) {
pointer-events: auto;
}
.bottom-stack-row > :global(:first-child) {
flex: 1;
min-width: 0;
}
.pill-nav-toggle { .pill-nav-toggle {
width: 44px; width: 28px;
height: 44px; height: 28px;
flex-shrink: 0; flex-shrink: 0;
align-self: center; border-radius: 50%;
border-radius: 9999px; border: none;
border: 1px solid hsl(var(--color-border, 0 0% 50% / 0.2)); background: hsl(var(--color-foreground, 0 0% 90%) / 0.08);
background: hsl(var(--color-surface, 0 0% 10%) / 0.85); color: hsl(var(--color-foreground, 0 0% 90%) / 0.4);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: hsl(var(--color-foreground, 0 0% 90%) / 0.5);
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: transition:
background 0.2s ease, background 0.15s ease,
color 0.2s ease; color 0.15s ease;
pointer-events: auto; padding: 0;
box-shadow:
0 4px 6px -1px hsl(var(--color-foreground, 0 0% 0%) / 0.1),
0 2px 4px -1px hsl(var(--color-foreground, 0 0% 0%) / 0.06);
} }
.pill-nav-toggle:hover { .pill-nav-toggle:hover {
color: hsl(var(--color-foreground, 0 0% 90%) / 0.9); background: hsl(var(--color-foreground, 0 0% 90%) / 0.15);
color: hsl(var(--color-foreground, 0 0% 90%) / 0.7);
} }
.pill-nav-toggle-icon { .pill-nav-toggle-icon {