A tree view row cannot be styled: no border, no spacing, and a long file
name gets middle-ellipsized in a narrow strip — which on a real project left
"ClientDogSurger...nionBehaviour.cs" and hid the project text entirely.
Drawing the rows means controlling all of it.
- A coloured left border per project instead of a tinted icon, so the file
icon slot is free and the name gets the width. The border uses
var(--vscode-verticalTabs-projectN): VS Code injects every contributed
theme colour into a webview, so overrides in colorCustomizations still
apply and nothing is hardcoded.
- The name is split into stem and extension, and only the stem ellipsizes,
so ".cs" survives on a long name in a narrow view.
- Configurable row spacing and border width, a rule under the pinned block,
a dirty dot that the close button replaces on hover, italics for preview
and for tabs that cannot be focused.
- Selection, arrow/Home/End/Enter/Delete keys, middle-click to close, and an
HTML context menu, since contributes.menus does not reach webview rows.
- Clicking a webview row posts nothing rather than asking for an open that
would silently do nothing.
Actions moved to actions.ts so the wiring, the view and the tests share one
implementation; extension.ts is now just registration. The per-row commands
are gone — rows act through webview messages — and the palette keeps
close / closeOthers / togglePin acting on the active editor.
Verified in a browser harness at side-bar width: all twelve project colours
resolve, rows stay a consistent 24px, and click, pin, close, middle-click,
keyboard and both context-menu variants post the right intents.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
