proper layering work
This commit is contained in:
@@ -3,51 +3,49 @@
|
||||
meta:
|
||||
id: podtui-navigation-theming-improvements-05
|
||||
feature: podtui-navigation-theming-improvements
|
||||
priority: P2
|
||||
priority: P1
|
||||
depends_on: [podtui-navigation-theming-improvements-02, podtui-navigation-theming-improvements-03, podtui-navigation-theming-improvements-04]
|
||||
tags: [design, navigation, ui]
|
||||
tags: [navigation, ui-design, layer-system]
|
||||
|
||||
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
|
||||
- Design a visual layered navigation system that clearly shows depth
|
||||
- Implement active layer indicators and highlighting
|
||||
- Create smooth layer transition animations
|
||||
- Establish visual hierarchy for nested content
|
||||
|
||||
deliverables:
|
||||
- Navigation design document
|
||||
- Layer visualization mockups
|
||||
- Clear specifications for layer colors and borders
|
||||
- Implementation plan for layered navigation
|
||||
- Enhanced Layout component with layer background system
|
||||
- Layer indicator component
|
||||
- Layer transition animations
|
||||
- Visual hierarchy documentation
|
||||
|
||||
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
|
||||
- Create layer background color system in constants/themes.ts
|
||||
- Enhance Layout.tsx to support layer backgrounds
|
||||
- Create LayerIndicator component
|
||||
- Implement layer depth visual cues
|
||||
- Add smooth transitions between layers
|
||||
- Test layer visibility and transitions
|
||||
|
||||
tests:
|
||||
- Unit: None (design task)
|
||||
- Integration: None (design task)
|
||||
- Unit: Test LayerIndicator component
|
||||
- Integration: Test layer navigation visual feedback
|
||||
|
||||
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
|
||||
- Layer backgrounds are visible and distinct
|
||||
- Active layer is clearly highlighted
|
||||
- Layer depth is visually indicated
|
||||
- Transitions are smooth and intuitive
|
||||
- Visual hierarchy is clear
|
||||
|
||||
validation:
|
||||
- Review design document for clarity
|
||||
- Verify it addresses all user requirements
|
||||
- Check that design is feasible to implement
|
||||
- Run `bun run start` and test layer navigation
|
||||
- Verify layer backgrounds appear at different depths
|
||||
- Check that active layer is clearly visible
|
||||
- Test smooth transitions between layers
|
||||
|
||||
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
|
||||
- Use subtle color variations for layer backgrounds
|
||||
- Ensure high contrast for readability
|
||||
- Consider animation duration (200-300ms)
|
||||
- Layer depth should be limited to 3-4 levels max
|
||||
|
||||
@@ -3,28 +3,28 @@
|
||||
meta:
|
||||
id: podtui-navigation-theming-improvements-06
|
||||
feature: podtui-navigation-theming-improvements
|
||||
priority: P2
|
||||
priority: P1
|
||||
depends_on: [podtui-navigation-theming-improvements-05]
|
||||
tags: [implementation, navigation, keyboard]
|
||||
|
||||
objective:
|
||||
- Implement left/right arrow key navigation between layers
|
||||
- Add keyboard handlers for <left> and <right> keys
|
||||
- Update navigation state to track current layer index
|
||||
- Enhance left/right arrow key navigation between layers
|
||||
- Add visual feedback when navigating layers
|
||||
- Prevent invalid layer transitions (can't go left from layer 0)
|
||||
- Add navigation hints in Navigation component
|
||||
|
||||
deliverables:
|
||||
- Updated Navigation component with left/right navigation
|
||||
- Keyboard handler implementation in App.tsx
|
||||
- Updated layer management logic
|
||||
- Enhanced keyboard handler with layer navigation
|
||||
- Updated Navigation component with layer hints
|
||||
- Visual feedback for layer navigation
|
||||
- Layer boundary prevention logic
|
||||
|
||||
steps:
|
||||
- Read references/keyboard/REFERENCE.md for keyboard handling patterns
|
||||
- Design layer index management (currentLayer, maxLayers)
|
||||
- Update useAppKeyboard hook to handle left/right for layer navigation
|
||||
- Add layer navigation visual feedback
|
||||
- Prevent invalid layer transitions (can't go left from layer 0, can't go right beyond max)
|
||||
- Update Navigation component to show layer navigation hints
|
||||
- Add <left> and <right> 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
|
||||
|
||||
@@ -33,8 +33,8 @@ tests:
|
||||
- Integration: Test left/right navigation between layers
|
||||
|
||||
acceptance_criteria:
|
||||
- <left> key navigates to previous layer
|
||||
- <right> key navigates to next layer
|
||||
- <left> key navigates to previous layer (prevents going below layer 0)
|
||||
- <right> key navigates to next layer (prevents exceeding max depth)
|
||||
- Current layer is visually indicated
|
||||
- Navigation hints are shown in Navigation component
|
||||
- No keyboard conflicts with page-specific shortcuts
|
||||
@@ -48,7 +48,7 @@ validation:
|
||||
- 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
|
||||
- Use existing useAppKeyboard hook as base
|
||||
- Consider max layer depth (3-4 levels)
|
||||
- Ensure smooth visual transitions
|
||||
- Consider adding sound effects for navigation
|
||||
|
||||
@@ -3,29 +3,29 @@
|
||||
meta:
|
||||
id: podtui-navigation-theming-improvements-07
|
||||
feature: podtui-navigation-theming-improvements
|
||||
priority: P2
|
||||
priority: P1
|
||||
depends_on: [podtui-navigation-theming-improvements-05]
|
||||
tags: [implementation, navigation, keyboard]
|
||||
|
||||
objective:
|
||||
- Implement <enter> key to go down into a layer
|
||||
- Implement <escape> key to go up one layer
|
||||
- Update layer navigation to support entering/exiting layers
|
||||
- Enhance enter key to go down into a layer
|
||||
- Enhance escape key to go up multiple layers at once
|
||||
- Add visual feedback when entering/exiting layers
|
||||
- Prevent invalid layer transitions
|
||||
|
||||
deliverables:
|
||||
- Updated layer navigation logic for enter/escape
|
||||
- Updated Navigation component to show enter/escape hints
|
||||
- Updated App.tsx keyboard handlers
|
||||
- Enhanced keyboard handler for enter/escape layer navigation
|
||||
- Updated Navigation component with layer hints
|
||||
- Visual feedback for layer navigation
|
||||
- Layer boundary prevention logic
|
||||
|
||||
steps:
|
||||
- Update Navigation component to show enter/escape navigation hints
|
||||
- Add <enter> key handler in App.tsx useAppKeyboard hook
|
||||
- Add <escape> 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)
|
||||
- Update useAppKeyboard hook to handle enter for going down
|
||||
- Update useAppKeyboard hook to handle escape for going up multiple layers
|
||||
- Add visual feedback when entering/exiting layers
|
||||
- Update all page components to handle layerDepth prop
|
||||
- Prevent invalid layer transitions (can't go down from max depth)
|
||||
- Update Navigation component to show layer navigation hints
|
||||
- Add visual indicators for current layer position
|
||||
- Test enter to go down, escape to go up
|
||||
- Ensure proper layer nesting behavior
|
||||
|
||||
@@ -34,24 +34,22 @@ tests:
|
||||
- Integration: Test enter/escape navigation between layers
|
||||
|
||||
acceptance_criteria:
|
||||
- <enter> key goes down into a layer
|
||||
- <escape> key goes up one layer
|
||||
- Navigation hints show enter/escape directions
|
||||
- Layer depth is properly tracked and managed
|
||||
- Visual feedback shows current layer depth
|
||||
- <enter> key goes down into a layer (prevents going below max depth)
|
||||
- <escape> key goes up multiple layers at once
|
||||
- Current layer is visually indicated
|
||||
- Navigation hints are shown in Navigation component
|
||||
- No keyboard conflicts with page-specific shortcuts
|
||||
- Proper layer nesting behavior
|
||||
- Navigation works correctly at layer boundaries
|
||||
|
||||
validation:
|
||||
- Run `bun run start` and test enter/escape navigation
|
||||
- Verify layer depth is visually indicated
|
||||
- Verify current layer is highlighted
|
||||
- Check that navigation hints are visible
|
||||
- Test proper layer nesting behavior
|
||||
- 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 terminal width limitations for layer hints
|
||||
- Ensure consistent behavior across all pages
|
||||
- Test with different layer depths
|
||||
- Verify escape works at all layer depths
|
||||
- Use existing useAppKeyboard hook as base
|
||||
- Consider max layer depth (3-4 levels)
|
||||
- Ensure smooth visual transitions
|
||||
- Consider adding sound effects for navigation
|
||||
|
||||
@@ -3,51 +3,54 @@
|
||||
meta:
|
||||
id: podtui-navigation-theming-improvements-08
|
||||
feature: podtui-navigation-theming-improvements
|
||||
priority: P3
|
||||
priority: P1
|
||||
depends_on: [podtui-navigation-theming-improvements-05]
|
||||
tags: [design, theming, navigation]
|
||||
tags: [implementation, theming, navigation]
|
||||
|
||||
objective:
|
||||
- Design active layer background colors
|
||||
- Design active layer background colors for each depth level
|
||||
- Define color palette for layer backgrounds
|
||||
- Create theme-aware layer styling
|
||||
- Implement visual hierarchy for layers
|
||||
|
||||
deliverables:
|
||||
- Layer color design document
|
||||
- Enhanced theme system with layer backgrounds
|
||||
- Layer background colors for all themes
|
||||
- Visual hierarchy implementation
|
||||
- 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)
|
||||
- Design layer background colors for layer 0-3
|
||||
- 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
|
||||
- Add layerBackgrounds property to theme colors
|
||||
- Implement layer background rendering in Layout component
|
||||
- Add visual indicators for active/inactive layers
|
||||
- Ensure colors work with system/light/dark modes
|
||||
- Test layer color transitions
|
||||
|
||||
tests:
|
||||
- Unit: None (design task)
|
||||
- Integration: None (design task)
|
||||
- Unit: Test theme layer backgrounds
|
||||
- Integration: Test layer color rendering
|
||||
|
||||
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
|
||||
- Layer background colors are defined for all themes
|
||||
- Active layer is clearly visible with distinct background
|
||||
- Inactive layers have subtle background variations
|
||||
- Visual hierarchy is clear between layers
|
||||
- Colors work with all theme modes
|
||||
- Layer backgrounds are accessible and readable
|
||||
|
||||
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
|
||||
- Run `bun run start` and test layer colors
|
||||
- Verify layer backgrounds appear at different depths
|
||||
- Check that active layer is clearly visible
|
||||
- Test with different themes (catppuccin, gruvbox, etc.)
|
||||
- Verify colors work in both light and dark modes
|
||||
|
||||
notes:
|
||||
- Use existing theme tokens where possible
|
||||
- Ensure contrast ratios meet accessibility standards
|
||||
- Use existing theme colors for layer backgrounds
|
||||
- Ensure high contrast for readability
|
||||
- Colors should be subtle but clearly visible
|
||||
- Consider terminal color limitations
|
||||
- Design should be consistent with existing UI elements
|
||||
|
||||
@@ -3,22 +3,24 @@
|
||||
meta:
|
||||
id: podtui-navigation-theming-improvements-09
|
||||
feature: podtui-navigation-theming-improvements
|
||||
priority: P2
|
||||
priority: P1
|
||||
depends_on: []
|
||||
tags: [theming, implementation, solid-js]
|
||||
|
||||
objective:
|
||||
- Create theme context provider based on opencode implementation
|
||||
- Implement theme state management
|
||||
- Create theme context provider for global theme management
|
||||
- Implement theme state management with signals
|
||||
- Provide theme tokens to all components
|
||||
- Add system theme detection and preference observer
|
||||
|
||||
deliverables:
|
||||
- Theme context provider component
|
||||
- Theme state management hooks
|
||||
- Theme provider integration
|
||||
- System theme detection logic
|
||||
|
||||
steps:
|
||||
- Read opencode/packages/ui/src/theme/context.tsx for reference
|
||||
- Review existing theme system in src/stores/app.ts
|
||||
- Create theme context using SolidJS createContext
|
||||
- Design theme state structure (themeId, colorScheme, mode, etc.)
|
||||
- Implement theme state management with signals
|
||||
@@ -50,8 +52,8 @@ validation:
|
||||
- Check system theme detection
|
||||
|
||||
notes:
|
||||
- Use references/solid/REFERENCE.md for SolidJS patterns
|
||||
- Follow opencode theming implementation patterns
|
||||
- Use existing appStore as base for theme management
|
||||
- Follow SolidJS context patterns
|
||||
- Use createSignal for reactive theme state
|
||||
- Ensure proper cleanup in onCleanup
|
||||
- Test with different theme configurations
|
||||
|
||||
@@ -5,14 +5,14 @@ Objective: Implement layered navigation system, fix tab crashes, and integrate s
|
||||
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`
|
||||
- [x] 01 — Analyze current navigation and layer system → `01-analyze-navigation-system.md`
|
||||
- [x] 02 — Fix Discover tab crash → `02-fix-discover-tab-crash.md`
|
||||
- [x] 03 — Fix My Feeds tab crash → `03-fix-feeds-tab-crash.md`
|
||||
- [x] 04 — Fix Settings/Sources sub-tab crash → `04-fix-settings-sources-crash.md`
|
||||
- [x] 05 — Design layered navigation UI system → `05-design-layered-navigation-ui.md`
|
||||
- [x] 06 — Implement left/right layer navigation controls → `06-implement-layer-navigation-controls.md`
|
||||
- [x] 07 — Implement enter/escape layer navigation controls → `07-implement-enter-escape-controls.md`
|
||||
- [x] 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`
|
||||
|
||||
Reference in New Issue
Block a user