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:
Menghuan1918
2026-09-11 15:28:49 +08:00
parent a4e94c976e
commit 22e772ce45
46 changed files with 431 additions and 1381 deletions
+1 -1
View File
@@ -162,7 +162,7 @@ export function registerNativeSurface(deps: NativeSurfaceDeps): () => void {
ctx.slots.inject('sidebar.right.pane.tab.title', () => ctx.slots.register({
name: 'sidebar.right.pane.tab.title',
key: id,
inject: () => ({ records }),
inject: () => ({ records, service, descriptorId: injected.descriptorId }),
}, NativeTabTitle)),
]
+45 -7
View File
@@ -31,6 +31,12 @@ import type { BetterSidebarService } from '../service.ts'
import type { SidebarStore, SidebarTab, TabType } from '../state.ts'
import css from '../sidebar.module.css'
/** The chip glyph's size: the tab strip's own icon scale. */
const CHIP_ICON_SIZE = 14
/** The editor kind: a chip for a file row shows the file's own glyph. */
const EDITOR_KIND = 'editor'
/**
* The plugin-side seed a native open carries in `navigation.params`.
* JSON-shaped by convention (the native surface does not validate it).
@@ -330,20 +336,52 @@ export function NativeTabBody(props: NativeBodyInjected & NativeBodyFrameworkPro
/** What a title registration injects. */
export interface NativeTitleInjected {
readonly records: NativeTabRecords
readonly service: BetterSidebarService
/** The descriptor id this title belongs to (one registration per descriptor). */
readonly descriptorId: string
}
/**
* A live tab chip: the synthetic record's title (the editor rewrites it on an
* in-place file switch, the side chat on the thread's first prompt). Without
* this registration the chip would keep the title captured when the tab
* opened.
* A live tab chip: the type's glyph followed by the synthetic record's title
* (the editor rewrites it on an in-place file switch, the side chat on the
* thread's first prompt). Without this registration the chip would keep the
* title captured when the tab opened.
*
* The host's tab definition has no icon field — a chip is drawn from the
* `title` text alone — but this slot IS the chip's content, so the glyph is
* ours to add. Placement follows the plugin's own semantics: an editor tab
* with a path shows that file's icon (the same glyph the tree row shows), and
* every other tab shows its descriptor's icon. Both ride
* `descriptor.icon`, so the workbench strip, the guide capsules and the chip
* cannot drift apart.
*/
export function NativeTabTitle(props: NativeTitleInjected & NativeBodyFrameworkProps): ReactNode {
const { records, useTabInfo } = props
const { records, service, descriptorId, useTabInfo } = props
const nativeTab = useTabInfo().tab
return useSyncExternalStore(
const version = useSyncExternalStore(
listener => records.subscribe(listener),
() => records.get(nativeTab.id)?.tab.title ?? nativeTab.title,
() => records.versionOf(nativeTab.id),
)
const record = records.get(nativeTab.id)
const title = record?.tab.title ?? nativeTab.title
// `version` is read so a title/path/meta mutation re-renders the chip; the
// icon itself is derived from the record, never stored.
void version
const descriptor = service.getTab(descriptorId) ?? service.getTab(record?.tab.type ?? nativeTab.kind)
const path = record?.tab.path
const icon = path !== undefined && descriptorId === EDITOR_KIND
? service.fileIcon(path, CHIP_ICON_SIZE)
: undefined
const glyph = icon ?? (typeof descriptor?.icon === 'function'
? descriptor.icon(CHIP_ICON_SIZE)
: descriptor?.icon)
if (glyph === undefined || glyph === null) return title
return (
<>
{/* Decorative: the chip's accessible name stays the title. */}
<span className={css.chipIcon} aria-hidden="true">{glyph}</span>
{title}
</>
)
}