working

app/components/Modal/CreateCategory.vue

@@ -20,6 +20,8 @@ async function handleCreate(event: FormSubmitEvent<CreateCategorySchemaType>) {
   state.icon = undefined
   state.name = undefined
 }
+
+const { loading, search } = useIcons()
 </script>
 
 <template>
@@ -42,11 +44,35 @@ async function handleCreate(event: FormSubmitEvent<CreateCategorySchemaType>) {
       <template #default>
         <UForm :schema="CreateCategorySchema" :state="state" class="space-y-4" @submit="handleCreate">
           <UFormGroup label="Name" name="name">
-            <UInput v-model="state.name" type="text" variant="outline" />
+            <UInput v-model="state.name" placeholder="Enter name" type="text" variant="outline" />
           </UFormGroup>
 
-          <UFormGroup label="Icon " name="icon" help="Get icon from the Phosphor Collection">
-            <UInput v-model="state.icon" type="text" variant="outline" />
+          <UFormGroup label="Icon " name="icon">
+            <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 label="Color " name="color">

app/components/Modal/CreateTab.vue

@@ -33,6 +33,8 @@ async function handleCreate(event: FormSubmitEvent<CreateTabSchemaType>) {
   state.primary = false
   state.categoryId = props.category?.id
 }
+
+const { loading, search } = useIcons()
 </script>
 
 <template>
@@ -59,7 +61,31 @@ async function handleCreate(event: FormSubmitEvent<CreateTabSchemaType>) {
           </UFormGroup>
 
           <UFormGroup label="Icon " name="icon">
-            <UInput v-model="state.icon" type="text" />
+            <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 label="Color " name="color">

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>

app/components/Modal/UpdateTab.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { FormSubmitEvent } from '#ui/types'
-import type { COLORS, TabType, UpdateTabSchemaType } from '~~/types/types'
-import { UpdateTabSchema } from '~~/types/types'
+import type { TabType, UpdateTabSchemaType } from '~~/types/types'
+import { COLORS, UpdateTabSchema } from '~~/types/types'
 
 const props = defineProps<{
   tab: TabType | null
@@ -10,13 +10,14 @@ const props = defineProps<{
 const emit = defineEmits(['closeModal'])
 const { categories } = await useCategories()
 const { updateTab } = await useTabs()
+const { loading, search } = useIcons()
 
 const state = reactive({
-  name: props.tab?.name,
-  icon: props.tab?.icon,
-  color: props.tab?.color,
-  primary: props.tab?.primary,
-  categoryId: props.tab?.categoryId,
+  name: undefined,
+  icon: undefined,
+  color: COLORS[0],
+  primary: undefined,
+  categoryId: undefined,
 })
 
 watchEffect(() => {
@@ -65,7 +66,31 @@ async function handleUpdate(event: FormSubmitEvent<UpdateTabSchemaType>) {
           </UFormGroup>
 
           <UFormGroup label="Icon " name="icon">
-            <UInput v-model="state.icon" type="text" />
+            <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 label="Category " name="category">