fix(core): improve docks sorting

Author: antfu

packages/core/src/client/webcomponents/components/DockEntriesWithCategories.vue

@@ -62,7 +62,7 @@ const groups = computed(() => {
         left = 0
       }
       else {
-        left -= entries.length
+        left -= items.length
         visible.push([category, items])
       }
     }
@@ -88,6 +88,6 @@ const groups = computed(() => {
       :selected="selected"
       @select="(e) => emit('select', e)"
     />
-    <slot v-if="groups.overflow.length > 0" name="overflow" :entries="groups.overflow" />
   </template>
+  <slot v-if="groups.overflow.length > 0" name="overflow" :entries="groups.overflow" />
 </template>

packages/core/src/client/webcomponents/constants.ts

@@ -12,10 +12,11 @@ export const BUILTIN_ENTRIES: readonly DevToolsViewBuiltin[] = Object.freeze([
 ])
 
 export const DEFAULT_CATEGORIES_ORDER: Record<string, number> = {
-  default: 0,
-  app: 100,
-  framework: 200,
-  web: 300,
-  advanced: 400,
-  builtin: 500,
+  '~viteplus': -1000,
+  'default': 0,
+  'app': 100,
+  'framework': 200,
+  'web': 300,
+  'advanced': 400,
+  '~builtin': 1000,
 } satisfies Record<DevToolsDockEntryCategory, number>

packages/core/src/node/host-docks.ts

@@ -22,7 +22,7 @@ export class DevToolsDockHost implements DevToolsDockHostType {
         id: '~terminals',
         title: 'Terminals',
         icon: 'ph:terminal-duotone',
-        category: 'builtin',
+        category: '~builtin',
         get isHidden() {
           return context.terminals.sessions.size === 0
         },
@@ -32,14 +32,14 @@ export class DevToolsDockHost implements DevToolsDockHostType {
         id: '~logs',
         title: 'Logs',
         icon: 'ph:notification-duotone',
-        category: 'builtin',
+        category: '~builtin',
         isHidden: true, // TODO: implement logs
       },
       {
         type: '~builtin',
         id: '~settings',
         title: 'Settings',
-        category: 'builtin',
+        category: '~builtin',
         icon: 'ph:gear-duotone',
       },
     ]

packages/kit/src/types/docks.ts

@@ -14,7 +14,7 @@ export interface DevToolsDockHost {
 }
 
 // TODO: refine categories more clearly
-export type DevToolsDockEntryCategory = 'app' | 'framework' | 'web' | 'advanced' | 'default' | 'builtin'
+export type DevToolsDockEntryCategory = 'app' | 'framework' | 'web' | 'advanced' | 'default' | '~viteplus' | '~builtin'
 
 export type DevToolsDockEntryIcon = string | { light: string, dark: string }
 

packages/vite/src/node/plugin.ts

@@ -19,6 +19,7 @@ export function DevToolsViteUI(): PluginWithDevTools {
         ctx.docks.register({
           id: 'vite',
           title: 'Vite',
+          category: '~viteplus',
           icon: 'https://vite.dev/logo.svg',
           type: 'iframe',
           url: '/.devtools-vite/',