feat(gui): settings panel with locale and theme preferences
Add the browser Settings surface as slot-composed plugins over new preference services: - Rename dsh-client-i18n to dsh-client-locale (locale is the domain name); LocaleService adds getLocale()/setLocale(id), immutable snapshots, a locale/change event, and dsh.locale persistence. - ThemeService owns the light/dark/system preference (default system), resolves system via prefers-color-scheme, publishes theme/change snapshots, persists dsh.theme, and no longer touches the DOM; ui-layout's ThemePresenter applies resolved snapshots (body[data-ds-dark-theme] + alias tokens) and cleans up on dispose. - ui-sidebar drops the phase-1 settings dropdown/modal; the foot renders the new sidebar.settings slot with the column state. - New ui-settings shell occupies sidebar.settings: foot trigger row and the centered 1080x700 panel (figma 501:29947) with 24% mask, close button / mask click / Escape all closing, and a 188px nav projected from the settings.section list slot it declares. Nav labels are registrant-localized; sections re-register on locale change, so the ledger version is the shell's only subscription. - ui-settings-general registers the General section: Permission and Tool Call skeletons, live Language (locale menu) and Appearance (Light/Dark/System cubes following the persisted preference); its slot store mirrors both service snapshots via apply-side listeners. - ui-settings-models registers the Models nav entry with an empty content column. - Portaled menus pin z-index above modal overlays (a menu anchored inside the settings dialog rendered underneath it and was unclickable). - theme/data/list-pen icons in ui-primitives; settings copy ships as zh/en dictionaries; fixture manifests gain the settings rows.
This commit is contained in:
imccyu
@@ -0,0 +1,192 @@
|
||||
/* Settings shell (figma 501:29904 mask context / 501:29947 panel): sidebar
|
||||
foot trigger row + centered 1080x700 modal panel. The trigger reproduces
|
||||
the former sidebar foot geometry (49px wide row / 36px rail circle); the
|
||||
panel is a two-column layout — 188px nav rail + content column with a
|
||||
54px header and the 24px-padded options area. */
|
||||
|
||||
/* Trigger row (former sidebar foot, figma 133:7668): 49px hover pill. */
|
||||
.trigger {
|
||||
flex: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
height: 49px;
|
||||
margin: 8px 0 0;
|
||||
padding: 0 2px 0 6px;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
color: var(--dsw-alias-label-primary);
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.trigger:hover {
|
||||
background: var(--dsw-alias-interactive-bg-hover);
|
||||
}
|
||||
|
||||
/* Rail trigger: the same 36x36 circle box as the other rail controls. */
|
||||
.trigger.rail {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin: 18px 0 10px;
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.triggerLabel {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Full-viewport layer (figma Mask 501:29946 #000@24%, no blur). */
|
||||
.overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mask {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--dsw-alias-bg-mask-1);
|
||||
}
|
||||
|
||||
/* Panel (figma Settings 501:29947): 1080x700, r24, white, lv3 shadow
|
||||
(figma effects match --dsw-shadow-lv3 exactly). */
|
||||
.panel {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
width: 1080px;
|
||||
height: 700px;
|
||||
max-width: calc(100vw - 48px);
|
||||
max-height: calc(100vh - 48px);
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
background: var(--dsw-alias-bg-layer-1);
|
||||
box-shadow: var(--dsw-shadow-lv3);
|
||||
}
|
||||
|
||||
/* Nav rail (figma .Setting-nav 501:29958): 188 wide, pad (12,22,12,0),
|
||||
gap 18, no own fill — the panel white shows through. */
|
||||
.nav {
|
||||
flex: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
width: 188px;
|
||||
padding: 22px 12px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Title row (figma 501:29959): 16/500 lh24, 12px side padding. */
|
||||
.navTitle {
|
||||
padding: 0 12px;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
color: var(--dsw-alias-label-primary);
|
||||
}
|
||||
|
||||
/* Cell stack (figma 501:29961): gap 4. */
|
||||
.navList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* Nav cell (figma .Setting-nav-cell 501:29962): 164x40, r12, pad
|
||||
(12,9,16,9), gap 8; label 14/400 lh22; selected fill #EBEEF2. */
|
||||
.navCell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
height: 40px;
|
||||
padding: 9px 16px 9px 12px;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
font-weight: 400;
|
||||
color: var(--dsw-alias-label-primary);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.navCell:hover {
|
||||
background: var(--dsw-specific-sidebar-nav-item-hover);
|
||||
}
|
||||
|
||||
.navCell.active {
|
||||
background: var(--dsw-specific-sidebar-nav-item-active);
|
||||
}
|
||||
|
||||
.navIcon {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.navLabel {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* Content column (figma Content 501:29980): header + options. */
|
||||
.content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Header (figma .Header 501:29981): h54, pad (10,20,14,8), close right. */
|
||||
.header {
|
||||
flex: none;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
height: 54px;
|
||||
padding: 20px 14px 8px 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Close button (figma .Icon_container 501:29982): 28x28, r28, 14px glyph. */
|
||||
.close {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 28px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
color: var(--dsw-alias-label-primary);
|
||||
}
|
||||
|
||||
.close:hover {
|
||||
background: var(--dsw-alias-interactive-bg-hover);
|
||||
}
|
||||
|
||||
/* Options area (figma Options 501:29983): pad (24,0,24,8), scrolls. */
|
||||
.options {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 0 24px 8px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
/**
|
||||
* Settings shell root: the sidebar-foot trigger row plus the centered modal
|
||||
* panel (figma 501:29947, 1080x700) with the section nav rail. Modal open
|
||||
* state and the active section id are component-local viewing state; the
|
||||
* section ledger arrives through the injected face (nav labels are
|
||||
* registrant-localized — the shell owns no locale/theme subscription).
|
||||
*/
|
||||
import { useCallback, useEffect, useRef, useState } from 'react'
|
||||
import clsx from 'clsx'
|
||||
import {
|
||||
IconCloseOutline16, IconDataOutline16, IconSettingsOutline14, IconSettingsOutline16,
|
||||
} from '@deepseek-ai/dsh-client-ui-primitives'
|
||||
import type { SettingsRootComponentProps } from './contract/slots.ts'
|
||||
import css from './SettingsRoot.module.css'
|
||||
|
||||
/** Nav glyph by section id; unknown ids fall back to the settings gear. */
|
||||
function navIcon(id: string) {
|
||||
if (id === 'models') return <IconDataOutline16 className={css.navIcon} size={16} />
|
||||
return <IconSettingsOutline16 className={css.navIcon} size={16} />
|
||||
}
|
||||
|
||||
type PanelProps = {
|
||||
translate: SettingsRootComponentProps['translate']
|
||||
rows: ReturnType<SettingsRootComponentProps['sections']>
|
||||
renderSlot: SettingsRootComponentProps['renderSlot']
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
/**
|
||||
* The modal layer: full-viewport mask + centered panel. Close paths: the
|
||||
* header button, a mask click, and document-level Escape (mounted only while
|
||||
* open, so the listener lifetime is the panel's).
|
||||
*/
|
||||
function SettingsPanel({ translate, rows, renderSlot, onClose }: PanelProps) {
|
||||
// Local selection; entries can unmount underneath it, so the render-time
|
||||
// projection falls back to the first row when the id is gone.
|
||||
const [activeId, setActiveId] = useState<string | undefined>(undefined)
|
||||
const active = rows.find((r) => r.id === activeId)?.id ?? rows[0]?.id
|
||||
|
||||
useEffect(() => {
|
||||
const onKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') onClose()
|
||||
}
|
||||
document.addEventListener('keydown', onKeyDown)
|
||||
return () => { document.removeEventListener('keydown', onKeyDown) }
|
||||
}, [onClose])
|
||||
|
||||
// Baseline focus management: entering the dialog lands on the close button.
|
||||
const closeButton = useRef<HTMLButtonElement | null>(null)
|
||||
useEffect(() => { closeButton.current?.focus() }, [])
|
||||
|
||||
return (
|
||||
<div className={css.overlay} role="presentation">
|
||||
<div className={css.mask} aria-hidden="true" onClick={onClose} />
|
||||
<div className={css.panel} role="dialog" aria-modal="true" aria-label={translate('settings:title')}>
|
||||
<nav className={css.nav} aria-label={translate('settings:title')}>
|
||||
<div className={css.navTitle}>{translate('settings:title')}</div>
|
||||
<div className={css.navList}>
|
||||
{rows.map((row) => (
|
||||
<button
|
||||
key={row.id}
|
||||
type="button"
|
||||
className={clsx(css.navCell, row.id === active && css.active)}
|
||||
aria-current={row.id === active ? 'true' : undefined}
|
||||
onClick={() => { setActiveId(row.id) }}
|
||||
>
|
||||
{navIcon(row.id)}
|
||||
<span className={css.navLabel}>{row.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</nav>
|
||||
<div className={css.content}>
|
||||
<div className={css.header}>
|
||||
<button ref={closeButton} type="button" className={css.close} aria-label={translate('settings:close')} onClick={onClose}>
|
||||
<IconCloseOutline16 size={14} />
|
||||
</button>
|
||||
</div>
|
||||
<div className={css.options}>
|
||||
{active !== undefined && renderSlot('settings.section', {}, { only: active })}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the settings trigger and panel.
|
||||
* @param props - composed slot props (contract/slots.ts).
|
||||
* @returns the settings shell element tree.
|
||||
*/
|
||||
export function SettingsRoot(props: SettingsRootComponentProps) {
|
||||
const { wide, translate, subscribeSections, sectionsVersion, sections, renderSlot } = props
|
||||
const [open, setOpen] = useState(false)
|
||||
const close = useCallback(() => { setOpen(false) }, [])
|
||||
|
||||
// The ledger tick is the shell's only subscription: sections re-register
|
||||
// with freshly localized labels on locale change, so the version bump also
|
||||
// re-renders the shell's own translate()-read chrome copy.
|
||||
// State = ledger version: same-version notifications dedupe to no render.
|
||||
const [, setSectionsRev] = useState(() => sectionsVersion())
|
||||
useEffect(
|
||||
() => subscribeSections(() => { setSectionsRev(sectionsVersion()) }),
|
||||
[subscribeSections, sectionsVersion],
|
||||
)
|
||||
const rows = sections()
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
className={clsx(css.trigger, !wide && css.rail)}
|
||||
aria-label={translate('settings:trigger')}
|
||||
aria-haspopup="dialog"
|
||||
aria-expanded={open}
|
||||
onClick={() => { setOpen(true) }}
|
||||
>
|
||||
<IconSettingsOutline14 size={wide ? 14 : 18} />
|
||||
{wide && <span className={css.triggerLabel}>{translate('settings:trigger')}</span>}
|
||||
</button>
|
||||
{open && <SettingsPanel translate={translate} rows={rows} renderSlot={renderSlot} onClose={close} />}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
/**
|
||||
* Settings shell slot contract: the shell occupies the sidebar-owned
|
||||
* `sidebar.settings` hole and declares the `settings.section` list slot that
|
||||
* section plugins (General, Models, …) contribute pages into.
|
||||
*/
|
||||
import type { PropsRenderSlots, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
|
||||
// Type-only: pulls ui-sidebar's SlotMap merge (the 'sidebar.settings' entry)
|
||||
// into every program that sees this contract.
|
||||
import type {} from '@deepseek-ai/dsh-client-ui-sidebar/client'
|
||||
|
||||
declare module '@deepseek-ai/dsh-client-ui-slots' {
|
||||
interface SlotMap {
|
||||
/**
|
||||
* One settings page per list entry. Registrant options carry the nav
|
||||
* identity: `id` (section key, drives `only` filtering), `order` (nav
|
||||
* position), `label` (registrant-localized display text — the registrant
|
||||
* re-registers with fresh text on locale change, so the shell never
|
||||
* subscribes locale/theme state; the ledger bump doubles as the shell's
|
||||
* re-render trigger). Sections render inside the panel content column.
|
||||
*/
|
||||
'settings.section': { kind: 'list'; scope: 'root'; owner: SettingsSectionOwnerProps }
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Owner share of a settings section entry. The shell owns modal visibility
|
||||
* and navigation; sections receive nothing but the render site (their data
|
||||
* arrives through their own inject faces and stores).
|
||||
*/
|
||||
export interface SettingsSectionOwnerProps {
|
||||
/** Marker field: section owner props are intentionally empty for now. */
|
||||
children?: never
|
||||
}
|
||||
|
||||
/**
|
||||
* Registrant-private injected share of the settings shell (assembled in
|
||||
* apply): locale-resolved nav labels come through `translate`.
|
||||
*/
|
||||
export type SettingsRootInjected = {
|
||||
/**
|
||||
* Resolve a "<ns>:<key>" locale reference to the active-locale text —
|
||||
* shell chrome copy only (trigger/title/close); nav labels arrive already
|
||||
* localized. Read at render time; the locale-change re-render rides the
|
||||
* section ledger bump, not a shell-owned subscription.
|
||||
*/
|
||||
translate: (ref: string) => string
|
||||
/** Read the settings.section ledger version (nav invalidation). */
|
||||
sectionsVersion: () => number
|
||||
/** Subscribe to settings.section ledger changes. */
|
||||
subscribeSections: (listener: () => void) => () => void
|
||||
/** Project the settings.section ledger into nav rows (id/order/label). */
|
||||
sections: () => readonly { id: string; order: number; label: string }[]
|
||||
}
|
||||
|
||||
/**
|
||||
* Full component props of the settings shell root: the sidebar owner share
|
||||
* (wide/rail state) plus the declared section render share and the injected
|
||||
* face. No store is registered — modal open state and active section id are
|
||||
* component-local viewing state.
|
||||
*/
|
||||
export type SettingsRootComponentProps =
|
||||
PropsRuntime<'sidebar.settings'> & PropsRenderSlots<'settings.section'> & SettingsRootInjected
|
||||
@@ -0,0 +1,66 @@
|
||||
/**
|
||||
* Settings shell plugin, browser half. Occupies the sidebar-owned
|
||||
* `sidebar.settings` hole with the trigger row + modal panel, declares the
|
||||
* `settings.section` list slot, and projects that ledger into the panel
|
||||
* navigation. Export discipline: packages/client/AGENTS.md.
|
||||
*/
|
||||
import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
|
||||
// Type-only: pulls the locale plugin's Context/Events merges (ctx.locale,
|
||||
// 'locale/change') into this program.
|
||||
import type {} from '@deepseek-ai/dsh-client-locale/client'
|
||||
import type { SettingsRootInjected } from './contract/slots.ts'
|
||||
import { SettingsRoot } from './SettingsRoot.tsx'
|
||||
|
||||
export type { SettingsRootComponentProps, SettingsRootInjected, SettingsSectionOwnerProps } from './contract/slots.ts'
|
||||
|
||||
/**
|
||||
* Required services (cordis fiber inject). The target slot is declared by
|
||||
* ui-sidebar's apply, whose activation order relative to this one is NOT
|
||||
* constrained (dshClient.inject edges are informational); registration goes
|
||||
* through declaration-aware deferral.
|
||||
*/
|
||||
export const inject = ['slots', 'locale']
|
||||
|
||||
/**
|
||||
* Register the settings shell into `sidebar.settings` once the declaration is
|
||||
* on the ledger.
|
||||
* @param ctx - client root context.
|
||||
*/
|
||||
export function apply(ctx: ClientContext): void {
|
||||
ctx.effect(() => {
|
||||
const disposers = [
|
||||
ctx.locale.register('settings', 'zh', { trigger: '设置', title: '设置', close: '关闭' }),
|
||||
ctx.locale.register('settings', 'en', { trigger: 'Settings', title: 'Settings', close: 'Close' }),
|
||||
]
|
||||
return () => { for (const dispose of disposers) dispose() }
|
||||
}, 'ui-settings: shell copy dictionaries')
|
||||
const injected = (): SettingsRootInjected => ({
|
||||
translate: (ref) => {
|
||||
const colon = ref.indexOf(':')
|
||||
if (colon === -1) return ref
|
||||
return ctx.locale.bind(ref.slice(0, colon))(ref.slice(colon + 1))
|
||||
},
|
||||
sectionsVersion: () => ctx.slots.getVersion('settings.section'),
|
||||
subscribeSections: (listener) => ctx.slots.subscribe('settings.section', listener),
|
||||
sections: () => ctx.slots.entries('settings.section')
|
||||
.map(e => ({ id: e.options.id ?? '', order: e.options.order ?? 0, label: e.options.label ?? '' }))
|
||||
.sort((a, b) => a.order - b.order),
|
||||
})
|
||||
ctx.effect(() => {
|
||||
let dispose: (() => void) | undefined
|
||||
const tryRegister = (): void => {
|
||||
if (ctx.slots.spec('sidebar.settings') === undefined || dispose !== undefined) return
|
||||
dispose = ctx.slots.register({
|
||||
name: 'sidebar.settings',
|
||||
children: { 'settings.section': { kind: 'list', scope: 'root' } },
|
||||
inject: injected,
|
||||
}, SettingsRoot)
|
||||
}
|
||||
const unsubscribe = ctx.slots.subscribe('sidebar.settings', () => { tryRegister() })
|
||||
tryRegister()
|
||||
return () => {
|
||||
unsubscribe()
|
||||
dispose?.()
|
||||
}
|
||||
}, 'ui-settings: shell registration')
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
declare module '*.module.css' {
|
||||
const classes: Record<string, string>
|
||||
export default classes
|
||||
}
|
||||
|
||||
declare module '*.css'
|
||||
@@ -0,0 +1,4 @@
|
||||
/** Host loader entry for the browser implementation exported from `./client`. */
|
||||
|
||||
/** Host plugin body — no host-side behavior for the settings shell plugin. */
|
||||
export function apply(): void {}
|
||||
@@ -0,0 +1,32 @@
|
||||
/**
|
||||
* Package-owned invariant companion for `@deepseek-ai/dsh-client-ui-settings`.
|
||||
* @module @deepseek-ai/dsh-client-ui-settings/invariant
|
||||
*/
|
||||
|
||||
/* jscpd:ignore-start */
|
||||
import type { Context } from 'cordis'
|
||||
import type { InvariantInstaller } from '@deepseek-ai/dsh-invariants'
|
||||
|
||||
const PACKAGE_NAME = '@deepseek-ai/dsh-client-ui-settings'
|
||||
|
||||
/** Cordis companion plugin name. */
|
||||
export const name = 'client-ui-settings-invariant'
|
||||
/** Service required before the companion can reserve package ownership. */
|
||||
export const inject = ['invariants']
|
||||
|
||||
/**
|
||||
* No runtime invariant: a presentation shell projecting the settings.section
|
||||
* ledger into navigation — it emits no cordis events and owns no cross-plugin
|
||||
* mutable relation; slot declaration/registration conflicts already fail loud
|
||||
* in the slot core at load time.
|
||||
*/
|
||||
const install: InvariantInstaller = () => {}
|
||||
|
||||
/**
|
||||
* Register this package's invariant companion.
|
||||
* @param ctx - Cordis context carrying the invariant service.
|
||||
* @returns the installed registration's disposer after setup succeeds.
|
||||
*/
|
||||
export const apply = (ctx: Context): Promise<() => void> =>
|
||||
Promise.resolve(ctx.invariants.register(PACKAGE_NAME, install))
|
||||
/* jscpd:ignore-end */
|
||||
Reference in New Issue
Block a user