From 11da7d22a7a735602c8e0495410b71ea712e0157 Mon Sep 17 00:00:00 2001
From: Till-JS <101404291+Till-JS@users.noreply.github.com>
Date: Fri, 12 Dec 2025 21:58:26 +0100
Subject: [PATCH] fix(calendar): toolbar opens below InputBar and pushes
 content up
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Toolbar panel now appears below InputBar (between InputBar and PillNav)
- When expanded, InputBar, FAB and DateStrip all shift up together
- Added isToolbarExpanded prop to DateStrip for dynamic positioning
- FAB stays aligned with InputBar at all times
- Smooth 200ms transitions for all position changes

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../calendar/CalendarToolbar.svelte           | 117 ++++++++++--------
 .../lib/components/calendar/DateStrip.svelte  |  20 ++-
 .../apps/web/src/routes/(app)/+layout.svelte  |   8 +-
 3 files changed, 88 insertions(+), 57 deletions(-)

diff --git a/apps/calendar/apps/web/src/lib/components/calendar/CalendarToolbar.svelte b/apps/calendar/apps/web/src/lib/components/calendar/CalendarToolbar.svelte
index e198d25ed..8e7ab8584 100644
--- a/apps/calendar/apps/web/src/lib/components/calendar/CalendarToolbar.svelte
+++ b/apps/calendar/apps/web/src/lib/components/calendar/CalendarToolbar.svelte
@@ -20,22 +20,13 @@
 		onModeChange?.(!isSidebarMode);
 	}
 
-	function collapseToolbar() {
-		onCollapsedChange?.(true);
-	}
-
-	function expandToolbar() {
-		onCollapsedChange?.(false);
-	}
-
 	function toggleToolbar() {
 		onCollapsedChange?.(!isCollapsed);
 	}
 </script>
 
-<!-- Toolbar Container - positioned next to InputBar -->
-<div class="toolbar-container" class:sidebar-mode={isSidebarMode}>
-	<!-- FAB Button (always visible) -->
+<!-- FAB Button - positioned next to InputBar -->
+<div class="fab-container" class:sidebar-mode={isSidebarMode} class:expanded={!isCollapsed}>
 	<button
 		onclick={toggleToolbar}
 		class="toolbar-fab glass-pill"
@@ -52,20 +43,21 @@
 					d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
 				/>
 			{:else}
-				<!-- Close icon -->
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M6 18L18 6M6 6l12 12"
-				/>
+				<!-- Chevron down icon -->
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
 			{/if}
 		</svg>
 	</button>
+</div>
 
-	<!-- Expanded Toolbar Panel (opens above) -->
-	{#if !isCollapsed}
-		<div class="toolbar-panel glass-panel" transition:slide={{ duration: 200 }}>
+<!-- Expanded Toolbar Panel - below InputBar, pushes content up -->
+{#if !isCollapsed}
+	<div
+		class="toolbar-bar glass-panel"
+		class:sidebar-mode={isSidebarMode}
+		transition:slide={{ duration: 200 }}
+	>
+		<div class="toolbar-content">
 			<CalendarToolbarContent />
 
 			<div class="toolbar-divider"></div>
@@ -97,34 +89,75 @@
 				</svg>
 			</button>
 		</div>
-	{/if}
-</div>
+	</div>
+{/if}
 
 <style>
-	/* Container positioned next to InputBar */
-	.toolbar-container {
+	/* FAB Container - positioned next to InputBar */
+	.fab-container {
 		position: fixed;
 		bottom: calc(70px + env(safe-area-inset-bottom, 0px));
 		right: calc(50% - 350px - 60px); /* Right of InputBar (max-width 700px / 2 + gap) */
 		z-index: 91; /* Above InputBar (90) */
-		display: flex;
-		flex-direction: column;
-		align-items: flex-end;
-		gap: 0.5rem;
 		pointer-events: none;
+		transition: bottom 0.2s ease;
 	}
 
-	.toolbar-container.sidebar-mode {
+	/* When expanded, move FAB up with InputBar */
+	.fab-container.expanded {
+		bottom: calc(130px + env(safe-area-inset-bottom, 0px));
+	}
+
+	.fab-container.sidebar-mode {
 		bottom: calc(0px + env(safe-area-inset-bottom, 0px));
 	}
 
+	.fab-container.sidebar-mode.expanded {
+		bottom: calc(60px + env(safe-area-inset-bottom, 0px));
+	}
+
 	/* Responsive positioning */
 	@media (max-width: 900px) {
-		.toolbar-container {
+		.fab-container {
 			right: 1rem;
 		}
 	}
 
+	/* Toolbar Bar - full width below InputBar */
+	.toolbar-bar {
+		position: fixed;
+		bottom: calc(70px + env(safe-area-inset-bottom, 0px));
+		left: 0;
+		right: 0;
+		z-index: 89; /* Below InputBar (90) */
+		display: flex;
+		justify-content: center;
+		padding: 0.5rem 1rem;
+	}
+
+	.toolbar-bar.sidebar-mode {
+		bottom: calc(0px + env(safe-area-inset-bottom, 0px));
+	}
+
+	.toolbar-content {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem 1rem;
+		background: rgba(255, 255, 255, 0.92);
+		backdrop-filter: blur(16px);
+		-webkit-backdrop-filter: blur(16px);
+		border: 1px solid rgba(0, 0, 0, 0.1);
+		box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08);
+		border-radius: 1rem;
+		white-space: nowrap;
+	}
+
+	:global(.dark) .toolbar-content {
+		background: rgba(30, 30, 30, 0.92);
+		border: 1px solid rgba(255, 255, 255, 0.15);
+	}
+
 	/* Glass styling */
 	.glass-pill {
 		background: rgba(255, 255, 255, 0.85);
@@ -141,17 +174,7 @@
 	}
 
 	.glass-panel {
-		background: rgba(255, 255, 255, 0.92);
-		backdrop-filter: blur(16px);
-		-webkit-backdrop-filter: blur(16px);
-		border: 1px solid rgba(0, 0, 0, 0.1);
-		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-		border-radius: 1rem;
-	}
-
-	:global(.dark) .glass-panel {
-		background: rgba(30, 30, 30, 0.92);
-		border: 1px solid rgba(255, 255, 255, 0.15);
+		background: transparent;
 	}
 
 	/* FAB Button */
@@ -192,16 +215,6 @@
 		color: hsl(var(--color-foreground));
 	}
 
-	/* Toolbar Panel (opens above FAB) */
-	.toolbar-panel {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		padding: 0.5rem 0.75rem;
-		pointer-events: auto;
-		white-space: nowrap;
-	}
-
 	.toolbar-divider {
 		width: 1px;
 		height: 1.5rem;
diff --git a/apps/calendar/apps/web/src/lib/components/calendar/DateStrip.svelte b/apps/calendar/apps/web/src/lib/components/calendar/DateStrip.svelte
index 818e6487c..4baab1cbc 100644
--- a/apps/calendar/apps/web/src/lib/components/calendar/DateStrip.svelte
+++ b/apps/calendar/apps/web/src/lib/components/calendar/DateStrip.svelte
@@ -16,9 +16,10 @@
 
 	interface Props {
 		isSidebarMode?: boolean;
+		isToolbarExpanded?: boolean;
 	}
 
-	let { isSidebarMode = false }: Props = $props();
+	let { isSidebarMode = false, isToolbarExpanded = false }: Props = $props();
 
 	// Get event count for a day (max 5 dots displayed)
 	function getEventCount(date: Date): number {
@@ -218,7 +219,11 @@
 	});
 </script>
 
-<div class="date-strip-wrapper" class:sidebar-mode={isSidebarMode}>
+<div
+	class="date-strip-wrapper"
+	class:sidebar-mode={isSidebarMode}
+	class:toolbar-expanded={isToolbarExpanded}
+>
 	<div class="date-strip-container">
 		<!-- Month label -->
 		<div class="month-header">
@@ -295,7 +300,12 @@
 		flex-direction: column;
 		align-items: center;
 		pointer-events: none;
-		transition: bottom 0.3s ease;
+		transition: bottom 0.2s ease;
+	}
+
+	/* When toolbar is expanded, push DateStrip up */
+	.date-strip-wrapper.toolbar-expanded {
+		bottom: calc(200px + env(safe-area-inset-bottom, 0px)); /* Extra 60px for toolbar */
 	}
 
 	/* When PillNav is in sidebar mode, no PillNav at bottom - just InputBar */
@@ -303,6 +313,10 @@
 		bottom: calc(70px + env(safe-area-inset-bottom, 0px));
 	}
 
+	.date-strip-wrapper.sidebar-mode.toolbar-expanded {
+		bottom: calc(130px + env(safe-area-inset-bottom, 0px));
+	}
+
 	.today-button {
 		position: absolute;
 		right: 100%;
diff --git a/apps/calendar/apps/web/src/routes/(app)/+layout.svelte b/apps/calendar/apps/web/src/routes/(app)/+layout.svelte
index f8872cdfd..8bcf75eba 100644
--- a/apps/calendar/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/calendar/apps/web/src/routes/(app)/+layout.svelte
@@ -369,7 +369,7 @@
 
 		<!-- Date strip (only on main calendar page) -->
 		{#if showCalendarToolbar}
-			<DateStrip {isSidebarMode} />
+			<DateStrip {isSidebarMode} isToolbarExpanded={!isToolbarCollapsed} />
 		{/if}
 
 		<!-- Calendar toolbar (only on main calendar page, not in sidebar mode) -->
@@ -410,7 +410,11 @@
 			appIcon="calendar"
 			primaryColor="#3b82f6"
 			autoFocus={true}
-			bottomOffset={isSidebarMode ? '0px' : '70px'}
+			bottomOffset={isSidebarMode
+				? '0px'
+				: showCalendarToolbar && !isToolbarCollapsed
+					? '130px'
+					: '70px'}
 		/>
 	</div>
 </SplitPaneContainer>