feat(ui): show icons in the select menu

app/components/AppBody.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { z } from "zod";
 import { LazyApiModal } from "#components";
+import type { SelectMenuItem } from "@nuxt/ui";
 
 const qrCode = ref("/default.webp");
 const form = useTemplateRef("form");
@@ -13,6 +14,19 @@ const isQRCodeEmpty = computed(() => qrCode.value === "/default.webp");
 
 const { data: logos } = await useFetch<string[]>("/api/logos");
 
+const logoItems = computed<SelectMenuItem[]>(() =>
+  (logos.value ?? []).map((name) => ({
+    label: capitalize(name),
+    value: name,
+    avatar: { src: `/icons/${name}.png`, alt: name },
+  })),
+);
+
+const selectedLogoItem = computed({
+  get: () => logoItems.value.find((i) => i.value === formState.logo),
+  set: (item) => { formState.logo = item?.value as string | undefined; },
+});
+
 const formSchema = z
   .object({
     hasLogo: z.boolean(),
@@ -138,20 +152,33 @@ const {
           </template>
 
           <USelectMenu
-            v-model="formState.logo"
+            v-model="selectedLogoItem"
-            icon="i-heroicons-photo"
+            :items="logoItems"
-            :items="logos ?? []"
             :disabled="!formState.hasLogo"
             placeholder="Select logo"
             class="w-full"
           >
-            <template #item-label="{ item }">
+            <template #leading>
-              {{ capitalize(item) }}
+              <img
+                v-if="selectedLogoItem"
+                :src="selectedLogoItem.avatar?.src"
+                :alt="selectedLogoItem.label"
+                class="size-4 dark:invert"
+              />
+              <UIcon v-else name="i-heroicons-photo" class="size-4 text-dimmed" />
             </template>
 
-            <template v-if="formState.logo">{{
+            <template v-if="selectedLogoItem">{{
-              capitalize(formState.logo)
+              selectedLogoItem.label
             }}</template>
+
+            <template #item-leading="{ item }">
+              <img
+                :src="item.avatar?.src"
+                :alt="item.label"
+                class="size-4 dark:invert"
+              />
+            </template>
           </USelectMenu>
         </UFormField>