feat: visual differentiation for action buttons in docks

Add visual distinction between action dock entries and normal view entries. Action buttons now appear circular with a subtle background, while normal entries remain rounded rectangles. Also display an "Action" label in the dock settings view for clarity.

- Add `isAction` prop to DockEntry component
- Apply `rounded-full` and background styling to action entries
- Display "Action" badge label in ViewBuiltinSettings

Author: antfu

packages/core/src/client/webcomponents/.generated/css.ts

@@ -31,6 +31,7 @@ function toggleDockEntry(dock: DevToolsDockEntry) {
       v-if="!dock.isHidden"
       :context="context"
       :dock
+      :is-action="dock.type === 'action'"
       :is-selected="selected?.id === dock.id"
       :is-dimmed="selected ? (selected.id !== dock.id) : false"
       :is-vertical="isVertical"

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

@@ -11,6 +11,7 @@ const props = withDefaults(
   defineProps<{
     context: DocksContext
     dock: DevToolsDockEntryBase
+    isAction?: boolean
     isSelected?: boolean
     isDimmed?: boolean
     isVertical?: boolean
@@ -81,8 +82,9 @@ useEventListener('pointerdown', () => {
         isVertical ? 'rotate-270' : '',
         isDimmed ? 'op50 saturate-0' : '',
         isSelected ? 'scale-120 text-purple' : '',
+        isAction ? 'bg-[#8881] hover:bg-[#8882] rounded-full' : 'rounded-xl',
       ]"
-      class="flex items-center justify-center p1.5 rounded-xl hover:bg-[#8881] hover:scale-110 transition-all duration-300 relative"
+      class="flex items-center justify-center p1.5 hover:bg-[#8881] hover:scale-110 transition-all duration-300 relative"
     >
       <DockIcon :icon="dock.icon" :title="dock.title" class="w-5 h-5 select-none" />
       <div v-if="badge" class="absolute top-0.5 right-0 bg-gray-6 text-white text-0.6em px-1 rounded-full shadow">

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

@@ -6,6 +6,7 @@ import { computed } from 'vue'
 import { docksGroupByCategories } from '../../state/dock-settings'
 import { sharedStateToRef } from '../../state/docks'
 import { isDockPopupSupported, requestDockPopupOpen, useIsDockPopupOpen } from '../../state/popup'
+import HashBadge from '../display/HashBadge.vue'
 import DockIcon from '../dock/DockIcon.vue'
 
 const props = defineProps<{
@@ -308,11 +309,18 @@ function resetSettings() {
                       :class="settings.docksHidden.includes(dock.id) ? 'saturate-0' : ''"
                     />
                     <span
-                      class="flex-1 truncate"
+                      class="truncate"
                       :class="settings.docksHidden.includes(dock.id) ? 'line-through op60' : ''"
                     >
                       {{ dock.title }}
                     </span>
+                    <HashBadge
+                      v-if="dock.type === 'action'"
+                      label="Action"
+                      class="flex-none text-xs"
+                    />
+
+                    <div class="flex flex-auto" />
 
                     <!-- Order controls -->
                     <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">