OpenNoodl/dev-docs/tasks/phase-3-editor-ux-overhaul/TASK-007-app-config-system/CONFIG-002-SUBTASK-2-CHANGELOG.md

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:

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:

{
  enabled: true,
  startUrl: '/',
  display: 'standalone'
}

Display Mode Options

Used as const for type safety:

const DISPLAY_MODES = [
  { value: 'standalone', label: 'Standalone (Recommended)' },
  ...
] as const;

Optional PWA Config

PWA is optional in AppConfig, so component handles undefined:

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