a04a223bab
The shell is now a pure composition face: no dictionaries, no locale dependency, and three new chrome content seats (settings.trigger / settings.header / settings.close) whose slot content also carries the accessible names (trigger text, dialog aria-labelledby, visually hidden close label). ui-settings-general returns as the owner of copy that belongs to no single feature: chrome content, the General section with its item slot, and the settings dictionaries. Slot types split homes — trigger/header/close/section live in the shell contract; the settings.general.item entry moves to the locale package (the common dependency of every item registrant), with ui-theme consuming it through a re-export seam; the verbatim duplicate merges are gone and the dependency graph is a clean DAG.
62 lines
2.5 KiB
TypeScript
62 lines
2.5 KiB
TypeScript
/**
|
|
* The General section (figma 501:29983 'Options'): Permission and Tool Call
|
|
* skeleton rows, then the feature-contributed preference rows from the
|
|
* `settings.general.item` slot (locale → Language, ui-theme → Appearance).
|
|
* The section column stacks rows; each row draws its own internals and
|
|
* separator.
|
|
*/
|
|
import { IconChevronDownOutline14 } from '@deepseek-ai/dsh-client-ui-primitives'
|
|
import type { PropsRenderSlots, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
|
|
import css from './GeneralSection.module.css'
|
|
|
|
/** Injected face of the General section: the settings-namespace translate. */
|
|
export interface GeneralSectionInjected {
|
|
/** Translate a `settings` dictionary key to the active-locale text. */
|
|
t: (key: string) => string
|
|
}
|
|
|
|
/** Full component props: section owner share + item render share + inject face. */
|
|
export type GeneralSectionComponentProps =
|
|
PropsRuntime<'settings.section'> & PropsRenderSlots<'settings.general.item'> & GeneralSectionInjected
|
|
|
|
/**
|
|
* Render the General section content column.
|
|
* @param props - composed slot props (contract/slots.ts).
|
|
* @returns the section element tree.
|
|
*/
|
|
export function GeneralSection({ t, renderSlot }: GeneralSectionComponentProps) {
|
|
return (
|
|
<div className={css.section}>
|
|
{/* Permission (skeleton): disabled selector pill. */}
|
|
<div className={css.row}>
|
|
<div className={css.rowText}>
|
|
<div className={css.title}>{t('permission.title')}</div>
|
|
<div className={css.desc}>{t('permission.desc')}</div>
|
|
</div>
|
|
<button type="button" className={css.selector} disabled>
|
|
{t('permission.value')}
|
|
<IconChevronDownOutline14 className={css.chevron} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Tool Call (skeleton): schema cube pinned selected, code cube unselected. */}
|
|
<div className={css.group}>
|
|
<div className={css.title}>{t('toolcall.title')}</div>
|
|
<div className={css.cubeRow}>
|
|
<div className={`${css.modeCube} ${css.selected}`}>
|
|
<div className={css.title}>{t('toolcall.schema.title')}</div>
|
|
<div className={css.desc}>{t('toolcall.schema.desc')}</div>
|
|
</div>
|
|
<div className={css.modeCube}>
|
|
<div className={css.title}>{t('toolcall.code.title')}</div>
|
|
<div className={css.desc}>{t('toolcall.code.desc')}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Feature-owned preference rows (Language, Appearance, …). */}
|
|
{renderSlot('settings.general.item', {})}
|
|
</div>
|
|
)
|
|
}
|