fix(ui): move nav toggle to right side of InputBar, make it larger

- Add rightAction snippet prop to QuickInputBar (InputBar.svelte)
- Move toggle from leftAction to rightAction (renders after submit button)
- Increase toggle size from 28px to 36px for better tap target

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-04-03 00:21:47 +02:00
parent 06ebc6271d
commit 976fb5fdf8
2 changed files with 15 additions and 4 deletions

View file

@ -408,7 +408,7 @@
highlightPatterns={inputBarAdapter.highlightPatterns}
positioning="static"
>
{#snippet leftAction()}
{#snippet rightAction()}
<button
class="pill-nav-toggle"
onclick={() => handleCollapsedChange(!isCollapsed)}
@ -533,8 +533,8 @@
}
.pill-nav-toggle {
width: 28px;
height: 28px;
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: 50%;
border: none;

View file

@ -75,6 +75,8 @@
onShowSyntaxHelp?: () => void;
/** Snippet for left action button (e.g., voice input) - rendered inside the input bar on the left */
leftAction?: Snippet;
/** Snippet for right action button (e.g., nav toggle) - rendered inside the input bar on the right */
rightAction?: Snippet;
/** Custom highlight patterns. If not provided, uses locale-based defaults. */
highlightPatterns?: HighlightPattern[];
/** Locale for syntax highlighting keywords (e.g., 'de', 'en'). Default: 'de'. */
@ -107,6 +109,7 @@
onShowShortcuts,
onShowSyntaxHelp,
leftAction,
rightAction,
highlightPatterns,
locale = 'de',
positioning = 'fixed',
@ -538,6 +541,13 @@
{/if}
</button>
{/if}
<!-- Right action slot (e.g., nav toggle) -->
{#if rightAction}
<div class="right-action">
{@render rightAction()}
</div>
{/if}
</div>
<!-- Context Menu -->
@ -663,7 +673,8 @@
}
}
.left-action {
.left-action,
.right-action {
display: flex;
align-items: center;
justify-content: center;