fix(hub-ui): bind shortcuts to nested commands at any depth

Every consumer of the command tree walked a single level of `children`, so
anything deeper was unreachable: a dock group's members had no row in the
shortcut settings to bind, no entry in the keybinding collector to fire, and
no id the dispatcher could resolve.

Traversal now lives in one place. `walkCommands` visits the tree depth-first
with a `'skip'`/`'stop'` visitor signal, and `findCommandDeep`,
`collectAllKeybindings`, the shortcut settings rows and the palette's root
flatten all share it. `filterCommandsByWhen` keeps its own recursion since it
rebuilds a cloned tree per level.

The palette's flatten and drill-down stack move to `state/palette.ts`, where
`showInPalette: 'without-children'` prunes a whole subtree rather than one
level, and a row carries its full path for search while displaying only its
immediate parent. Shortcut rows indent by nesting level instead of a boolean.

Author: SaKaNa-Y

packages/hub-ui/src/client/components/command-palette/CommandPalette.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import type { DevframeClientCommand, DevframeCommandEntry } from '@devframes/hub'
 import type { DocksContext } from '@devframes/hub/client'
+import type { PaletteCrumb, PaletteFlatItem } from '../../state/palette'
 import Fuse from 'fuse.js'
 import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
+import { flattenPaletteCommands, paletteScopeTrail } from '../../state/palette'
 import BrandWordmark from '../icons/BrandWordmark.vue'
 import CommandPaletteItem from './CommandPaletteItem.vue'
 
@@ -23,36 +25,14 @@ const listContainer = useTemplateRef<HTMLElement>('listContainer')
 const visible = ref(false)
 
 // Breadcrumb stack for sub-command drill-down
-const breadcrumb = ref<Array<{ title: string, items: DevframeCommandEntry[] }>>([])
+const breadcrumb = ref<PaletteCrumb[]>([])
 
-// Flattened items for top-level search (includes children with parent prefix)
-interface FlatItem {
-  entry: DevframeCommandEntry
-  parentTitle?: string
-  searchTitle: string
-}
-
-const flattenedItems = computed<FlatItem[]>(() => {
-  const result: FlatItem[] = []
-  for (const cmd of commandsCtx.value.paletteCommands) {
-    result.push({ entry: cmd, searchTitle: cmd.title })
-    if (cmd.children && cmd.showInPalette !== 'without-children') {
-      for (const child of cmd.children) {
-        if (child.showInPalette === false)
-          continue
-        result.push({
-          entry: child as DevframeCommandEntry,
-          parentTitle: cmd.title,
-          searchTitle: `${cmd.title} > ${child.title}`,
-        })
-      }
-    }
-  }
-  return result
-})
+const flattenedItems = computed<PaletteFlatItem[]>(
+  () => flattenPaletteCommands(commandsCtx.value.paletteCommands),
+)
 
 // Current items: either drilled-down sub-items or root items
-const currentFlatItems = computed<FlatItem[]>(() => {
+const currentFlatItems = computed<PaletteFlatItem[]>(() => {
   if (breadcrumb.value.length > 0) {
     const current = breadcrumb.value.at(-1)!
     return current.items.map(entry => ({ entry, searchTitle: entry.title }))
@@ -62,7 +42,7 @@ const currentFlatItems = computed<FlatItem[]>(() => {
 
 // Dynamic sub-items from action() return
 const dynamicItems = ref<DevframeClientCommand[] | undefined>()
-const activeItems = computed<FlatItem[]>(() => {
+const activeItems = computed<PaletteFlatItem[]>(() => {
   if (dynamicItems.value) {
     return dynamicItems.value.map(entry => ({ entry, searchTitle: entry.title }))
   }
@@ -85,12 +65,17 @@ watch(search, () => {
   selectedIndex.value = 0
 })
 
+/** Show the rows at `scopeId`'s level, from a fresh search. */
+function showScope(scopeId: string | null) {
+  search.value = ''
+  selectedIndex.value = 0
+  dynamicItems.value = undefined
+  breadcrumb.value = paletteScopeTrail(commandsCtx.value.paletteCommands, scopeId)
+}
+
 watch(show, (v) => {
   if (v) {
-    search.value = ''
-    selectedIndex.value = 0
-    breadcrumb.value = []
-    dynamicItems.value = undefined
+    showScope(commandsCtx.value.paletteScopeId)
     // Trigger enter animation
     requestAnimationFrame(() => {
       visible.value = true
@@ -99,9 +84,22 @@ watch(show, (v) => {
   }
   else {
     visible.value = false
+    // Every close path funnels through `show` — Escape, the backdrop, running a
+    // command, and a bare `paletteOpen` toggle — so the scope is dropped here
+    // once rather than in each of them. A later Mod+K then opens at the root
+    // instead of resurrecting the group it was last scoped to.
+    commandsCtx.value.paletteScopeId = null
   }
 })
 
+// A scope also arrives while the palette is already open — activating a dock
+// group picked from the root list, say. `show` stays `true` throughout, so the
+// drill-down follows the scope itself rather than the open transition.
+watch(() => commandsCtx.value.paletteScopeId, (scopeId) => {
+  if (show.value && scopeId)
+    showScope(scopeId)
+})
+
 function moveSelected(delta: number) {
   const len = filtered.value.length
   if (len === 0)
@@ -121,7 +119,7 @@ function scrollToItem() {
 
 const loadingId = ref<string | null>(null)
 
-async function enterItem(flatItem: FlatItem) {
+async function enterItem(flatItem: PaletteFlatItem) {
   const entry = flatItem.entry
 
   // If has static children, drill down
@@ -195,13 +193,32 @@ function goBack() {
   }
   if (breadcrumb.value.length > 0) {
     breadcrumb.value.pop()
+    dropScopeAtRoot()
     search.value = ''
     selectedIndex.value = 0
     return
   }
   close()
 }
 
+/** Jump to the level the crumb at `index` sits above. */
+function goToCrumb(index: number) {
+  breadcrumb.value.splice(index)
+  dropScopeAtRoot()
+  search.value = ''
+  selectedIndex.value = 0
+}
+
+/**
+ * Stepping back out to the root list leaves the palette unscoped, so the
+ * shortcut that scoped it drills back in instead of reading as "press again to
+ * close".
+ */
+function dropScopeAtRoot() {
+  if (breadcrumb.value.length === 0)
+    commandsCtx.value.paletteScopeId = null
+}
+
 function onKeyDown(e: KeyboardEvent) {
   if (e.key === 'Backspace' && !search.value && (breadcrumb.value.length > 0 || dynamicItems.value)) {
     e.preventDefault()
@@ -275,7 +292,7 @@ function getKeybindings(id: string) {
                 v-for="(crumb, i) in breadcrumb"
                 :key="i"
                 class="text-xs op60 hover:op80 mr-1 flex items-center gap-0.5"
-                @click="breadcrumb.splice(i); search = ''; selectedIndex = 0"
+                @click="goToCrumb(i)"
               >
                 {{ crumb.title }}
                 <span class="op40">&rsaquo;</span>

packages/hub-ui/src/client/components/views-builtin/SettingsShortcuts.vue

@@ -3,7 +3,7 @@ import type { DevframeCommandEntry, DevframeCommandKeybinding } from '@devframes
 import type { DocksContext } from '@devframes/hub/client'
 import DisplayKbd from '@antfu/design/components/Display/DisplayKbd.vue'
 import { computed, nextTick, ref, watch } from 'vue'
-import { filterCommandsByWhen, formatKeybinding, isKeybindingOverrideDifferentFromDefault, isMac, KNOWN_BROWSER_SHORTCUTS } from '../../state/keybindings'
+import { filterCommandsByWhen, findCommandDeep, formatKeybinding, isKeybindingOverrideDifferentFromDefault, isMac, KNOWN_BROWSER_SHORTCUTS, walkCommands } from '../../state/keybindings'
 import { useSettings } from '../../state/settings-defaults'
 import DockIcon from '../dock/DockIcon.vue'
 
@@ -19,7 +19,8 @@ const shortcutSearch = ref('')
 interface ShortcutRow {
   command: DevframeCommandEntry
   parentTitle?: string
-  indent: boolean
+  /** Nesting level — 0 for a top-level command, +1 per ancestor. */
+  depth: number
 }
 
 // This page is only reachable with the dock open and the palette closed, so `when`
@@ -34,20 +35,24 @@ const availableCommands = computed(() => filterCommandsByWhen(
   { ...props.context.when.context, dockOpen: true, paletteOpen: false },
 ))
 
+/**
+ * One row per command at every depth, in tree order, so anything the palette
+ * can run can be given a shortcut here.
+ *
+ * Nesting runs deeper than a parent and its children: a dock group's members sit
+ * two levels below the `Docks` command, and a devframe's own `children` go deeper
+ * still.
+ */
 const shortcutRows = computed<ShortcutRow[]>(() => {
   const rows: ShortcutRow[] = []
-  for (const cmd of availableCommands.value) {
-    rows.push({ command: cmd, indent: false })
-    if (cmd.children) {
-      for (const child of cmd.children) {
-        rows.push({
-          command: child as DevframeCommandEntry,
-          parentTitle: cmd.title,
-          indent: true,
-        })
-      }
-    }
-  }
+  walkCommands(availableCommands.value, (cmd, ancestors) => {
+    const parentTitle = ancestors.at(-1)?.title
+    rows.push({
+      command: cmd,
+      ...(parentTitle ? { parentTitle } : {}),
+      depth: ancestors.length,
+    })
+  })
   return rows
 })
 
@@ -66,6 +71,16 @@ function getEffectiveKeybindings(id: string): DevframeCommandKeybinding[] {
   return commandsCtx.getKeybindings(id)
 }
 
+/**
+ * Indent one step per nesting level. An inline style rather than a class, since
+ * the depth is only known at runtime and UnoCSS generates utilities from source
+ * — a computed `ml-${depth * 6}` would never be emitted. One step is `ml-6`
+ * worth of space.
+ */
+function rowIndentStyle(row: ShortcutRow): Record<string, string> {
+  return row.depth > 0 ? { marginLeft: `${row.depth * 1.5}rem` } : {}
+}
+
 function isExecutable(command: DevframeCommandEntry): boolean {
   return command.source === 'server' || !!command.action
 }
@@ -75,16 +90,7 @@ function isOverridden(id: string): boolean {
 }
 
 function getDefaultKeybindings(id: string): DevframeCommandKeybinding[] {
-  for (const cmd of commandsCtx.commands) {
-    if (cmd.id === id)
-      return cmd.keybindings ?? []
-    if (cmd.children) {
-      const child = cmd.children.find(c => c.id === id)
-      if (child)
-        return child.keybindings ?? []
-    }
-  }
-  return []
+  return findCommandDeep(commandsCtx.commands, id)?.keybindings ?? []
 }
 
 function clearShortcut(commandId: string) {
@@ -281,9 +287,9 @@ watch(editorOpen, async (v) => {
         v-if="row.command.icon"
         :icon="row.command.icon"
         class="w-4 h-4 shrink-0 op60"
-        :class="{ 'ml-6': row.indent }"
+        :style="rowIndentStyle(row)"
       />
-      <div v-else :class="{ 'ml-6': row.indent }" class="w-4 h-4 shrink-0" />
+      <div v-else :style="rowIndentStyle(row)" class="w-4 h-4 shrink-0" />
       <div class="flex-1 min-w-0">
         <div class="flex items-center gap-1.5">
           <span class="truncate text-sm">{{ row.command.title }}</span>