refactor(hub): clarify panel state snapshots

Author: dvcolomban

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

@@ -1,4 +1,4 @@
-import type { DevframeClientCommand, DevframeDockEntry, DevframeDockUserEntry, DevframeRpcClientFunctions, DevframeViewIframe } from '@devframes/hub'
+import type { DevframeClientCommand, DevframeDockEntry, DevframeDockPanelState, DevframeDockUserEntry, DevframeRpcClientFunctions, DevframeViewIframe } from '@devframes/hub'
 import type { CommandsContext, DevframeClientContext, DevframeRpcClient, DockClientScriptContext, DockEntryState, DockPanelStorage, DockRegistration, DockRendererManifest, DocksContext, DockSessionStorage } from '@devframes/hub/client'
 import type { SharedState } from 'devframe/utils/shared-state'
 import type { WhenContext } from 'devframe/utils/when'
@@ -18,6 +18,26 @@ import { registerMainFrameDockActionHandler, triggerMainFrameDockAction, useIsDo
 import { executeSetupScript } from './setup-script'
 
 const docksContextByRpc = new WeakMap<DevframeRpcClient, DocksContext>()
+
+function createDockPanelState(
+  visible: boolean,
+  open: boolean,
+  selectedDockId: string | null,
+): DevframeDockPanelState {
+  let state: DevframeDockPanelState['state']
+  if (!visible)
+    state = 'hidden'
+  else if (open)
+    state = 'open'
+  else
+    state = 'closed'
+
+  const panelState: DevframeDockPanelState = { state }
+  if (selectedDockId !== null)
+    panelState.selectedDockId = selectedDockId
+  return panelState
+}
+
 export async function createDocksContext(
   clientType: 'embedded' | 'standalone',
   rpc: DevframeRpcClient,
@@ -671,10 +691,8 @@ export async function createDocksContext(
       ([visible, open, currentSelectedDockId]) => {
         if (visible === undefined)
           return
-        void reportDockPanelState(rpc, {
-          state: visible ? (open ? 'open' : 'closed') : 'hidden',
-          ...(currentSelectedDockId !== null ? { selectedDockId: currentSelectedDockId } : {}),
-        }).catch(() => {})
+        const panelState = createDockPanelState(visible, open, currentSelectedDockId)
+        void reportDockPanelState(rpc, panelState).catch(() => {})
       },
       { immediate: true },
     )

packages/hub/src/client/host.ts

@@ -10,6 +10,7 @@ import type {
   ClientScriptEntry,
   DevframeDockEntriesGrouped,
   DevframeDockEntry,
+  DevframeDockPanelState,
   DevframeViewIframe,
 } from '../types/docks'
 import type { DevframeDocksUserSettings } from '../types/settings'
@@ -158,10 +159,7 @@ export async function createDevframeClientRuntime(
   }
 
   const reportPanelState = (session: DockSessionStorage): void => {
-    void reportDockPanelState(rpc, {
-      state: session.open ? 'open' : 'closed',
-      ...(session.selectedDockId !== null ? { selectedDockId: session.selectedDockId } : {}),
-    }).catch(() => {})
+    void reportDockPanelState(rpc, createDockPanelState(session)).catch(() => {})
   }
   let panelStateReportPending = false
   const schedulePanelStateReport = (session: DockSessionStorage): void => {
@@ -618,6 +616,15 @@ function createPanelContext(
   }
 }
 
+function createDockPanelState(session: DockSessionStorage): DevframeDockPanelState {
+  const panelState: DevframeDockPanelState = {
+    state: session.open ? 'open' : 'closed',
+  }
+  if (session.selectedDockId !== null)
+    panelState.selectedDockId = session.selectedDockId
+  return panelState
+}
+
 function groupByCategory(entries: DevframeDockEntry[], categoryOrder: Record<string, number>): DevframeDockEntriesGrouped {
   // Index registered groups so a member whose `groupId` resolves takes its
   // OUTER bucket from the group's category, not its own (which becomes the

packages/hub/src/node/panel-state.ts

@@ -22,10 +22,7 @@ export function updateDockPanelState(
     return
   }
 
-  const currentState: DevframeDockPanelState = {
-    state: panelState.state,
-    ...(panelState.selectedDockId !== undefined ? { selectedDockId: panelState.selectedDockId } : {}),
-  }
+  const currentState: DevframeDockPanelState = { ...panelState }
   sessionStates.set(sessionId, currentState)
   const event: DevframeDockPanelStateEvent = previousState === undefined
     ? { type: 'connected', sessionId, ...currentState }