feat(core): render group dock accentColor on group button and popover

packages/core/src/client/webcomponents/components/dock/DockEntry.vue

@@ -2,8 +2,9 @@
 import type { DevToolsDockEntryBase } from '@vitejs/devtools-kit'
 import type { DocksContext } from '@vitejs/devtools-kit/client'
 import { useEventListener } from '@vueuse/core'
-import { useTemplateRef } from 'vue'
+import { computed, useTemplateRef } from 'vue'
 import { setFloatingTooltip } from '../../state/floating-tooltip'
+import { accentTextStyle } from '../../utils/accent-color'
 import { openDockContextMenu } from './DockContextMenu'
 import DockIcon from './DockIcon.vue'
 
@@ -17,12 +18,17 @@ const props = withDefaults(
     isVertical?: boolean
     badge?: string
     tooltip?: boolean
+    /** A `group` entry's optional `accentColor`, applied while selected/active. */
+    accentColor?: string
   }>(),
   {
     tooltip: true,
   },
 )
 
+// Only kicks in while selected — an idle group button keeps its default look.
+const accentStyle = computed(() => (props.isSelected ? accentTextStyle(props.accentColor) : undefined))
+
 const button = useTemplateRef<HTMLButtonElement>('button')
 
 function updateTooltip() {
@@ -78,10 +84,11 @@ useEventListener('pointerdown', () => {
     <button
       ref="button"
       :aria-label="dock.title"
+      :style="accentStyle"
       :class="[
         isVertical ? 'rotate-270' : '',
         isDimmed ? 'op50 saturate-0' : '',
-        isSelected ? 'scale-120 text-primary' : '',
+        isSelected ? (accentColor ? 'scale-120' : 'scale-120 text-primary') : '',
         isAction ? 'bg-[#8881] hover:bg-[#8882] rounded-full' : 'rounded-xl',
       ]"
       class="flex items-center justify-center p1.5 hover:bg-[#8881] hover:scale-110 transition-all duration-300 relative outline-none"

packages/core/src/client/webcomponents/components/dock/DockGroupButton.vue

@@ -127,6 +127,7 @@ function onClick() {
       :is-selected="isActive || isPanelVisible"
       :is-dimmed="dimInactive && selected ? !isActive : false"
       :badge="group.badge"
+      :accent-color="group.accentColor"
       @click="onClick"
     />
   </div>

packages/core/src/client/webcomponents/components/dock/DockGroupPopover.vue

@@ -2,6 +2,7 @@
 import type { DevToolsDockEntriesGrouped, DevToolsDockEntry, DevToolsViewGroup } from '@vitejs/devtools-kit'
 import type { DocksContext } from '@vitejs/devtools-kit/client'
 import { computed } from 'vue'
+import { accentActiveStyle, accentTextStyle } from '../../utils/accent-color'
 import DockIcon from './DockIcon.vue'
 
 const props = defineProps<{
@@ -17,11 +18,17 @@ const emit = defineEmits<{
 }>()
 
 const isEmpty = computed(() => props.members.every(([, items]) => items.length === 0))
+
+const headerStyle = computed(() => accentTextStyle(props.group.accentColor))
+
+function memberStyle(memberId: string) {
+  return props.selectedId === memberId ? accentActiveStyle(props.group.accentColor) : undefined
+}
 </script>
 
 <template>
   <div class="flex flex-col gap-0.5 min-w-44 max-w-64" @mousemove.stop>
-    <div class="flex items-center gap-1.5 px4 mx--2 pt2 pb2.5 font-bold text-2.75 uppercase tracking-wide border-b border-base">
+    <div class="flex items-center gap-1.5 px4 mx--2 pt2 pb2.5 font-bold text-2.75 uppercase tracking-wide border-b border-base" :style="headerStyle">
       <DockIcon :icon="group.icon" class="w-4.5 h-4.5" />
       <span class="truncate">{{ group.title }}</span>
     </div>
@@ -32,7 +39,8 @@ const isEmpty = computed(() => props.members.every(([, items]) => items.length =
         v-for="member of items"
         :key="member.id"
         class="flex items-center gap-2 w-full px2 py1.5 rounded text-sm text-left transition"
-        :class="selectedId === member.id ? 'text-primary bg-active' : 'op80 hover:op100 hover:bg-active'"
+        :class="selectedId === member.id ? (group.accentColor ? '' : 'text-primary bg-active') : 'op80 hover:op100 hover:bg-active'"
+        :style="memberStyle(member.id)"
         @click="emit('select', member)"
       >
         <DockIcon :icon="member.icon" class="w-4.5 h-4.5 flex-none" />

packages/core/src/client/webcomponents/components/dock/DockGroupSidebar.vue

@@ -6,6 +6,7 @@ import { computed, h, ref, useTemplateRef } from 'vue'
 import { deriveSidebarCapacity, docksSplitGroupsWithCapacity, getGroupMembersGrouped } from '../../state/dock-settings'
 import { sharedStateToRef } from '../../state/docks'
 import { setDocksSidebarOverflowPanel, setFloatingTooltip, useDocksSidebarOverflowPanel } from '../../state/floating-tooltip'
+import { accentActiveStyle, accentTextStyle } from '../../utils/accent-color'
 import DockGroupPopover from './DockGroupPopover.vue'
 import DockIcon from './DockIcon.vue'
 
@@ -125,13 +126,22 @@ watchDebounced(
 
 // Highlight the button when the hidden selection lives here, or while open.
 const moreButtonActive = computed(() => selectedInOverflow.value || isOverflowPanelVisible.value)
+
+// Accent styling, mirroring DockGroupPopover: falls back to the default
+// Uno classes below when the group sets no `accentColor`.
+const anchorStyle = computed(() => accentTextStyle(props.group.accentColor))
+function memberStyle(memberId: string) {
+  return props.selectedId === memberId ? accentActiveStyle(props.group.accentColor) : undefined
+}
+const moreButtonStyle = computed(() => (moreButtonActive.value ? accentActiveStyle(props.group.accentColor) : undefined))
 </script>
 
 <template>
   <div ref="sidebar" class="vite-devtools-group-sidebar flex flex-col flex-none w-12 h-full border-r border-base of-y-hidden of-x-hidden select-none py1.5 items-center gap-0.5">
     <!-- Group anchor -->
     <div
       class="flex items-center justify-center w-8 h-8 op60"
+      :style="anchorStyle"
       @pointerenter="showTooltip($event, group.title)"
       @pointerleave="hideTooltip"
     >
@@ -148,7 +158,8 @@ const moreButtonActive = computed(() => selectedInOverflow.value || isOverflowPa
         :key="member.id"
         :aria-label="member.title"
         class="relative flex items-center justify-center w-8 h-8 rounded-lg transition"
-        :class="selectedId === member.id ? 'text-primary bg-active' : 'op60 hover:op100 hover:bg-active'"
+        :class="selectedId === member.id ? (group.accentColor ? '' : 'text-primary bg-active') : 'op60 hover:op100 hover:bg-active'"
+        :style="memberStyle(member.id)"
         @pointerenter="showTooltip($event, member.title)"
         @pointerleave="hideTooltip"
         @pointerdown="hideTooltip"
@@ -170,7 +181,8 @@ const moreButtonActive = computed(() => selectedInOverflow.value || isOverflowPa
       ref="moreButton"
       aria-label="Show more"
       class="relative flex items-center justify-center w-8 h-8 rounded-lg transition mt-auto flex-none"
-      :class="moreButtonActive ? 'text-primary bg-active' : 'op60 hover:op100 hover:bg-active'"
+      :class="moreButtonActive ? (group.accentColor ? '' : 'text-primary bg-active') : 'op60 hover:op100 hover:bg-active'"
+      :style="moreButtonStyle"
       @pointerenter="showTooltip($event, 'Show more')"
       @pointerleave="hideTooltip"
       @pointerdown="hideTooltip"

packages/core/src/client/webcomponents/utils/accent-color.ts

@@ -0,0 +1,24 @@
+/**
+ * Inline `:style` helpers for `DevframeViewGroup.accentColor` — an optional,
+ * arbitrary CSS color set by the group's owner. Since the value isn't known
+ * at build time it can't become a UnoCSS utility class (mirrors the
+ * `getHashColorFromString` → `HashBadge` pattern), so callers bind these as
+ * `:style` and keep their default Uno classes (e.g. `text-primary`,
+ * `bg-active`) as the fallback for when `accentColor` is unset — per the
+ * field's own doc comment.
+ */
+
+/** Text color only — for the group button / anchor icon. */
+export function accentTextStyle(color: string | undefined): { color: string } | undefined {
+  return color ? { color } : undefined
+}
+
+/** Text color plus a soft tinted background — for an active/selected row. */
+export function accentActiveStyle(color: string | undefined): { color: string, backgroundColor: string } | undefined {
+  if (!color)
+    return undefined
+  return {
+    color,
+    backgroundColor: `color-mix(in srgb, ${color} 15%, transparent)`,
+  }
+}