From 872ce1ecc6525930fb159b6cd0c1d14de9493368 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Fri, 1 Aug 2025 17:28:20 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20icon=20support=20to?=
 =?UTF-8?q?=20select=20primitive=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Enhance select component by adding icon display capability for better
visual representation of options.
---
 src/frontend/src/primitives/Select.tsx | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/primitives/Select.tsx b/src/frontend/src/primitives/Select.tsx
index e701e746..4c5c5b06 100644
--- a/src/frontend/src/primitives/Select.tsx
+++ b/src/frontend/src/primitives/Select.tsx
@@ -1,6 +1,6 @@
 import { type ReactNode } from 'react'
 import { styled } from '@/styled-system/jsx'
-import { RiArrowDropDownLine } from '@remixicon/react'
+import { RemixiconComponentType, RiArrowDropDownLine } from '@remixicon/react'
 import {
   Button,
   ListBox,
@@ -12,12 +12,14 @@ import {
 import { Box } from './Box'
 import { StyledPopover } from './Popover'
 import { menuRecipe } from '@/primitives/menuRecipe.ts'
+import { css } from '@/styled-system/css'
 
 const StyledButton = styled(Button, {
   base: {
     width: 'full',
     display: 'flex',
     justifyContent: 'space-between',
+    alignItems: 'center',
     paddingY: 0.125,
     paddingX: 0.25,
     border: '1px solid',
@@ -53,22 +55,40 @@ const StyledSelectValue = styled(SelectValue, {
   },
 })
 
+const StyledIcon = styled('div', {
+  base: {
+    marginRight: '0.35rem',
+    flexShrink: 0,
+  },
+})
+
 export const Select = <T extends string | number>({
   label,
+  iconComponent,
   items,
   errors,
   ...props
 }: Omit<SelectProps<object>, 'items' | 'label' | 'errors'> & {
+  iconComponent?: RemixiconComponentType
   label: ReactNode
   items: Array<{ value: T; label: ReactNode }>
   errors?: ReactNode
 }) => {
+  const IconComponent = iconComponent
   return (
     <RACSelect {...props}>
       {label}
       <StyledButton>
+        {!!IconComponent && (
+          <StyledIcon>
+            <IconComponent size={18} />
+          </StyledIcon>
+        )}
         <StyledSelectValue />
-        <RiArrowDropDownLine aria-hidden="true" />
+        <RiArrowDropDownLine
+          aria-hidden="true"
+          className={css({ flexShrink: 0 })}
+        />
       </StyledButton>
       <StyledPopover>
         <Box size="sm" type="popover" variant="control">