From 976fb5fdf87609be2f7ef95e39a1be1c0a076176 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Fri, 3 Apr 2026 00:21:47 +0200
Subject: [PATCH] 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>
---
 .../apps/web/src/routes/(app)/+layout.svelte        |  6 +++---
 packages/shared-ui/src/quick-input/InputBar.svelte  | 13 ++++++++++++-
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/apps/manacore/apps/web/src/routes/(app)/+layout.svelte b/apps/manacore/apps/web/src/routes/(app)/+layout.svelte
index 4f601484b..f057addcb 100644
--- a/apps/manacore/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/manacore/apps/web/src/routes/(app)/+layout.svelte
@@ -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;
diff --git a/packages/shared-ui/src/quick-input/InputBar.svelte b/packages/shared-ui/src/quick-input/InputBar.svelte
index e8316357a..7484bc1d1 100644
--- a/packages/shared-ui/src/quick-input/InputBar.svelte
+++ b/packages/shared-ui/src/quick-input/InputBar.svelte
@@ -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;