feat: add banner guidelines popup

Author: prplwtf

apps/frontend/src/pages/app/extensions/[id].vue

@@ -165,7 +165,7 @@
                       @change="handleBannerUpload"
                     />
                     <ElementsButton
-                      @click="bannerInput?.click()"
+                      @click="modalOpen.uploadBanner = true"
                       :disabled="uploading"
                     >
                       <div class="flex items-center gap-1.5">
@@ -337,6 +337,71 @@
       </div>
     </div>
 
+    <ElementsModal
+      :is-open="modalOpen.uploadBanner"
+      :closable="true"
+      title="Banner guidelines"
+      @close="modalOpen.uploadBanner = false"
+    >
+      <template #default>
+        <div class="space-y-4">
+          <ElementsInlinecard>
+            If your extension fails to meet the quality guidelines for banners,
+            we may replace the banner or unlist/reject your extension.
+          </ElementsInlinecard>
+          <div class="space-y-2">
+            <li class="ms-4">
+              <p>
+                <b>AI-generated graphics are not allowed.</b> Avoid using any
+                AI-generated content in your extension graphics.
+              </p>
+            </li>
+            <li class="ms-4">
+              <p>
+                <b>No plain screenshots.</b> Plain screenshots often add
+                additional confusion to buyers and worsen the overal experience.
+                Add screenshots to the extension's description instead.
+              </p>
+            </li>
+            <li class="ms-4">
+              <p>
+                <b>Anything is better than nothing.</b> Whether you use
+                Microsoft Paint, Canva or Photoshop, just try to make a quick
+                simple banner. Extensions with higher quality banners tend to
+                get more attention.
+              </p>
+            </li>
+            <li class="ms-4">
+              <p>
+                Follow our
+                <NuxtLink to="/legal/terms" class="text-link"
+                  >Terms of Service</NuxtLink
+                >
+                and
+                <NuxtLink to="/legal/conduct" class="text-link"
+                  >Code of Conduct</NuxtLink
+                >.
+              </p>
+            </li>
+          </div>
+        </div>
+      </template>
+
+      <template #footer>
+        <ElementsButton
+          label="Cancel"
+          class="w-full md:w-auto"
+          @click="modalOpen.uploadBanner = false"
+        />
+        <ElementsButton
+          label="Accept and upload"
+          class="flex w-full flex-col items-center md:w-auto"
+          :disabled="loading"
+          @click="bannerInput?.click()"
+        />
+      </template>
+    </ElementsModal>
+
     <ElementsModal
       v-if="user?.admin"
       :is-open="modalOpen.adminReject"
@@ -447,6 +512,7 @@ const modalOpen = ref({
   adminReject: false,
   platforms: false,
   delete: false,
+  uploadBanner: false,
 })
 const form = ref<{
   identifier: string
@@ -551,6 +617,7 @@ const handleBannerUpload = async (event: Event) => {
   const file = (event.target as HTMLInputElement).files?.[0]
   if (!file) return
 
+  modalOpen.value.uploadBanner = false
   uploading.value = true
 
   try {