fix(core): prevent popup dock icons from being dimmed (#481)

Author: SaKaNa-Y

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

@@ -8,12 +8,15 @@ import { sharedStateToRef } from '../../state/docks'
 import DockEntry from './DockEntry.vue'
 import DockGroupButton from './DockGroupButton.vue'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   context: DocksContext
   entries: DevToolsDockEntry[]
   selected: DevToolsDockEntry | null
   isVertical: boolean
-}>()
+  dimInactive?: boolean
+}>(), {
+  dimInactive: true,
+})
 
 const emit = defineEmits<{
   (e: 'select', entry: DevToolsDockEntry): void
@@ -62,6 +65,7 @@ function toggleDockEntry(dock: DevToolsDockEntry) {
         :group="dock"
         :is-vertical="isVertical"
         :selected="selected"
+        :dim-inactive="dimInactive"
         @select="(e) => emit('select', e)"
       />
       <DockEntry
@@ -70,7 +74,7 @@ function toggleDockEntry(dock: DevToolsDockEntry) {
         :dock
         :is-action="dock.type === 'action'"
         :is-selected="selected?.id === dock.id"
-        :is-dimmed="selected ? (selected.id !== dock.id) : false"
+        :is-dimmed="dimInactive && selected ? (selected.id !== dock.id) : false"
         :is-vertical="isVertical"
         :badge="dock.badge"
         @click="toggleDockEntry(dock)"

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

@@ -10,8 +10,10 @@ withDefaults(defineProps<{
   selected: DevToolsDockEntry | null
   isVertical: boolean
   rotate?: boolean
+  dimInactive?: boolean
 }>(), {
   rotate: true,
+  dimInactive: true,
 })
 
 const emit = defineEmits<{
@@ -29,6 +31,7 @@ const emit = defineEmits<{
       :entries="entries"
       :is-vertical="isVertical && rotate"
       :selected="selected"
+      :dim-inactive="dimInactive"
       @select="(e) => emit('select', e)"
     />
   </template>

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

@@ -9,12 +9,15 @@ import { setDocksGroupPanel, useDocksGroupPanel } from '../../state/floating-too
 import DockEntry from './DockEntry.vue'
 import DockGroupPopover from './DockGroupPopover.vue'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   context: DocksContext
   group: DevToolsViewGroup
   isVertical: boolean
   selected: DevToolsDockEntry | null
-}>()
+  dimInactive?: boolean
+}>(), {
+  dimInactive: true,
+})
 
 const emit = defineEmits<{
   (e: 'select', entry: DevToolsDockEntry): void
@@ -122,7 +125,7 @@ function onClick() {
       :dock="group"
       :is-vertical="isVertical"
       :is-selected="isActive || isPanelVisible"
-      :is-dimmed="selected ? !isActive : false"
+      :is-dimmed="dimInactive && selected ? !isActive : false"
       :badge="group.badge"
       @click="onClick"
     />

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

@@ -61,6 +61,7 @@ function switchEntry(id: string | undefined) {
           :groups="groupedEntries"
           :is-vertical="false"
           :selected="context.docks.selected"
+          :dim-inactive="false"
           @select="(e) => switchEntry(e?.id)"
         >
           <template #separator>