From 0ed6768a59de8d4522c7e4b31b1d92bda6faa3d3 Mon Sep 17 00:00:00 2001
From: Aleix Soler <aleixsoler64@gmail.com>
Date: Wed, 6 Aug 2025 18:53:06 +0200
Subject: [PATCH] fix: add lucide icons

---
 components/SettingsUI/TemplateItem.tsx  | 36 ++-----------------
 components/atoms/ObsidianIcon.tsx       | 31 ++++++++++++++++
 styles/components/obsidian-icon.css     | 10 ++++++
 styles/components/template-settings.css | 48 -------------------------
 styles/index.css                        |  1 +
 5 files changed, 45 insertions(+), 81 deletions(-)
 create mode 100644 components/atoms/ObsidianIcon.tsx
 create mode 100644 styles/components/obsidian-icon.css

diff --git a/components/SettingsUI/TemplateItem.tsx b/components/SettingsUI/TemplateItem.tsx
index 8f2acfe..e476090 100644
--- a/components/SettingsUI/TemplateItem.tsx
+++ b/components/SettingsUI/TemplateItem.tsx
@@ -3,6 +3,7 @@ import { StatusTemplate } from "@/types/pluginSettings";
 import { StatusDisplay } from "../atoms/StatusDisplay";
 import { SelectableListItem } from "../atoms/SelectableListItem";
 import { isCustomTemplate } from "@/utils/templateUtils";
+import { ObsidianIcon } from "../atoms/ObsidianIcon";
 
 interface TemplateItemProps {
 	template: StatusTemplate;
@@ -70,55 +71,24 @@ export const TemplateItem: React.FC<TemplateItemProps> = ({
 			<div className="template-item-actions">
 				{onEdit && (
 					<button
-						className="template-action-btn template-action-btn--edit"
 						onClick={(e) => {
 							e.stopPropagation();
 							onEdit(template);
 						}}
 						title="Edit template"
 					>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							width="24"
-							height="24"
-							viewBox="0 0 24 24"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						>
-							<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" />
-							<path d="m15 5 4 4" />
-						</svg>
+						<ObsidianIcon name="edit" size={16} />
 					</button>
 				)}
 				{onDelete && (
 					<button
-						className="template-action-btn template-action-btn--delete"
 						onClick={(e) => {
 							e.stopPropagation();
 							onDelete(template.id);
 						}}
 						title="Delete template"
 					>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							width="24"
-							height="24"
-							viewBox="0 0 24 24"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						>
-							<path d="M10 11v6" />
-							<path d="M14 11v6" />
-							<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
-							<path d="M3 6h18" />
-							<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
-						</svg>
+						<ObsidianIcon name="trash" size={16} />
 					</button>
 				)}
 			</div>
diff --git a/components/atoms/ObsidianIcon.tsx b/components/atoms/ObsidianIcon.tsx
new file mode 100644
index 0000000..7b8ee23
--- /dev/null
+++ b/components/atoms/ObsidianIcon.tsx
@@ -0,0 +1,31 @@
+import React, { useEffect, useRef } from "react";
+import { setIcon } from "obsidian";
+
+interface ObsidianIconProps {
+	name: string;
+	size?: number;
+	className?: string;
+}
+
+export const ObsidianIcon: React.FC<ObsidianIconProps> = ({
+	name,
+	size = 16,
+	className = "",
+}) => {
+	const iconRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		if (iconRef.current) {
+			iconRef.current.innerHTML = "";
+			setIcon(iconRef.current, name);
+		}
+	}, [name]);
+
+	return (
+		<div
+			ref={iconRef}
+			className={`obsidian-icon ${className}`}
+			style={{ width: size, height: size }}
+		/>
+	);
+};
diff --git a/styles/components/obsidian-icon.css b/styles/components/obsidian-icon.css
new file mode 100644
index 0000000..dfa3962
--- /dev/null
+++ b/styles/components/obsidian-icon.css
@@ -0,0 +1,10 @@
+.obsidian-icon {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.obsidian-icon svg {
+	width: 100%;
+	height: 100%;
+}
diff --git a/styles/components/template-settings.css b/styles/components/template-settings.css
index d9e5111..48e6f85 100644
--- a/styles/components/template-settings.css
+++ b/styles/components/template-settings.css
@@ -131,11 +131,6 @@
 	letter-spacing: 0.05em;
 }
 
-.template-custom-badge .lucide {
-	width: 12px;
-	height: 12px;
-}
-
 /* Template Item Actions */
 .template-item-actions {
 	display: flex;
@@ -149,49 +144,6 @@
 	justify-content: center;
 }
 
-.template-action-btn {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 28px;
-	height: 28px;
-	border: none;
-	border-radius: var(--radius-s);
-	cursor: pointer;
-	transition: all var(--anim-duration-fast) ease;
-	color: var(--text-muted);
-	background: transparent;
-}
-
-.template-action-btn:hover {
-	transform: scale(1.1);
-}
-
-.template-action-btn--edit {
-	background: var(--interactive-normal);
-	color: var(--text-normal);
-}
-
-.template-action-btn--edit:hover {
-	background: var(--interactive-accent);
-	color: var(--text-on-accent);
-}
-
-.template-action-btn--delete {
-	background: var(--interactive-normal);
-	color: var(--text-error);
-}
-
-.template-action-btn--delete:hover {
-	background: var(--text-error);
-	color: var(--text-on-accent);
-}
-
-.template-action-btn .lucide {
-	width: 16px;
-	height: 16px;
-}
-
 /* Template Editor Modal */
 .template-editor-modal {
 	background: var(--background-primary);
diff --git a/styles/index.css b/styles/index.css
index 4f0b7db..c3dbc5f 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -15,3 +15,4 @@
 @import "components/group-label.css";
 @import "components/collapsible-counter.css";
 @import "components/status-display.css";
+@import "components/obsidian-icon.css";