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

Author: dvcolomban

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

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import type { DocksContext } from '@devframes/hub/client'
-import { computed, useTemplateRef, watch } from 'vue'
+import { computed, useTemplateRef } from 'vue'
 import { getEntryGroup } from '../../state/dock-settings'
 import { getEntryPaneKey, useIframePanes } from '../../utils/useIframePanes'
 import { useIsRpcTrusted } from '../../utils/useIsRpcTrusted'
+import { useStandaloneDefaultDock } from '../../utils/useStandaloneDefaultDock'
 import CommandPalette from '../command-palette/CommandPalette.vue'
 import Confirm from '../display/Confirm.vue'
 import ToastOverlay from '../display/ToastOverlay.vue'
@@ -29,13 +30,7 @@ const isRpcTrusted = useIsRpcTrusted(context, (isTrusted) => {
   }
 })
 
-watch(
-  () => context.docks.entries,
-  () => {
-    context.docks.selectedId ||= context.docks.entries[0]?.id ?? null
-  },
-  { immediate: true },
-)
+useStandaloneDefaultDock(context, isRpcTrusted)
 
 const groupedEntries = computed(() => context.docks.groupedEntries)
 const activeGroup = computed(() => getEntryGroup(context.docks.entries, context.docks.selected))

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

@@ -7,6 +7,7 @@ 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 { useStandaloneDefaultDock } from '../utils/useStandaloneDefaultDock'
 import { createDocksContext } from './context'
 import { executeSetupScript } from './setup-script'
 
@@ -430,3 +431,71 @@ describe('dock group command activation', () => {
     ])
   })
 })
+
+describe('standalone initial dock', () => {
+  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 trusted = ref(false)
+    const stop = useStandaloneDefaultDock(context, trusted)
+    return {
+      context,
+      stop,
+      async connect() {
+        trust()
+        trusted.value = true
+        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(3)
+    const { context, connect, stop } = 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(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/src/client/utils/useStandaloneDefaultDock.ts

@@ -0,0 +1,19 @@
+import type { DocksContext } from '@devframes/hub/client'
+import type { Ref } from 'vue'
+import { watch } from 'vue'
+
+/** Pick from the visible dock rail and run normal activation, including client scripts and group routing. */
+export function useStandaloneDefaultDock(context: DocksContext, isTrusted: Readonly<Ref<boolean>>) {
+  return watch(
+    [() => context.docks.groupedEntries, isTrusted],
+    ([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 },
+  )
+}