feat: history panel icons

src/components/tool-settings/History.tsx

@@ -1,6 +1,17 @@
-import { useContext } from "react";
+import { useContext, useEffect, useRef } from "react";
 import { HistoryContext } from "@/context/History";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import { BombIcon, EraserIcon, PencilIcon, PresentationIcon, SquareDashedIcon, Trash2Icon, WandIcon } from "lucide-react";
+
+const iconMap = {
+	"New Canvas": PresentationIcon,
+	Pencil: PencilIcon,
+	Eraser: EraserIcon,
+	"Rectangle Select": SquareDashedIcon,
+	"Magic Wand": WandIcon,
+	"Clear All": BombIcon,
+	Delete: Trash2Icon,
+};
 
 function History() {
 	const { history, currentIndex, jumpTo } = useContext(HistoryContext);
@@ -8,20 +19,25 @@ function History() {
 	return (
 		<ScrollArea key={history.length} className="h-48 border border-zinc-200 dark:border-zinc-800 rounded-md">
 			<div className="flex flex-col">
-				{history.map(({ name }, index) => (
+				{history.map(({ name }, index) => {
-					<button
+					const IconComponent = iconMap[name as keyof typeof iconMap];
-						key={index}
+
-						onClick={() => jumpTo(index)}
+					return (
-						className={`w-full border-b border-zinc-200 dark:border-zinc-800
+						<button
+							key={index}
+							onClick={() => jumpTo(index)}
+							className={`w-full border-b border-zinc-200 dark:border-zinc-800 px-3 py-0.5 text-sm flex items-center gap-2
 							// Current entry
 							${index == currentIndex ? "bg-zinc-200 dark:bg-zinc-800 cursor-auto" : "bg-zinc-100 dark:bg-zinc-900"}
 							// Ghost entries
 							${index > currentIndex ? "bg-zinc-300 dark:bg-zinc-950 text-zinc-500 dark:text-zinc-600" : ""}
 						`}
-					>
+						>
-						<span>{name}</span>
+							{IconComponent && <IconComponent size={16} />}
-					</button>
+							<span>{name}</span>
-				))}
+						</button>
+					);
+				})}
 			</div>
 		</ScrollArea>
 	);