feat(icons): file icons and tab glyphs in color, from the host's own artwork
Issue #611 asked for file-type icons like the official explorer's, and #429 built a colored theme for them. DSH 0.1.5-rc.2 makes most of that work unnecessary: `@deepseek-ai/dsh-client-ui-primitives` now exports `FileTypeIcon` / `CodeFileIcon` with the host's own 48-type full-color code artwork plus category-colored sheet glyphs (and its classifier behind them). So the plugin renders the host's icons instead of shipping a color table, and color becomes the only behaviour rather than an opt-in theme. File icons (src/client/file-icons.tsx) - `builtinFileIcon(path, size)` → `<FileTypeIcon path size />`; folders use the host's folder category. The plugin's own per-extension VSCodicon map is gone. - The public `registerFileIcon` API from #531 is unchanged and still outranks the built-ins, so an external plugin can take over any row. One semantic consequence, now documented and tested: because the host classifier covers every path, a registered catch-all (`exts: []`) claims rows it used to lose to the built-in map. An unregistered catch-all (the old icon theme's shape) is unaffected. - Nothing is lazy any more: the artwork lives in a platform module the client already holds, so `lib/client-file-icons.js` and its 563-entry dataset (255 kB) are deleted outright — the core bundle grew by 10 kB (0.85 → 0.86 MB). - `src/client/file-icon-theme.ts`, the `fileIconTheme` pref (prefs-shared / config / client prefs), the settings-page select row and the six `settingsFileIconTheme*` keys in all 20 dictionaries are removed with it. Tab glyphs (src/client/builtins/tab-icons.tsx) - Every built-in tab type now declares a colored glyph: files (the host's folder artwork), changes/diff (commit), tasks (checklist), side chat (discussion), terminal (shell), browser (globe). - The color comes from a `--dsw-alias-*` token through a wrapper class, never from a literal — the skin contract (§12) holds and `tests/theme.spec.ts` enforces both halves (no literals in the module, every color declaration in the stylesheet resolves to a token). Native right Sidebar chips (src/client/native/tab-adapter.tsx) - The host's tab definition has no icon field, but the `sidebar.right.pane.tab.title` slot IS the chip's content, so the plugin draws the glyph itself: an editor tab with a path shows that file's icon, every other tab shows its descriptor's icon — the same `descriptor.icon` the workbench strip and the guide capsules already render, so the three cannot drift. The glyph is `aria-hidden`, which keeps the chip's accessible name exactly the title the mount lane matches on. Gates: typecheck / lint / check:consumer-types green; pnpm test 127 files / 1342 passed / 9 skipped (3 new chip cases, 1 rewritten built-in case).
This commit is contained in:
@@ -8,7 +8,7 @@ import { describe, expect, it, vi } from 'vitest'
|
||||
import { createElement } from 'react'
|
||||
import { createRoot, type Root } from 'react-dom/client'
|
||||
import { act } from 'react-dom/test-utils'
|
||||
import { createNativeTabRecords, NativeTabBody } from '../src/client/native/tab-adapter.tsx'
|
||||
import { createNativeTabRecords, NativeTabBody, NativeTabTitle } from '../src/client/native/tab-adapter.tsx'
|
||||
import { registerNativeSurface } from '../src/client/native/index.ts'
|
||||
import { createBetterSidebarService, type SidebarSurface } from '../src/client/service.ts'
|
||||
import { createSidebarStore } from '../src/client/state.ts'
|
||||
@@ -310,3 +310,111 @@ describe('NativeTabBody full-height host wrapper', () => {
|
||||
host.remove()
|
||||
})
|
||||
})
|
||||
|
||||
/**
|
||||
* The native tab CHIP: the host's tab definition carries no icon field, so
|
||||
* the plugin draws the glyph itself inside the `sidebar.right.pane.tab.title`
|
||||
* slot (which IS the chip's content). These cases pin the placement rule —
|
||||
* an editor tab with a path shows the FILE's glyph, every other tab shows its
|
||||
* descriptor's glyph — and the accessible-name boundary: the glyph is
|
||||
* decorative, so the chip's name stays exactly the title the e2e lane matches
|
||||
* with `getByRole('tab', { name })`.
|
||||
*/
|
||||
describe('NativeTabTitle (the chip glyph)', () => {
|
||||
const renderTitle = (
|
||||
records: ReturnType<typeof createNativeTabRecords>,
|
||||
service: ReturnType<typeof createBetterSidebarService>,
|
||||
info: unknown,
|
||||
descriptorId: string,
|
||||
): { host: HTMLDivElement; unmount: () => void } => {
|
||||
const host = document.createElement('div')
|
||||
document.body.appendChild(host)
|
||||
let root: Root | undefined
|
||||
act(() => {
|
||||
root = createRoot(host)
|
||||
root.render(createElement(NativeTabTitle, {
|
||||
records,
|
||||
service,
|
||||
descriptorId,
|
||||
useTabInfo: () => info as never,
|
||||
}))
|
||||
})
|
||||
return {
|
||||
host,
|
||||
unmount: () => {
|
||||
act(() => { root?.unmount() })
|
||||
host.remove()
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
const nativeInfo = (id: string, kind: string, title: string) => ({
|
||||
tab: {
|
||||
id,
|
||||
kind,
|
||||
title,
|
||||
contentId: `sidebar://${id}`,
|
||||
visible: true,
|
||||
navigation: { address: `sidebar://${id}`, params: undefined, revision: 0 },
|
||||
signal: new AbortController().signal,
|
||||
},
|
||||
})
|
||||
|
||||
it('draws the descriptor glyph before the live title', () => {
|
||||
const records = createNativeTabRecords()
|
||||
const service = createBetterSidebarService(createSidebarStore())
|
||||
service.registerTab({
|
||||
id: 'stub-tab',
|
||||
title: () => 'Stub',
|
||||
icon: (size: number) => createElement('i', { 'data-stub-icon': size }),
|
||||
component: () => createElement('div'),
|
||||
})
|
||||
records.ensure({ id: 'chip-1', kind: 'stub-tab', title: 'Stub', params: undefined, scope })
|
||||
|
||||
const { host, unmount } = renderTitle(records, service, nativeInfo('chip-1', 'stub-tab', 'Stub'), 'stub-tab')
|
||||
const chip = host.querySelector('[aria-hidden="true"]')
|
||||
expect(chip, 'the chip must carry a decorative glyph').not.toBeNull()
|
||||
expect(chip!.querySelector('[data-stub-icon="14"]'), 'the descriptor icon renders at the chip scale').not.toBeNull()
|
||||
expect(host.textContent, 'the title follows the glyph').toBe('Stub')
|
||||
expect(host.querySelector('[role="tab"]'), 'the chip itself is the host’s element, not the plugin’s').toBeNull()
|
||||
unmount()
|
||||
})
|
||||
|
||||
it('an editor tab with a path shows the FILE glyph instead of the type glyph', () => {
|
||||
const records = createNativeTabRecords()
|
||||
const service = createBetterSidebarService(createSidebarStore())
|
||||
service.registerTab({
|
||||
id: 'editor',
|
||||
title: () => 'Files',
|
||||
icon: (size: number) => createElement('i', { 'data-type-icon': size }),
|
||||
component: () => createElement('div'),
|
||||
})
|
||||
records.ensure({
|
||||
id: 'chip-2',
|
||||
kind: 'editor',
|
||||
title: 'notes.md',
|
||||
params: { path: '/work/notes.md' },
|
||||
scope,
|
||||
})
|
||||
|
||||
const { host, unmount } = renderTitle(records, service, nativeInfo('chip-2', 'editor', 'notes.md'), 'editor')
|
||||
expect(host.querySelector('[data-type-icon]'), 'the type glyph must NOT be used for a file tab').toBeNull()
|
||||
// The file glyph is the host's own FileTypeIcon (its component identity is
|
||||
// asserted through the resolver tests); here the point is that a glyph is
|
||||
// drawn and the title is intact.
|
||||
expect(host.querySelector('[aria-hidden="true"]')).not.toBeNull()
|
||||
expect(host.textContent).toBe('notes.md')
|
||||
unmount()
|
||||
})
|
||||
|
||||
it('falls back to the title alone when the type is gone (unregistered descriptor)', () => {
|
||||
const records = createNativeTabRecords()
|
||||
const service = createBetterSidebarService(createSidebarStore())
|
||||
records.ensure({ id: 'chip-3', kind: 'ghost', title: 'Ghost', params: undefined, scope })
|
||||
|
||||
const { host, unmount } = renderTitle(records, service, nativeInfo('chip-3', 'ghost', 'Ghost'), 'ghost')
|
||||
expect(host.querySelector('[aria-hidden="true"]')).toBeNull()
|
||||
expect(host.textContent).toBe('Ghost')
|
||||
unmount()
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user