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 (
-		<>
+		<div className="flex items-center gap-2 mb-4 flex-wrap">
-			{/* Control Toolbar */}
+			<Button size="sm" onClick={onAddEvent} className="h-8 text-xs">
-			<p className="text-muted-foreground text-sm pb-2 pl-1">Event Actions</p>
+				<CalendarPlus className="h-3.5 w-3.5 mr-1.5" />
-			<div className="flex flex-wrap gap-2 mb-4">
+				Add Event
-				<Button onClick={onAddEvent}>Add Event</Button>
+			</Button>
-				<IcsFilePicker onFileSelect={onImport} variant="secondary">
+
-					Import .ics
+			<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="secondary" onClick={onExport}>
+					<Button
-							Export .ics
+						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="destructive" onClick={onClearAll}>
+					<Button
-							Clear All
+						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>
-		</>
 	);
 };