fix(core): preserve object-form dock icons in command projection (#378)

Author: SaKaNa-Y

packages/core/src/client/webcomponents/state/__tests__/dock-groups.test.ts

@@ -6,6 +6,7 @@ import {
   getEntryGroup,
   getGroupMembers,
   getRegisteredGroupIds,
+  resolveCommandIcon,
 } from '../dock-settings'
 
 function iframe(id: string, extra: Partial<DevToolsDockEntry> = {}): DevToolsDockEntry {
@@ -90,3 +91,21 @@ describe('dock groups', () => {
     expect(ids).not.toContain('nuxt:pages')
   })
 })
+
+describe('resolveCommandIcon (dock icon → command icon projection)', () => {
+  it('passes string icons through unchanged', () => {
+    expect(resolveCommandIcon('logos:nuxt-icon')).toBe('logos:nuxt-icon')
+  })
+
+  it('collapses an object icon to its light variant (e.g. the Vite+ group)', () => {
+    // Regression: object-form icons were dropped to `undefined`, so the Vite+
+    // entry lost its icon in the command palette and Shortcuts settings.
+    expect(resolveCommandIcon({ light: 'builtin:vite-plus-core', dark: 'builtin:vite-plus-core' }))
+      .toBe('builtin:vite-plus-core')
+    expect(resolveCommandIcon({ light: 'i-light', dark: 'i-dark' })).toBe('i-light')
+  })
+
+  it('falls back to dark when light is absent', () => {
+    expect(resolveCommandIcon({ dark: 'i-dark' } as any)).toBe('i-dark')
+  })
+})

packages/core/src/client/webcomponents/state/context.ts

@@ -8,7 +8,7 @@ import { DEFAULT_STATE_USER_SETTINGS } from '@vitejs/devtools-kit/constants'
 import { computed, markRaw, reactive, ref, toRefs, watchEffect } from 'vue'
 import { BUILTIN_ENTRIES } from '../constants'
 import { createCommandsContext } from './commands'
-import { docksGroupByCategories, getGroupMembers, getRegisteredGroupIds } from './dock-settings'
+import { docksGroupByCategories, getGroupMembers, getRegisteredGroupIds, resolveCommandIcon } from './dock-settings'
 import { createDockEntryState, DEFAULT_DOCK_PANEL_STORE, sharedStateToRef, useDocksEntries } from './docks'
 import { createClientMessagesClient } from './messages-client'
 import { registerMainFrameDockActionHandler, triggerMainFrameDockAction } from './popup'
@@ -217,7 +217,7 @@ export async function createDocksContext(
       id: `devtools:docks:${entry.id}`,
       source: 'client' as const,
       title: entry.title,
-      icon: typeof entry.icon === 'string' ? entry.icon : undefined,
+      icon: resolveCommandIcon(entry.icon),
       action: () => {
         toggleEntry(entry.id)
       },

packages/core/src/client/webcomponents/state/dock-settings.ts

@@ -12,6 +12,21 @@ export interface SplitGroupsResult {
   overflow: DevToolsDockEntriesGrouped
 }
 
+/**
+ * Resolve a dock entry's icon down to a single icon string.
+ *
+ * A dock icon may be a string or a `{ light, dark }` pair, but a command's icon
+ * is string-only. When projecting dock entries into commands (palette + Shortcuts
+ * settings) we collapse the object form to a single string rather than dropping
+ * it — otherwise object-icon docks (e.g. the built-in Vite+ group) lose their
+ * icon entirely. Returns `undefined` only when no icon is available.
+ */
+export function resolveCommandIcon(icon: DevToolsDockEntry['icon']): string | undefined {
+  if (typeof icon === 'string')
+    return icon
+  return icon?.light ?? icon?.dark
+}
+
 /**
  * Collect the ids of every registered dock group (`type: 'group'`).
  *