From 97ab9df3280fe2629e1436ae8660efa3c1c28d2e Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Sat, 8 Feb 2025 13:40:15 +0000
Subject: [PATCH] feat: history panel icons

---
 src/components/tool-settings/History.tsx | 36 +++++++++++++++++-------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/components/tool-settings/History.tsx b/src/components/tool-settings/History.tsx
index b75e91e..49e4e00 100644
--- a/src/components/tool-settings/History.tsx
+++ b/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) => (
-					<button
-						key={index}
-						onClick={() => jumpTo(index)}
-						className={`w-full border-b border-zinc-200 dark:border-zinc-800
+				{history.map(({ name }, index) => {
+					const IconComponent = iconMap[name as keyof typeof iconMap];
+
+					return (
+						<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>
-					</button>
-				))}
+						>
+							{IconComponent && <IconComponent size={16} />}
+							<span>{name}</span>
+						</button>
+					);
+				})}
 			</div>
 		</ScrollArea>
 	);