From cc37db80726206694bd3759fd38ef4e1f7f8dcf0 Mon Sep 17 00:00:00 2001
From: Till-JS <101404291+Till-JS@users.noreply.github.com>
Date: Sat, 13 Dec 2025 14:04:51 +0100
Subject: [PATCH] feat(calendar): improve FAB positioning on mobile and subtle
 close styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add hasFabRight prop to InputBar for mobile FAB spacing
- InputBar leaves space for FAB on screens under 900px
- Change active FAB style to subtle muted colors instead of bright blue
- Support dark mode for active FAB state

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../lib/components/calendar/CalendarToolbar.svelte    |  9 ++++++---
 .../calendar/apps/web/src/routes/(app)/+layout.svelte |  1 +
 packages/shared-ui/src/quick-input/InputBar.svelte    | 11 +++++++++++
 3 files changed, 18 insertions(+), 3 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 ef7444e83..5ff5d7412 100644
--- a/apps/calendar/apps/web/src/lib/components/calendar/CalendarToolbar.svelte
+++ b/apps/calendar/apps/web/src/lib/components/calendar/CalendarToolbar.svelte
@@ -207,12 +207,15 @@
 	}
 
 	.toolbar-fab.active {
-		background: #3b82f6;
-		border-color: #3b82f6;
+		background: rgba(0, 0, 0, 0.05);
+	}
+
+	:global(.dark) .toolbar-fab.active {
+		background: rgba(255, 255, 255, 0.15);
 	}
 
 	.toolbar-fab.active .fab-icon {
-		color: white;
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.fab-icon {
diff --git a/apps/calendar/apps/web/src/routes/(app)/+layout.svelte b/apps/calendar/apps/web/src/routes/(app)/+layout.svelte
index 84d55a078..aea016b1d 100644
--- a/apps/calendar/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/calendar/apps/web/src/routes/(app)/+layout.svelte
@@ -415,6 +415,7 @@
 				: showCalendarToolbar && !isToolbarCollapsed
 					? '140px'
 					: '70px'}
+			hasFabRight={showCalendarToolbar && !isSidebarMode}
 		/>
 	</div>
 </SplitPaneContainer>
diff --git a/packages/shared-ui/src/quick-input/InputBar.svelte b/packages/shared-ui/src/quick-input/InputBar.svelte
index 36a1da80d..62cf5d7d1 100644
--- a/packages/shared-ui/src/quick-input/InputBar.svelte
+++ b/packages/shared-ui/src/quick-input/InputBar.svelte
@@ -59,6 +59,8 @@
 		autoFocus?: boolean;
 		/** Bottom offset from viewport bottom (default: '70px') */
 		bottomOffset?: string;
+		/** Whether to leave space for a FAB button on the right side on mobile (default: false) */
+		hasFabRight?: boolean;
 	}
 
 	let {
@@ -75,6 +77,7 @@
 		primaryColor = '#8b5cf6',
 		autoFocus = true,
 		bottomOffset = '70px',
+		hasFabRight = false,
 	}: Props = $props();
 
 	let searchQuery = $state('');
@@ -244,6 +247,7 @@
 
 <div
 	class="quick-input-bar"
+	class:has-fab-right={hasFabRight}
 	style="--primary-color: {primaryColor}; --bottom-offset: {bottomOffset}"
 >
 	<!-- Results Panel (above input) -->
@@ -428,6 +432,13 @@
 		transition: bottom 0.3s ease;
 	}
 
+	/* Leave space for FAB on mobile */
+	@media (max-width: 900px) {
+		.quick-input-bar.has-fab-right {
+			padding-right: calc(54px + 1rem + 0.75rem); /* FAB width + FAB right margin + gap */
+		}
+	}
+
 	.input-container,
 	.results-panel,
 	.submit-btn,