mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-01-12 15:22:55 +01:00
130 lines
3.1 KiB
Markdown
130 lines
3.1 KiB
Markdown
# CONFIG-002 Subtask 2: PWA Section - Changelog
|
|
|
|
**Status**: ✅ Complete
|
|
**Completed**: 2026-01-07
|
|
|
|
## Objective
|
|
|
|
Add Progressive Web App (PWA) configuration section to the App Setup Panel.
|
|
|
|
## Changes Made
|
|
|
|
### New Files Created
|
|
|
|
#### 1. PWASection Component
|
|
|
|
**File**: `packages/noodl-editor/src/editor/src/views/panels/AppSetupPanel/sections/PWASection.tsx`
|
|
|
|
**Features**:
|
|
|
|
- **Enable/Disable Toggle** - Master switch for PWA functionality
|
|
- **Conditional Rendering** - Fields only appear when PWA is enabled
|
|
- **Smart Defaults** - Automatically provides sensible defaults on enable
|
|
|
|
**Fields**:
|
|
|
|
1. **Enable PWA** - Checkbox toggle
|
|
2. **Short Name** - App name for home screen (12 chars recommended)
|
|
3. **Start URL** - Where the PWA launches (default: `/`)
|
|
4. **Display Mode** - Dropdown with 4 options:
|
|
- Standalone (Recommended)
|
|
- Fullscreen
|
|
- Minimal UI
|
|
- Browser
|
|
5. **Background Color** - Color picker for splash screen
|
|
6. **Source Icon** - Path to 512x512 icon (auto-generates all sizes)
|
|
|
|
**UX Improvements**:
|
|
|
|
- Help text for each field
|
|
- Disabled state when PWA not enabled
|
|
- Color picker with hex input synchronization
|
|
- Defaults applied automatically on enable
|
|
|
|
### Modified Files
|
|
|
|
#### 1. AppSetupPanel.tsx
|
|
|
|
**Changes**:
|
|
|
|
- Imported `PWASection` component
|
|
- Added `updatePWA` callback with proper type handling
|
|
- Integrated PWASection after SEOSection
|
|
- Handles undefined PWA config gracefully
|
|
|
|
**Code Pattern**:
|
|
|
|
```typescript
|
|
const updatePWA = useCallback((updates: Partial<NonNullable<typeof config.pwa>>) => {
|
|
const currentConfig = ProjectModel.instance.getAppConfig();
|
|
ProjectModel.instance.updateAppConfig({
|
|
pwa: { ...(currentConfig.pwa || {}), ...updates } as NonNullable<typeof config.pwa>
|
|
});
|
|
}, []);
|
|
```
|
|
|
|
## Technical Decisions
|
|
|
|
### Enable/Disable Pattern
|
|
|
|
When enabled, automatically sets defaults:
|
|
|
|
```typescript
|
|
{
|
|
enabled: true,
|
|
startUrl: '/',
|
|
display: 'standalone'
|
|
}
|
|
```
|
|
|
|
### Display Mode Options
|
|
|
|
Used `as const` for type safety:
|
|
|
|
```typescript
|
|
const DISPLAY_MODES = [
|
|
{ value: 'standalone', label: 'Standalone (Recommended)' },
|
|
...
|
|
] as const;
|
|
```
|
|
|
|
### Optional PWA Config
|
|
|
|
PWA is optional in AppConfig, so component handles `undefined`:
|
|
|
|
```typescript
|
|
pwa: AppPWA | undefined;
|
|
```
|
|
|
|
## Testing Checklist
|
|
|
|
- [ ] Toggle PWA on - fields appear
|
|
- [ ] Toggle PWA off - fields disappear
|
|
- [ ] Short name accepts text
|
|
- [ ] Start URL defaults to "/"
|
|
- [ ] Display mode dropdown works
|
|
- [ ] Background color picker syncs with hex input
|
|
- [ ] Source icon path accepts input
|
|
- [ ] Changes save to project metadata
|
|
- [ ] Panel refreshes on external config changes
|
|
|
|
## Files Summary
|
|
|
|
**Created**:
|
|
|
|
- `packages/noodl-editor/src/editor/src/views/panels/AppSetupPanel/sections/PWASection.tsx`
|
|
- `dev-docs/tasks/phase-3-editor-ux-overhaul/TASK-007-app-config-system/CONFIG-002-SUBTASK-2-CHANGELOG.md`
|
|
|
|
**Modified**:
|
|
|
|
- `packages/noodl-editor/src/editor/src/views/panels/AppSetupPanel/AppSetupPanel.tsx`
|
|
|
|
## Next Steps
|
|
|
|
**Subtask 3**: Variables Section
|
|
|
|
- Key/value editor for custom config variables
|
|
- Type selection (string, number, boolean, etc.)
|
|
- Validation support
|
|
- Reserved key prevention
|