feat(event-actions-toolbar): redesign with icon buttons, sm size, and event count badge

src/components/event-actions-toolbar.tsx

@@ -1,3 +1,6 @@
+"use client";
+
+import { CalendarPlus, Download, FileUp, Trash2 } from "lucide-react";
 import { IcsFilePicker } from "@/components/ics-file-picker";
 import { Button } from "@/components/ui/button";
 import type { CalendarEvent } from "@/lib/types";
@@ -18,25 +21,47 @@ export const EventActionsToolbar = ({
 	onClearAll,
 }: EventActionsToolbarProps) => {
 	return (
-		<>
-			{/* Control Toolbar */}
-			<p className="text-muted-foreground text-sm pb-2 pl-1">Event Actions</p>
-			<div className="flex flex-wrap gap-2 mb-4">
-				<Button onClick={onAddEvent}>Add Event</Button>
-				<IcsFilePicker onFileSelect={onImport} variant="secondary">
-					Import .ics
-				</IcsFilePicker>
-				{events.length > 0 && (
-					<>
-						<Button variant="secondary" onClick={onExport}>
-							Export .ics
-						</Button>
-						<Button variant="destructive" onClick={onClearAll}>
-							Clear All
-						</Button>
-					</>
-				)}
-			</div>
-		</>
+		<div className="flex items-center gap-2 mb-4 flex-wrap">
+			<Button size="sm" onClick={onAddEvent} className="h-8 text-xs">
+				<CalendarPlus className="h-3.5 w-3.5 mr-1.5" />
+				Add Event
+			</Button>
+
+			<IcsFilePicker onFileSelect={onImport} variant="outline" size="sm">
+				<span className="flex items-center gap-1.5">
+					<FileUp className="h-3.5 w-3.5" />
+					Import
+				</span>
+			</IcsFilePicker>
+
+			{events.length > 0 && (
+				<>
+					<Button
+						variant="outline"
+						size="sm"
+						onClick={onExport}
+						className="h-8 text-xs"
+					>
+						<Download className="h-3.5 w-3.5 mr-1.5" />
+						Export
+					</Button>
+					<Button
+						variant="ghost"
+						size="sm"
+						onClick={onClearAll}
+						className="h-8 text-xs text-muted-foreground hover:text-destructive"
+					>
+						<Trash2 className="h-3.5 w-3.5 mr-1.5" />
+						Clear
+					</Button>
+				</>
+			)}
+
+			{events.length > 0 && (
+				<span className="text-xs text-muted-foreground ml-auto">
+					{events.length} event{events.length !== 1 ? "s" : ""}
+				</span>
+			)}
+		</div>
 	);
 };