missing md

tasks/podcast-tui-app/66-theme-selector.md

@@ -0,0 +1,56 @@
+# 66. Add Theme Selector in Settings
+
+meta:
+  id: podcast-tui-app-66
+  feature: podcast-tui-app
+  priority: P1
+  depends_on: [59, 60, 61, 62, 63, 64, 65]
+  tags: [theming, settings, selector, solidjs]
+
+objective:
+- Add theme selection UI in settings screen
+- Display all available themes (default, Catppuccin, Gruvbox, Tokyo, Nord, custom)
+- Allow users to select and switch themes
+- Show currently selected theme
+- Persist theme preference
+
+deliverables:
+- `/src/components/ThemeSelector.tsx` - Theme selector component
+- Updated `/src/components/SettingsScreen.tsx` to include theme selector
+- Updated `/src/store/theme.ts` to handle theme preference persistence
+- Theme selector in settings navigation
+
+steps:
+- Create ThemeSelector component with theme list
+- Implement theme selection logic
+- Display current theme with visual indicator
+- Add theme descriptions or icons
+- Integrate theme selector into Settings screen
+- Save theme preference to storage
+- Handle theme switching with instant updates
+- Add keyboard navigation for theme list
+
+tests:
+- Unit: Test theme selector displays all themes
+- Unit: Test theme selection updates current theme
+- Unit: Test theme preference saves to storage
+- Integration: Test theme switching works across all components
+
+acceptance_criteria:
+- Theme selector shows all available themes
+- Users can select and switch themes
+- Current theme is clearly indicated
+- Theme preference persists across sessions
+- Theme changes apply immediately to all components
+
+validation:
+- Run `bun run build` to verify TypeScript compilation
+- Test theme selector manually in settings
+- Verify theme preference saves/loads correctly
+- Check theme applies to all UI components
+
+notes:
+- Use existing theme manager for theme switching
+- Consider adding theme search/filter
+- Show theme preview in selector if possible
+- Ensure accessibility for keyboard navigation