PodTui/tasks/podcast-tui-app/10-state-management.md

10. Build Settings Screen and Preferences

meta: id: podcast-tui-app-10 feature: podcast-tui-app priority: P1 depends_on: [09] tags: [settings, preferences, solidjs, opentui]

objective:

• Create settings screen component
• Add source management UI
• Build user preferences panel
• Implement data persistence

deliverables:

• src/components/SettingsScreen.tsx with settings UI
• src/components/SourceManager.tsx with source management
• src/components/PreferencesPanel.tsx with user preferences
• src/utils/persistence.ts with localStorage utilities

steps:

• Create src/components/SettingsScreen.tsx:
  • Settings menu with sections
  • Navigation between settings sections
  • Save/Cancel buttons
• Create src/components/SourceManager.tsx:
  • List of enabled sources
  • Add source button
  • Remove source button
  • Enable/disable toggle
• Create src/components/PreferencesPanel.tsx:
  • Theme selection (light/dark)
  • Font size control
  • Playback speed control
  • Auto-download settings
• Create src/utils/persistence.ts:
  • savePreference(key, value)
  • loadPreference(key)
  • saveFeeds(feeds)
  • loadFeeds()
  • saveSettings(settings)
  • loadSettings()
• Add settings screen to "Settings" navigation tab

tests:

• Unit: Test persistence functions
• Unit: Test source management
• Integration: Test settings screen navigation
• Integration: Test preferences save/load

acceptance_criteria:

• Settings screen displays all sections
• Source management adds/removes sources
• Preferences save correctly
• Data persists across sessions
• Settings screen is accessible

validation:

• Run application and navigate to "Settings"
• Test source management
• Change preferences and verify save
• Restart app and verify preferences persist

notes:

• Use localStorage for simple persistence
• Settings are application-level, not user-specific
• Source management requires API keys if needed
• Preferences are per-user
• Add error handling for persistence failures