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
+12 -12
View File
@@ -27,7 +27,7 @@ import {
type SidebarSnapshot, type SidebarState, type SidebarStore, type SidebarTab, type TabType,
} from './state.ts'
import { baseName, extOf } from './paths.ts'
import { builtinFileIconOf, builtinFolderIcon, fallbackFileIcon } from './file-icons.tsx'
import { builtinFileIcon, builtinFolderIcon } from './file-icons.tsx'
import type { SessionScope } from './api.ts'
import type { SidebarPrefs } from '../prefs-shared.ts'
@@ -491,9 +491,11 @@ export interface BetterSidebarService {
* the whole chain with per-factory crash isolation:
* 1. a specific registered name or extension (priority desc, registration
* order),
* 2. the built-in monochrome glyph map (md/media/pdf/json/code/...),
* 3. the best registered global default (`exts: []`, priority desc),
* 4. the generic `VscFile`.
* 2. the best registered global default (`exts: []`, priority desc) — an
* external plugin that registers a catch-all owns every row the host's
* classifier would otherwise draw,
* 3. the host's own `FileTypeIcon` artwork (feature `fileIcons`, DSH's
* classifier and glyphs — the plugin ships no extension table).
* A throwing factory is logged (console.error) and skipped — the caller
* always gets a valid ReactNode.
*/
@@ -799,29 +801,27 @@ export function createBetterSidebarService(store: SidebarStore): BetterSidebarSe
}
// The authoritative file-icon chain (see the interface doc): specific name
// or extension registration → built-in glyph → best catch-all → stock
// VscFile. The catch-all ranks by priority desc then registration order
// (first wins); an unclaimed extension reaching it is exactly "nothing
// specified falls back to the (registered or stock) default".
// or extension registration → registered catch-all → the host's own
// file-type artwork. The catch-all ranks by priority desc then registration
// order (first wins), which is what lets an external plugin own "every
// extension I did not name" without also owning the ones DSH draws.
const fileIcon = (path: string, size: number): ReactNode => {
const specific = matchFileIcon(path)
if (specific !== undefined) {
const icon = safeIcon(specific, path, size)
if (icon !== undefined) return icon
}
const builtin = builtinFileIconOf(path)
if (builtin !== undefined) return builtin(size)
for (const d of rankedFileIcons()) {
if (d.exts !== undefined && d.exts.length === 0) {
const icon = safeIcon(d, path, size)
if (icon !== undefined) return icon
}
}
return fallbackFileIcon(size)
return builtinFileIcon(path, size)
}
// Directory rows: registered folderNames/folder/folder-open icon, else the
// built-in VSCodicons glyphs. The row's path feeds the factory (a theme may
// host's folder glyph. The row's path feeds the factory (a registration may
// vary icons per directory) and `open` lets one descriptor render both
// states.
const folderIcon = (path: string, open: boolean, size: number): ReactNode => {