mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-01-12 23:32:55 +01:00
151 lines
4.5 KiB
Markdown
151 lines
4.5 KiB
Markdown
# 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)
|