Skip to content

Commit ad80711

Browse files
antfubotantfubot
committed
refactor(hub,hub-ui): make DevframeDocksUserSettings generic + augmentable
The reference-viewer toggles baked into the hub's `DevframeDocksUserSettings` move to `@devframes/hub-ui` via declaration merging, mirroring the pattern used for branding / embeddedVisibility / dockPreferences: - `@devframes/hub` keeps only the generic dock-registry + command model every viewer shares: `docksHidden`, `docksCategoriesHidden`, `docksPinned`, `docksCustomOrder`, `commandShortcuts` (the last read by the framework-neutral `createDevframeClientHost`). `DEFAULT_STATE_USER_SETTINGS` drops the UI toggles. - `@devframes/hub-ui` augments `DevframeDocksUserSettings` with its own reference-viewer toggles — `showIframeAddressBar`, `closeOnOutsideClick`, `autoCollapseEdgeToolbar`, `showDevframeInspector` (all optional). The old `HubDocksUserSettings extends …` type is gone; hub-ui now consumes the augmented base directly. Built with the help of an agent.
1 parent ac399cf commit ad80711

12 files changed

Lines changed: 71 additions & 52 deletions

File tree

‎packages/hub-ui/src/client/components/dock/DockEdge.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
22
import type { DocksContext } from '@devframes/hub/client'
33
import type { CSSProperties } from 'vue'
4-
import type { HubDocksUserSettings } from '../../state/dock-settings'
4+
import type { DevframeDocksUserSettings } from '../../state/dock-settings'
55
import type { DockEdge as DockEdgePosition, DockLayout } from './dock-layout'
66
import { useEventListener } from '@vueuse/core'
77
import { computed, h, onMounted, ref, useTemplateRef } from 'vue'
@@ -24,7 +24,7 @@ const props = defineProps<{
2424
2525
const context = props.context
2626
const store = context.panel.store
27-
const settings = sharedStateToRef<HubDocksUserSettings>(context.docks.settings)
27+
const settings = sharedStateToRef<DevframeDocksUserSettings>(context.docks.settings)
2828
const layout = computed(() => resolveDockLayout(props.layout))
2929
3030
const viewsContainer = useTemplateRef<HTMLElement>('viewsContainer')

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<script setup lang="ts">
22
import type { DocksContext } from '@devframes/hub/client'
33
import type { SharedState } from 'devframe/utils/shared-state'
4-
import type { HubDocksUserSettings } from '../../state/dock-settings'
4+
import type { DevframeDocksUserSettings } from '../../state/dock-settings'
55
import { DEFAULT_STATE_USER_SETTINGS } from '@devframes/hub/constants'
66
import { useBranding } from '../../state/branding'
77
import { useConfirm } from '../../state/confirm'
88
import { sharedStateToRef } from '../../state/docks'
99
1010
const props = defineProps<{
1111
context: DocksContext
12-
settingsStore: SharedState<HubDocksUserSettings>
12+
settingsStore: SharedState<DevframeDocksUserSettings>
1313
}>()
1414
1515
const settings = sharedStateToRef(props.settingsStore)

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
22
import type { DocksContext } from '@devframes/hub/client'
33
import type { SharedState } from 'devframe/utils/shared-state'
4-
import type { HubDocksUserSettings } from '../../state/dock-settings'
4+
import type { DevframeDocksUserSettings } from '../../state/dock-settings'
55
import { computed } from 'vue'
66
import { useBranding } from '../../state/branding'
77
import { colorSchemePreference, setColorSchemePreference } from '../../state/color-mode'
@@ -10,7 +10,7 @@ import { isDockPopupSupported, requestDockPopupOpen, useIsDockPopupOpen } from '
1010
1111
const props = defineProps<{
1212
context: DocksContext
13-
settingsStore: SharedState<HubDocksUserSettings>
13+
settingsStore: SharedState<DevframeDocksUserSettings>
1414
}>()
1515
1616
const settings = sharedStateToRef(props.settingsStore)

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import type { DevframeDockEntry } from '@devframes/hub'
33
import type { DocksContext } from '@devframes/hub/client'
44
import type { SharedState } from 'devframe/utils/shared-state'
5-
import type { DevframeDockEntriesGrouped, HubDocksUserSettings } from '../../state/dock-settings'
5+
import type { DevframeDockEntriesGrouped, DevframeDocksUserSettings } from '../../state/dock-settings'
66
import { useDraggable } from '@vueuse/core'
77
import { computed, ref, useTemplateRef } from 'vue'
88
import { docksGroupByCategories, getCategoryLabel, getGroupMembers, getGroupMembersGrouped, isCategoryHideable } from '../../state/dock-settings'
@@ -12,7 +12,7 @@ import DockIcon from '../dock/DockIcon.vue'
1212
1313
const props = defineProps<{
1414
context: DocksContext
15-
settingsStore: SharedState<HubDocksUserSettings>
15+
settingsStore: SharedState<DevframeDocksUserSettings>
1616
}>()
1717
1818
const settings = sharedStateToRef(props.settingsStore)

‎packages/hub-ui/src/client/state/commands.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import type { DevframeClientCommand, DevframeCommandEntry, DevframeCommandKeybinding, DevframeServerCommandEntry } from '@devframes/hub'
1+
import type { DevframeClientCommand, DevframeCommandEntry, DevframeCommandKeybinding, DevframeDocksUserSettings, DevframeServerCommandEntry } from '@devframes/hub'
22
import type { CommandsContext, DevframeRpcClient } from '@devframes/hub/client'
33
import type { SharedState } from 'devframe/utils/shared-state'
44
import type { WhenContext } from 'devframe/utils/when'
55
import type { ShallowRef } from 'vue'
6-
import type { HubDocksUserSettings } from '../types'
76
import { evaluateWhen } from 'devframe/utils/when'
87
import { computed, markRaw, reactive, ref, watch } from 'vue'
98
import { sharedStateToRef } from './docks'
@@ -15,7 +14,7 @@ const commandsContextByRpc = new WeakMap<DevframeRpcClient, CommandsContext>()
1514
export async function createCommandsContext(
1615
clientType: 'embedded' | 'standalone',
1716
rpc: DevframeRpcClient,
18-
settingsState: SharedState<HubDocksUserSettings>,
17+
settingsState: SharedState<DevframeDocksUserSettings>,
1918
whenContextProvider?: () => WhenContext,
2019
): Promise<CommandsContext> {
2120
if (commandsContextByRpc.has(rpc)) {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { CommandsContext, DevframeRpcClient, DockClientScriptContext, DockE
33
import type { SharedState } from 'devframe/utils/shared-state'
44
import type { WhenContext } from 'devframe/utils/when'
55
import type { Ref } from 'vue'
6-
import type { HubDocksUserSettings } from './dock-settings'
6+
import type { DevframeDocksUserSettings } from './dock-settings'
77
import { attachFrameNavClient } from '@devframes/hub/client'
88
import { DEFAULT_STATE_USER_SETTINGS, DOCK_RENDERERS_STATE_KEY } from '@devframes/hub/constants'
99
import { computed, markRaw, reactive, ref, toRefs, watch, watchEffect } from 'vue'
@@ -134,7 +134,7 @@ export async function createDocksContext(
134134
panelStore ||= ref(DEFAULT_DOCK_PANEL_STORE())
135135
let docksContext: DocksContext
136136

137-
let _settingsStorePromise: Promise<SharedState<HubDocksUserSettings>> | undefined
137+
let _settingsStorePromise: Promise<SharedState<DevframeDocksUserSettings>> | undefined
138138
const getSettingsStore = async () => {
139139
if (!_settingsStorePromise) {
140140
_settingsStorePromise = rpc.sharedState.get(

‎packages/hub-ui/src/client/state/dock-settings.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import type { DevframeDockEntriesGrouped, DevframeDockEntry, DevframeViewGroup } from '@devframes/hub'
1+
import type { DevframeDockEntriesGrouped, DevframeDockEntry, DevframeDocksUserSettings, DevframeViewGroup } from '@devframes/hub'
22
import type { Immutable } from 'devframe/utils/shared-state'
33
import type { WhenContext } from 'devframe/utils/when'
4-
import type { HubDocksUserSettings } from '../types'
54
import { evaluateWhen } from 'devframe/utils/when'
65
import { DEFAULT_CATEGORIES_ORDER, INSPECTOR_DOCK_ID } from '../constants'
6+
// Registers hub-ui's reference-viewer settings onto DevframeDocksUserSettings.
7+
import '../types'
78

8-
export type { HubDocksUserSettings }
99
export type { DevframeDockEntriesGrouped }
10+
export type { DevframeDocksUserSettings }
1011

1112
/**
1213
* Synthetic category that collects pinned dock entries. Pinning re-buckets an
@@ -141,7 +142,7 @@ export function getEntryGroup(
141142
export function getGroupMembersGrouped(
142143
entries: DevframeDockEntry[],
143144
groupId: string,
144-
settings?: Immutable<HubDocksUserSettings>,
145+
settings?: Immutable<DevframeDocksUserSettings>,
145146
options?: { includeHidden?: boolean, whenContext?: WhenContext },
146147
): DevframeDockEntriesGrouped {
147148
const members = entries.filter(e => e.type !== 'group' && e.groupId === groupId)
@@ -165,7 +166,7 @@ export function getGroupMembersGrouped(
165166
export function getGroupMembers(
166167
entries: DevframeDockEntry[],
167168
groupId: string,
168-
settings?: Immutable<HubDocksUserSettings>,
169+
settings?: Immutable<DevframeDocksUserSettings>,
169170
options?: { includeHidden?: boolean, whenContext?: WhenContext },
170171
): DevframeDockEntry[] {
171172
return getGroupMembersGrouped(entries, groupId, settings, options).flatMap(([, items]) => items)
@@ -248,7 +249,7 @@ export function resolveGroupDefaultChild(
248249
*/
249250
export function docksGroupByCategories(
250251
entries: DevframeDockEntry[],
251-
settings: Immutable<HubDocksUserSettings>,
252+
settings: Immutable<DevframeDocksUserSettings>,
252253
options?: { includeHidden?: boolean, whenContext?: WhenContext, collapseGroups?: boolean, ignoreCategoryHidden?: boolean, categoryOrderOverride?: Record<string, number> },
253254
): DevframeDockEntriesGrouped {
254255
const { docksHidden, docksCategoriesHidden, docksCustomOrder, docksPinned } = settings

‎packages/hub-ui/src/client/stories/mock-context.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import type { DevframeDockEntry } from '@devframes/hub'
1+
import type { DevframeDockEntry, DevframeDocksUserSettings } from '@devframes/hub'
22
import type { DevframeRpcClient, DockPanelStorage, DocksContext, RpcClientEvents } from '@devframes/hub/client'
3-
import type { HubDocksUserSettings } from '../types'
43
import { DEFAULT_STATE_USER_SETTINGS } from '@devframes/hub/constants'
54
import { createEventEmitter } from 'devframe/utils/events'
65
import { createSharedState } from 'devframe/utils/shared-state'
@@ -27,7 +26,7 @@ export interface CreateMockContextOptions {
2726
/** Overrides merged over the default panel store (mode, position, open, ...). */
2827
panel?: Partial<DockPanelStorage>
2928
/** Overrides merged over the default user settings (hidden, pinned, order, ...). */
30-
settings?: Partial<HubDocksUserSettings>
29+
settings?: Partial<DevframeDocksUserSettings>
3130
/** Entry id to pre-select (also opens the panel). */
3231
selectedId?: string | null
3332
/** Initial trust state. Defaults to `true`. */
@@ -36,7 +35,7 @@ export interface CreateMockContextOptions {
3635

3736
function createMockRpc(
3837
entries: DevframeDockEntry[],
39-
settings: Partial<HubDocksUserSettings>,
38+
settings: Partial<DevframeDocksUserSettings>,
4039
initialTrusted: boolean,
4140
): MockRpcClient {
4241
const docksState = createSharedState({ initialValue: entries, enablePatches: false })

‎packages/hub-ui/src/client/types.ts‎

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,36 @@
1-
import type { DevframeDocksUserSettings, DevframeViewLauncher } from '@devframes/hub/types'
1+
import type { DevframeViewLauncher } from '@devframes/hub/types'
22
// Importing the hub-mounted json-render integration registers its
33
// `'json-render'` dock entry (a serializable `view` ref, not a live handle)
44
// on the hub's open dock union via declaration merging.
55
import '@devframes/json-render/hub'
66

77
/**
8-
* hub-ui user settings — the hub's {@link DevframeDocksUserSettings} widened
9-
* with the toggles only this viewer ships.
10-
*
11-
* The extra fields are optional so the hub's `DEFAULT_STATE_USER_SETTINGS()`
12-
* (which knows nothing about them) stays assignable; an absent value reads as
13-
* its documented default.
8+
* hub-ui's reference-viewer settings, merged onto the hub's generic
9+
* {@link DevframeDocksUserSettings} — the hub core stays unaware of them.
10+
* Every field is optional so the hub's `DEFAULT_STATE_USER_SETTINGS()` (which
11+
* knows nothing about them) stays assignable; an absent value reads as the
12+
* documented default.
1413
*/
15-
export interface HubDocksUserSettings extends DevframeDocksUserSettings {
16-
/**
17-
* Reveal the Devframe Inspector dock (the "devtools for the devtools"
18-
* meta-introspection panel). Hidden by default — an absent value keeps the
19-
* dock out of the dock bar until the user opts in from Settings → Advanced.
20-
*/
21-
showDevframeInspector?: boolean
14+
declare module '@devframes/hub/types' {
15+
interface DevframeDocksUserSettings {
16+
/** Show the address-bar chrome on iframe dock views. Defaults to shown. */
17+
showIframeAddressBar?: boolean
18+
/** Close the floating dock panel when clicking outside it. */
19+
closeOnOutsideClick?: boolean
20+
/**
21+
* Auto-collapse the edge-mode toolbar to a small handle when idle (no
22+
* hover or drag) and the panel content is closed, instead of permanently
23+
* spanning the full edge. Off by default — an absent value preserves the
24+
* default edge-mode behavior; opt in from Settings → Appearance.
25+
*/
26+
autoCollapseEdgeToolbar?: boolean
27+
/**
28+
* Reveal the Devframe Inspector dock (the "devtools for the devtools"
29+
* meta-introspection panel). Hidden by default — an absent value keeps the
30+
* dock out of the dock bar until the user opts in from Settings → Advanced.
31+
*/
32+
showDevframeInspector?: boolean
33+
}
2234
}
2335

2436
/**

‎packages/hub/src/constants.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,5 @@ export const DEFAULT_STATE_USER_SETTINGS: () => DevframeDocksUserSettings = () =
3838
docksCategoriesHidden: [],
3939
docksPinned: [],
4040
docksCustomOrder: {},
41-
showIframeAddressBar: false,
42-
closeOnOutsideClick: false,
4341
commandShortcuts: {},
4442
})

0 commit comments

Comments
 (0)