working

app/components/Modal/UpdateCategory.vue

@@ -8,12 +8,13 @@ const props = defineProps<{
 
 const emit = defineEmits(['closeModal'])
 const { updateCategory } = await useCategories()
+const { loading, search } = useIcons()
 
 const state = reactive({
-  name: props.category?.name,
-  icon: props.category?.icon,
-  color: props.category?.color,
-  nameVisible: props.category?.nameVisible,
+  name: undefined,
+  icon: undefined,
+  color: COLORS[0],
+  nameVisible: undefined,
 })
 
 watchEffect(() => {
@@ -60,9 +61,32 @@ async function handleUpdate(event: FormSubmitEvent<UpdateCategorySchema>) {
           </UFormGroup>
 
           <UFormGroup label="Icon " name="icon">
-            <UInput v-model="state.icon" type="text" />
-          </UFormGroup>
+            <USelectMenu
+              v-model="state.icon"
+              :loading="loading"
+              :searchable="search"
+              placeholder="Select an icon"
+              searchable-placeholder="Search an icon"
+            >
+              <template #label>
+                <div v-if="state.icon" class="flex items-center gap-2">
+                  <UIcon size="20" :name="`i-${state.icon}`" />
+                  <span class="truncate">{{ state.icon }}</span>
+                </div>
+              </template>
 
+              <template #option="{ option }">
+                <div class="flex items-center gap-2">
+                  <UIcon size="20" :name="`i-${option}`" />
+                  <span class="truncate">{{ option }}</span>
+                </div>
+              </template>
+
+              <template #empty>
+                Enter an icon name, keyword or tag
+              </template>
+            </USelectMenu>
+          </UFormGroup>
           <UFormGroup>
             <UCheckbox v-model="state.nameVisible" :color="state.color" label="Is the category name visible?" />
           </UFormGroup>