From ed32b7e92457196e884e93c041dc3796ffad3e09 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 3 Dec 2025 17:14:19 -0800
Subject: [PATCH] add color dot support to Select component

---
 src/lib/components/ui/Select.svelte | 32 +++++++++++++++++++++++++----
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/ui/Select.svelte b/src/lib/components/ui/Select.svelte
index 46ac178b..001169b0 100644
--- a/src/lib/components/ui/Select.svelte
+++ b/src/lib/components/ui/Select.svelte
@@ -10,6 +10,8 @@
 		label: string
 		disabled?: boolean
 		image?: string
+		/** CSS color for a colored dot indicator */
+		color?: string
 	}
 
 	interface Props {
@@ -94,7 +96,9 @@
 			items={stringOptions}
 		>
 			<SelectPrimitive.Trigger class={selectClasses} data-placeholder={!selected}>
-				{#if selected?.image}
+				{#if selected?.color}
+					<span class="color-dot" style="background-color: {selected.color}"></span>
+				{:else if selected?.image}
 					<img src={selected.image} alt={selected.label} class="image" />
 				{/if}
 				<span class="text">{selected?.label || placeholder}</span>
@@ -110,7 +114,9 @@
 							class="item"
 						>
 							{#snippet children({ selected })}
-								{#if option.image}
+								{#if option.color}
+									<span class="color-dot" style="background-color: {option.color}"></span>
+								{:else if option.image}
 									<img src={option.image} alt={option.label} class="image" />
 								{/if}
 								<span class="text">{option.label}</span>
@@ -139,7 +145,9 @@
 		items={stringOptions}
 	>
 		<SelectPrimitive.Trigger class={selectClasses} data-placeholder={!selected}>
-			{#if selected?.image}
+			{#if selected?.color}
+				<span class="color-dot" style="background-color: {selected.color}"></span>
+			{:else if selected?.image}
 				<img src={selected.image} alt={selected.label} class="image" />
 			{/if}
 			<span class="text">{selected?.label || placeholder}</span>
@@ -155,7 +163,9 @@
 						class="item"
 					>
 						{#snippet children({ selected })}
-							{#if option.image}
+							{#if option.color}
+								<span class="color-dot" style="background-color: {option.color}"></span>
+							{:else if option.image}
 								<img src={option.image} alt={option.label} class="image" />
 							{/if}
 							<span class="text">{option.label}</span>
@@ -258,6 +268,13 @@
 			flex-shrink: 0;
 		}
 
+		.color-dot {
+			width: 10px;
+			height: 10px;
+			border-radius: 50%;
+			flex-shrink: 0;
+		}
+
 		:global(.chevron) {
 			flex-shrink: 0;
 			color: var(--text-tertiary);
@@ -364,6 +381,13 @@
 			flex-shrink: 0;
 		}
 
+		.color-dot {
+			width: 10px;
+			height: 10px;
+			border-radius: 50%;
+			flex-shrink: 0;
+		}
+
 		:global(.indicator) {
 			margin-left: auto;
 			color: var(--accent-blue);