style: update logo overlay to pill badge with provider name

Amp-Thread-ID: https://ampcode.com/threads/T-019c07c8-7f01-71bf-a642-c3f612ee4a4a
Co-authored-by: Amp <amp@ampcode.com>

src/components/templates/thumbnails/LogoOverlay.vue

@@ -1,39 +1,58 @@
 <template>
   <div
-    v-for="(logo, index) in logos"
+    v-for="(logo, index) in validLogos"
     :key="index"
     :class="
-      cn('pointer-events-none absolute', logo.position ?? defaultPosition)
+      cn('pointer-events-none absolute z-10', logo.position ?? defaultPosition)
     "
-    :style="{ opacity: logo.opacity ?? 0.9 }"
   >
-    <img
-      :src="getLogoUrl(logo.provider)"
-      :alt="logo.provider"
-      :class="sizeClasses[logo.size ?? 'md']"
-      class="drop-shadow-md"
-      draggable="false"
-    />
+    <div
+      v-show="!failedLogos.has(logo.provider)"
+      class="flex items-center gap-1.5 rounded-full bg-black/20 px-2 py-1"
+      :style="{ opacity: logo.opacity ?? 1 }"
+    >
+      <img
+        :src="logo.url"
+        :alt="logo.provider"
+        class="h-5 w-5 rounded-[50%]"
+        draggable="false"
+        @error="onImageError(logo.provider)"
+      />
+      <span class="text-sm font-medium text-white">
+        {{ logo.provider }}
+      </span>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed, ref } from 'vue'
+
 import type { LogoInfo } from '@/platform/workflow/templates/types/template'
 import { cn } from '@/utils/tailwindUtil'
 
 const {
   logos,
   getLogoUrl,
-  defaultPosition = 'bottom-2 right-2'
+  defaultPosition = 'top-2 left-2'
 } = defineProps<{
   logos: LogoInfo[]
   getLogoUrl: (provider: string) => string
   defaultPosition?: string
 }>()
 
-const sizeClasses: Record<'sm' | 'md' | 'lg', string> = {
-  sm: 'h-6 w-6',
-  md: 'h-8 w-8',
-  lg: 'h-12 w-12'
+const failedLogos = ref(new Set<string>())
+
+const onImageError = (provider: string) => {
+  failedLogos.value = new Set([...failedLogos.value, provider])
 }
+
+const validLogos = computed(() =>
+  logos
+    .map((logo) => ({
+      ...logo,
+      url: getLogoUrl(logo.provider)
+    }))
+    .filter((logo) => logo.url)
+)
 </script>