figmar/apes-sidebar
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions 1 Packages Projects Releases Wiki Activity

feat(icons): file icons and tab glyphs in color, from the host's own artwork

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
src/client/file-icons.tsx
+53 -72
View File
@@ -1,81 +1,62 @@
/**
* Built-in per-extension file glyphs for the file tree (feature: file icons).
* Built-in file and folder glyphs for the file tree (feature: file icons).
*
* All glyphs are VSCodicons consumed as `currentColor` monochrome — the same
* skin contract as every other icon this plugin draws (visual values ride the
* `--dsw-alias-*` tokens, never hardcoded colors). External plugins that want
* colorful icons register their own `FileIconDescriptor`s through
* `ctx.betterSidebar.registerFileIcon` (they own their colors); this map is
* only the fallback nobody claimed.
* The built-in set is DSH's OWN file-type artwork: `FileTypeIcon` from
* `@deepseek-ai/dsh-client-ui-primitives` classifies a path and renders the
* same glyphs the host's own explorer shows — the 48 full-color code and
* configuration categories, plus the category-colored sheet glyphs for
* markdown, images, PDFs, office documents, video, folders and the generic
* fallback. Colored artwork is content, not chrome, and the host draws it
* with its own palette, so this module carries no color literals and stays
* inside the skin contract (the guide's §12).
*
* Nothing here needs a lazy chunk: the artwork belongs to a platform module
* the client already holds in its frozen module table, so the core bundle
* gains a function call rather than 500-odd icon rules.
*
* External plugins that want their own glyphs (per extension, per exact file
* name, per directory name) register `FileIconDescriptor`s through
* `ctx.betterSidebar.registerFileIcon`; their registrations win over these.
*/
import type { ReactNode } from 'react'
import {
VscDatabase, VscFile, VscFileCode, VscFileMedia, VscFilePdf, VscFileZip,
VscFolder, VscFolderOpened, VscJson, VscLock, VscMarkdown, VscSettings,
} from 'react-icons/vsc'
import { extOf } from './paths.ts'
/** One glyph shared by a group of extensions. */
type GlyphFactory = (size: number) => ReactNode
/** The generic file glyph — the fallback for every unclaimed extension. */
export function fallbackFileIcon(size: number): ReactNode {
return <VscFile size={size} />
}
/** The built-in directory glyphs (what a folder row shows unregistered). */
export function builtinFolderIcon(open: boolean, size: number): ReactNode {
return open ? <VscFolderOpened size={size} /> : <VscFolder size={size} />
}
/** One glyph shared by a group of extensions. */
type GlyphGroup = [readonly string[], GlyphFactory]
import { FileTypeIcon } from '@deepseek-ai/dsh-client-ui-primitives'
/**
* Extension → glyph groups. Extensions are lowercase without the leading dot,
* matched case-insensitively by the caller's normalization. Group order is
* documentation only: the flattened lookup below is a Map, so every extension
* key must stay unique (a duplicate would be last-write-wins). The reserved
* folder values (`'folder'`/`'folder-open'`) never appear here — directories
* resolve through `builtinFolderIcon`.
*/
const GROUPS: readonly GlyphGroup[] = [
[['md', 'markdown', 'mdx'], (size) => <VscMarkdown size={size} />],
[['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg', 'bmp', 'ico', 'avif', 'tiff'], (size) => <VscFileMedia size={size} />],
[['pdf'], (size) => <VscFilePdf size={size} />],
[['json', 'jsonc', 'json5'], (size) => <VscJson size={size} />],
[['html', 'htm', 'xhtml', 'xml', 'jsx', 'tsx'], (size) => <VscFileCode size={size} />],
[['css', 'scss', 'sass', 'less', 'styl'], (size) => <VscFileCode size={size} />],
[['js', 'mjs', 'cjs', 'ts', 'mts', 'cts', 'py', 'rs', 'go', 'java', 'kt', 'kts', 'swift', 'rb', 'php', 'c', 'h', 'cpp', 'hpp', 'cs', 'm', 'mm', 'scala', 'sh', 'bash', 'zsh', 'fish', 'lua', 'pl', 'r', 'jl', 'dart', 'ex', 'exs', 'erl', 'hs', 'clj', 'cljs', 'vb', 'fs'], (size) => <VscFileCode size={size} />],
[['yml', 'yaml', 'toml', 'ini', 'cfg', 'conf', 'properties', 'editorconfig'], (size) => <VscSettings size={size} />],
[['sql', 'db', 'sqlite', 'sqlite3'], (size) => <VscDatabase size={size} />],
[['lock'], (size) => <VscLock size={size} />],
[['zip', 'tar', 'gz', 'tgz', 'bz2', 'xz', '7z', 'rar'], (size) => <VscFileZip size={size} />],
]
const LOOKUP: ReadonlyMap<string, GlyphFactory> = new Map(
GROUPS.flatMap(([exts, glyph]) => exts.map((ext) => [ext, glyph] as const)),
)
/**
* The built-in glyph FACTORY claiming a path's extension, or undefined when
* the extension is unclaimed (the caller decides the fallback — the generic
* `VscFile` or a registered catch-all). Exposed as a separate function so
* the service's resolver can distinguish "builtin claims it" from "builtin
* is just its own fallback" without comparing ReactNodes by reference.
*/
export function builtinFileIconOf(path: string): GlyphFactory | undefined {
return LOOKUP.get(extOf(path))
}
/**
* The built-in glyph for a path: its extension's group glyph, or the generic
* `VscFile` when nothing claims it. Pure and synchronous — callers run this
* on every render, so it stays a Map lookup. The no-service fallback path
* for surfaces without the registry (and the last-but-one link of the
* service's `fileIcon` chain).
* A file row: the host's own classifier and artwork for any path. Unknown
* extensions land on the generic document glyph, exactly like the host's
* explorer.
* @param path - the row's path (any separator; the classifier reads the basename).
* @param size - the square edge in px.
* @returns the host's file-type glyph.
*/
export function builtinFileIcon(path: string, size: number): ReactNode {
const glyph = LOOKUP.get(extOf(path))
return glyph === undefined ? fallbackFileIcon(size) : glyph(size)
return <FileTypeIcon path={path} size={size} />
}
/**
* A directory row: the host's folder glyph.
*
* The host ships ONE folder drawing (`kind: 'folder'` resolves to its
* monochrome `IconFolderClose16`, which rides `currentColor` and therefore
* still follows the skin), and the classifier never returns a folder kind of
* its own. The expansion state is already legible from the tree's own chevron
* and row affordances, so this deliberately does not invent a second folder
* drawing.
* @param _open - whether the row is expanded (accepted for API compatibility).
* @param size - the square edge in px.
* @returns the host's folder glyph.
*/
export function builtinFolderIcon(_open: boolean, size: number): ReactNode {
return <FileTypeIcon kind="folder" size={size} />
}
/**
* The last-resort glyph: the host's generic document, for the resolver's leaf
* when no registration and no built-in match applies (and for surfaces that
* render a file row without a service).
* @param size - the square edge in px.
* @returns the host's generic file glyph.
*/
export function fallbackFileIcon(size: number): ReactNode {
return <FileTypeIcon kind="other" size={size} />
}