feat: basic settings page (#164)

Author: antfu

alias.ts

@@ -11,6 +11,7 @@ export const alias = {
   '@vitejs/devtools-rpc/presets': r('rpc/src/presets/index.ts'),
   '@vitejs/devtools-rpc': r('rpc/src'),
   '@vitejs/devtools-kit/client': r('kit/src/client/index.ts'),
+  '@vitejs/devtools-kit/constants': r('kit/src/constants.ts'),
   '@vitejs/devtools-kit/utils/events': r('kit/src/utils/events.ts'),
   '@vitejs/devtools-kit/utils/nanoid': r('kit/src/utils/nanoid.ts'),
   '@vitejs/devtools-kit/utils/shared-state': r('kit/src/utils/shared-state.ts'),

packages/core/package.json

@@ -58,6 +58,7 @@
     "birpc": "catalog:deps",
     "birpc-x": "catalog:deps",
     "cac": "catalog:deps",
+    "h3": "catalog:deps",
     "immer": "catalog:deps",
     "launch-editor": "catalog:deps",
     "mlly": "catalog:deps",

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

@@ -35,12 +35,6 @@ watch(
   },
   { immediate: true },
 )
-
-function switchEntry(id: string) {
-  if (id) {
-    context.docks.switchEntry(id)
-  }
-}
 </script>
 
 <template>
@@ -55,10 +49,10 @@ function switchEntry(id: string) {
       <div class="transition duration-200 p2">
         <DockEntriesWithCategories
           :context="context"
-          :entries="context.docks.entries"
+          :groups="context.docks.groupedEntries"
           :is-vertical="false"
           :selected="context.docks.selected"
-          @select="(e) => switchEntry(e?.id)"
+          @select="(e) => context.docks.switchEntry(e?.id)"
         >
           <template #separator>
             <div class="border-base border-b w-full my-2" />

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

@@ -3,6 +3,7 @@ import type { DocksContext } from '@vitejs/devtools-kit/client'
 import { useEventListener, useScreenSafeArea } from '@vueuse/core'
 import { computed, onMounted, reactive, ref, useTemplateRef, watchEffect } from 'vue'
 import { BUILTIN_ENTRY_CLIENT_AUTH_NOTICE } from '../constants'
+import { docksSplitGroupsWithCapacity } from '../state/dock-settings'
 import DockEntriesWithCategories from './DockEntriesWithCategories.vue'
 import DockOverflowButton from './DockOverflowButton.vue'
 import BracketLeft from './icons/BracketLeft.vue'
@@ -73,7 +74,11 @@ context.rpc.events.on('rpc:is-trusted:updated', (isTrusted) => {
     context.docks.switchEntry(null)
 })
 
-onMounted(() => {
+const splitedEntries = computed(() => {
+  return docksSplitGroupsWithCapacity(context.docks.groupedEntries, 5)
+})
+
+onMounted(async () => {
   windowSize.width = window.innerWidth
   windowSize.height = window.innerHeight
 
@@ -312,23 +317,22 @@ onMounted(() => {
         >
           <DockEntriesWithCategories
             :context="context"
-            :capacity="5"
-            :entries="context.docks.entries"
+            :groups="splitedEntries.visible"
             :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="splitedEntries.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="splitedEntries.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 { DevToolsDockEntriesGrouped } from '../state/dock-settings'
 import DockEntries from './DockEntries.vue'
 
-const props = defineProps<{
+defineProps<{
   context: DocksContext
-  entries: DevToolsDockEntry[]
+  groups: DevToolsDockEntriesGrouped
   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 { DevToolsDockEntriesGrouped } 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: DevToolsDockEntriesGrouped
   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),