Implement nested category menus for modules and projects

packages/editor/packages/editor-state/src/effects/menu/categoryTree.test.ts

@@ -0,0 +1,174 @@
+import { describe, it, expect } from 'vitest';
+
+import { buildCategoryTree, flattenCategoryPaths, findNodeByPath, type CategoryItem } from './categoryTree';
+
+describe('categoryTree', () => {
+	describe('buildCategoryTree', () => {
+		it('should build a flat tree from single-level categories', () => {
+			const items: CategoryItem[] = [
+				{ slug: 'item1', title: 'Item 1', category: 'Audio' },
+				{ slug: 'item2', title: 'Item 2', category: 'Effects' },
+				{ slug: 'item3', title: 'Item 3', category: 'Audio' },
+			];
+
+			const tree = buildCategoryTree(items);
+
+			expect(tree.children).toHaveLength(2);
+			expect(tree.children[0].label).toBe('Audio');
+			expect(tree.children[0].items).toHaveLength(2);
+			expect(tree.children[1].label).toBe('Effects');
+			expect(tree.children[1].items).toHaveLength(1);
+		});
+
+		it('should build a nested tree from slash-delimited categories', () => {
+			const items: CategoryItem[] = [
+				{ slug: 'sine', title: 'Sine', category: 'Functions/Trigonometric' },
+				{ slug: 'sigmoid', title: 'Sigmoid', category: 'Functions/Activation' },
+				{ slug: 'quadratic', title: 'Quadratic', category: 'Functions/Polynomial' },
+			];
+
+			const tree = buildCategoryTree(items);
+
+			expect(tree.children).toHaveLength(1);
+			expect(tree.children[0].label).toBe('Functions');
+			expect(tree.children[0].path).toBe('Functions');
+			expect(tree.children[0].children).toHaveLength(3);
+
+			const trigNode = tree.children[0].children.find(c => c.label === 'Trigonometric');
+			expect(trigNode).toBeDefined();
+			expect(trigNode!.path).toBe('Functions/Trigonometric');
+			expect(trigNode!.items).toHaveLength(1);
+			expect(trigNode!.items[0].slug).toBe('sine');
+		});
+
+		it('should sort categories and items alphabetically', () => {
+			const items: CategoryItem[] = [
+				{ slug: 'item1', title: 'Zebra', category: 'Zoo' },
+				{ slug: 'item2', title: 'Apple', category: 'Fruit' },
+				{ slug: 'item3', title: 'Banana', category: 'Fruit' },
+				{ slug: 'item4', title: 'Yak', category: 'Zoo' },
+			];
+
+			const tree = buildCategoryTree(items);
+
+			// Categories should be alphabetical
+			expect(tree.children[0].label).toBe('Fruit');
+			expect(tree.children[1].label).toBe('Zoo');
+
+			// Items within categories should be alphabetical
+			expect(tree.children[0].items[0].title).toBe('Apple');
+			expect(tree.children[0].items[1].title).toBe('Banana');
+			expect(tree.children[1].items[0].title).toBe('Yak');
+			expect(tree.children[1].items[1].title).toBe('Zebra');
+		});
+
+		it('should handle empty categories by using "Uncategorized"', () => {
+			const items: CategoryItem[] = [
+				{ slug: 'item1', title: 'Item 1', category: '' },
+				{ slug: 'item2', title: 'Item 2', category: 'Audio' },
+			];
+
+			const tree = buildCategoryTree(items);
+
+			expect(tree.children).toHaveLength(2);
+			const uncategorized = tree.children.find(c => c.label === 'Uncategorized');
+			expect(uncategorized).toBeDefined();
+			expect(uncategorized!.items).toHaveLength(1);
+		});
+
+		it('should handle mixed depth categories', () => {
+			const items: CategoryItem[] = [
+				{ slug: 'item1', title: 'Item 1', category: 'Audio' },
+				{ slug: 'item2', title: 'Item 2', category: 'Audio/Effects' },
+				{ slug: 'item3', title: 'Item 3', category: 'Audio/Effects/Reverb' },
+			];
+
+			const tree = buildCategoryTree(items);
+
+			expect(tree.children).toHaveLength(1);
+			expect(tree.children[0].label).toBe('Audio');
+			expect(tree.children[0].items).toHaveLength(1);
+			expect(tree.children[0].children).toHaveLength(1);
+			expect(tree.children[0].children[0].label).toBe('Effects');
+			expect(tree.children[0].children[0].items).toHaveLength(1);
+			expect(tree.children[0].children[0].children).toHaveLength(1);
+			expect(tree.children[0].children[0].children[0].label).toBe('Reverb');
+			expect(tree.children[0].children[0].children[0].items).toHaveLength(1);
+		});
+
+		it('should trim whitespace from category segments', () => {
+			const items: CategoryItem[] = [{ slug: 'item1', title: 'Item 1', category: '  Audio  /  Effects  ' }];
+
+			const tree = buildCategoryTree(items);
+
+			expect(tree.children[0].label).toBe('Audio');
+			expect(tree.children[0].children[0].label).toBe('Effects');
+		});
+	});
+
+	describe('flattenCategoryPaths', () => {
+		it('should return all category paths in a flat list', () => {
+			const items: CategoryItem[] = [
+				{ slug: 'sine', title: 'Sine', category: 'Functions/Trigonometric' },
+				{ slug: 'sigmoid', title: 'Sigmoid', category: 'Functions/Activation' },
+				{ slug: 'audio1', title: 'Audio 1', category: 'Audio' },
+			];
+
+			const tree = buildCategoryTree(items);
+			const paths = flattenCategoryPaths(tree);
+
+			expect(paths).toContain('Functions');
+			expect(paths).toContain('Functions/Trigonometric');
+			expect(paths).toContain('Functions/Activation');
+			expect(paths).toContain('Audio');
+		});
+
+		it('should return empty array for empty tree', () => {
+			const tree = buildCategoryTree([]);
+			const paths = flattenCategoryPaths(tree);
+
+			expect(paths).toHaveLength(0);
+		});
+	});
+
+	describe('findNodeByPath', () => {
+		const items: CategoryItem[] = [
+			{ slug: 'sine', title: 'Sine', category: 'Functions/Trigonometric' },
+			{ slug: 'sigmoid', title: 'Sigmoid', category: 'Functions/Activation' },
+			{ slug: 'audio1', title: 'Audio 1', category: 'Audio' },
+		];
+
+		it('should find a node by its full path', () => {
+			const tree = buildCategoryTree(items);
+			const node = findNodeByPath(tree, 'Functions/Trigonometric');
+
+			expect(node).not.toBeNull();
+			expect(node!.label).toBe('Trigonometric');
+			expect(node!.items).toHaveLength(1);
+			expect(node!.items[0].slug).toBe('sine');
+		});
+
+		it('should find intermediate nodes', () => {
+			const tree = buildCategoryTree(items);
+			const node = findNodeByPath(tree, 'Functions');
+
+			expect(node).not.toBeNull();
+			expect(node!.label).toBe('Functions');
+			expect(node!.children).toHaveLength(2);
+		});
+
+		it('should return root for empty path', () => {
+			const tree = buildCategoryTree(items);
+			const node = findNodeByPath(tree, '');
+
+			expect(node).toBe(tree);
+		});
+
+		it('should return null for non-existent path', () => {
+			const tree = buildCategoryTree(items);
+			const node = findNodeByPath(tree, 'NonExistent/Path');
+
+			expect(node).toBeNull();
+		});
+	});
+});

packages/editor/packages/editor-state/src/effects/menu/categoryTree.ts

@@ -0,0 +1,146 @@
+/**
+ * Utility for building nested category trees from flat lists with slash-delimited categories.
+ */
+
+export interface CategoryItem {
+	slug: string;
+	title: string;
+	category: string;
+}
+
+export interface CategoryTreeNode {
+	/** Path segment at this level (e.g., "Functions" in "Functions/Trigonometric") */
+	label: string;
+	/** Full path to this node (e.g., "Functions/Trigonometric") */
+	path: string;
+	/** Child category nodes */
+	children: CategoryTreeNode[];
+	/** Leaf items at this category level */
+	items: CategoryItem[];
+}
+
+/**
+ * Builds a nested category tree from a flat list of items with slash-delimited categories.
+ * Categories are split by "/" to create hierarchy (e.g., "Functions/Trigonometric").
+ * Empty categories default to "Uncategorized".
+ * Results are sorted alphabetically at each level.
+ *
+ * @param items - List of items with category, slug, and title
+ * @returns Root node containing the tree structure
+ */
+export function buildCategoryTree(items: CategoryItem[]): CategoryTreeNode {
+	const root: CategoryTreeNode = {
+		label: '',
+		path: '',
+		children: [],
+		items: [],
+	};
+
+	// Group items by their full category path
+	const categorizedItems = items.map(item => ({
+		...item,
+		category: item.category || 'Uncategorized',
+	}));
+
+	// Build tree structure
+	for (const item of categorizedItems) {
+		const segments = item.category.split('/').filter(s => s.trim());
+		let currentNode = root;
+		let currentPath = '';
+
+		// Navigate/create path through tree
+		for (let i = 0; i < segments.length; i++) {
+			const segment = segments[i].trim();
+			currentPath = currentPath ? `${currentPath}/${segment}` : segment;
+
+			// Find or create child node for this segment
+			let childNode = currentNode.children.find(c => c.label === segment);
+			if (!childNode) {
+				childNode = {
+					label: segment,
+					path: currentPath,
+					children: [],
+					items: [],
+				};
+				currentNode.children.push(childNode);
+			}
+			currentNode = childNode;
+		}
+
+		// Add item to the leaf node
+		currentNode.items.push(item);
+	}
+
+	// Sort all levels alphabetically
+	sortTreeNode(root);
+
+	return root;
+}
+
+/**
+ * Recursively sorts a tree node's children and items alphabetically.
+ */
+function sortTreeNode(node: CategoryTreeNode): void {
+	// Sort child nodes by label
+	node.children.sort((a, b) => a.label.localeCompare(b.label));
+
+	// Sort items by title
+	node.items.sort((a, b) => a.title.localeCompare(b.title));
+
+	// Recursively sort children
+	for (const child of node.children) {
+		sortTreeNode(child);
+	}
+}
+
+/**
+ * Flattens a category tree into a list of category paths.
+ * Used for generating category menu items.
+ *
+ * @param node - Root or intermediate tree node
+ * @returns List of category paths (e.g., ["Audio", "Functions/Trigonometric"])
+ */
+export function flattenCategoryPaths(node: CategoryTreeNode): string[] {
+	const paths: string[] = [];
+
+	function traverse(n: CategoryTreeNode) {
+		// Add this node's path if it has items or children
+		if (n.path && (n.items.length > 0 || n.children.length > 0)) {
+			paths.push(n.path);
+		}
+
+		// Traverse children
+		for (const child of n.children) {
+			traverse(child);
+		}
+	}
+
+	traverse(node);
+	return paths;
+}
+
+/**
+ * Finds a node in the tree by its full path.
+ *
+ * @param root - Root tree node
+ * @param path - Full category path (e.g., "Functions/Trigonometric")
+ * @returns The node at the path, or null if not found
+ */
+export function findNodeByPath(root: CategoryTreeNode, path: string): CategoryTreeNode | null {
+	if (!path) {
+		return root;
+	}
+
+	const segments = path.split('/').filter(s => s.trim());
+	let currentNode: CategoryTreeNode | null = root;
+
+	for (const segment of segments) {
+		const nextNode: CategoryTreeNode | undefined = currentNode?.children.find(c => c.label === segment);
+		if (!nextNode) {
+			return null;
+		}
+		currentNode = nextNode;
+	}
+
+	return currentNode;
+}