general ui patches

frontend/src/routes/admin/+page.svelte

@@ -4,7 +4,7 @@
 	import { page } from '$app/state';
 	import { ViewHeader, CardGrid, Card, Button } from '$lib/components';
 	import TemplateIcon from '$lib/components/TemplateIcon.svelte';
-	import { ICON_NAMES } from '$lib/templateIcons';
+	import { ICON_NAMES, TEMPLATE_COLORS } from '$lib/templateIcons';
 	import Footer from '$lib/components/Footer.svelte';
 
 	let { data, form } = $props();
@@ -400,10 +400,24 @@
 							</select>
 						</label>
 						<span class="icon-preview"><TemplateIcon name={tplVals.icon} size={22} color={tplVals.color} /></span>
-						<label>
+						<div class="color-field">
 							Colour
-							<input type="color" name="color" bind:value={tplVals.color} />
-						</label>
+							<div class="color-swatches">
+								{#each TEMPLATE_COLORS as c}
+									<button
+										type="button"
+										class="swatch"
+										class:selected={tplVals.color === c.value}
+										style="background:{c.value || 'transparent'}; border-color:{c.chromatic ===
+										'transparent'
+											? '#e5e7eb'
+											: c.value}"
+										title={c.label}
+										onclick={() => (tplVals.color = c.value)}></button>
+								{/each}
+							</div>
+							<input type="hidden" name="color" value={tplVals.color} />
+						</div>
 					</div>
 
 					{#if tplType === 'chore'}
@@ -936,6 +950,25 @@
 	.tpl-actions { display: flex; gap: 0.75rem; }
 	.tpl-new { display: flex; gap: 0.6rem; margin-top: 0.5rem; }
 	.row { display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; }
+	.color-field {
+		display: flex;
+		flex-direction: column;
+		gap: 0.3rem;
+		font-size: 0.85rem;
+		font-weight: 600;
+		color: #6b7280;
+	}
+	.color-swatches { display: flex; flex-wrap: wrap; gap: 0.4rem; }
+	.swatch {
+		width: 26px;
+		height: 26px;
+		border-radius: 50%;
+		border: 2px solid #e5e7eb;
+		cursor: pointer;
+		padding: 0;
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+	}
+	.swatch.selected { outline: 2px solid #111827; outline-offset: 1px; }
 	.icon-preview {
 		display: inline-flex;
 		align-items: center;