From 624a6ba0224bfa06c55774fb90ecfb982f7f9b28 Mon Sep 17 00:00:00 2001 From: Michael Freno Date: Wed, 4 Feb 2026 12:38:35 -0500 Subject: [PATCH] pause to fix nav/theme --- .gitignore | 1 + .../01-analyze-navigation-system.md | 50 +++++++++++++ .../02-fix-discover-tab-crash.md | 51 +++++++++++++ .../03-fix-feeds-tab-crash.md | 50 +++++++++++++ .../04-fix-settings-sources-crash.md | 54 ++++++++++++++ .../05-design-layered-navigation-ui.md | 53 ++++++++++++++ .../06-implement-layer-navigation-controls.md | 54 ++++++++++++++ .../07-implement-enter-escape-controls.md | 57 +++++++++++++++ .../08-design-active-layer-colors.md | 53 ++++++++++++++ .../09-create-theme-context-provider.md | 57 +++++++++++++++ .../10-implement-desktop-theme-types.md | 57 +++++++++++++++ .../11-implement-theme-resolution.md | 59 +++++++++++++++ .../12-create-css-token-system.md | 57 +++++++++++++++ .../13-implement-system-theme-detection.md | 55 ++++++++++++++ .../14-integrate-theme-provider.md | 59 +++++++++++++++ .../15-update-components-to-use-themes.md | 60 ++++++++++++++++ .../16-test-navigation-flows.md | 65 +++++++++++++++++ .../17-test-tab-crash-fixes.md | 64 +++++++++++++++++ .../18-test-theming-system.md | 72 +++++++++++++++++++ .../README.md | 50 +++++++++++++ 20 files changed, 1078 insertions(+) create mode 100644 tasks/podtui-navigation-theming-improvements/01-analyze-navigation-system.md create mode 100644 tasks/podtui-navigation-theming-improvements/02-fix-discover-tab-crash.md create mode 100644 tasks/podtui-navigation-theming-improvements/03-fix-feeds-tab-crash.md create mode 100644 tasks/podtui-navigation-theming-improvements/04-fix-settings-sources-crash.md create mode 100644 tasks/podtui-navigation-theming-improvements/05-design-layered-navigation-ui.md create mode 100644 tasks/podtui-navigation-theming-improvements/06-implement-layer-navigation-controls.md create mode 100644 tasks/podtui-navigation-theming-improvements/07-implement-enter-escape-controls.md create mode 100644 tasks/podtui-navigation-theming-improvements/08-design-active-layer-colors.md create mode 100644 tasks/podtui-navigation-theming-improvements/09-create-theme-context-provider.md create mode 100644 tasks/podtui-navigation-theming-improvements/10-implement-desktop-theme-types.md create mode 100644 tasks/podtui-navigation-theming-improvements/11-implement-theme-resolution.md create mode 100644 tasks/podtui-navigation-theming-improvements/12-create-css-token-system.md create mode 100644 tasks/podtui-navigation-theming-improvements/13-implement-system-theme-detection.md create mode 100644 tasks/podtui-navigation-theming-improvements/14-integrate-theme-provider.md create mode 100644 tasks/podtui-navigation-theming-improvements/15-update-components-to-use-themes.md create mode 100644 tasks/podtui-navigation-theming-improvements/16-test-navigation-flows.md create mode 100644 tasks/podtui-navigation-theming-improvements/17-test-tab-crash-fixes.md create mode 100644 tasks/podtui-navigation-theming-improvements/18-test-theming-system.md create mode 100644 tasks/podtui-navigation-theming-improvements/README.md diff --git a/.gitignore b/.gitignore index d2b6655..2663de1 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ .opencode +opencode # dependencies (bun install) node_modules diff --git a/tasks/podtui-navigation-theming-improvements/01-analyze-navigation-system.md b/tasks/podtui-navigation-theming-improvements/01-analyze-navigation-system.md new file mode 100644 index 0000000..570d7f0 --- /dev/null +++ b/tasks/podtui-navigation-theming-improvements/01-analyze-navigation-system.md @@ -0,0 +1,50 @@ +# 01. Analyze Current Navigation and Layer System + +meta: + id: podtui-navigation-theming-improvements-01 + feature: podtui-navigation-theming-improvements + priority: P1 + depends_on: [] + tags: [analysis, debugging, navigation] + +objective: +- Analyze current navigation implementation and layer system +- Identify issues with the existing layerDepth signal +- Document current navigation behavior and identify gaps +- Understand how layers should work per user requirements + +deliverables: +- Analysis document with current navigation state +- List of identified issues and gaps +- Recommendations for navigation improvements + +steps: +- Read src/App.tsx to understand current layerDepth implementation +- Read src/components/Layout.tsx to understand layout structure +- Read src/hooks/useAppKeyboard.ts to understand keyboard handling +- Read src/components/TabNavigation.tsx and src/components/Navigation.tsx +- Review how layerDepth is used across components +- Identify issues with current navigation UX +- Document requirements: clear layer separation, active layer bg colors, left/right navigation, enter/escape controls +- Create analysis summary + +tests: +- Unit: None (analysis task) +- Integration: None (analysis task) + +acceptance_criteria: +- Analysis document is created and saved +- All current navigation patterns are documented +- All identified issues and gaps are listed +- Clear recommendations are provided for navigation improvements + +validation: +- Review analysis document for completeness +- Verify all relevant files were analyzed +- Check that requirements are clearly documented + +notes: +- Focus on understanding the gap between current implementation and user requirements +- Pay special attention to how layerDepth signal is managed +- Note any issues with keyboard event handling +- Consider how to make navigation more intuitive diff --git a/tasks/podtui-navigation-theming-improvements/02-fix-discover-tab-crash.md b/tasks/podtui-navigation-theming-improvements/02-fix-discover-tab-crash.md new file mode 100644 index 0000000..19d3ed9 --- /dev/null +++ b/tasks/podtui-navigation-theming-improvements/02-fix-discover-tab-crash.md @@ -0,0 +1,51 @@ +# 02. Fix Discover Tab Crash + +meta: + id: podtui-navigation-theming-improvements-02 + feature: podtui-navigation-theming-improvements + priority: P1 + depends_on: [podtui-navigation-theming-improvements-01] + tags: [bug-fix, discover, crash] + +objective: +- Identify and fix crash when Discover tab is selected +- Ensure DiscoverPage component loads without errors +- Test all functionality in Discover tab + +deliverables: +- Fixed DiscoverPage.tsx component +- Debugged crash identified and resolved +- Test results showing no crashes + +steps: +- Read src/components/DiscoverPage.tsx thoroughly +- Check for null/undefined references in DiscoverPage +- Verify useDiscoverStore() is properly initialized +- Check DISCOVER_CATEGORIES constant +- Verify TrendingShows component works correctly +- Check CategoryFilter component for issues +- Add null checks and error boundaries if needed +- Test tab selection in App.tsx +- Verify no console errors +- Test all keyboard shortcuts in Discover tab + +tests: +- Unit: Test DiscoverPage component with mocked store +- Integration: Test Discover tab selection and navigation + +acceptance_criteria: +- Discover tab can be selected without crashes +- No console errors when Discover tab is active +- All DiscoverPage functionality works (keyboard shortcuts, navigation) +- TrendingShows and CategoryFilter components render correctly + +validation: +- Run `bun run start` and select Discover tab +- Check console for errors +- Test all keyboard interactions (j/k, tab, enter, escape, r) +- Verify content renders correctly + +notes: +- Common crash causes: null store, undefined categories, missing component imports +- Check for unhandled promises or async operations +- Verify all props are properly passed from App.tsx diff --git a/tasks/podtui-navigation-theming-improvements/03-fix-feeds-tab-crash.md b/tasks/podtui-navigation-theming-improvements/03-fix-feeds-tab-crash.md new file mode 100644 index 0000000..b111d86 --- /dev/null +++ b/tasks/podtui-navigation-theming-improvements/03-fix-feeds-tab-crash.md @@ -0,0 +1,50 @@ +# 03. Fix My Feeds Tab Crash + +meta: + id: podtui-navigation-theming-improvements-03 + feature: podtui-navigation-theming-improvements + priority: P1 + depends_on: [podtui-navigation-theming-improvements-01] + tags: [bug-fix, feeds, crash] + +objective: +- Identify and fix crash when My Feeds tab is selected +- Ensure FeedList component loads without errors +- Test all functionality in My Feeds tab + +deliverables: +- Fixed FeedList.tsx component +- Debugged crash identified and resolved +- Test results showing no crashes + +steps: +- Read src/components/FeedList.tsx thoroughly +- Check for null/undefined references in FeedList +- Verify useFeedStore() is properly initialized +- Check FeedItem component for issues +- Verify filteredFeeds() returns valid array +- Add null checks and error boundaries if needed +- Test tab selection in App.tsx +- Verify no console errors +- Test all keyboard shortcuts in FeedList + +tests: +- Unit: Test FeedList component with mocked store +- Integration: Test Feeds tab selection and navigation + +acceptance_criteria: +- My Feeds tab can be selected without crashes +- No console errors when My Feeds tab is active +- All FeedList functionality works (keyboard shortcuts, navigation) +- FeedItem components render correctly + +validation: +- Run `bun run start` and select My Feeds tab +- Check console for errors +- Test all keyboard interactions (j/k, enter, f, s, esc) +- Verify feed list renders correctly + +notes: +- Common crash causes: null store, undefined feeds, missing component imports +- Check for unhandled promises or async operations +- Verify all props are properly passed from App.tsx diff --git a/tasks/podtui-navigation-theming-improvements/04-fix-settings-sources-crash.md b/tasks/podtui-navigation-theming-improvements/04-fix-settings-sources-crash.md new file mode 100644 index 0000000..4aef492 --- /dev/null +++ b/tasks/podtui-navigation-theming-improvements/04-fix-settings-sources-crash.md @@ -0,0 +1,54 @@ +# 04. Fix Settings/Sources Sub-tab Crash + +meta: + id: podtui-navigation-theming-improvements-04 + feature: podtui-navigation-theming-improvements + priority: P1 + depends_on: [podtui-navigation-theming-improvements-01] + tags: [bug-fix, settings, crash] + +objective: +- Identify and fix crash when Settings/Sources sub-tab is selected +- Ensure SourceManager component loads without errors +- Test all functionality in Settings/Sources sub-tab + +deliverables: +- Fixed SourceManager.tsx component +- Debugged crash identified and resolved +- Test results showing no crashes + +steps: +- Read src/components/SourceManager.tsx thoroughly +- Check for null/undefined references in SourceManager +- Verify useFeedStore() is properly initialized +- Check all focus areas (list, add, url, country, explicit, language) +- Verify input component is properly imported and used +- Add null checks and error boundaries if needed +- Test Settings tab selection in App.tsx +- Test Sources sub-tab selection in SettingsScreen.tsx +- Verify no console errors +- Test all keyboard shortcuts and interactions + +tests: +- Unit: Test SourceManager component with mocked store +- Integration: Test Settings tab → Sources sub-tab navigation + +acceptance_criteria: +- Settings tab can be selected without crashes +- Sources sub-tab can be selected without crashes +- No console errors when Settings/Sources sub-tab is active +- All SourceManager functionality works (keyboard shortcuts, navigation) +- All form inputs and buttons work correctly + +validation: +- Run `bun run start` and select Settings tab +- Select Sources sub-tab and verify it loads +- Check console for errors +- Test all keyboard interactions (tab, esc, enter, space, a, d) +- Verify form inputs work correctly + +notes: +- Common crash causes: null store, undefined sources, missing component imports +- Check for unhandled promises or async operations +- Verify all props are properly passed from SettingsScreen.tsx +- Ensure useKeyboard hook doesn't conflict with parent keyboard handlers diff --git a/tasks/podtui-navigation-theming-improvements/05-design-layered-navigation-ui.md b/tasks/podtui-navigation-theming-improvements/05-design-layered-navigation-ui.md new file mode 100644 index 0000000..e185bd2 --- /dev/null +++ b/tasks/podtui-navigation-theming-improvements/05-design-layered-navigation-ui.md @@ -0,0 +1,53 @@ +# 05. Design Layered Navigation UI System + +meta: + id: podtui-navigation-theming-improvements-05 + feature: podtui-navigation-theming-improvements + priority: P2 + depends_on: [podtui-navigation-theming-improvements-02, podtui-navigation-theming-improvements-03, podtui-navigation-theming-improvements-04] + tags: [design, navigation, ui] + +objective: +- Design the layered navigation UI based on user requirements +- Create visual design for layer separation and active states +- Define how layers should be displayed and navigated + +deliverables: +- Navigation design document +- Layer visualization mockups +- Clear specifications for layer colors and borders +- Implementation plan for layered navigation + +steps: +- Review user requirements for navigation (clear layer separation, bg colors, left/right navigation, enter/escape controls) +- Analyze current layerDepth signal implementation +- Design layer separation mechanism (borders, backgrounds, spacing) +- Define active layer visual state (bg color, borders, indicators) +- Design navigation controls (left/right arrows, enter arrow down, escape arrow up) +- Create layer visualization showing how multiple layers should work +- Document layer structure and hierarchy +- Create implementation plan for Navigation component +- Define theme colors for layer backgrounds + +tests: +- Unit: None (design task) +- Integration: None (design task) + +acceptance_criteria: +- Navigation design document is created +- Layer separation mechanism is clearly specified +- Active layer visual state is defined +- Navigation controls are documented +- Implementation plan is provided + +validation: +- Review design document for clarity +- Verify it addresses all user requirements +- Check that design is feasible to implement + +notes: +- Layers should be clearly delineated with visual separation +- Active layer should have distinct background color +- Navigation should be intuitive with clear visual feedback +- Consider terminal width limitations +- Design should work with existing theme system diff --git a/tasks/podtui-navigation-theming-improvements/06-implement-layer-navigation-controls.md b/tasks/podtui-navigation-theming-improvements/06-implement-layer-navigation-controls.md new file mode 100644 index 0000000..aefa6fc --- /dev/null +++ b/tasks/podtui-navigation-theming-improvements/06-implement-layer-navigation-controls.md @@ -0,0 +1,54 @@ +# 06. Implement Left/Right Layer Navigation Controls + +meta: + id: podtui-navigation-theming-improvements-06 + feature: podtui-navigation-theming-improvements + priority: P2 + depends_on: [podtui-navigation-theming-improvements-05] + tags: [implementation, navigation, keyboard] + +objective: +- Implement left/right arrow key navigation between layers +- Add keyboard handlers for and keys +- Update navigation state to track current layer index + +deliverables: +- Updated Navigation component with left/right navigation +- Keyboard handler implementation in App.tsx +- Updated layer management logic + +steps: +- Read references/keyboard/REFERENCE.md for keyboard handling patterns +- Design layer index management (currentLayer, maxLayers) +- Update Navigation component to show layer navigation hints +- Add and key handlers in App.tsx useAppKeyboard hook +- Update layerDepth signal to reflect current layer index +- Add visual indicators for current layer position +- Update layer rendering to show active layer with left/right arrows +- Test navigation between layers +- Ensure keyboard shortcuts don't conflict with page-specific shortcuts + +tests: +- Unit: Test keyboard handler with mocked key events +- Integration: Test left/right navigation between layers + +acceptance_criteria: +- key navigates to previous layer +- key navigates to next layer +- Current layer is visually indicated +- Navigation hints are shown in Navigation component +- No keyboard conflicts with page-specific shortcuts +- Navigation works correctly at layer boundaries + +validation: +- Run `bun run start` and test left/right navigation +- Verify current layer is highlighted +- Check that navigation hints are visible +- Test at layer boundaries (first/last layer) +- Verify no conflicts with page shortcuts + +notes: +- Use references/keyboard/REFERENCE.md for proper keyboard handling patterns +- Consider accessibility and screen reader support +- Ensure consistent behavior across all pages +- Test with different terminal sizes diff --git a/tasks/podtui-navigation-theming-improvements/07-implement-enter-escape-controls.md b/tasks/podtui-navigation-theming-improvements/07-implement-enter-escape-controls.md new file mode 100644 index 0000000..dcbd541 --- /dev/null +++ b/tasks/podtui-navigation-theming-improvements/07-implement-enter-escape-controls.md @@ -0,0 +1,57 @@ +# 07. Implement Enter/Escape Layer Navigation Controls + +meta: + id: podtui-navigation-theming-improvements-07 + feature: podtui-navigation-theming-improvements + priority: P2 + depends_on: [podtui-navigation-theming-improvements-05] + tags: [implementation, navigation, keyboard] + +objective: +- Implement key to go down into a layer +- Implement key to go up one layer +- Update layer navigation to support entering/exiting layers + +deliverables: +- Updated layer navigation logic for enter/escape +- Updated Navigation component to show enter/escape hints +- Updated App.tsx keyboard handlers + +steps: +- Update Navigation component to show enter/escape navigation hints +- Add key handler in App.tsx useAppKeyboard hook +- Add key handler in App.tsx useAppKeyboard hook +- Update layerDepth signal to track current layer (0 = top level) +- Implement logic for entering a layer (increase layerDepth) +- Implement logic for exiting a layer (decrease layerDepth) +- Add visual feedback when entering/exiting layers +- Update all page components to handle layerDepth prop +- Test enter to go down, escape to go up +- Ensure proper layer nesting behavior + +tests: +- Unit: Test keyboard handler with mocked key events +- Integration: Test enter/escape navigation between layers + +acceptance_criteria: +- key goes down into a layer +- key goes up one layer +- Navigation hints show enter/escape directions +- Layer depth is properly tracked and managed +- Visual feedback shows current layer depth +- No keyboard conflicts with page-specific shortcuts +- Proper layer nesting behavior + +validation: +- Run `bun run start` and test enter/escape navigation +- Verify layer depth is visually indicated +- Check that navigation hints are visible +- Test proper layer nesting behavior +- Verify no conflicts with page shortcuts + +notes: +- Use references/keyboard/REFERENCE.md for proper keyboard handling patterns +- Consider terminal width limitations for layer hints +- Ensure consistent behavior across all pages +- Test with different layer depths +- Verify escape works at all layer depths diff --git a/tasks/podtui-navigation-theming-improvements/08-design-active-layer-colors.md b/tasks/podtui-navigation-theming-improvements/08-design-active-layer-colors.md new file mode 100644 index 0000000..af493b7 --- /dev/null +++ b/tasks/podtui-navigation-theming-improvements/08-design-active-layer-colors.md @@ -0,0 +1,53 @@ +# 08. Design Active Layer Background Color System + +meta: + id: podtui-navigation-theming-improvements-08 + feature: podtui-navigation-theming-improvements + priority: P3 + depends_on: [podtui-navigation-theming-improvements-05] + tags: [design, theming, navigation] + +objective: +- Design active layer background colors +- Define color palette for layer backgrounds +- Create theme-aware layer styling + +deliverables: +- Layer color design document +- Theme tokens for layer backgrounds +- Implementation plan for layer styling + +steps: +- Review existing theme system in src/constants/themes.ts +- Design layer background colors (active layer, inactive layers) +- Define color palette that works with existing themes +- Create theme tokens for layer backgrounds (e.g., layer-active-bg, layer-inactive-bg) +- Design border colors for layer separation +- Design indicator colors for current layer position +- Create implementation plan for applying layer colors +- Ensure colors work with system/light/dark modes + +tests: +- Unit: None (design task) +- Integration: None (design task) + +acceptance_criteria: +- Layer color design document is created +- Active layer background color is defined +- Inactive layer background color is defined +- Theme tokens are designed for layer backgrounds +- Colors work with existing theme system +- Implementation plan is provided + +validation: +- Review design document for clarity +- Verify colors work with existing themes +- Check that colors are accessible and readable +- Ensure colors work in both light and dark modes + +notes: +- Use existing theme tokens where possible +- Ensure contrast ratios meet accessibility standards +- Colors should be subtle but clearly visible +- Consider terminal color limitations +- Design should be consistent with existing UI elements diff --git a/tasks/podtui-navigation-theming-improvements/09-create-theme-context-provider.md b/tasks/podtui-navigation-theming-improvements/09-create-theme-context-provider.md new file mode 100644 index 0000000..ba3a392 --- /dev/null +++ b/tasks/podtui-navigation-theming-improvements/09-create-theme-context-provider.md @@ -0,0 +1,57 @@ +# 09. Create Theme Context Provider + +meta: + id: podtui-navigation-theming-improvements-09 + feature: podtui-navigation-theming-improvements + priority: P2 + depends_on: [] + tags: [theming, implementation, solid-js] + +objective: +- Create theme context provider based on opencode implementation +- Implement theme state management +- Provide theme tokens to all components + +deliverables: +- Theme context provider component +- Theme state management hooks +- Theme provider integration + +steps: +- Read opencode/packages/ui/src/theme/context.tsx for reference +- Create theme context using SolidJS createContext +- Design theme state structure (themeId, colorScheme, mode, etc.) +- Implement theme state management with signals +- Add theme selection and color scheme management functions +- Create ThemeProvider component +- Add theme persistence to localStorage +- Implement system theme detection +- Add theme change listeners +- Test theme context provider + +tests: +- Unit: Test theme context provider with mocked state +- Integration: Test theme provider integration + +acceptance_criteria: +- Theme context provider is created +- Theme state management works correctly +- Theme selection and color scheme management functions work +- Theme persistence to localStorage works +- System theme detection works +- Theme change listeners work +- Theme provider can be used to wrap App component + +validation: +- Run `bun run start` and verify theme context provider works +- Test theme selection functionality +- Test color scheme switching +- Verify localStorage persistence +- Check system theme detection + +notes: +- Use references/solid/REFERENCE.md for SolidJS patterns +- Follow opencode theming implementation patterns +- Use createSignal for reactive theme state +- Ensure proper cleanup in onCleanup +- Test with different theme configurations diff --git a/tasks/podtui-navigation-theming-improvements/10-implement-desktop-theme-types.md b/tasks/podtui-navigation-theming-improvements/10-implement-desktop-theme-types.md new file mode 100644 index 0000000..9146e89 --- /dev/null +++ b/tasks/podtui-navigation-theming-improvements/10-implement-desktop-theme-types.md @@ -0,0 +1,57 @@ +# 10. Implement DesktopTheme Type and Structure + +meta: + id: podtui-navigation-theming-improvements-10 + feature: podtui-navigation-theming-improvements + priority: P2 + depends_on: [podtui-navigation-theming-improvements-09] + tags: [theming, implementation, types] + +objective: +- Implement DesktopTheme type and structure based on opencode +- Define theme data structure for light and dark variants +- Create theme token types + +deliverables: +- DesktopTheme type definition +- Theme variant structure +- Token type definitions +- Example theme data + +steps: +- Read opencode/packages/ui/src/theme/types.ts for reference +- Create DesktopTheme type interface +- Define ThemeVariant structure with seeds and overrides +- Define ThemeColor type +- Define ColorScheme type +- Define ResolvedTheme type +- Define ColorValue type +- Create theme constants file +- Add example theme data (system, catppuccin, gruvbox, tokyo, nord) +- Test type definitions + +tests: +- Unit: Test type definitions with TypeScript compiler +- Integration: None (type definition task) + +acceptance_criteria: +- DesktopTheme type is defined +- ThemeVariant structure is defined +- ThemeColor type is defined +- ColorScheme type is defined +- ResolvedTheme type is defined +- ColorValue type is defined +- Example theme data is provided +- All types are exported correctly + +validation: +- Run `tsc --noEmit` to verify no TypeScript errors +- Test theme type usage in components +- Verify theme data structure is correct + +notes: +- Use references/solid/REFERENCE.md for SolidJS patterns +- Follow opencode theming implementation patterns +- Ensure types are comprehensive and well-documented +- Add JSDoc comments for complex types +- Consider TypeScript strict mode compliance diff --git a/tasks/podtui-navigation-theming-improvements/11-implement-theme-resolution.md b/tasks/podtui-navigation-theming-improvements/11-implement-theme-resolution.md new file mode 100644 index 0000000..b078b72 --- /dev/null +++ b/tasks/podtui-navigation-theming-improvements/11-implement-theme-resolution.md @@ -0,0 +1,59 @@ +# 11. Implement Theme Resolution System + +meta: + id: podtui-navigation-theming-improvements-11 + feature: podtui-navigation-theming-improvements + priority: P2 + depends_on: [podtui-navigation-theming-improvements-10] + tags: [theming, implementation, theme-resolution] + +objective: +- Implement theme resolution system for light and dark variants +- Create theme token generation logic +- Define color scale generation functions + +deliverables: +- Theme resolution functions +- Color scale generation functions +- Theme token generation logic +- Theme CSS variable generation + +steps: +- Read opencode/packages/ui/src/theme/resolve.ts for reference +- Implement resolveThemeVariant function +- Implement generateNeutralScale function +- Implement generateScale function +- Implement hexToOklch and oklchToHex functions +- Implement withAlpha function +- Implement themeToCss function +- Create theme resolution constants +- Define color scale configurations +- Implement theme resolution for each theme +- Test theme resolution functions + +tests: +- Unit: Test theme resolution with mocked themes +- Integration: Test theme resolution in context provider + +acceptance_criteria: +- resolveThemeVariant function works correctly +- generateNeutralScale function works correctly +- generateScale function works correctly +- Color conversion functions work correctly +- themeToCss function generates valid CSS +- Theme resolution works for all themes +- Light and dark variants are resolved correctly + +validation: +- Run `bun run start` and verify theme resolution works +- Test theme resolution for all themes +- Verify light/dark variants are correct +- Check CSS variable generation +- Test with different color schemes + +notes: +- Use references/solid/REFERENCE.md for SolidJS patterns +- Follow opencode theming implementation patterns +- Ensure color scales are generated correctly +- Test color conversion functions +- Verify theme tokens match expected values diff --git a/tasks/podtui-navigation-theming-improvements/12-create-css-token-system.md b/tasks/podtui-navigation-theming-improvements/12-create-css-token-system.md new file mode 100644 index 0000000..74919ef --- /dev/null +++ b/tasks/podtui-navigation-theming-improvements/12-create-css-token-system.md @@ -0,0 +1,57 @@ +# 12. Create CSS Variable Token System + +meta: + id: podtui-navigation-theming-improvements-12 + feature: podtui-navigation-theming-improvements + priority: P3 + depends_on: [podtui-navigation-theming-improvements-11] + tags: [theming, implementation, css-variables] + +objective: +- Create comprehensive CSS variable token system +- Define all theme tokens for OpenTUI components +- Generate CSS variables from theme tokens + +deliverables: +- CSS variable token definitions +- Theme CSS generation functions +- CSS variable application utilities + +steps: +- Read opencode/packages/ui/src/theme/resolve.ts for reference +- Review opencode theme token definitions +- Define theme tokens for OpenTUI components: + - Background tokens (background-base, background-weak, etc.) + - Surface tokens (surface-base, surface-raised, etc.) + - Text tokens (text-base, text-weak, etc.) + - Border tokens (border-base, border-hover, etc.) + - Interactive tokens (interactive-base, interactive-hover, etc.) + - Color tokens for specific states (success, warning, error, etc.) + - Layer navigation tokens (layer-active-bg, layer-inactive-bg, etc.) +- Implement themeToCss function to generate CSS variables +- Create utility to apply theme tokens to components +- Test CSS variable generation + +tests: +- Unit: Test CSS variable generation +- Integration: Test CSS variable application in components + +acceptance_criteria: +- All OpenTUI theme tokens are defined +- CSS variable generation works correctly +- Theme tokens can be applied to components +- Generated CSS is valid +- Tokens cover all component styling needs + +validation: +- Run `bun run start` and verify CSS variables are applied +- Test theme token application in components +- Check CSS variable values +- Verify tokens work with existing components + +notes: +- Use references/solid/REFERENCE.md for SolidJS patterns +- Follow opencode theming implementation patterns +- Ensure tokens are comprehensive and well-organized +- Test token application in various components +- Consider backward compatibility with existing hardcoded colors diff --git a/tasks/podtui-navigation-theming-improvements/13-implement-system-theme-detection.md b/tasks/podtui-navigation-theming-improvements/13-implement-system-theme-detection.md new file mode 100644 index 0000000..d432b0e --- /dev/null +++ b/tasks/podtui-navigation-theming-improvements/13-implement-system-theme-detection.md @@ -0,0 +1,55 @@ +# 13. Implement System Theme Detection + +meta: + id: podtui-navigation-theming-improvements-13 + feature: podtui-navigation-theming-improvements + priority: P2 + depends_on: [podtui-navigation-theming-improvements-12] + tags: [theming, implementation, system-theme] + +objective: +- Implement system theme detection (prefers-color-scheme) +- Add theme mode management (light/dark/auto) +- Implement automatic theme switching based on system preferences + +deliverables: +- System theme detection implementation +- Theme mode management functions +- Automatic theme switching logic + +steps: +- Read opencode/packages/ui/src/theme/context.tsx for reference +- Implement getSystemMode function +- Add theme mode state to theme context +- Implement colorScheme state management +- Add window.matchMedia listener for system theme changes +- Implement automatic mode switching when colorScheme is "system" +- Add theme mode persistence to localStorage +- Test system theme detection +- Test automatic theme switching + +tests: +- Unit: Test system theme detection with mocked media queries +- Integration: Test theme mode switching + +acceptance_criteria: +- getSystemMode function works correctly +- Theme mode state is managed correctly +- Window.matchMedia listener works correctly +- Automatic theme switching works when colorScheme is "system" +- Theme mode persistence to localStorage works +- System theme changes are detected and applied + +validation: +- Run `bun run start` and test system theme detection +- Test switching system between light/dark modes +- Verify automatic theme switching works +- Check localStorage persistence +- Test theme mode selection (system/light/dark) + +notes: +- Use references/solid/REFERENCE.md for SolidJS patterns +- Follow opencode theming implementation patterns +- Ensure proper cleanup in onCleanup +- Test with different system theme settings +- Verify theme updates are reactive diff --git a/tasks/podtui-navigation-theming-improvements/14-integrate-theme-provider.md b/tasks/podtui-navigation-theming-improvements/14-integrate-theme-provider.md new file mode 100644 index 0000000..210ceec --- /dev/null +++ b/tasks/podtui-navigation-theming-improvements/14-integrate-theme-provider.md @@ -0,0 +1,59 @@ +# 14. Integrate Theme Provider into App Component + +meta: + id: podtui-navigation-theming-improvements-14 + feature: podtui-navigation-theming-improvements + priority: P2 + depends_on: [podtui-navigation-theming-improvements-09, podtui-navigation-theming-improvements-13] + tags: [integration, theming, app] + +objective: +- Integrate theme provider into App component +- Apply theme tokens to all components +- Ensure theme changes are reactive + +deliverables: +- Updated App.tsx with theme provider +- Theme application logic +- Theme integration tests + +steps: +- Read references/solid/REFERENCE.md for SolidJS patterns +- Wrap App component with ThemeProvider +- Implement theme application in Layout component +- Apply theme tokens to all components: + - TabNavigation (active tab background) + - Navigation (footer navigation) + - DiscoverPage (background, borders, text colors) + - FeedList (background, borders, text colors) + - SettingsScreen (background, borders, text colors) + - SourceManager (background, borders, text colors) + - All other components +- Update theme tokens usage in src/constants/themes.ts +- Test theme application in all components +- Test theme changes are reactive + +tests: +- Unit: Test theme provider integration +- Integration: Test theme changes in all components + +acceptance_criteria: +- ThemeProvider is integrated into App component +- Theme tokens are applied to all components +- Theme changes are reactive +- All components render correctly with theme tokens +- No console errors related to theming + +validation: +- Run `bun run start` and verify theme is applied +- Test theme selection and color scheme switching +- Test system theme detection +- Verify all components use theme tokens +- Check console for errors + +notes: +- Use references/solid/REFERENCE.md for SolidJS patterns +- Follow opencode theming implementation patterns +- Ensure theme tokens are used consistently +- Test theme changes in all components +- Verify no hardcoded colors remain diff --git a/tasks/podtui-navigation-theming-improvements/15-update-components-to-use-themes.md b/tasks/podtui-navigation-theming-improvements/15-update-components-to-use-themes.md new file mode 100644 index 0000000..1d85d5d --- /dev/null +++ b/tasks/podtui-navigation-theming-improvements/15-update-components-to-use-themes.md @@ -0,0 +1,60 @@ +# 15. Update Components to Use Theme Tokens + +meta: + id: podtui-navigation-theming-improvements-15 + feature: podtui-navigation-theming-improvements + priority: P3 + depends_on: [podtui-navigation-theming-improvements-14] + tags: [theming, implementation, component-updates] + +objective: +- Replace all hardcoded colors with theme tokens +- Update all components to use theme context +- Ensure consistent theme application across all components + +deliverables: +- Updated components using theme tokens +- Theme token usage guide +- List of components updated + +steps: +- Review all components in src/components/ +- Identify all hardcoded color values +- Replace hardcoded colors with theme tokens: + - Background colors (background-base, surface-base, etc.) + - Text colors (text-base, text-weak, etc.) + - Border colors (border-base, border-hover, etc.) + - Interactive colors (interactive-base, interactive-hover, etc.) + - Color tokens (success, warning, error, etc.) + - Layer navigation colors (layer-active-bg, layer-inactive-bg, etc.) +- Update src/constants/themes.ts to export theme tokens +- Update all components to use theme context +- Test theme tokens in all components +- Verify no hardcoded colors remain +- Create theme token usage guide + +tests: +- Unit: Test theme tokens in individual components +- Integration: Test theme tokens in all components + +acceptance_criteria: +- All hardcoded colors are replaced with theme tokens +- All components use theme tokens +- Theme tokens are exported from themes.ts +- Theme token usage guide is created +- No console errors related to theming +- All components render correctly with theme tokens + +validation: +- Run `bun run start` and verify all components use theme tokens +- Test theme selection and color scheme switching +- Verify all components render correctly +- Check console for errors +- Verify no hardcoded colors remain + +notes: +- Use references/solid/REFERENCE.md for SolidJS patterns +- Follow opencode theming implementation patterns +- Ensure consistent theme application across all components +- Test theme tokens in all components +- Verify backward compatibility if needed diff --git a/tasks/podtui-navigation-theming-improvements/16-test-navigation-flows.md b/tasks/podtui-navigation-theming-improvements/16-test-navigation-flows.md new file mode 100644 index 0000000..b212341 --- /dev/null +++ b/tasks/podtui-navigation-theming-improvements/16-test-navigation-flows.md @@ -0,0 +1,65 @@ +# 16. Test Navigation Flows and Layer Transitions + +meta: + id: podtui-navigation-theming-improvements-16 + feature: podtui-navigation-theming-improvements + priority: P2 + depends_on: [podtui-navigation-theming-improvements-06, podtui-navigation-theming-improvements-07, podtui-navigation-theming-improvements-08] + tags: [testing, navigation, integration] + +objective: +- Test all navigation flows and layer transitions +- Verify left/right navigation works correctly +- Verify enter/escape navigation works correctly +- Test layer transitions between different pages + +deliverables: +- Navigation test results +- Test cases for navigation flows +- Bug reports for any issues + +steps: +- Create test cases for navigation flows: + - Test left/right navigation between layers + - Test enter to go down into layers + - Test escape to go up from layers + - Test layer boundaries (first/last layer) + - Test layer nesting behavior + - Test navigation with different terminal sizes +- Run `bun run start` and perform all test cases +- Document any issues or bugs +- Test navigation in all pages: + - Discover tab + - My Feeds tab + - Search tab + - Player tab + - Settings tab +- Test keyboard shortcut conflicts +- Test visual feedback for navigation +- Test layer color visibility + +tests: +- Unit: Test navigation logic with mocked state +- Integration: Test navigation flows in actual application + +acceptance_criteria: +- All navigation flows work correctly +- Left/right navigation works between layers +- Enter/escape navigation works correctly +- Layer boundaries are handled correctly +- No keyboard shortcut conflicts +- Visual feedback is clear and accurate +- All pages work correctly with navigation + +validation: +- Run `bun run start` and perform all test cases +- Document all test results +- Report any issues found +- Verify all navigation flows work + +notes: +- Test with different terminal sizes +- Test with different layer depths +- Test keyboard shortcuts in all pages +- Verify visual feedback is clear +- Test edge cases and error conditions diff --git a/tasks/podtui-navigation-theming-improvements/17-test-tab-crash-fixes.md b/tasks/podtui-navigation-theming-improvements/17-test-tab-crash-fixes.md new file mode 100644 index 0000000..080c7eb --- /dev/null +++ b/tasks/podtui-navigation-theming-improvements/17-test-tab-crash-fixes.md @@ -0,0 +1,64 @@ +# 17. Test Tab Crash Fixes and Edge Cases + +meta: + id: podtui-navigation-theming-improvements-17 + feature: podtui-navigation-theming-improvements + priority: P1 + depends_on: [podtui-navigation-theming-improvements-02, podtui-navigation-theming-improvements-03, podtui-navigation-theming-improvements-04] + tags: [testing, crash-fix, integration] + +objective: +- Test all tab crash fixes +- Verify Discover, My Feeds, and Settings tabs load without errors +- Test edge cases and error conditions + +deliverables: +- Crash fix test results +- Test cases for tab crashes +- Bug reports for any remaining issues + +steps: +- Create test cases for tab crashes: + - Test Discover tab selection + - Test My Feeds tab selection + - Test Settings tab selection + - Test Settings/Sources sub-tab selection + - Test navigation between tabs +- Run `bun run start` and perform all test cases +- Test all keyboard shortcuts in each tab +- Test edge cases: + - Empty feed lists + - Missing data + - Network errors + - Invalid inputs + - Rapid tab switching +- Test error boundaries +- Document any remaining issues +- Verify no console errors + +tests: +- Unit: Test components with mocked data +- Integration: Test all tabs and sub-tabs in actual application + +acceptance_criteria: +- All tabs load without crashes +- No console errors when selecting tabs +- All keyboard shortcuts work correctly +- Edge cases are handled gracefully +- Error boundaries work correctly +- All test cases pass + +validation: +- Run `bun run start` and perform all test cases +- Check console for errors +- Test all keyboard shortcuts +- Test edge cases +- Document all test results +- Report any remaining issues + +notes: +- Test with different data states (empty, full, partial) +- Test network error scenarios +- Test rapid user interactions +- Verify error messages are clear +- Test with different terminal sizes diff --git a/tasks/podtui-navigation-theming-improvements/18-test-theming-system.md b/tasks/podtui-navigation-theming-improvements/18-test-theming-system.md new file mode 100644 index 0000000..421f404 --- /dev/null +++ b/tasks/podtui-navigation-theming-improvements/18-test-theming-system.md @@ -0,0 +1,72 @@ +# 18. Test Theming System with All Modes + +meta: + id: podtui-navigation-theming-improvements-18 + feature: podtui-navigation-theming-improvements + priority: P2 + depends_on: [podtui-navigation-theming-improvements-15, podtui-navigation-theming-improvements-16, podtui-navigation-theming-improvements-17] + tags: [testing, theming, integration] + +objective: +- Test theming system with all modes (system/light/dark) +- Verify theme tokens work correctly +- Ensure theming is consistent across all components +- Test theme persistence and system theme detection + +deliverables: +- Theming system test results +- Theme token test cases +- Theme consistency report + +steps: +- Create test cases for theming system: + - Test system theme mode + - Test light theme mode + - Test dark theme mode + - Test theme persistence + - Test system theme detection + - Test theme selection + - Test color scheme switching +- Run `bun run start` and perform all test cases +- Test theme tokens in all components: + - Background colors + - Text colors + - Border colors + - Interactive colors + - Color tokens (success, warning, error, etc.) + - Layer navigation colors +- Test theme changes are reactive +- Test theme tokens work in all terminals +- Verify theme consistency across all components +- Document any issues + +tests: +- Unit: Test theme tokens with mocked themes +- Integration: Test theming in all components and modes + +acceptance_criteria: +- Theming system works correctly in all modes +- Theme tokens work correctly in all components +- Theme changes are reactive +- Theme persistence works correctly +- System theme detection works correctly +- Theme consistency is maintained across all components +- All test cases pass + +validation: +- Run `bun run start` and perform all test cases +- Test all theme modes (system/light/dark) +- Test theme selection and color scheme switching +- Verify theme persistence +- Test system theme detection +- Check console for errors +- Verify theme consistency across all components +- Document all test results + +notes: +- Test with different terminal sizes +- Test with different color schemes +- Test rapid theme changes +- Verify theme updates are reactive +- Test all components with all themes +- Ensure accessibility standards are met diff --git a/tasks/podtui-navigation-theming-improvements/README.md b/tasks/podtui-navigation-theming-improvements/README.md new file mode 100644 index 0000000..148865a --- /dev/null +++ b/tasks/podtui-navigation-theming-improvements/README.md @@ -0,0 +1,50 @@ +# PodTUI Navigation and Theming Improvements + +Objective: Implement layered navigation system, fix tab crashes, and integrate sophisticated theming based on opencode + +Status legend: [ ] todo, [~] in-progress, [x] done + +Tasks +- [ ] 01 — Analyze current navigation and layer system → `01-analyze-navigation-system.md` +- [ ] 02 — Fix Discover tab crash → `02-fix-discover-tab-crash.md` +- [ ] 03 — Fix My Feeds tab crash → `03-fix-feeds-tab-crash.md` +- [ ] 04 — Fix Settings/Sources sub-tab crash → `04-fix-settings-sources-crash.md` +- [ ] 05 — Design layered navigation UI system → `05-design-layered-navigation-ui.md` +- [ ] 06 — Implement left/right layer navigation controls → `06-implement-layer-navigation-controls.md` +- [ ] 07 — Implement enter/escape layer navigation controls → `07-implement-enter-escape-controls.md` +- [ ] 08 — Design active layer background color system → `08-design-active-layer-colors.md` +- [ ] 09 — Create theme context provider → `09-create-theme-context-provider.md` +- [ ] 10 — Implement DesktopTheme type and structure → `10-implement-desktop-theme-types.md` +- [ ] 11 — Implement theme resolution system → `11-implement-theme-resolution.md` +- [ ] 12 — Create CSS variable token system → `12-create-css-token-system.md` +- [ ] 13 — Implement system theme detection → `13-implement-system-theme-detection.md` +- [ ] 14 — Integrate theme provider into App component → `14-integrate-theme-provider.md` +- [ ] 15 — Update components to use theme tokens → `15-update-components-to-use-themes.md` +- [ ] 16 — Test navigation flows and layer transitions → `16-test-navigation-flows.md` +- [ ] 17 — Test tab crash fixes and edge cases → `17-test-tab-crash-fixes.md` +- [ ] 18 — Test theming system with all modes → `18-test-theming-system.md` + +Dependencies +- 01 depends on +- 02, 03, 04 depends on 01 +- 05 depends on 02, 03, 04 +- 06, 07, 08 depends on 05 +- 16 depends on 06, 07, 08 +- 09 depends on +- 10 depends on 09 +- 11 depends on 10 +- 12 depends on 11 +- 13 depends on 12 +- 14 depends on 13 +- 15 depends on 14 +- 18 depends on 15, 16, 17 + +Exit criteria +- Navigation is clearly visualized with layered backgrounds and active states +- Left/right keys navigate between layers, enter goes down, escape goes up +- All tabs (Discover, My Feeds, Settings) load without crashes +- Settings/Sources sub-tab loads without crashes +- Theming system works correctly with system/light/dark/auto modes +- All components use theme tokens consistently +- No hardcoded colors remain in components +- All tests pass and crashes are resolved