mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-01-13 07:42:55 +01:00
269 lines
7.1 KiB
Markdown
269 lines
7.1 KiB
Markdown
# CONFIG-002 Subtask 1: Core Panel + Identity & SEO Sections - CHANGELOG
|
|
|
|
**Status:** ✅ COMPLETE
|
|
**Date Completed:** January 7, 2026
|
|
**Implementation Time:** ~2 hours
|
|
|
|
## Overview
|
|
|
|
Implemented the foundational App Setup panel with Identity and SEO sections, allowing users to configure basic app metadata and SEO settings.
|
|
|
|
---
|
|
|
|
## Files Created
|
|
|
|
### 1. Main Panel Component
|
|
|
|
**File:** `packages/noodl-editor/src/editor/src/views/panels/AppSetupPanel/AppSetupPanel.tsx`
|
|
|
|
- Main panel container using `BasePanel`
|
|
- Listens to ProjectModel metadata changes via `useEventListener`
|
|
- Integrates Identity and SEO sections
|
|
- Updates handled through ProjectModel's `updateAppConfig()` method
|
|
|
|
### 2. Identity Section
|
|
|
|
**File:** `packages/noodl-editor/src/editor/src/views/panels/AppSetupPanel/sections/IdentitySection.tsx`
|
|
|
|
**Fields:**
|
|
|
|
- **App Name** - Text input for application name
|
|
- **Description** - Multiline textarea for app description
|
|
- **Cover Image** - Text input for cover image path
|
|
|
|
**Features:**
|
|
|
|
- Clean, labeled inputs with proper spacing
|
|
- Uses design tokens for consistent styling
|
|
- Inline help text for cover image field
|
|
|
|
### 3. SEO Section
|
|
|
|
**File:** `packages/noodl-editor/src/editor/src/views/panels/AppSetupPanel/sections/SEOSection.tsx`
|
|
|
|
**Fields:**
|
|
|
|
- **Open Graph Title** - Defaults to App Name if not set
|
|
- **Open Graph Description** - Defaults to Description if not set
|
|
- **Open Graph Image** - Defaults to Cover Image if not set
|
|
- **Favicon** - Path to favicon file (.ico, .png, .svg)
|
|
- **Theme Color** - Color picker + hex input for browser theme color
|
|
|
|
**Features:**
|
|
|
|
- Smart defaults displayed when fields are empty
|
|
- Shows "Defaults to: [value]" hints
|
|
- Combined color picker and text input for theme color
|
|
- Section has top divider to separate from Identity
|
|
|
|
---
|
|
|
|
## Files Modified
|
|
|
|
### 1. Router Setup
|
|
|
|
**File:** `packages/noodl-editor/src/editor/src/router.setup.ts`
|
|
|
|
**Changes:**
|
|
|
|
- Added import for `AppSetupPanel`
|
|
- Registered panel with SidebarModel:
|
|
- ID: `app-setup`
|
|
- Name: `App Setup`
|
|
- Order: 8.5 (between Backend Services and Project Settings)
|
|
- Icon: `IconName.Setting`
|
|
- Disabled for lessons
|
|
|
|
---
|
|
|
|
## Technical Implementation Details
|
|
|
|
### State Management
|
|
|
|
- Panel refreshes when `ProjectModel.metadataChanged` event fires with `key === 'appConfig'`
|
|
- Uses `useEventListener` hook for proper EventDispatcher integration
|
|
- Updates flow through `ProjectModel.instance.updateAppConfig()`
|
|
|
|
### Smart Defaults
|
|
|
|
SEO fields show helpful hints when empty:
|
|
|
|
```
|
|
Open Graph Title → Shows: "Defaults to: My App Name"
|
|
Open Graph Description → Shows: "Defaults to: App description..."
|
|
Open Graph Image → Shows: "Defaults to: /assets/cover.png"
|
|
```
|
|
|
|
These defaults are implemented in ConfigManager (from CONFIG-001) and displayed in the UI.
|
|
|
|
### Styling Approach
|
|
|
|
- Inline styles using design tokens (`var(--theme-color-*)`)
|
|
- Consistent spacing with `marginBottom: '12px'`
|
|
- Label styling matches property panel patterns
|
|
- Textarea resizable vertically
|
|
|
|
### Component Integration
|
|
|
|
- Uses existing `PropertyPanelTextInput` from core-ui
|
|
- Uses `CollapsableSection` for section containers
|
|
- Native HTML elements for textarea and color picker
|
|
- No custom CSS modules needed for Subtask 1
|
|
|
|
---
|
|
|
|
## Usage
|
|
|
|
### Accessing the Panel
|
|
|
|
1. Open a project in the editor
|
|
2. Look for "App Setup" in the left sidebar
|
|
3. Click to open the panel
|
|
|
|
### Editing Identity
|
|
|
|
1. Enter app name in "App Name" field
|
|
2. Add description in multiline "Description" field
|
|
3. Specify cover image path (e.g., `/assets/cover.png`)
|
|
|
|
### Configuring SEO
|
|
|
|
1. Optionally override Open Graph title (defaults to app name)
|
|
2. Optionally override Open Graph description (defaults to description)
|
|
3. Optionally override Open Graph image (defaults to cover image)
|
|
4. Set favicon path
|
|
5. Choose theme color using picker or enter hex value
|
|
|
|
### Data Persistence
|
|
|
|
- All changes save automatically to `project.json` via ProjectModel
|
|
- Config stored in `metadata.appConfig`
|
|
- Changes trigger metadata change events
|
|
|
|
---
|
|
|
|
## Success Criteria - All Met ✅
|
|
|
|
- [x] App Setup panel appears in sidebar
|
|
- [x] Can edit App Name, Description, Cover Image
|
|
- [x] SEO fields show smart defaults when empty
|
|
- [x] Can override SEO fields
|
|
- [x] Theme color has both picker and text input
|
|
- [x] All fields save to ProjectModel correctly
|
|
- [x] Panel refreshes when config changes
|
|
- [x] Uses design tokens for styling
|
|
- [x] Proper EventDispatcher integration with useEventListener
|
|
|
|
---
|
|
|
|
## Testing Performed
|
|
|
|
### Manual Testing
|
|
|
|
1. ✅ Panel appears in sidebar at correct position
|
|
2. ✅ Identity fields accept input and save
|
|
3. ✅ Textarea allows multiline description
|
|
4. ✅ SEO section shows default hints correctly
|
|
5. ✅ Entering SEO values overrides defaults
|
|
6. ✅ Color picker updates hex input and vice versa
|
|
7. ✅ Changes persist after panel close/reopen
|
|
8. ✅ No TypeScript or ESLint errors
|
|
|
|
### Integration Testing
|
|
|
|
1. ✅ ProjectModel methods called correctly
|
|
2. ✅ Metadata change events trigger panel refresh
|
|
3. ✅ Config values accessible via `Noodl.Config` at runtime (verified from CONFIG-001)
|
|
|
|
---
|
|
|
|
## Known Limitations
|
|
|
|
1. **No Image Browser** - Cover image, favicon, and OG image use text inputs (file browser to be added later if needed)
|
|
2. **No Validation** - Input validation handled by ConfigManager but not shown in UI yet
|
|
3. **Limited Theme Color Validation** - No inline validation for hex color format
|
|
|
|
---
|
|
|
|
## Next Steps
|
|
|
|
**Subtask 2: PWA Section**
|
|
|
|
- Create PWASection component
|
|
- Add enable/disable toggle
|
|
- Implement PWA configuration fields
|
|
- Add app icon picker
|
|
- Integrate with CollapsableSection
|
|
|
|
**Subtask 3: Variables Section**
|
|
|
|
- Create VariablesSection component
|
|
- Implement add/edit/delete variables UI
|
|
- Create TypeEditor for different value types
|
|
- Add validation and error handling
|
|
- Implement category grouping
|
|
|
|
---
|
|
|
|
## Code Quality
|
|
|
|
### Standards Met
|
|
|
|
- ✅ TypeScript with proper types (no TSFixme)
|
|
- ✅ React functional components with hooks
|
|
- ✅ useEventListener for EventDispatcher subscriptions
|
|
- ✅ Design tokens for all colors
|
|
- ✅ Consistent code formatting
|
|
- ✅ No console warnings or errors
|
|
|
|
### Patterns Used
|
|
|
|
- React hooks: `useState`, `useCallback`, `useEventListener`
|
|
- ProjectModel integration via singleton instance
|
|
- CollapsableSection for expandable UI sections
|
|
- Inline styles with design tokens
|
|
|
|
---
|
|
|
|
## Files Summary
|
|
|
|
**Created (3 files):**
|
|
|
|
- AppSetupPanel/AppSetupPanel.tsx
|
|
- AppSetupPanel/sections/IdentitySection.tsx
|
|
- AppSetupPanel/sections/SEOSection.tsx
|
|
|
|
**Modified (1 file):**
|
|
|
|
- router.setup.ts
|
|
|
|
**Lines of Code:** ~400 LOC
|
|
|
|
---
|
|
|
|
## Git Commits
|
|
|
|
Subtask 1 completed in single commit:
|
|
|
|
```
|
|
feat(config): add App Setup panel with Identity and SEO sections
|
|
|
|
- Create AppSetupPanel main component
|
|
- Implement IdentitySection (app name, description, cover image)
|
|
- Implement SEOSection (OG metadata, favicon, theme color)
|
|
- Register panel in sidebar (order 8.5)
|
|
- Smart defaults from identity values
|
|
- Uses design tokens for styling
|
|
- Proper EventDispatcher integration
|
|
|
|
Part of CONFIG-002 (Subtask 1 of 3)
|
|
```
|
|
|
|
---
|
|
|
|
## Related Documentation
|
|
|
|
- **CONFIG-001 CHANGELOG** - Core infrastructure this builds upon
|
|
- **CONFIG-002 Main Spec** - Full UI panel specification
|
|
- **.clinerules** - React + EventDispatcher patterns followed
|