From 1b2d91fc98ff80d1900e7c7735767d3d767992f8 Mon Sep 17 00:00:00 2001
From: Md Mahbub Rabbani <mahbub.rucse@gmail.com>
Date: Thu, 4 Jun 2026 13:11:20 +0600
Subject: [PATCH] feat(settings): render per-option icons in SelectField

The `select` field variant now renders an option's `icon` (a lucide icon
name, resolved via the existing LucideIcons convention) in both the dropdown
items and the selected-value trigger. Options without an `icon` render
exactly as before, so the change is additive and backward-compatible.

Enables icon-style selects such as the vendor 'Verified Icon' picker.
---
 src/components/settings/fields.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/components/settings/fields.tsx b/src/components/settings/fields.tsx
index 6e70b1e..f9a73db 100644
--- a/src/components/settings/fields.tsx
+++ b/src/components/settings/fields.tsx
@@ -419,6 +419,16 @@ export function SelectField({ element, onChange, ...rest }: FieldComponentProps)
   );
   const selectedLabel = selectedOption?.label ?? selectedOption?.title;
 
+  // Resolve a per-option icon by lucide name (same convention as `element.icon`).
+  const renderOptionIcon = (iconName?: string) => {
+    if (!iconName) return null;
+    const Icon = LucideIcons[
+      iconName as keyof typeof LucideIcons
+    ] as React.ElementType | undefined;
+    return Icon ? <Icon className="size-4 shrink-0" /> : null;
+  };
+  const selectedIcon = (selectedOption as { icon?: string } | undefined)?.icon;
+
   return (
     <FieldWrapper element={element} {...rest}>
       <Select
@@ -432,12 +442,14 @@ export function SelectField({ element, onChange, ...rest }: FieldComponentProps)
               element.placeholder ? String(element.placeholder) : "Select..."
             }
           >
+            {renderOptionIcon(selectedIcon)}
             {selectedLabel}
           </SelectValue>
         </SelectTrigger>
         <SelectContent>
           {element.options?.map((option) => (
             <SelectItem key={String(option.value)} value={String(option.value)}>
+              {renderOptionIcon((option as { icon?: string }).icon)}
               {option.label ?? option.title}
             </SelectItem>
           ))}