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>

tests/editor/asset-groups.test.ts

@@ -0,0 +1,55 @@
+import { describe, expect, it } from 'vitest';
+import type { Asset } from '../../src/core/model/Asset';
+import { ASSET_TYPE_LABELS, ASSET_TYPES, type AssetType } from '../../src/core/model/AssetTypes';
+import { ASSET_GROUP_LABELS, groupAssets } from '../../src/editor/panels/assetGroups';
+
+let serial = 0;
+const asset = (type: AssetType, name: string): Asset =>
+  ({ id: `a${++serial}`, type, name, props: {} }) as unknown as Asset;
+
+const shape = (assets: Asset[]) => groupAssets(assets).map((g) => [g.type, g.assets.map((a) => a.name)]);
+
+describe('groupAssets (#176)', () => {
+  it('puts every asset into the group of its type, and no empty group', () => {
+    const assets = [asset('texture', 'Sheet'), asset('sprite', 'Hero'), asset('texture', 'Tiles')];
+    expect(shape(assets)).toEqual([
+      ['sprite', ['Hero']],
+      ['texture', ['Sheet', 'Tiles']],
+    ]);
+  });
+
+  it('sorts the groups by their heading, not by type or declaration order', () => {
+    const types = [...ASSET_TYPES].reverse();
+    const headings = groupAssets(types.map((t) => asset(t, 'x'))).map((g) => ASSET_GROUP_LABELS[g.type]);
+    expect(headings).toEqual([...headings].sort((a, b) => a.localeCompare(b)));
+    expect(headings).toHaveLength(ASSET_TYPES.length);
+    // By heading: "State machines" sorts under S, the type key `statemachine` would not tell.
+    expect(headings.indexOf('Sprites')).toBeLessThan(headings.indexOf('State machines'));
+  });
+
+  it('sorts the assets in a group by name, ignoring case and reading numbers as numbers', () => {
+    const assets = ['Level 10', 'level 2', 'Boss', 'Level 1', 'arena'].map((n) => asset('scene', n));
+    expect(shape(assets)).toEqual([['scene', ['arena', 'Boss', 'Level 1', 'level 2', 'Level 10']]]);
+  });
+
+  it('keeps the project order among equal names', () => {
+    const first = asset('sprite', 'Coin');
+    const second = asset('sprite', 'coin');
+    expect(groupAssets([first, second])[0]!.assets).toEqual([first, second]);
+    expect(groupAssets([second, first])[0]!.assets).toEqual([second, first]);
+  });
+
+  it('leaves the project list alone', () => {
+    const assets = [asset('sprite', 'B'), asset('sprite', 'A')];
+    groupAssets(assets);
+    expect(assets.map((a) => a.name)).toEqual(['B', 'A']);
+  });
+
+  it('names a heading like a + menu entry only where the type is plural anyway', () => {
+    // A click by text takes the first hit, and the panel is drawn before any menu.
+    const entries = new Set(Object.values(ASSET_TYPE_LABELS));
+    // Variables and Particles are already plural; nothing else may collide.
+    const clashes = Object.values(ASSET_GROUP_LABELS).filter((label) => entries.has(label));
+    expect(clashes.sort()).toEqual(['Particles', 'Variables']);
+  });
+});