OpenNoodl/dev-docs/tasks/phase-3-editor-ux-overhaul/TASK-001-dashboard-ux-foundation/DASH-overview.md

DASH Series: Dashboard UX Foundation

Overview

The DASH series modernizes the OpenNoodl editor dashboard, transforming it from a basic project launcher into a proper workspace management hub. These tasks focus on the new React 19 launcher in packages/noodl-core-ui/src/preview/launcher/.

Target Environment

• Editor: React 19 version only
• Runtime: React 19 version (if applicable)
• Backwards Compatibility: Not required for old launcher

Task Dependency Graph

DASH-001 (Tabbed Navigation)
    │
    ├── DASH-002 (Project List Redesign)
    │       │
    │       └── DASH-003 (Project Organization)
    │
    └── DASH-004 (Tutorial Section Redesign)

Task Summary

Task ID	Name	Est. Hours	Priority
DASH-001	Tabbed Navigation System	5-8	Critical
DASH-002	Project List Redesign	9-14	High
DASH-003	Project Organization	16-22	Medium
DASH-004	Tutorial Section Redesign	13-19	Medium

Total Estimated: 43-63 hours

Implementation Order

Week 1: Foundation

1. DASH-001 - Tabbed navigation (foundation for everything)
2. DASH-004 - Tutorial redesign (can parallel with DASH-002)

Week 2: Project Management

3. DASH-002 - Project list redesign
4. DASH-003 - Folders and tags

Key Technical Decisions

Location

All new components go in:

packages/noodl-core-ui/src/preview/launcher/Launcher/

State Management

• Use React Context for launcher-wide state
• Use electron-store for persistence
• Keep component state minimal

Styling

• Use existing noodl-core-ui components
• CSS Modules for custom styling
• Follow existing color/spacing tokens

Data

• Services in packages/noodl-editor/src/editor/src/services/
• Hooks in launcher hooks/ folder
• Types in component folders or shared types file

Shared Components to Create

These components will be reused across DASH tasks:

Component	Created In	Used By
TabBar	DASH-001	All views
GitStatusBadge	DASH-002	Project list
ViewModeToggle	DASH-002	Project list
FolderTree	DASH-003	Sidebar
TagPill	DASH-003	Project rows
ProgressRing	DASH-004	Tutorial cards
DifficultyBadge	DASH-004	Tutorial cards

Testing Strategy

Each task includes a testing checklist. Additionally:

1. Visual Testing: Use Storybook for component development
2. Integration Testing: Test in actual launcher context
3. Persistence Testing: Verify data survives app restart
4. Performance Testing: Check with 100+ projects/tutorials

Cline Usage Notes

Before Starting Each Task

1. Read the task document completely
2. Explore the existing code in packages/noodl-core-ui/src/preview/launcher/
3. Check existing components in packages/noodl-core-ui/src/components/
4. Understand the data flow

During Implementation

1. Create components incrementally with Storybook stories
2. Test in isolation before integration
3. Update imports/exports in index files
4. Follow existing code style

Confidence Checkpoints

Rate confidence (1-10) at these points:

• After reading task document
• After exploring existing code
• Before creating first component
• After completing each phase
• Before marking task complete

Common Gotchas

1. Mock Data: The launcher currently uses mock data - don't try to connect to real data yet
2. FIXME Alerts: Many click handlers are alert('FIXME: ...') - that's expected
3. Storybook: Run npm run storybook in noodl-core-ui to test components
4. Imports: noodl-core-ui uses path aliases - check existing imports for patterns

Success Criteria (Series Complete)

1. ✅ Launcher has tabbed navigation (Projects, Learn, Templates)
2. ✅ Projects display in sortable list with git status
3. ✅ Projects can be organized with folders and tags
4. ✅ Tutorials are organized by category with progress tracking
5. ✅ All preferences persist across sessions
6. ✅ UI is responsive and accessible
7. ✅ New components are reusable

Future Work (Post-DASH)

The DASH series sets up infrastructure for:

• GIT series: GitHub integration, sync status
• COMP series: Shared components system
• AI series: AI project creation
• DEPLOY series: Deployment automation

These will be documented separately.

Files in This Series

• DASH-001-tabbed-navigation.md
• DASH-002-project-list-redesign.md
• DASH-003-project-organization.md
• DASH-004-tutorial-section-redesign.md
• DASH-OVERVIEW.md (this file)