feat: remove plugin icon from header tabs

Author: Akryum

packages/app-frontend/src/features/header/AppHeader.vue

@@ -1,9 +1,10 @@
 <script lang="ts">
-import PluginSourceIcon from '@front/features/plugin/PluginSourceIcon.vue'
 import AppHeaderLogo from './AppHeaderLogo.vue'
 import AppHistoryNav from './AppHistoryNav.vue'
 import AppSelect from '../apps/AppSelect.vue'
 import AppHeaderSelect from './AppHeaderSelect.vue'
+import PluginSourceIcon from '@front/features/plugin/PluginSourceIcon.vue'
+import PluginSourceDescription from '../plugin/PluginSourceDescription.vue'
 
 import { computed, ref, watch, defineComponent } from 'vue'
 import type { RawLocation, Route } from 'vue-router'
@@ -30,6 +31,7 @@ export default defineComponent({
     AppSelect,
     AppHeaderSelect,
     PluginSourceIcon,
+    PluginSourceDescription,
   },
 
   setup () {
@@ -132,22 +134,26 @@ export default defineComponent({
         indicator
         @update="route => $router.push(route.targetRoute)"
       >
-        <VueGroupButton
+        <VTooltip
           v-for="(item, index) of headerRoutes"
           :key="index"
-          :value="item"
-          :icon-left="item.icon"
-          class="flat"
+          :disabled="!item.pluginId"
+          class="leading-none"
         >
-          <div class="flex items-center space-x-2">
-            <span class="flex-1">{{ item.label }}</span>
-            <PluginSourceIcon
-              v-if="item.pluginId"
+          <VueGroupButton
+            :value="item"
+            :icon-left="item.icon"
+            class="flat"
+          >
+            {{ item.label }}
+          </VueGroupButton>
+
+          <template #popper>
+            <PluginSourceDescription
               :plugin-id="item.pluginId"
-              class="flex-none"
             />
-          </div>
-        </VueGroupButton>
+          </template>
+        </VTooltip>
       </VueGroup>
     </template>
 

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

@@ -0,0 +1,66 @@
+<script lang="ts">
+import { computed, defineComponent } from 'vue'
+import { useRouter } from '@front/util/router'
+import { usePlugins } from '.'
+
+export default defineComponent({
+  props: {
+    pluginId: {
+      type: String,
+      required: true,
+    },
+  },
+
+  setup (props) {
+    const {
+      plugins,
+    } = usePlugins()
+
+    const plugin = computed(() => plugins.value.find(p => p.id === props.pluginId))
+
+    const router = useRouter()
+    function go () {
+      router.push({
+        name: 'plugin-details',
+        params: {
+          pluginId: props.pluginId,
+        },
+      })
+    }
+
+    return {
+      plugin,
+      go,
+    }
+  },
+})
+</script>
+
+<template>
+  <div
+    v-if="plugin"
+    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">
+      <img
+        v-if="plugin.logo"
+        :src="plugin.logo"
+        alt="Plugin logo"
+        class="max-w-[24px] max-h-[24px]"
+      >
+      <VueIcon
+        v-else
+        icon="extension"
+      />
+    </div>
+    <div>
+      <div>Provided by <b>{{ plugin ? plugin.label : pluginId }}</b></div>
+      <div
+        v-if="plugin"
+        class="opacity-50"
+      >
+        <div>Plugin ID: {{ plugin.id }}</div>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -1,9 +1,13 @@
 <script lang="ts">
-import { computed, defineComponent } from 'vue'
+import { defineComponent } from 'vue'
 import { useRouter } from '@front/util/router'
-import { usePlugins } from '.'
+import PluginSourceDescription from './PluginSourceDescription.vue'
 
 export default defineComponent({
+  components: {
+    PluginSourceDescription,
+  },
+
   props: {
     pluginId: {
       type: String,
@@ -12,12 +16,6 @@ export default defineComponent({
   },
 
   setup (props) {
-    const {
-      plugins,
-    } = usePlugins()
-
-    const plugin = computed(() => plugins.value.find(p => p.id === props.pluginId))
-
     const router = useRouter()
     function go () {
       router.push({
@@ -29,7 +27,6 @@ export default defineComponent({
     }
 
     return {
-      plugin,
       go,
     }
   },
@@ -46,40 +43,10 @@ export default defineComponent({
       @click.stop="go()"
     />
 
-    <template
-      v-if="plugin"
-      #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">
-          <img
-            v-if="plugin.logo"
-            :src="plugin.logo"
-            alt="Plugin logo"
-            class="logo"
-          >
-          <VueIcon
-            v-else
-            icon="extension"
-          />
-        </div>
-        <div>
-          <div>Provided by <b>{{ plugin ? plugin.label : pluginId }}</b></div>
-          <div
-            v-if="plugin"
-            class="opacity-50"
-          >
-            <div>ID: {{ plugin.id }}</div>
-          </div>
-        </div>
-      </div>
+    <template #popper>
+      <PluginSourceDescription
+        :plugin-id="pluginId"
+      />
     </template>
   </VTooltip>
 </template>
-
-<style lang="postcss" scoped>
-.logo {
-  max-width: 24px;
-  max-height: 24px;
-}
-</style>