OpenNoodl/dev-docs/tasks/phase-3-editor-ux-overhaul/TASK-013-integration-bugfixes/BUG-6-app-component-click.md

BUG-6: App Component Not Clickable in Component Menu

Priority: P0 - Blocks basic workflow
Status: 🔴 Research completed - Ready to implement
Reported: January 16, 2026

---

Issue

Can't click on the 'App' component (or any component-folder) in the left component menu to view its node canvas. The App component is being treated like a folder - clicking it only expands/collapses it but doesn't open the component's node canvas.

---

Root Cause Found

In packages/noodl-editor/src/editor/src/views/panels/ComponentsPanelNew/hooks/useComponentsPanel.ts:

// Handle item click
const handleItemClick = useCallback(
  (node: TreeNode) => {
    if (node.type === 'component') {
      setSelectedId(node.data.name);
      // Opens the component - works correctly
      const component = node.data.component;
      if (component) {
        EventDispatcher.instance.notifyListeners('ComponentPanel.SwitchToComponent', {
          component,
          pushHistory: true
        });
      }
    } else {
      // ❌ BUG: This only toggles folder expand/collapse
      // It NEVER opens component-folders!
      setSelectedId(node.data.path);
      toggleFolder(node.data.path);
    }
  },
  [toggleFolder]
);

The problem: When a component has nested children (like "App" with child components), it's rendered as a folder in the tree with type: 'folder'. Even though it's marked as isComponentFolder: true and has a component reference, clicking on it only toggles the folder - it never opens the component canvas.

---

Expected Behavior

1. Single-click on a component-folder should open the component canvas
2. Expand/collapse should happen via the arrow icon OR could be a secondary behavior

---

Solution Options

Option A: Open on Click, Toggle via Arrow (Recommended)

Modify handleItemClick to open component-folders:

const handleItemClick = useCallback(
  (node: TreeNode) => {
    if (node.type === 'component') {
      // Regular component - open it
      setSelectedId(node.data.name);
      const component = node.data.component;
      if (component) {
        EventDispatcher.instance.notifyListeners('ComponentPanel.SwitchToComponent', {
          component,
          pushHistory: true
        });
      }
    } else {
      // It's a folder
      setSelectedId(node.data.path);

      // ✅ FIX: If it's a component-folder, open the component
      if (node.data.isComponentFolder && node.data.component) {
        EventDispatcher.instance.notifyListeners('ComponentPanel.SwitchToComponent', {
          component: node.data.component,
          pushHistory: true
        });
      }

      // Still toggle the folder
      toggleFolder(node.data.path);
    }
  },
  [toggleFolder]
);

Option B: Separate Click Targets

• Click on folder name = opens component
• Click on arrow = toggles expand/collapse

This requires UI changes to the FolderItem component.

---

Files to Modify

1. packages/noodl-editor/src/editor/src/views/panels/ComponentsPanelNew/hooks/useComponentsPanel.ts

   • Update handleItemClick to handle component-folders

2. Optionally: packages/noodl-editor/src/editor/src/views/panels/ComponentsPanelNew/components/FolderItem.tsx

   • If we want separate click targets for open vs expand

---

Testing Plan

• Create a project with App component that has child components
• Click on 'App' in the component menu
• Verify the App component's node canvas is displayed
• Verify the folder still expands/collapses (either on same click or via arrow)
• Test with nested component-folders (multiple levels deep)
• Ensure regular folders (non-component) still only toggle expand

---

Related

• Component-folders are created when a component like /App has child components like /App/Header
• The tree building logic correctly identifies these with isComponentFolder: true
• The click handler just wasn't using this information

---

Last Updated: January 16, 2026