wip:

Author: antfu

packages/core/src/client/standalone/App.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import type { DocksContext } from '@vitejs/devtools-kit/client'
 import { getDevToolsRpcClient } from '@vitejs/devtools-kit/client'
-import { markRaw, ref, useTemplateRef, watch } from 'vue'
+import { computed, markRaw, ref, useTemplateRef, watch } from 'vue'
 import DockEntriesWithCategories from '../webcomponents/components/DockEntriesWithCategories.vue'
 import FloatingElements from '../webcomponents/components/FloatingElements.vue'
 import VitePlus from '../webcomponents/components/icons/VitePlus.vue'
 import ViewBuiltinClientAuthNotice from '../webcomponents/components/ViewBuiltinClientAuthNotice.vue'
 import ViewEntry from '../webcomponents/components/ViewEntry.vue'
 import { createDocksContext } from '../webcomponents/state/context'
+import { groupDockEntries } from '../webcomponents/state/dock-settings'
+import { sharedStateToRef } from '../webcomponents/state/docks'
 import { PersistedDomViewsManager } from '../webcomponents/utils/PersistedDomViewsManager'
 
 const rpc = await getDevToolsRpcClient()
@@ -28,6 +30,10 @@ context.rpc.events.on('rpc:is-trusted:updated', (isTrusted) => {
   isRpcTrusted.value = isTrusted
 })
 
+// Load settings from context
+const settingsStore = await context.docks.getSettingsStore()
+const settings = sharedStateToRef(settingsStore)
+
 watch(
   () => context.docks.entries,
   () => {
@@ -36,6 +42,10 @@ watch(
   { immediate: true },
 )
 
+const groupedEntries = computed(() => {
+  return groupDockEntries(context.docks.entries, settings.value)
+})
+
 function switchEntry(id: string) {
   if (id) {
     context.docks.switchEntry(id)
@@ -55,7 +65,7 @@ function switchEntry(id: string) {
       <div class="transition duration-200 p2">
         <DockEntriesWithCategories
           :context="context"
-          :entries="context.docks.entries"
+          :groups="groupedEntries"
           :is-vertical="false"
           :selected="context.docks.selected"
           @select="(e) => switchEntry(e?.id)"

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

@@ -1,8 +1,11 @@
 <script setup lang="ts">
+import type { DevToolsDocksUserSettings } from '@vitejs/devtools-kit'
 import type { DocksContext } from '@vitejs/devtools-kit/client'
 import { useEventListener, useScreenSafeArea } from '@vueuse/core'
-import { computed, onMounted, reactive, ref, useTemplateRef, watchEffect } from 'vue'
+import { computed, onMounted, reactive, ref, shallowRef, useTemplateRef, watch, watchEffect } from 'vue'
 import { BUILTIN_ENTRY_CLIENT_AUTH_NOTICE } from '../constants'
+import { groupDockEntries, splitGroupsWithCapacity } from '../state/dock-settings'
+import { sharedStateToRef } from '../state/docks'
 import DockEntriesWithCategories from './DockEntriesWithCategories.vue'
 import DockOverflowButton from './DockOverflowButton.vue'
 import BracketLeft from './icons/BracketLeft.vue'
@@ -73,7 +76,24 @@ context.rpc.events.on('rpc:is-trusted:updated', (isTrusted) => {
     context.docks.switchEntry(null)
 })
 
-onMounted(() => {
+const settings = shallowRef<DevToolsDocksUserSettings>({
+  hiddenDocks: [],
+  hiddenCategories: [],
+  pinnedDocks: [],
+  customOrder: {},
+})
+
+const groupedEntries = computed(() => {
+  const groups = groupDockEntries(context.docks.entries, settings.value)
+  return splitGroupsWithCapacity(groups, 5)
+})
+
+onMounted(async () => {
+  const settingsStore = await context.docks.getSettingsStore()
+  const settingsRef = sharedStateToRef(settingsStore)
+  settings.value = settingsRef.value
+  watch(settingsRef, v => settings.value = v)
+
   windowSize.width = window.innerWidth
   windowSize.height = window.innerHeight
 
@@ -312,23 +332,23 @@ onMounted(() => {
         >
           <DockEntriesWithCategories
             :context="context"
-            :capacity="5"
-            :entries="context.docks.entries"
+            :groups="groupedEntries.visible"
+            :overflow="groupedEntries.overflow"
             :is-vertical="context.panel.isVertical"
             :selected="context.docks.selected"
             @select="(e) => context.docks.switchEntry(e?.id)"
-          >
-            <template #overflow="{ entries }">
-              <div class="border-base m1 h-20px w-px border-r-1.5" />
-              <DockOverflowButton
-                :context="context"
-                :is-vertical="context.panel.isVertical"
-                :entries="entries.flatMap(([_, entries]) => entries)"
-                :selected="context.docks.selected"
-                @select="(e) => context.docks.switchEntry(e?.id)"
-              />
-            </template>
-          </DockEntriesWithCategories>
+          />
+
+          <template v-if="groupedEntries.overflow.length > 0">
+            <div class="border-base m1 h-20px w-px border-r-1.5" />
+            <DockOverflowButton
+              :context="context"
+              :is-vertical="context.panel.isVertical"
+              :groups="groupedEntries.overflow"
+              :selected="context.docks.selected"
+              @select="(e) => context.docks.switchEntry(e?.id)"
+            />
+          </template>
         </div>
       </div>
     </div>

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

@@ -1,83 +1,23 @@
 <script setup lang="ts">
 import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
 import type { DocksContext } from '@vitejs/devtools-kit/client'
-import { computed, toRefs } from 'vue'
-import { DEFAULT_CATEGORIES_ORDER } from '../constants'
+import type { GroupedDockEntries } from '../state/dock-settings'
 import DockEntries from './DockEntries.vue'
 
-const props = defineProps<{
+defineProps<{
   context: DocksContext
-  entries: DevToolsDockEntry[]
+  groups: GroupedDockEntries
   selected: DevToolsDockEntry | null
-  capacity?: number
   isVertical: boolean
 }>()
 
 const emit = defineEmits<{
   (e: 'select', entry: DevToolsDockEntry): void
 }>()
-
-const { capacity } = toRefs(props)
-
-const groups = computed(() => {
-  const map = new Map<string, DevToolsDockEntry[]>()
-  for (const entry of props.entries) {
-    if (entry.isHidden)
-      continue
-    const category = entry.category ?? 'default'
-    if (!map.has(category))
-      map.set(category, [])
-    map.get(category)!.push(entry)
-  }
-
-  const entries = Array
-    .from(map.entries())
-    .sort(([a], [b]) => {
-      const ia = DEFAULT_CATEGORIES_ORDER[a] || 0
-      const ib = DEFAULT_CATEGORIES_ORDER[b] || 0
-      return ib === ia ? b.localeCompare(a) : ia - ib
-    })
-
-  entries.forEach(([_, entries]) => {
-    entries.sort((a, b) => {
-      const ia = a.defaultOrder ?? 0
-      const ib = b.defaultOrder ?? 0
-      return ib === ia ? b.title.localeCompare(a.title) : ia - ib
-    })
-  })
-
-  let visible = entries
-  const overflow: typeof entries = []
-
-  if (capacity.value != null) {
-    visible = []
-    let left = capacity.value
-    for (const [category, items] of entries) {
-      if (left <= 0) {
-        overflow.push([category, items])
-      }
-      else if (items.length > left) {
-        visible.push([category, items.slice(0, left)])
-        overflow.push([category, items.slice(left)])
-        left = 0
-      }
-      else {
-        left -= items.length
-        visible.push([category, items])
-      }
-    }
-  }
-
-  return {
-    entries,
-    visible,
-    overflow,
-  }
-})
 </script>
 
 <template>
-  <template v-for="[category, entries], idx of groups.visible" :key="category">
+  <template v-for="[category, entries], idx of groups" :key="category">
     <slot v-if="idx > 0" name="separator" :category="category" :index="idx" :is-vertical="isVertical">
       <div class="border-base m1 h-20px w-px border-r-1.5" />
     </slot>
@@ -89,5 +29,4 @@ const groups = computed(() => {
       @select="(e) => emit('select', e)"
     />
   </template>
-  <slot v-if="groups.overflow.length > 0" name="overflow" :entries="groups.overflow" />
 </template>

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
 import type { DocksContext } from '@vitejs/devtools-kit/client'
+import type { GroupedDockEntries } from '../state/dock-settings'
 import { watchDebounced } from '@vueuse/core'
 import { computed, h, ref, useTemplateRef } from 'vue'
 import { setDocksOverflowPanel, useDocksOverflowPanel } from '../state/floating-tooltip'
@@ -10,7 +11,7 @@ import DockEntry from './DockEntry.vue'
 const props = defineProps<{
   context: DocksContext
   isVertical: boolean
-  entries: DevToolsDockEntry[]
+  groups: GroupedDockEntries
   selected: DevToolsDockEntry | null
 }>()
 
@@ -20,7 +21,7 @@ const emit = defineEmits<{
 
 const overflowButton = useTemplateRef<HTMLButtonElement>('overflowButton')
 const overflowBadge = computed(() => {
-  const count = props.entries.length
+  const count = props.groups.reduce((acc, [_, items]) => acc + items.length, 0)
   if (count > 9)
     return '9+'
   return count.toString()
@@ -39,7 +40,7 @@ function showOverflowPanel() {
     }, [
       h(DockEntriesWithCategories, {
         context: props.context,
-        entries: props.entries,
+        groups: props.groups,
         isVertical: false,
         selected: props.selected,
         onSelect: e => emit('select', e),