From ef0c834a2b248b8d05c279dd94fe8648a3767203 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Thu, 2 Apr 2026 23:45:43 +0200
Subject: [PATCH] feat(ui): add PillNav toggle button next to QuickInputBar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Small floating button (▼/▲) at the bottom-right that toggles PillNav
visibility. QuickInputBar's bottomOffset adjusts dynamically when nav
is collapsed (70px → 12px), reclaiming vertical space.

- Button uses existing handleCollapsedChange() with localStorage persistence
- Smooth transitions on position and rotation
- Glass-morphism style (blur + semi-transparent background)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../apps/web/src/routes/(app)/+layout.svelte  | 49 +++++++++++++++++++
 1 file changed, 49 insertions(+)

diff --git a/apps/manacore/apps/web/src/routes/(app)/+layout.svelte b/apps/manacore/apps/web/src/routes/(app)/+layout.svelte
index 790a2d7dd..cc7dddc63 100644
--- a/apps/manacore/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/manacore/apps/web/src/routes/(app)/+layout.svelte
@@ -429,8 +429,19 @@
 			defaultOptionLabel={inputBarAdapter.defaultOptionLabel}
 			onDefaultChange={inputBarAdapter.onDefaultChange}
 			highlightPatterns={inputBarAdapter.highlightPatterns}
+			bottomOffset={isCollapsed ? '12px' : '70px'}
 		/>
 
+		<!-- PillNav toggle button (next to QuickInputBar) -->
+		<button
+			class="pill-nav-toggle"
+			style:bottom={isCollapsed ? '20px' : '78px'}
+			onclick={() => handleCollapsedChange(!isCollapsed)}
+			title={isCollapsed ? 'Navigation einblenden' : 'Navigation ausblenden'}
+		>
+			<span class="pill-nav-toggle-icon" class:collapsed={isCollapsed}>▼</span>
+		</button>
+
 		<!-- TagStrip (above PillNav, toggled via Tags pill) -->
 		{#if isTagStripVisible}
 			<TagStrip
@@ -486,3 +497,41 @@
 		/>
 	{/if}
 </AuthGate>
+
+<style>
+	.pill-nav-toggle {
+		position: fixed;
+		right: 16px;
+		z-index: 91;
+		width: 32px;
+		height: 32px;
+		border-radius: 50%;
+		border: 1px solid rgba(255, 255, 255, 0.1);
+		background: rgba(0, 0, 0, 0.6);
+		backdrop-filter: blur(8px);
+		color: rgba(255, 255, 255, 0.5);
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition:
+			bottom 0.3s ease,
+			background 0.2s ease,
+			color 0.2s ease;
+	}
+
+	.pill-nav-toggle:hover {
+		background: rgba(0, 0, 0, 0.8);
+		color: rgba(255, 255, 255, 0.9);
+	}
+
+	.pill-nav-toggle-icon {
+		font-size: 10px;
+		transition: transform 0.3s ease;
+		display: inline-block;
+	}
+
+	.pill-nav-toggle-icon.collapsed {
+		transform: rotate(180deg);
+	}
+</style>