Asset panel grouped by kind with icons: assets are listed under a header per kind (Sprites, Behaviors, ...) with the count on the right, empty groups are not shown, every group starts folded when a project is opened, a click on the header folds and unfolds it, selecting an asset elsewhere unfolds its group and folding the group of the selected asset clears the selection; every asset kind has an SVG icon in src/editor/panels/icons/ drawn before the name, the pure rule for grouping and sorting lives in assetGroups.ts; the same icons replace the kind word in document tabs and the overflow menu (a list icon for the List tab, which also fixes the close x lying over the end of the active tab's text), stand before every entry of the + menu (Button got an icon option) and on the right of scene object rows instead of the type name; the colour swatch next to sprite names is gone from both panels; the SVG loader moved to src/ui/svg.ts for both icon sets; test hook assetRow unfolds the group and scrolls to the row, assetRowShown only reads, new hook menuIcons; e2e 4g and 4h, 14 and 44a check the icons (#176)

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/editor/Editor.ts

@@ -36,6 +36,7 @@ import { resolveList } from './list/slot';
 import { AnimationEditor } from './animation/AnimationEditor';
 import { TileEditor } from './tile/TileEditor';
 import { AssetPanel } from './panels/AssetPanel';
+import { ASSET_ICON_SVG, LIST_ICON_SVG } from './panels/assetIcons';
 import { HierarchyPanel } from './panels/HierarchyPanel';
 import { TilemapPanel } from './panels/TilemapPanel';
 import { Toolbar } from './panels/Toolbar';
@@ -96,7 +97,7 @@ const PANE_ORDER = [
   'plugins',
 ] as const;
 
-/** The fixed tabs' names, and the kind shown in front of a document's. */
+/** The fixed tabs' names, and a document's kind as a word (its tab shows the icon). */
 const TAB_LABELS: Record<CentreTab, string> = {
   scene: 'Scene',
   game: 'Game',
@@ -526,6 +527,12 @@ export class Editor implements PlayHost {
     return findAsset(this.state.project, doc.slice('asset:'.length))?.name ?? '';
   }
 
+  /** The icon in front of a document's name: its asset type's, as in the asset panel. */
+  private iconOf(doc: DocumentId): string {
+    const type = doc === 'list' ? undefined : findAsset(this.state.project, doc.slice('asset:'.length))?.type;
+    return type ? ASSET_ICON_SVG[type] : LIST_ICON_SVG;
+  }
+
   /** Brings the row in line with `documents`: new tabs in their place, gone ones out, names current. */
   private syncStrip(): void {
     for (const tab of [...this.tabs.tabs])
@@ -536,6 +543,7 @@ export class Editor implements PlayHost {
       if (!this.tabs.has(doc) && kind)
         this.tabs.addTab(doc, this.labelOf(doc), base + index, {
           kind: TAB_LABELS[kind],
+          icon: this.iconOf(doc),
           onClose: () => this.closeDocument(doc),
         });
       else this.tabs.setLabel(doc, this.labelOf(doc));