PodTui/tasks/podcast-tui-app/README.md

# Podcast TUI App

Objective: Build a SolidJS-based podcast player TUI with feeds, search, player, and file sync

Status legend: [ ] todo, [~] in-progress, [x] done

---

## Phase 1: Project Foundation 🏗️
**Setup and configure the development environment**

- [x] 01 — Initialize SolidJS OpenTUI project with Bun → `01-project-setup.md`
- [x] 13 — Set up TypeScript configuration and build system → `13-typescript-config.md`
- [x] 14 — Create project directory structure and dependencies → `14-project-structure.md`
- [x] 15 — Build responsive layout system (Flexbox) → `15-responsive-layout.md`

**Dependencies:** 01 -> 02 -> 03 -> 04 -> 05 -> 06 -> 07 -> 08 -> 09 -> 10 -> 11 -> 12

---

## Phase 2: Core Architecture 🏗️
**Build the main application shell and navigation**

- [x] 02 — Create main app shell with tab navigation → `02-core-layout.md`
- [x] 16 — Implement tab navigation component → `16-tab-navigation.md`
- [x] 17 — Add keyboard shortcuts and navigation handling → `17-keyboard-handling.md`

**Dependencies:** 01 -> 02 -> 03 -> 04 -> 05 -> 06 -> 07 -> 08 -> 09 -> 10 -> 11 -> 12

---

## Phase 3: File Sync & Data Import/Export 💾
**Implement direct file sync with JSON/XML formats**

- [x] 03 — Implement direct file sync (JSON/XML import/export) → `03-file-sync.md`
- [x] 18 — Create sync data models (JSON/XML formats) → `18-sync-data-models.md`
- [x] 19 — Build import/export functionality → `19-import-export.md`
- [x] 20 — Create file picker UI for import → `20-file-picker.md`
- [x] 21 — Build sync status indicator → `21-sync-status.md`
- [x] 22 — Add backup/restore functionality → `22-backup-restore.md`

**Dependencies:** 02 -> 03 -> 04 -> 05 -> 06 -> 07 -> 08 -> 09 -> 10 -> 11 -> 12

---

## Phase 4: Authentication System 🔐
**Implement authentication (MUST be implemented as optional for users)**

- [x] 04 — Build optional authentication system → `04-authentication.md`
- [x] 23 — Create authentication state (disabled by default) → `23-auth-state.md`
- [x] 24 — Build simple login screen (email/password) → `24-login-screen.md`
- [x] 25 — Implement 8-character code validation flow → `25-code-validation.md`
- [x] 26 — Add OAuth placeholder screens (document limitations) → `26-oauth-placeholders.md`
- [x] 27 — Create sync-only user profile → `27-sync-profile.md`

**Dependencies:** 03 -> 04 -> 05 -> 06 -> 07 -> 08 -> 09 -> 10 -> 11 -> 12

---

## Phase 5: Feed Management 📻
**Create feed data models and management UI**

- [x] 05 — Create feed data models and types → `05-feed-management.md`
- [x] 28 — Create feed data models and types → `28-feed-types.md`
- [x] 29 — Build feed list component (public/private feeds) → `29-feed-list.md`
- [x] 30 — Implement feed source management (add/remove sources) → `30-source-management.md`
- [x] 31 — Add reverse chronological ordering → `31-reverse-chronological.md`
- [x] 32 — Create feed detail view → `32-feed-detail.md`

**Dependencies:** 01 -> 02 -> 03 -> 04 -> 05 -> 06 -> 07 -> 08 -> 09 -> 10 -> 11 -> 12

---

## Phase 6: Search Functionality 🔍
**Implement multi-source search interface**

- [ ] 06 — Implement multi-source search interface → `06-search.md`
- [ ] 33 — Create search interface → `33-search-interface.md`
- [ ] 34 — Implement multi-source search → `34-multi-source-search.md`
- [ ] 35 — Add search results display → `35-search-results.md`
- [ ] 36 — Build search history with persistent storage → `36-search-history.md`

**Dependencies:** 05 -> 06 -> 07 -> 08 -> 09 -> 10 -> 11 -> 12

---

## Phase 7: Discover Feed 🌟
**Build discover page with popular shows**

- [ ] 07 — Build discover feed with popular shows → `07-discover.md`
- [ ] 37 — Create popular shows data structure → `37-popular-shows.md`
- [ ] 38 — Build discover page component → `38-discover-page.md`
- [ ] 39 — Add trending shows display → `39-trending-shows.md`
- [ ] 40 — Implement category filtering → `40-category-filtering.md`

**Dependencies:** 06 -> 07 -> 08 -> 09 -> 10 -> 11 -> 12

---

## Phase 8: Player Component 🎵
**Create player UI with waveform visualization**

- [ ] 08 — Create player UI with waveform visualization → `08-player.md`
- [ ] 41 — Create player UI layout → `41-player-layout.md`
- [ ] 42 — Implement playback controls → `42-playback-controls.md`
- [ ] 43 — Build ASCII waveform visualization → `43-waveform-visualization.md`
- [ ] 44 — Add progress tracking and seek → `44-progress-tracking.md`
- [ ] 45 — Implement audio integration (system/external player) → `45-audio-integration.md`

**Dependencies:** 07 -> 08 -> 09 -> 10 -> 11 -> 12

---

## Phase 9: Settings & Configuration ⚙️
**Build settings screen and preferences**

- [ ] 09 — Build settings screen and preferences → `09-settings.md`
- [ ] 46 — Create settings screen → `46-settings-screen.md`
- [ ] 47 — Add source management UI → `47-source-management-ui.md`
- [ ] 48 — Build user preferences → `48-user-preferences.md`
- [ ] 49 — Implement data persistence (localStorage/file-based) → `49-data-persistence.md`

**Dependencies:** 08 -> 09 -> 10 -> 11 -> 12

---

## Phase 10: Theme System 🎨
**Implement theming with Catppuccin, Gruvbox, Tokyo, Nord, and custom themes**

- [ ] 59 — Create theme system architecture → `59-theme-system.md`
- [ ] 60 — Implement default theme (system terminal) → `60-default-theme.md`
- [ ] 61 — Add Catppuccin theme → `61-catppuccin-theme.md`
- [ ] 62 — Add Gruvbox theme → `62-gruvbox-theme.md`
- [ ] 63 — Add Tokyo theme → `63-tokyo-theme.md`
- [ ] 64 — Add Nord theme → `64-nord-theme.md`
- [ ] 65 — Implement custom theme editor → `65-custom-theme.md`
- [ ] 66 — Add theme selector in settings → `66-theme-selector.md`

**Dependencies:** 09 -> 59 -> 60 -> 61 -> 62 -> 63 -> 64 -> 65 -> 66 -> 10

---

## Phase 11: State Management & Data Layer 🗄️
**Create global state store and data layer**

- [ ] 10 — Create global state store and data layer → `10-state-management.md`
- [ ] 50 — Create global state store (Signals) → `50-global-state-store.md`
- [ ] 51 — Implement API client for podcast sources → `51-api-client.md`
- [ ] 52 — Add data fetching and caching → `52-data-fetching-caching.md`
- [ ] 53 — Build file-based storage for sync → `53-file-based-storage.md`

**Dependencies:** 66 -> 10

---

## Phase 12: Testing & Quality Assurance ✅
**Set up testing framework and write comprehensive tests**

- [ ] 11 — Set up testing framework and write tests → `11-testing.md`
- [ ] 54 — Set up testing framework (snapshot testing) → `54-testing-framework.md`
- [ ] 55 — Write component tests → `55-component-tests.md`
- [ ] 56 — Add keyboard interaction tests → `56-keyboard-tests.md`
- [ ] 57 — Implement error handling → `57-error-handling.md`
- [ ] 58 — Add loading states and transitions → `58-loading-states.md`

**Dependencies:** 10 -> 11

---

## Phase 13: OAuth & External Integration 🔗
**Complete OAuth implementation and external integrations**

- [x] 26 — Add OAuth placeholder screens (document limitations) → `26-oauth-placeholders.md`
- [ ] 67 — Implement browser redirect flow for OAuth → `67-browser-redirect.md`
- [ ] 68 — Build QR code display for mobile verification → `68-qr-code-display.md`

**Dependencies:** 04 -> 67 -> 68

---

## Phase 14: Deployment & Optimization 🚀
**Optimize bundle and create documentation**

- [ ] 12 — Optimize bundle and create documentation → `12-optimization.md`

**Dependencies:** 11

---

## Dependencies Summary
- **Phase dependencies** ensure logical implementation order
- **Authentication MUST be implemented** (just optional for user login)
- **Theme system** is required and comes before state management

---

## Exit criteria
- The feature is complete when all 58 tasks are marked [x] done
- Complete, functional podcast TUI application with all core features working
- File sync (JSON/XML) successfully imports/exports feeds and settings
- Authentication system is fully implemented (optional for users)
- Player has waveform visualization and playback controls
- All navigation and keyboard shortcuts work correctly
- Theme system works with Catppuccin, Gruvbox, Tokyo, Nord, and custom themes
- Application runs on Bun with OpenTUI