feat: Server Tasks tab (#614)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

packages/devtools-kit/src/_types/integrations.ts

@@ -69,6 +69,13 @@ export interface Payload {
   functions?: Record<string, any>
 }
 
+export interface ServerTaskInfo {
+  name: string
+  description: string
+  type: 'collection' | 'task'
+  tasks?: ServerTaskInfo[]
+}
+
 export interface PluginInfoWithMetic {
   src: string
   mode?: 'client' | 'server' | 'all'

packages/devtools-kit/src/_types/options.ts

@@ -1,7 +1,7 @@
 import type { VitePluginInspectorOptions } from 'vite-plugin-vue-inspector'
 import type { Import } from 'unimport'
 import type { ModuleCustomTab } from './custom-tabs'
-import type { ServerRouteInfo, ServerRouteInput } from './integrations'
+import type { ServerRouteInfo, ServerRouteInput, ServerTaskInfo } from './integrations'
 
 export interface ModuleOptions {
   /**
@@ -193,6 +193,12 @@ export interface NuxtDevToolsOptions {
     inputDefaults: Record<string, ServerRouteInput[]>
     sendFrom: 'app' | 'devtools'
   }
+  serverTasks: {
+    enabled: boolean
+    selectedTask: ServerTaskInfo | null
+    view: 'tree' | 'list'
+    inputDefaults: Record<string, ServerRouteInput[]>
+  }
   assets: {
     view: 'grid' | 'list'
   }

packages/devtools/client/components/CronCollection.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import cronstrue from 'cronstrue'
+import type { CronCollection } from '../../src/types/tasks'
+
+const props = defineProps<{
+  collection: CronCollection
+}>()
+
+const currentTaskRoute = useCurrentServerTask()
+const open = ref(true)
+
+const humanReadableCron = computed(() => {
+  return cronstrue.toString(props.collection.cron)
+})
+</script>
+
+<template>
+  <div>
+    <button
+      flex="~ gap-2" w-full items-start items-center hover-bg-active p2
+      :title="humanReadableCron"
+      @click="open = !open"
+    >
+      <div flex-none text-left>
+        <NIcon icon="carbon:chevron-right" mb0.5 :transform-rotate="open ? 90 : 0" transition />
+      </div>
+      <span flex="~ gap-2" min-w-0 items-center text-sm>
+        <NBadge
+          class="font-mono n-primary"
+          v-text="collection.cron"
+        />
+        <span class="truncate">{{ humanReadableCron }}</span>
+        <span text-xs op50>({{ collection.tasks.length }})</span>
+      </span>
+    </button>
+    <div x-divider />
+    <ul v-if="open">
+      <li v-for="task in collection.tasks" :key="task">
+        <button
+          flex="~ gap-2" w-full items-start items-center hover-bg-active px2 py1 pl-9 font-mono
+          :class="[{ 'bg-active': currentTaskRoute === task }]"
+          @click="currentTaskRoute = task"
+        >
+          {{ task }}
+        </button>
+        <div x-divider />
+      </li>
+    </ul>
+  </div>
+</template>