refactor(plugin): new home page with CTA to docs

Author: Akryum

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

@@ -1,19 +1,42 @@
 <script lang="ts">
-import EmptyPane from '@front/features/layout/EmptyPane.vue'
-
 import { defineComponent } from '@vue/composition-api'
 
 export default defineComponent({
-  components: {
-    EmptyPane
+  props: {
+    noPlugins: {
+      type: Boolean,
+      default: false
+    }
   }
 })
 </script>
 
 <template>
-  <EmptyPane
-    icon="extension"
-  >
-    Devtools plugins
-  </EmptyPane>
+  <div class="h-full flex flex-col items-center justify-center p-8 space-y-8">
+    <div
+      v-if="noPlugins"
+      class="bg-gray-50 dark:bg-gray-900 text-gray-500 px-3 py-1 rounded text-sm"
+    >
+      No plugins found
+    </div>
+
+    <div class="flex items-center space-x-8 max-w-lg">
+      <img
+        src="~@front/assets/undraw_Gift_box.svg"
+        class="max-h-32 flex-none"
+      >
+
+      <p class="flex-1">
+        Devtools plugins are added by packages in your application. They can provide new features to the Vue devtools, such as custom inspectors, additional component data or timeline layers.
+      </p>
+    </div>
+
+    <VueButton
+      href="https://devtools.vuejs.org/plugin/plugins-guide.html"
+      target="_blank"
+      class="primary"
+    >
+      Create your own Plugin
+    </VueButton>
+  </div>
 </template>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 import SplitPane from '@front/features/layout/SplitPane.vue'
-import EmptyPane from '@front/features/layout/EmptyPane.vue'
 import PluginListItem from './PluginListItem.vue'
+import PluginHome from './PluginHome.vue'
 
 import { defineComponent, ref, computed } from '@vue/composition-api'
 import { usePlugins } from '.'
@@ -10,7 +10,7 @@ export default defineComponent({
   components: {
     SplitPane,
     PluginListItem,
-    EmptyPane
+    PluginHome
   },
 
   setup () {
@@ -35,12 +35,10 @@ export default defineComponent({
 </script>
 
 <template>
-  <EmptyPane
+  <PluginHome
     v-if="!plugins.length"
-    icon="extension"
-  >
-    No devtools plugins found
-  </EmptyPane>
+    no-plugins
+  />
   <SplitPane
     v-else
     save-id="plugins"
@@ -65,32 +63,6 @@ export default defineComponent({
           />
         </div>
       </div>
-
-      <portal to="header-end">
-        <VueDropdown
-          :offset="[0, 0]"
-        >
-          <template #trigger>
-            <VueButton
-              class="icon-button flat"
-              icon-left="help"
-            />
-          </template>
-
-          <div>
-            <div class="px-10 py-8 flex items-center space-x-8 max-w-lg">
-              <img
-                src="~@front/assets/undraw_Gift_box.svg"
-                class="max-h-32 flex-none"
-              >
-
-              <p class="flex-1">
-                Devtools plugins are added by packages in your application. They can provide new features to the Vue devtools, such as custom inspectors, additional component data or timeline layers.
-              </p>
-            </div>
-          </div>
-        </VueDropdown>
-      </portal>
     </template>
 
     <template #right>