feat: list logos from the api instead of hardcoding it

app/components/ApiModal.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const baseApiUrl = useBaseApiUrl();
 const { copy: copyBaseApiUrl, icon: baseApiUrlIcon } = useCopyable(baseApiUrl);
+const { data: logos } = await useFetch<string[]>("/api/logos");
 </script>
 
 <template>
@@ -10,8 +11,8 @@ const { copy: copyBaseApiUrl, icon: baseApiUrlIcon } = useCopyable(baseApiUrl);
         <p>
           You can easily generate QRCodes by using the API, with no rate
           limitation.
-          <br />
-          <br />
+          <br >
+          <br >
           If you are not sure how to use the API, you can fill the QRCode form
           and copy the generated API URL.
         </p>
@@ -58,7 +59,7 @@ const { copy: copyBaseApiUrl, icon: baseApiUrlIcon } = useCopyable(baseApiUrl);
             <div class="flex pb-4 justify-between gap-x-5">
               <span class="text-primary font-semibold">logo</span>
               <span class="text-slate-700 dark:text-slate-200 text-right">{{
-                arrayToUnion(LOGOS)
+                arrayToUnion(logos ?? [])
               }}</span>
             </div>
 

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"