mirror of
https://github.com/deepseek-ai/deepseek-harness
synced 2026-08-15 21:04:50 +00:00
6e721b9fdd
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.
57 lines
2.7 KiB
TypeScript
57 lines
2.7 KiB
TypeScript
// @vitest-environment jsdom
|
|
// ThemePresenter behavior account: the palette attribute follows
|
|
// active.colorScheme only, token variables replace the previous apply's set,
|
|
// and dispose retracts everything the presenter wrote.
|
|
|
|
import { beforeEach, describe, expect, it } from 'vitest'
|
|
import type { ThemeSnapshot } from '@deepseek-ai/dsh-client-ui-theme/client'
|
|
import { DARK_ATTRIBUTE, ThemePresenter } from '@deepseek-ai/dsh-client-ui-layout/src/client/theme-presenter.ts'
|
|
|
|
function snapshot(colorScheme: 'light' | 'dark', tokens: Record<string, string> = {}): ThemeSnapshot {
|
|
// The presenter must key off colorScheme, not the id — keep them distinct.
|
|
const active = { id: `${colorScheme}-test`, colorScheme, tokens }
|
|
return { preference: colorScheme, active, themes: [active], revision: 1 }
|
|
}
|
|
|
|
beforeEach(() => {
|
|
document.body.removeAttribute(DARK_ATTRIBUTE)
|
|
document.body.removeAttribute('style')
|
|
})
|
|
|
|
describe('ThemePresenter', () => {
|
|
it('light scheme leaves the dark attribute absent', () => {
|
|
const presenter = new ThemePresenter()
|
|
presenter.apply(snapshot('light'))
|
|
expect(document.body.hasAttribute(DARK_ATTRIBUTE)).toBe(false)
|
|
})
|
|
|
|
it('dark scheme sets the attribute; switching back to light removes it', () => {
|
|
const presenter = new ThemePresenter()
|
|
presenter.apply(snapshot('dark'))
|
|
expect(document.body.hasAttribute(DARK_ATTRIBUTE)).toBe(true)
|
|
presenter.apply(snapshot('light'))
|
|
expect(document.body.hasAttribute(DARK_ATTRIBUTE)).toBe(false)
|
|
})
|
|
|
|
it('applies tokens as inline variables and clears the previous set on theme change', () => {
|
|
const presenter = new ThemePresenter()
|
|
presenter.apply(snapshot('dark', { '--dsw-alias-bg': '#111', '--dsw-alias-fg': '#eee' }))
|
|
expect(document.body.style.getPropertyValue('--dsw-alias-bg')).toBe('#111')
|
|
expect(document.body.style.getPropertyValue('--dsw-alias-fg')).toBe('#eee')
|
|
presenter.apply(snapshot('light', { '--dsw-alias-bg': '#fff' }))
|
|
expect(document.body.style.getPropertyValue('--dsw-alias-bg')).toBe('#fff')
|
|
// The old theme's extra variable is gone, not merged.
|
|
expect(document.body.style.getPropertyValue('--dsw-alias-fg')).toBe('')
|
|
})
|
|
|
|
it('dispose removes the attribute and every applied variable, sparing foreign inline styles', () => {
|
|
document.body.style.setProperty('--foreign', 'kept')
|
|
const presenter = new ThemePresenter()
|
|
presenter.apply(snapshot('dark', { '--dsw-alias-bg': '#111' }))
|
|
presenter.dispose()
|
|
expect(document.body.hasAttribute(DARK_ATTRIBUTE)).toBe(false)
|
|
expect(document.body.style.getPropertyValue('--dsw-alias-bg')).toBe('')
|
|
expect(document.body.style.getPropertyValue('--foreign')).toBe('kept')
|
|
})
|
|
})
|