PodTui/tasks/podcast-tui-app

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

• 01 — Initialize SolidJS OpenTUI project with Bun → 01-project-setup.md
• 13 — Set up TypeScript configuration and build system → 13-typescript-config.md
• 14 — Create project directory structure and dependencies → 14-project-structure.md
• 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

• 02 — Create main app shell with tab navigation → 02-core-layout.md
• 16 — Implement tab navigation component → 16-tab-navigation.md
• 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

• 03 — Implement direct file sync (JSON/XML import/export) → 03-file-sync.md
• 18 — Create sync data models (JSON/XML formats) → 18-sync-data-models.md
• 19 — Build import/export functionality → 19-import-export.md
• 20 — Create file picker UI for import → 20-file-picker.md
• 21 — Build sync status indicator → 21-sync-status.md
• 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)

• 04 — Build optional authentication system → 04-authentication.md
• 23 — Create authentication state (disabled by default) → 23-auth-state.md
• 24 — Build simple login screen (email/password) → 24-login-screen.md
• 25 — Implement 8-character code validation flow → 25-code-validation.md
• 26 — Add OAuth placeholder screens (document limitations) → 26-oauth-placeholders.md
• 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

• 05 — Create feed data models and types → 05-feed-management.md
• 28 — Create feed data models and types → 28-feed-types.md
• 29 — Build feed list component (public/private feeds) → 29-feed-list.md
• 30 — Implement feed source management (add/remove sources) → 30-source-management.md
• 31 — Add reverse chronological ordering → 31-reverse-chronological.md
• 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

• 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