OpenNoodl/dev-docs/tasks/phase-3-editor-ux-overhaul/TASK-001B-launcher-fixes/SOLUTIONS.md

Solutions: Project Creation Bugs

Date: January 12, 2026
Status: Ready for Implementation

---

🎯 Priority Order

1. CRITICAL - BUG-002 & BUG-003 (Same fix)
2. Medium - BUG-001 (UI improvement)
3. Low - BUG-004 (CSS fix)

---

🔴 CRITICAL FIX: Add allowAsExportRoot to Router

Fixes: BUG-002 (App not Home) + BUG-003 ("Make Home" fails)

File to Edit

packages/noodl-viewer-react/src/nodes/navigation/router.tsx

The Fix (ONE LINE!)

const RouterNode = {
  name: 'Router',
  displayNodeName: 'Page Router',
  allowAsExportRoot: true, // ✅ ADD THIS LINE
  category: 'Visuals',
  docs: 'https://docs.noodl.net/nodes/navigation/page-router',
  useVariants: false
  // ... rest of the definition
};

Why This Works

• ProjectModel.setRootComponent() searches for nodes with allowAsExportRoot: true
• Router node currently doesn't have this property
• Adding it allows Router to be set as the root of a component
• This fixes both project creation AND "Make Home" functionality

Testing

# 1. Apply the fix
# 2. Restart dev server: npm run dev
# 3. Create new project
# 4. Preview should show "Hello World!"
# 5. "Make Home" should work on any component

---

🟡 BUG-001: Fix Home Component Display

Severity: Medium (Cosmetic)

Investigation Needed

The template correctly creates '/#__page__/Home' with the page prefix.

Check: useComponentsPanel.ts line where it builds tree data.

Potential Fix

Ensure isPage flag is properly set:

// In tree data building logic
const isPage = component.name.startsWith('/#__page__/');

return {
  // ...
  isPage: isPage,  // ✅ Ensure this is set
  // ...
};

Alternative

Check ComponentItem.tsx icon logic:

let icon = IconName.Component;
if (component.isRoot) {
  icon = IconName.Home;
} else if (component.isPage) {
  // ← Must be true for pages
  icon = IconName.PageRouter;
}

---

🟡 BUG-004: Fix Modal Styling

Severity: Low (Cosmetic)

File to Edit

packages/noodl-editor/src/editor/src/styles/propertyeditor/pages.css

Investigation Steps

1. Inspect the popup when it appears
2. Check CSS classes on triangle and rectangle
3. Look for positioning offsets

Likely Fix

Adjust vertical alignment:

.popup-layer-content {
  margin-top: 0 !important;
  /* or adjust to match triangle position */
}

.popup-layer-arrow {
  /* Ensure positioned correctly relative to content */
}

Long-term Solution

Migrate from legacy PopupLayer to modern PopupMenu from @noodl-core-ui.

---

✅ Implementation Checklist

Phase 1: Critical Fix (30 minutes)

• Add allowAsExportRoot: true to Router node
• Test new project creation
• Test "Make Home" functionality
• Verify preview works

Phase 2: UI Improvements (1-2 hours)

• Debug BUG-001 (page icon not showing)
• Fix if needed
• Debug BUG-004 (modal alignment)
• Fix CSS positioning

Phase 3: Documentation (30 minutes)

• Update LEARNINGS.md with findings
• Document allowAsExportRoot requirement
• Add regression test notes

---

📝 Regression Test Plan

After fixes, test:

1. New Project Flow

   • Create project from launcher
   • App should be Home automatically
   • Preview shows "Hello World!"

2. Make Home Feature

   • Create second component
   • Right-click → "Make Home"
   • Should work without errors

3. Page Router

   • App has Router as root
   • Can add pages to Router
   • Modal styling looks correct

---

🚀 Expected Results

Bug	Before	After
#1	Home shows component icon	Home shows page icon
#2	Preview error	Preview works immediately
#3	"Make Home" does nothing	"Make Home" works
#4	Modal misaligned	Modal looks professional

---

Ready for implementation!