fix(hub-ui): select a visible dock on standalone startup

Author: dvcolomban

packages/hub-ui/src/client/components/dock/DockStandalone.vue

@@ -29,10 +29,16 @@ const isRpcTrusted = useIsRpcTrusted(context, (isTrusted) => {
   }
 })
 
+/** Select from the visible dock rail through normal activation, including client scripts and group routing. */
 watch(
-  () => context.docks.entries,
-  () => {
-    context.docks.selectedId ||= context.docks.entries[0]?.id ?? null
+  [() => context.docks.groupedEntries, isRpcTrusted],
+  ([groups, trusted]) => {
+    if (!trusted || context.docks.selectedId)
+      return
+    const entry = groups.flatMap(([, entries]) => entries)
+      .find(entry => entry.type !== 'action' && entry.type !== '~builtin')
+    if (entry)
+      void context.docks.switchEntry(entry.id)
   },
   { immediate: true },
 )

packages/hub-ui/src/client/state/context.test.ts

@@ -6,7 +6,8 @@ import { DEVFRAME_EVENTS } from 'devframe/constants'
 import { createEventEmitter } from 'devframe/utils/events'
 import { createSharedState } from 'devframe/utils/shared-state'
 import { describe, expect, it, vi } from 'vitest'
-import { nextTick, ref } from 'vue'
+import { createRenderer, nextTick, ref, ssrContextKey } from 'vue'
+import DockStandalone from '../components/dock/DockStandalone.vue'
 import { createDocksContext } from './context'
 import { executeSetupScript } from './setup-script'
 
@@ -430,3 +431,88 @@ describe('dock group command activation', () => {
     ])
   })
 })
+
+describe('standalone initial dock', () => {
+  /** Mount the real component setup without rendering its unrelated dock panels or creating browser iframes. */
+  const renderer = createRenderer<object, object>({
+    createElement: () => ({}),
+    createText: () => ({}),
+    createComment: () => ({}),
+    insert: vi.fn(),
+    remove: vi.fn(),
+    setText: vi.fn(),
+    setElementText: vi.fn(),
+    parentNode: () => null,
+    nextSibling: () => null,
+    patchProp: vi.fn(),
+  })
+
+  async function fixture(entries: DevframeDockEntry[]) {
+    const { rpc, sharedStates, trust } = createStubRpc()
+    const context = await createDocksContext('standalone', rpc)
+    sharedStates.get(HUB_EVENTS.sharedState.docks)!.push(entries)
+    const switchEntry = vi.spyOn(context.docks, 'switchEntry')
+    const component = renderer.createApp({ ...DockStandalone, render: () => null }, { context })
+    component.provide(ssrContextKey, {})
+    component.mount({})
+    return {
+      context,
+      stop: () => component.unmount(),
+      switchEntry,
+      async connect() {
+        trust()
+        await flushRestore()
+      },
+      async publish(next: DevframeDockEntry[]) {
+        sharedStates.get(HUB_EVENTS.sharedState.docks)!.push(next)
+        await flushRestore()
+      },
+    }
+  }
+
+  it('skips a hidden wrapper and activates the first visible dock through its client script', async () => {
+    expect.assertions(4)
+    const { context, connect, stop, switchEntry } = await fixture([
+      { id: 'wrapper', title: 'Wrapper', icon: 'ph:box', type: 'iframe', url: '/devframe/', when: 'false' },
+      gitEntry,
+    ])
+    expect(context.docks.selectedId).toBeNull()
+    await connect()
+    expect(context.docks.selectedId).toBe('git')
+    expect(switchEntry).toHaveBeenCalledWith('git')
+    expect(executeSetupScript).toHaveBeenCalledWith(gitEntry, expect.anything())
+    stop()
+  })
+
+  it('waits for an eligible entry without running actions or selecting a built-in fallback', async () => {
+    expect.assertions(2)
+    const { context, connect, publish, stop } = await fixture([
+      { id: 'command', title: 'Command', icon: 'ph:play', type: 'action', action: { importFrom: '/command.js' } },
+    ])
+    await connect()
+    expect(context.docks.selectedId).toBeNull()
+    await publish([gitEntry])
+    expect(context.docks.selectedId).toBe('git')
+    stop()
+  })
+
+  it('keeps an existing selection when the catalog changes', async () => {
+    expect.assertions(1)
+    const { context, connect, publish, stop } = await fixture([gitEntry])
+    await connect()
+    await publish([{ ...gitEntry, id: 'new-first' }, gitEntry])
+    expect(context.docks.selectedId).toBe('git')
+    stop()
+  })
+
+  it('uses normal group routing to open a visible member', async () => {
+    expect.assertions(1)
+    const { context, connect, stop } = await fixture([
+      { id: 'tools', title: 'Tools', icon: 'ph:folder', type: 'group' },
+      { ...gitEntry, groupId: 'tools' },
+    ])
+    await connect()
+    expect(context.docks.selectedId).toBe('git')
+    stop()
+  })
+})

packages/hub-ui/vitest.config.ts

@@ -0,0 +1,11 @@
+import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vitest/config'
+import { alias } from '../../alias'
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: { alias },
+  test: {
+    name: '@devframes/hub-ui',
+  },
+})