feat(plugin): logo

Author: Akryum

packages/api/src/index.ts

@@ -11,6 +11,7 @@ export interface PluginDescriptor {
   packageName?: string
   homepage?: string
   componentStateTypes?: string[]
+  logo?: string
 }
 
 export type SetupFunction = (api: DevtoolsPluginApi) => void

packages/app-backend-core/src/plugin.ts

@@ -62,6 +62,7 @@ export function serializePlugin (plugin: Plugin) {
     appId: getAppRecordId(plugin.descriptor.app),
     packageName: plugin.descriptor.packageName,
     homepage: plugin.descriptor.homepage,
+    logo: plugin.descriptor.logo,
     componentStateTypes: plugin.descriptor.componentStateTypes
   }
 }

packages/app-frontend/src/features/plugin/PluginDetails.vue

@@ -28,7 +28,14 @@ export default {
   >
     <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-800 flex space-x-6">
       <div class="flex items-center justify-center w-16 h-16 bg-gray-200 dark:bg-gray-700 rounded-full">
+        <img
+          v-if="plugin.logo"
+          :src="plugin.logo"
+          alt="Plugin logo"
+          class="logo"
+        >
         <VueIcon
+          v-else
           icon="extension"
           class="big text-gray-500"
         />
@@ -59,3 +66,10 @@ export default {
     </div>
   </div>
 </template>
+
+<style lang="postcss" scoped>
+.logo {
+  max-width: 48px;
+  max-height: 48px;
+}
+</style>

packages/app-frontend/src/features/plugin/PluginSourceIcon.vue

@@ -49,7 +49,14 @@ export default {
     <template #popper>
       <div class="flex space-x-3 items-center">
         <div class="flex items-center justify-center w-8 h-8 bg-gray-700 dark:bg-gray-200 rounded-full">
+          <img
+            v-if="plugin.logo"
+            :src="plugin.logo"
+            alt="Plugin logo"
+            class="logo"
+          >
           <VueIcon
+            v-else
             icon="extension"
           />
         </div>
@@ -66,3 +73,10 @@ export default {
     </template>
   </VTooltip>
 </template>
+
+<style lang="postcss" scoped>
+.logo {
+  max-width: 24px;
+  max-height: 24px;
+}
+</style>

packages/shell-dev-vue3/src/devtools-plugin/index.js

@@ -12,6 +12,7 @@ export default {
       label: 'Test devtools plugin',
       packageName: '@vue/devtools-shell-dev-vue3',
       homepage: 'https://github.com/vuejs/vue-devtools',
+      logo: 'https://nodepackjs.com/favicon.png',
       componentStateTypes: [
         stateType
       ],