feat: list logos from the api instead of hardcoding it

app/components/AppBody.vue

@@ -11,10 +11,12 @@ const apiModal = overlay.create(LazyApiModal);
 
 const isQRCodeEmpty = computed(() => qrCode.value === "/default.webp");
 
+const { data: logos } = await useFetch<string[]>("/api/logos");
+
 const formSchema = z
   .object({
     hasLogo: z.boolean(),
-    logo: z.enum(LOGOS).optional(),
+    logo: z.string().optional(),
     format: z.enum(IMAGE_FORMATS).default("png"),
     content: z
       .string()
@@ -103,7 +105,7 @@ const {
     <img
       :src="qrCode"
       class="w-full max-w-[375px] max-h-[375px] sm:max-w-[315px] sm:max-h-[315px] md:max-w-[375px] md:max-h-[375px] m-auto aspect-square border border-gray-100 dark:border-gray-800"
-    />
+    >
 
     <div class="flex-1 flex flex-col justify-center">
       <UForm
@@ -138,7 +140,7 @@ const {
           <USelectMenu
             v-model="formState.logo"
             icon="i-heroicons-photo"
-            :items="unreadonly(LOGOS)"
+            :items="logos ?? []"
             :disabled="!formState.hasLogo"
             placeholder="Select logo"
             class="w-full"