From 0f46e9322f9874ffc792d3e6199c80ac11e52d45 Mon Sep 17 00:00:00 2001
From: Dmytro Stanchiev <git@dmytros.dev>
Date: Wed, 8 Apr 2026 01:50:06 -0400
Subject: [PATCH] refactor: mobile-first AI toolbar layout

---
 src/components/ai-toolbar.tsx | 87 +++++++++++++++++++----------------
 1 file changed, 47 insertions(+), 40 deletions(-)

diff --git a/src/components/ai-toolbar.tsx b/src/components/ai-toolbar.tsx
index 6e711a0..91c5aed 100644
--- a/src/components/ai-toolbar.tsx
+++ b/src/components/ai-toolbar.tsx
@@ -78,7 +78,8 @@ export const AIToolbar = ({
 				{/* AI command — only shown when authenticated */}
 				{isAuthenticated ? (
 					<>
-						<div className="flex items-start gap-3">
+						{/* Textarea fills full width; action icons sit below on mobile, to the right on sm+ */}
+						<div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:gap-3">
 							<div className="flex-1 space-y-2">
 								<div className="flex items-center gap-2 mb-1.5">
 									<Sparkles className="h-3.5 w-3.5 text-primary shrink-0" />
@@ -121,7 +122,9 @@ export const AIToolbar = ({
 									)}
 								</AnimatePresence>
 							</div>
-							<div className="flex flex-col gap-1.5 pt-6">
+
+							{/* On mobile: horizontal row below textarea. On sm+: vertical column beside textarea */}
+							<div className="flex flex-row gap-1.5 sm:flex-col sm:pt-6">
 								<ImagePicker
 									onFileSelect={onImageSelect}
 									disabled={aiLoading}
@@ -158,46 +161,50 @@ export const AIToolbar = ({
 				)}
 
 				{/* Action buttons — always visible */}
-				<div className="flex items-center gap-2 flex-wrap">
-					<Button size="sm" onClick={onAddEvent} className="text-xs">
-						<CalendarPlus className="h-3.5 w-3.5" />
-						Add Event
-					</Button>
+				{/* On mobile: two rows — actions top, meta (badge + summarize) below */}
+				{/* On sm+: single row with meta pushed to the right */}
+				<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:flex-wrap">
+					<div className="flex items-center gap-2 flex-wrap">
+						<Button size="sm" onClick={onAddEvent} className="text-xs">
+							<CalendarPlus className="h-3.5 w-3.5" />
+							Add Event
+						</Button>
 
-					<IcsFilePicker
-						onFileSelect={onImport}
-						variant="outline"
-						size="sm"
-						className="text-xs"
-					>
-						<FileUp className="h-3.5 w-3.5" />
-						Import
-					</IcsFilePicker>
+						<IcsFilePicker
+							onFileSelect={onImport}
+							variant="outline"
+							size="sm"
+							className="text-xs"
+						>
+							<FileUp className="h-3.5 w-3.5" />
+							Import
+						</IcsFilePicker>
 
-					{events.length > 0 && (
-						<>
-							<Button
-								variant="outline"
-								size="sm"
-								onClick={onExport}
-								className="text-xs"
-							>
-								<Download className="h-3.5 w-3.5" />
-								Export
-							</Button>
-							<Button
-								variant="ghost"
-								size="sm"
-								onClick={onClearAll}
-								className="text-xs text-muted-foreground hover:text-destructive"
-							>
-								<Trash2 className="h-3.5 w-3.5" />
-								Clear
-							</Button>
-						</>
-					)}
+						{events.length > 0 && (
+							<>
+								<Button
+									variant="outline"
+									size="sm"
+									onClick={onExport}
+									className="text-xs"
+								>
+									<Download className="h-3.5 w-3.5" />
+									Export
+								</Button>
+								<Button
+									variant="ghost"
+									size="sm"
+									onClick={onClearAll}
+									className="text-xs text-muted-foreground hover:text-destructive"
+								>
+									<Trash2 className="h-3.5 w-3.5" />
+									Clear
+								</Button>
+							</>
+						)}
+					</div>
 
-					<div className="ml-auto flex items-center gap-3">
+					<div className="flex items-center gap-3 sm:ml-auto">
 						{events.length > 0 && (
 							<Badge variant="secondary" className="text-xs">
 								{events.length} event{events.length !== 1 ? "s" : ""}
@@ -211,7 +218,7 @@ export const AIToolbar = ({
 								disabled={aiLoading}
 								className="text-xs h-7"
 							>
-								<Bot className="h-3 w-3 mr-1.5" />
+								<Bot className="h-3 w-3" />
 								{aiLoading ? "Summarizing..." : "Summarize"}
 							</Button>
 						)}