Implement nested category menus for modules and projects #177

Copilot · 2025-12-17T15:04:45Z

Nested Example Menus Implementation - Complete ✅

This PR implements nested category menus for modules and projects using slash-delimited category paths (e.g., Functions/Trigonometric).

Changes Made

Key Features

✅ Nested Categories: Categories with / are split into submenus (e.g., Functions/Trigonometric)
✅ Alphabetical Sorting: All categories and items are sorted alphabetically at each level
✅ Mixed Depth Support: Handles items at various nesting levels in the same tree
✅ Graceful Defaults: Empty categories default to "Uncategorized"
✅ Clean Implementation: No legacy code - only the new nested menu system with clear, readable sorting logic

Test Coverage

All 70 test files pass (468 tests total)
New tests cover:
- Flat category lists
- Nested category paths (single and multi-level)
- Alphabetical sorting
- Empty/missing categories
- Menu generation for modules and projects

Example Categories Added

Modules: Functions/Trigonometric, Functions/Activation, Machine Learning/Functions, etc.
Projects: Audio, MIDI, Machine Learning, Effects, Generators, etc.

The nested menu system provides better organization for the growing library of modules and projects, making it easier to discover and navigate examples.

Original prompt

Please do this: docs/todos/126-nested-example-menus.md

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

Co-authored-by: andorthehood <[email protected]>

andorthehood · 2025-12-17T15:16:29Z

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

+};
+
 export const projectMenu: MenuGenerator = async state => {
+	// This menu is now deprecated in favor of the unified projectCategoriesMenu


@copilot We don't need backwards compatibility, please remove everything that is obsolete.

Removed the obsolete builtInModuleMenu and projectMenu functions in commit 53ab798. The codebase now only uses the new nested menu system (moduleCategoriesMenu and projectCategoriesMenu).

Co-authored-by: andorthehood <[email protected]>

andorthehood · 2025-12-19T09:59:21Z

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

+/**
+ * Recursively sorts a tree node's children and items alphabetically.
+ */
+function sortTreeNode(node: CategoryTreeNode): void {


@copilot Why don't you sort one level at a time in the category tree builder loop? Would be less loops.

Optimized to sort inline during tree construction in commit 72898f9. Children and items are now inserted in sorted positions as they're added, eliminating the need for a separate recursive sort pass. This reduces the number of iterations from O(n + m) where n is items and m is nodes, to just O(n) with slightly higher constant factor for the sorted insertions.

@copilot I changed my mind, let's restore the separate sortTreeNode function, it looked more clean.

Restored the separate sortTreeNode function in commit dc2990b. The code now builds the tree structure first, then performs a clean recursive sort pass at the end, which is more readable and maintainable.

Co-authored-by: andorthehood <[email protected]>

Copilot

Pull request overview

This PR implements nested category menus for modules and projects using slash-delimited category paths (e.g., Functions/Trigonometric), replacing the previous flat menu structure with a hierarchical navigation system.

Key Changes:

Added category field to ProjectMetadata type and updated all project metadata with appropriate categories
Updated module metadata to use nested categories with slash separators (e.g., Functions/Trigonometric, Machine Learning/Functions)
Created categoryTree.ts utility with functions to build nested tree structures from flat category lists, including comprehensive sorting and navigation capabilities

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
`packages/editor/packages/editor-state/src/types.ts`	Added required `category` field to `ProjectMetadata` interface
`src/examples/projects/index.ts`	Updated all project metadata entries with category assignments (Audio, MIDI, Machine Learning, etc.)
`src/examples/modules/index.ts`	Updated three module categories to use nested paths with slash delimiters
`packages/editor/packages/editor-state/src/effects/menu/categoryTree.ts`	Implemented tree building utilities for nested category navigation with alphabetical sorting
`packages/editor/packages/editor-state/src/effects/menu/categoryTree.test.ts`	Added comprehensive unit tests (12 tests) covering flat categories, nested paths, sorting, and edge cases
`packages/editor/packages/editor-state/src/effects/menu/menus.ts`	Refactored `moduleCategoriesMenu` and created `projectCategoriesMenu` to support hierarchical navigation; updated main menu to reference new project menu
`packages/editor/packages/editor-state/src/effects/menu/menus.test.ts`	Added menu generation tests (8 tests) verifying nested navigation, sorting, and leaf item generation

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-19T20:29:23Z

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

+		return root;
+	}
+
+	const segments = path.split('/').filter(s => s.trim());


The filter condition checks if segments are non-empty after trimming, but doesn't actually trim the segments themselves. This means path segments with leading/trailing whitespace will not match the labels in the tree (which are trimmed during tree construction on line 53). The segments should be mapped to their trimmed values after filtering, or the filter should be replaced with a map operation that trims.

Suggested change

const segments = path.split('/').filter(s => s.trim());

const segments = path.split('/').map(s => s.trim()).filter(s => s);

Copilot · 2025-12-19T20:29:24Z

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

+	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();
+		});
+	});


Missing test coverage for whitespace handling in path parameter. While buildCategoryTree has a test for trimming whitespace in category segments (line 99), findNodeByPath lacks a corresponding test to verify it handles paths with whitespace correctly. A test case should verify that paths like " Functions / Trigonometric " correctly find nodes created from trimmed categories.

…-example-menus-docs

Initial plan

192f6db

Copilot AI assigned Copilot and andorthehood Dec 17, 2025

Copilot started work on behalf of andorthehood December 17, 2025 15:05 View session

Copilot AI and others added 2 commits December 17, 2025 15:11

Add category tree utility and tests

827a645

Co-authored-by: andorthehood <[email protected]>

Implement nested menu generation for modules and projects

7b84d66

Co-authored-by: andorthehood <[email protected]>

andorthehood requested changes Dec 17, 2025

View reviewed changes

Copilot AI changed the title ~~[WIP] Update documentation for nested example menus~~ Implement nested category menus for modules and projects Dec 17, 2025

Copilot AI requested a review from andorthehood December 17, 2025 15:56

Copilot finished work on behalf of andorthehood December 17, 2025 15:56

Copilot started work on behalf of andorthehood December 17, 2025 15:58 View session

Remove backward compatibility menus (builtInModuleMenu and projectMenu)

53ab798

Co-authored-by: andorthehood <[email protected]>

Copilot finished work on behalf of andorthehood December 17, 2025 16:02

andorthehood requested changes Dec 19, 2025

View reviewed changes

Copilot started work on behalf of andorthehood December 19, 2025 16:37 View session

andorthehood added the ai Vibecoded pull requests label Dec 19, 2025

Optimize category tree builder to sort inline instead of separate pass

72898f9

Co-authored-by: andorthehood <[email protected]>

Copilot AI requested a review from andorthehood December 19, 2025 16:41

Copilot finished work on behalf of andorthehood December 19, 2025 16:41

Copilot started work on behalf of andorthehood December 19, 2025 17:13 View session

Restore separate sortTreeNode function for cleaner code structure

dc2990b

Co-authored-by: andorthehood <[email protected]>

Copilot finished work on behalf of andorthehood December 19, 2025 17:17

andorthehood marked this pull request as ready for review December 19, 2025 20:24

Copilot AI review requested due to automatic review settings December 19, 2025 20:24

Copilot started reviewing on behalf of andorthehood December 19, 2025 20:25 View session

Copilot AI reviewed Dec 19, 2025

View reviewed changes

Merge remote-tracking branch 'origin/main' into copilot/update-nested…

0f5bf27

…-example-menus-docs

andorthehood closed this Jan 13, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Implement nested category menus for modules and projects #177

Implement nested category menus for modules and projects #177

Uh oh!

Copilot AI commented Dec 17, 2025 •

edited

Loading

Uh oh!

andorthehood Dec 17, 2025

Uh oh!

Copilot AI Dec 17, 2025

Uh oh!

andorthehood Dec 19, 2025

Uh oh!

Copilot AI Dec 19, 2025

Uh oh!

andorthehood Dec 19, 2025

Uh oh!

Copilot AI Dec 19, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Dec 19, 2025

Uh oh!

Copilot AI Dec 19, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	const segments = path.split('/').filter(s => s.trim());
	const segments = path.split('/').map(s => s.trim()).filter(s => s);

Implement nested category menus for modules and projects #177

Implement nested category menus for modules and projects #177

Uh oh!

Conversation

Copilot AI commented Dec 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Nested Example Menus Implementation - Complete ✅

Changes Made

Key Features

Test Coverage

Example Categories Added

Uh oh!

andorthehood Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

andorthehood Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

andorthehood Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Dec 17, 2025 •

edited

Loading