feat: slot system + entries/priority/errorreport + typert generator
This commit is contained in:
@@ -227,11 +227,39 @@
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
/* Foot seat: a pure layout socket pinned under the region; the ui-settings
|
||||
trigger row inside owns its own geometry (38px wide row / 36px rail
|
||||
circle) and hover chrome. */
|
||||
/* Footer seats: Settings fills the left side and additive actions sit on the
|
||||
right. Each occupant owns its button geometry and hover chrome. */
|
||||
.footArea {
|
||||
flex: none;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.settingsArea {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.footerActions {
|
||||
flex: none;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
/* The 56px rail cannot hold two controls side by side. Keep both reachable in
|
||||
the same footer, stacked in their original order. */
|
||||
.collapsed .footArea {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.collapsed .settingsArea,
|
||||
.collapsed .footerActions {
|
||||
flex: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
* snap to the 56px rail (one icon each, same top-down order) fading in as the
|
||||
* slide ends. The workspace/session browsing region between the New Session
|
||||
* button and the foot is the `sidebar.workspaces` registrant's, and the foot
|
||||
* is the `sidebar.settings` registrant's; the shell hands them the wide flag
|
||||
* holds `sidebar.settings` plus `sidebar.footer.action`; the shell hands them the wide flag
|
||||
* (plus an expand request callback for the browser).
|
||||
*
|
||||
* The column also owns whether the scroll regions nested in it draw a
|
||||
@@ -177,9 +177,14 @@ export function SidebarRoot({
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Foot seat: ui-settings registers the trigger row + panel here. */}
|
||||
{/* Footer: Settings stays on the left; optional actions sit beside it. */}
|
||||
<div className={css.footArea}>
|
||||
{renderSlot('sidebar.settings', { wide })}
|
||||
<div className={css.settingsArea}>
|
||||
{renderSlot('sidebar.settings', { wide })}
|
||||
</div>
|
||||
<div className={css.footerActions}>
|
||||
{renderSlot('sidebar.footer.action', { wide })}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -50,6 +50,12 @@ export interface SidebarSettingsOwnerProps {
|
||||
wide: boolean
|
||||
}
|
||||
|
||||
/** Owner share of an action rendered beside Settings at the sidebar foot. */
|
||||
export interface SidebarFooterActionOwnerProps {
|
||||
/** Whether the sidebar renders wide content (false = 56px rail). */
|
||||
wide: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Registrant-private injected share (arrives via the register inject
|
||||
* factory). The shell keeps only its own controls: starting a Session from
|
||||
@@ -72,5 +78,6 @@ export type SidebarRootInjected = {
|
||||
* seat. No store is registered.
|
||||
*/
|
||||
export type SidebarRootComponentProps =
|
||||
PropsRuntime<'sidebar'> & PropsRenderSlots<'sidebar.workspaces' | 'sidebar.settings'>
|
||||
PropsRuntime<'sidebar'>
|
||||
& PropsRenderSlots<'sidebar.workspaces' | 'sidebar.settings' | 'sidebar.footer.action'>
|
||||
& SidebarRootInjected & PropsLocale<'sidebar'>
|
||||
|
||||
@@ -6,7 +6,10 @@ import type { SidebarRootInjected } from './contract/slots.ts'
|
||||
import { SidebarRoot } from './SidebarRoot.tsx'
|
||||
import { en, zh, type SidebarKey } from './locales.ts'
|
||||
|
||||
export type { SidebarRootComponentProps, SidebarRootInjected, SidebarSectionOwnerProps, SidebarSettingsOwnerProps } from './contract/slots.ts'
|
||||
export type {
|
||||
SidebarFooterActionOwnerProps, SidebarRootComponentProps, SidebarRootInjected,
|
||||
SidebarSectionOwnerProps, SidebarSettingsOwnerProps,
|
||||
} from './contract/slots.ts'
|
||||
export type { SidebarKey } from './locales.ts'
|
||||
|
||||
declare module '@deepseek-ai/dsh-client-ui-slots' {
|
||||
@@ -44,6 +47,7 @@ export function apply(ctx: ClientContext): void {
|
||||
children: {
|
||||
'sidebar.workspaces': { kind: 'single', scope: 'root' },
|
||||
'sidebar.settings': { kind: 'single', scope: 'root' },
|
||||
'sidebar.footer.action': { kind: 'list', scope: 'root' },
|
||||
},
|
||||
inject: injectProps,
|
||||
}, SidebarRoot),
|
||||
|
||||
@@ -31,11 +31,13 @@ describe('ui-sidebar apply', () => {
|
||||
expect(inject).toEqual(['slots', 'layout', 'sessions', 'workspaces', 'locale'])
|
||||
})
|
||||
|
||||
it('registers the shell and declares the browsing-region hole', async () => {
|
||||
it('registers the shell and declares its child seats', async () => {
|
||||
const b = await bench()
|
||||
await b.ctx.plugin({ inject: [...inject], apply }).await()
|
||||
expect(b.slots.entries('sidebar')).toHaveLength(1)
|
||||
expect(b.slots.spec('sidebar.workspaces')).toEqual({ kind: 'single', scope: 'root' })
|
||||
expect(b.slots.spec('sidebar.settings')).toEqual({ kind: 'single', scope: 'root' })
|
||||
expect(b.slots.spec('sidebar.footer.action')).toEqual({ kind: 'list', scope: 'root' })
|
||||
// Copy rides the standard locale seat, not the inject face.
|
||||
expect(b.slots.entries('sidebar')[0]!.locale).toBe('sidebar')
|
||||
const injected = (b.slots.entries('sidebar')[0]!.inject as () => SidebarRootInjected)()
|
||||
@@ -61,5 +63,6 @@ describe('ui-sidebar apply', () => {
|
||||
await fiber.dispose()
|
||||
expect(b.slots.entries('sidebar')).toHaveLength(0)
|
||||
expect(b.slots.spec('sidebar.workspaces')).toBeUndefined()
|
||||
expect(b.slots.spec('sidebar.footer.action')).toBeUndefined()
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
// @vitest-environment jsdom
|
||||
import { afterEach, describe, expect, it, vi } from 'vitest'
|
||||
import { cleanup, fireEvent, render, screen } from '@testing-library/react'
|
||||
import type { SidebarRootComponentProps, SidebarSectionOwnerProps, SidebarSettingsOwnerProps } from '../src/client/contract/slots.ts'
|
||||
import type {
|
||||
SidebarFooterActionOwnerProps, SidebarRootComponentProps, SidebarSectionOwnerProps,
|
||||
SidebarSettingsOwnerProps,
|
||||
} from '../src/client/contract/slots.ts'
|
||||
import { SidebarRoot } from '../src/client/SidebarRoot.tsx'
|
||||
import { en } from '../src/client/locales.ts'
|
||||
|
||||
@@ -23,17 +26,25 @@ function mountShell({ collapsed = false, width = 300 }: { collapsed?: boolean; w
|
||||
const toggleSidebar = vi.fn()
|
||||
let regionOwner: SidebarSectionOwnerProps | undefined
|
||||
let settingsOwner: SidebarSettingsOwnerProps | undefined
|
||||
let footerActionOwner: SidebarFooterActionOwnerProps | undefined
|
||||
let current = { collapsed, width }
|
||||
const root = () => (
|
||||
<SidebarRoot
|
||||
collapsed={current.collapsed} width={current.width}
|
||||
useSessions={neverHook} useWorkspaces={neverHook}
|
||||
startSession={startSession} toggleSidebar={toggleSidebar} t={t}
|
||||
renderSlot={((key: string, owner: SidebarSectionOwnerProps | SidebarSettingsOwnerProps) => {
|
||||
renderSlot={((
|
||||
key: string,
|
||||
owner: SidebarFooterActionOwnerProps | SidebarSectionOwnerProps | SidebarSettingsOwnerProps,
|
||||
) => {
|
||||
if (key === 'sidebar.settings') {
|
||||
settingsOwner = owner
|
||||
return <div data-testid="settings-seat" data-wide={owner.wide} />
|
||||
}
|
||||
if (key === 'sidebar.footer.action') {
|
||||
footerActionOwner = owner
|
||||
return <div data-testid="footer-action-seat" data-wide={owner.wide} />
|
||||
}
|
||||
regionOwner = owner as SidebarSectionOwnerProps
|
||||
return <div data-testid="region" data-wide={owner.wide} />
|
||||
}) as SidebarRootComponentProps['renderSlot']}
|
||||
@@ -51,6 +62,10 @@ function mountShell({ collapsed = false, width = 300 }: { collapsed?: boolean; w
|
||||
if (settingsOwner === undefined) throw new Error('settings owner not rendered')
|
||||
return settingsOwner
|
||||
},
|
||||
footerActionOwner: () => {
|
||||
if (footerActionOwner === undefined) throw new Error('footer action owner not rendered')
|
||||
return footerActionOwner
|
||||
},
|
||||
rerender(next: Partial<typeof current>) {
|
||||
current = { ...current, ...next }
|
||||
view.rerender(root())
|
||||
@@ -75,6 +90,7 @@ describe('SidebarRoot shell', () => {
|
||||
expect(b.regionOwner().wide).toBe(true)
|
||||
// The settings seat rides the same wide flag (ui-settings renders the row).
|
||||
expect(b.settingsOwner().wide).toBe(true)
|
||||
expect(b.footerActionOwner().wide).toBe(true)
|
||||
// Expanded: the request is a no-op (no accidental collapse).
|
||||
b.regionOwner().expandSidebar()
|
||||
expect(b.toggleSidebar).not.toHaveBeenCalled()
|
||||
@@ -89,6 +105,7 @@ describe('SidebarRoot shell', () => {
|
||||
vi.advanceTimersByTime(200)
|
||||
b.rerender({})
|
||||
expect(b.regionOwner().wide).toBe(false)
|
||||
expect(b.footerActionOwner().wide).toBe(false)
|
||||
expect(screen.getByTestId('region')).toBeTruthy()
|
||||
b.regionOwner().expandSidebar()
|
||||
expect(b.toggleSidebar).toHaveBeenCalledOnce()
|
||||
|
||||
Reference in New Issue
Block a user