[DRAFT] idea: Alice - add icons to category and type

frontend/src/pages/integrations/alice/components/smart-device/smart-device.tsx

@@ -1,5 +1,5 @@
 import { observer } from 'mobx-react-lite';
-import { FormEvent, useCallback, useEffect, useState } from 'react';
+import React, { FormEvent, useCallback, useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import CopyIcon from '@/assets/icons/copy.svg';
 import EditSquareIcon from '@/assets/icons/edit-square.svg';
@@ -28,6 +28,104 @@ export const SmartDevice = observer(({ id, deviceStore, onSave, onDelete, onOpen
   const [isDeleteDevice, setIsDeleteDevice] = useState(false);
   const [data, setData] = useState<Partial<SmartDeviceData>>({ capabilities: [], properties: [] });
 
+  const renderDropdownOptionWithIcon = (icon: React.ReactNode, text: string) => (
+    <div className="aliceOptionWithIcon">
+      <span className="aliceOptionWithIcon-icon" aria-hidden>{icon ?? '📦'}</span>
+      <span className="aliceOptionWithIcon-label">{text}</span>
+    </div>
+  );
+
+  // --- Icon maps (emoji now; later can be replaced with SVG components)
+  // Category keys = deviceTypes keys
+  const CategoryIcon: Record<string, React.ReactNode> = {
+    sensor: '📟',
+    smart_meter: '⏲',
+    media: '📺',
+    cooking: '🍳',
+    appliances: '🏠',
+    pet: '🐾',
+    climate: '🌡️',
+    electrics: '🔌',
+    openable: '🚪',
+    other: '⚙️',
+    default: '📦',
+  };
+
+  // Type keys = strings from deviceTypes[category]
+  const TypeIcon: Record<string, React.ReactNode> = {
+    // --- sensor ---
+    'devices.types.sensor': '👀',
+    'devices.types.sensor.button': '🔘',
+    'devices.types.sensor.climate': '🌡️',
+    'devices.types.sensor.gas': '💨',
+    'devices.types.sensor.illumination': '☀️',
+    'devices.types.sensor.motion': '🏃‍♂️',
+    'devices.types.sensor.open': '🚪',
+    'devices.types.sensor.smoke': '🚭',
+    'devices.types.sensor.vibration': '〰️',
+    'devices.types.sensor.water_leak': '💧',
+
+    // --- smart_meter ---
+    'devices.types.smart_meter': '⏲',
+    'devices.types.smart_meter.cold_water': '💧',
+    'devices.types.smart_meter.electricity': '⚡',
+    'devices.types.smart_meter.gas': '🔥',
+    'devices.types.smart_meter.heat': '🌡️',
+    'devices.types.smart_meter.hot_water': '🚿',
+
+    // --- media ---
+    'devices.types.camera': '📷',
+    'devices.types.media_device': '🎬',
+    'devices.types.media_device.receiver': '📡',
+    'devices.types.media_device.tv': '📺',
+    'devices.types.media_device.tv_box': '📦',
+
+    // --- cooking ---
+    'devices.types.cooking': '👨‍🍳',
+    'devices.types.cooking.coffee_maker': '☕',
+    'devices.types.cooking.kettle': '🫖',
+    'devices.types.cooking.multicooker': '🍲',
+    'devices.types.dishwasher': '🍽️',
+
+    // --- appliances ---
+    'devices.types.iron': '🧼',
+    'devices.types.vacuum_cleaner': '🧹',
+    'devices.types.washing_machine': '👕',
+
+    // --- pet ---
+    'devices.types.pet_drinking_fountain': '⛲',
+    'devices.types.pet_feeder': '🍖',
+
+    // --- climate ---
+    'devices.types.humidifier': '💦',
+    'devices.types.purifier': '🫧',
+    'devices.types.thermostat': '🌡️',
+    'devices.types.thermostat.ac': '❄️',
+    'devices.types.ventilation': '🌬️',
+    'devices.types.ventilation.fan': '🪭',
+
+    // --- electrics ---
+    'devices.types.light': '💡',
+    'devices.types.light.lamp': '🛋️',
+    'devices.types.light.ceiling': '🪩',
+    'devices.types.light.strip': '🌈',
+    'devices.types.socket': '🔌',
+    'devices.types.switch': '⏻',
+    'devices.types.switch.relay': '🔀',
+
+    // --- openable ---
+    'devices.types.openable': '🚪',
+    'devices.types.openable.curtain': '🪟',
+    'devices.types.openable.valve': '🚰',
+
+    // --- other ---
+    'devices.types.other': '⚙️',
+
+    // fallback
+    default: '📟',
+  };
+
+
   useEffect(() => {
     setIsEditingTitle(!id);
     const cat = id
@@ -164,7 +262,13 @@ export const SmartDevice = observer(({ id, deviceStore, onSave, onDelete, onOpen
               <div>{t('alice.labels.device-category')}</div>
               <Dropdown
                 value={category}
-                options={Object.keys(deviceTypes).map((val) => ({ label: t(`alice.device-types.${val}`), value: val }))}
+                options={Object.keys(deviceTypes).map((val) => ({
+                  label: renderDropdownOptionWithIcon(
+                    CategoryIcon[val] ?? CategoryIcon.default,
+                    t(`alice.device-types.${val}`)
+                  ),
+                  value: val
+                }))}
                 onChange={({ value }) => {
                   setCategory(value as string);
                   setData({ ...data, type: deviceTypes[value as string].at(0) });
@@ -176,7 +280,14 @@ export const SmartDevice = observer(({ id, deviceStore, onSave, onDelete, onOpen
               <Dropdown
                 value={data.type}
                 isDisabled={!category}
-                options={!category ? [] : deviceTypes[category].map((value) => ({ label: value, value }))}
+                options={
+                  !category
+                    ? []
+                    : deviceTypes[category].map((value) => ({
+                        label: renderDropdownOptionWithIcon(TypeIcon[value] ?? TypeIcon.default, value),
+                        value
+                      }))
+                }
                 onChange={(option) => setData({ ...data, type: option.value as string })}
               />
             </label>

frontend/src/pages/integrations/alice/components/smart-device/styles.css

@@ -11,3 +11,23 @@
     display: flex;
     gap: 12px;
 }
+
+/* --- Generic inline icon + label for Dropdown options --- */
+.aliceOptionWithIcon{
+  display:flex;
+  align-items:center;
+  gap:8px;
+  line-height:1.2;
+}
+.aliceOptionWithIcon-icon{
+  display:inline-flex;
+  width:16px;
+  height:16px;
+  font-size:16px;
+  flex:0 0 16px;
+}
+.aliceOptionWithIcon-label{
+  white-space:nowrap;
+  overflow:hidden;
+  text-overflow:ellipsis;
+}