From edfb48ad3aec4fa305af894329148d9e55224500 Mon Sep 17 00:00:00 2001
From: JCEEE <0xjceee@proton.me>
Date: Wed, 26 Aug 2026 10:17:58 +0100
Subject: [PATCH] add template and icons comps

---
 .../src/lib/components/TemplateIcon.svelte    | 13 +++
 frontend/src/lib/templateIcons.ts             | 83 +++++++++++++++++++
 2 files changed, 96 insertions(+)
 create mode 100644 frontend/src/lib/components/TemplateIcon.svelte
 create mode 100644 frontend/src/lib/templateIcons.ts

diff --git a/frontend/src/lib/components/TemplateIcon.svelte b/frontend/src/lib/components/TemplateIcon.svelte
new file mode 100644
index 0000000..bb381d1
--- /dev/null
+++ b/frontend/src/lib/components/TemplateIcon.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { templateIcon } from '$lib/templateIcons';
+
+	let { name = undefined, size = 18, color = undefined }: {
+		name?: string;
+		size?: number;
+		color?: string;
+	} = $props();
+
+	const Cmp = $derived(templateIcon(name));
+</script>
+
+<Cmp {size} {color} />
diff --git a/frontend/src/lib/templateIcons.ts b/frontend/src/lib/templateIcons.ts
new file mode 100644
index 0000000..876e8d0
--- /dev/null
+++ b/frontend/src/lib/templateIcons.ts
@@ -0,0 +1,83 @@
+import {
+	Bed,
+	Sparkles,
+	BookOpen,
+	Utensils,
+	Wallet,
+	Trophy,
+	Star,
+	Moon,
+	Sun,
+	Apple,
+	Car,
+	Gamepad2,
+	Music,
+	Shirt,
+	Leaf,
+	Heart,
+	Gift,
+	Timer
+} from '@lucide/svelte';
+
+export const ICON_MAP: Record<string, any> = {
+	Bed,
+	Sparkles,
+	BookOpen,
+	Utensils,
+	Wallet,
+	Trophy,
+	Star,
+	Moon,
+	Sun,
+	Apple,
+	Car,
+	Gamepad2,
+	Music,
+	Shirt,
+	Leaf,
+	Heart,
+	Gift,
+	Timer
+};
+
+export const ICON_NAMES = Object.keys(ICON_MAP);
+
+export function templateIcon(name?: string): any {
+	if (name && ICON_MAP[name]) return ICON_MAP[name];
+	return Star;
+}
+
+// 8 normal colours + 1 dark (chromatic) + 1 transparent (default accent).
+// `value: ''` means transparent — no accent background, neutral outline.
+export interface TemplateColor {
+	value: string;
+	label: string;
+	chromatic?: 'dark' | 'transparent';
+}
+
+export const TEMPLATE_COLORS: TemplateColor[] = [
+	{ value: '', label: 'Transparent', chromatic: 'transparent' },
+	{ value: '#ef4444', label: 'Red' },
+	{ value: '#f97316', label: 'Orange' },
+	{ value: '#f59e0b', label: 'Amber' },
+	{ value: '#22c55e', label: 'Green' },
+	{ value: '#14b8a6', label: 'Teal' },
+	{ value: '#3b82f6', label: 'Blue' },
+	{ value: '#6366f1', label: 'Indigo' },
+	{ value: '#a855f7', label: 'Purple' },
+	{ value: '#1f2937', label: 'Dark', chromatic: 'dark' }
+];
+
+export function accentBg(color?: string): string {
+	if (!color) return 'transparent';
+	const hex = color.replace('#', '');
+	const r = parseInt(hex.slice(0, 2), 16);
+	const g = parseInt(hex.slice(2, 4), 16);
+	const b = parseInt(hex.slice(4, 6), 16);
+	return `rgba(${r}, ${g}, ${b}, 0.3)`;
+}
+
+export function outlineColor(color?: string): string {
+	return color || '#e5e7eb';
+}
+