[Extension API] Register about panel badge (#1436)

* Custom about panel badge

* Add playwright test

* Update README

* nit

* nit

* nit

* nit

src/components/dialog/content/setting/AboutPanel.vue

@@ -1,20 +1,21 @@
 <template>
-  <div>
+  <div class="about-container">
     <h2 class="text-2xl font-bold mb-2">{{ $t('about') }}</h2>
     <div class="space-y-2">
       <a
-        v-for="link in links"
-        :key="link.url"
-        :href="link.url"
+        v-for="badge in aboutPanelStore.badges"
+        :key="badge.url"
+        :href="badge.url"
         target="_blank"
         rel="noopener noreferrer"
-        class="inline-flex items-center no-underline"
+        class="about-badge inline-flex items-center no-underline"
+        :title="badge.url"
       >
         <Tag class="mr-2">
           <template #icon>
-            <i :class="[link.icon, 'mr-2 text-xl']"></i>
+            <i :class="[badge.icon, 'mr-2 text-xl']"></i>
           </template>
-          {{ link.label }}
+          {{ badge.label }}
         </Tag>
       </a>
     </div>
@@ -30,35 +31,14 @@
 
 <script setup lang="ts">
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
+import { useAboutPanelStore } from '@/stores/aboutPanelStore'
 import Tag from 'primevue/tag'
 import Divider from 'primevue/divider'
-import { computed, onMounted } from 'vue'
+import { onMounted } from 'vue'
 import SystemStatsPanel from '@/components/common/SystemStatsPanel.vue'
 
 const systemStatsStore = useSystemStatsStore()
-const frontendVersion = window['__COMFYUI_FRONTEND_VERSION__']
-const coreVersion = computed(
-  () => systemStatsStore.systemStats?.system?.comfyui_version ?? ''
-)
-
-const links = computed(() => [
-  {
-    label: `ComfyUI ${coreVersion.value}`,
-    url: 'https://github.com/comfyanonymous/ComfyUI',
-    icon: 'pi pi-github'
-  },
-  {
-    label: `ComfyUI_frontend v${frontendVersion}`,
-    url: 'https://github.com/Comfy-Org/ComfyUI_frontend',
-    icon: 'pi pi-github'
-  },
-  {
-    label: 'Discord',
-    url: 'https://www.comfy.org/discord',
-    icon: 'pi pi-discord'
-  },
-  { label: 'ComfyOrg', url: 'https://www.comfy.org/', icon: 'pi pi-globe' }
-])
+const aboutPanelStore = useAboutPanelStore()
 
 onMounted(async () => {
   if (!systemStatsStore.systemStats) {