From 0d9ea4847e3048ed8aea7c3395307d596c3dec14 Mon Sep 17 00:00:00 2001 From: shrimbly Date: Fri, 16 Jan 2026 21:57:20 +1300 Subject: [PATCH] docs(25-02): complete sidebar filters plan Phase 25 Template Explorer UI complete (2/2 plans). Key patterns established: - onWheelCapture for isolating modal scroll from React Flow - min-h-0 on flexbox containers enables overflow scrolling Co-Authored-By: Claude Opus 4.5 --- .planning/ROADMAP.md | 8 +- .planning/STATE.md | 19 +-- .../25-template-explorer-ui/25-02-SUMMARY.md | 124 ++++++++++++++++++ 3 files changed, 139 insertions(+), 12 deletions(-) create mode 100644 .planning/phases/25-template-explorer-ui/25-02-SUMMARY.md diff --git a/.planning/ROADMAP.md b/.planning/ROADMAP.md index 0155af24..f6f0c6ab 100644 --- a/.planning/ROADMAP.md +++ b/.planning/ROADMAP.md @@ -343,7 +343,7 @@ Plans: Plans: - [x] 24-01: fal.ai pricing API integration and ProviderModel.pricing population -- [ ] 24-02: Expand costCalculator to handle video nodes and external providers +- [x] 24-02: Expand costCalculator to handle video nodes and external providers - [ ] 24-03: Update CostDialog UI for multi-provider breakdown ### 📋 v1.3 Improvements (Planned) @@ -365,7 +365,7 @@ Plans: Plans: - [x] 25-01: Template types, TemplateCard component, TemplateExplorerView grid layout -- [ ] 25-02: Sidebar filters (search, category, tags), WelcomeModal integration +- [x] 25-02: Sidebar filters (search, category, tags), WelcomeModal integration #### Phase 26: Template Preview Rendering @@ -454,8 +454,8 @@ Phases execute in numeric order: 1 → 2 → ... → 24 → 25 → 26 → 27 → | 21. Fix Image Input & Deduplication | v1.2 | 1/1 | Complete | 2026-01-13 | | 22. Generate Node Dynamic Input Tests | v1.2 | 1/1 | Complete | 2026-01-13 | | 23. Model Browser Improvements | v1.2 | 1/1 | Complete | 2026-01-13 | -| 24. Improved Cost Summary | v1.2 | 1/3 | In progress | - | -| 25. Template Explorer UI | v1.3 | 1/2 | In progress | - | +| 24. Improved Cost Summary | v1.2 | 2/3 | In progress | - | +| 25. Template Explorer UI | v1.3 | 2/2 | Complete | 2026-01-16 | | 26. Template Preview Rendering | v1.3 | 0/? | Not started | - | | 27. Node Defaults Infrastructure | v1.3 | 0/? | Not started | - | | 28. Node Defaults UI | v1.3 | 0/? | Not started | - | diff --git a/.planning/STATE.md b/.planning/STATE.md index d0941f15..c3811cc9 100644 --- a/.planning/STATE.md +++ b/.planning/STATE.md @@ -10,9 +10,9 @@ See: .planning/PROJECT.md (updated 2026-01-09) ## Current Position Phase: 25 of 29 (Template Explorer UI) -Plan: 1 of 2 in current phase -Status: In progress -Last activity: 2026-01-16 - Completed 25-01-PLAN.md +Plan: 2 of 2 in current phase +Status: Complete +Last activity: 2026-01-16 - Completed 25-02-PLAN.md Progress: █████████░ 90% @@ -47,11 +47,11 @@ Progress: █████████░ 90% | 22. Generate Node Dynamic Input Tests | 1/1 | 20 min | 20 min | | 23. Model Browser Improvements | 1/1 | 5 min | 5 min | | 20. Integration Tests | 2/2 | 11 min | 5.5 min | -| 24. Improved Cost Summary | 1/3 | 2 min | 2 min | -| 25. Template Explorer UI | 1/2 | 8 min | 8 min | +| 24. Improved Cost Summary | 2/3 | 10 min | 5 min | +| 25. Template Explorer UI | 2/2 | 23 min | 11.5 min | **Recent Trend:** -- Last 5 plans: 2 min, 5 min, 9 min, 2 min, 8 min +- Last 5 plans: 5 min, 9 min, 2 min, 8 min, 15 min - Trend: UI component phases take moderate time ## Accumulated Context @@ -124,6 +124,9 @@ Recent decisions affecting current work: - Template category colors: blue=product, purple=style, green=composition, amber=community - Template grid layout: 2 cols mobile, 3 cols lg+ - Template node count calculated at runtime from workflow.nodes.length +- onWheelCapture pattern for isolating modal scroll from React Flow canvas +- min-h-0 on flexbox containers enables overflow scrolling +- overflow-clip instead of overflow-hidden when child needs scroll ### Deferred Issues @@ -150,6 +153,6 @@ Recent decisions affecting current work: ## Session Continuity Last session: 2026-01-16 -Stopped at: Completed 25-01-PLAN.md (template explorer UI components) +Stopped at: Completed 25-02-PLAN.md (sidebar filters and WelcomeModal integration) Resume file: None -Next action: Execute 25-02-PLAN.md (sidebar filters and WelcomeModal integration) +Next action: Execute 24-03-PLAN.md (CostDialog UI) or Phase 26 (Template Preview Rendering) diff --git a/.planning/phases/25-template-explorer-ui/25-02-SUMMARY.md b/.planning/phases/25-template-explorer-ui/25-02-SUMMARY.md new file mode 100644 index 00000000..089c8f39 --- /dev/null +++ b/.planning/phases/25-template-explorer-ui/25-02-SUMMARY.md @@ -0,0 +1,124 @@ +--- +phase: 25-template-explorer-ui +plan: 02 +subsystem: ui +tags: [templates, filters, search, modal, react-flow] + +# Dependency graph +requires: + - phase: 25-01 + provides: TemplateCard component, TemplateExplorerView grid, template types +provides: + - Sidebar filter panel with search, category, and tag filters + - WelcomeModal integration with TemplateExplorerView + - Scrollable template gallery with React Flow wheel event isolation +affects: [quickstart, templates] + +# Tech tracking +tech-stack: + added: [] + patterns: + - onWheelCapture for isolating scroll from React Flow + - min-h-0 for flexbox scroll containers + - overflow-clip vs overflow-hidden for wheel events + +key-files: + created: [] + modified: + - src/components/quickstart/TemplateExplorerView.tsx + - src/components/quickstart/TemplateCard.tsx + - src/components/quickstart/WelcomeModal.tsx + +key-decisions: + - "Two-column grid layout for template cards" + - "Single static thumbnail (not carousel) - ready for future GIF replacement" + - "Darker sidebar background (bg-neutral-900/80) for visual separation" + - "onWheelCapture to prevent React Flow from capturing scroll events" + +patterns-established: + - "Use onWheelCapture on modals overlaying React Flow to enable scrolling" + - "Use min-h-0 on flex containers to enable overflow scrolling" + - "Use overflow-clip instead of overflow-hidden when child needs scroll" + +issues-created: [] + +# Metrics +duration: 15min +completed: 2026-01-16 +--- + +# Phase 25 Plan 02: Sidebar Filters & WelcomeModal Integration Summary + +**Template explorer with sidebar filters, 2-column card layout, static thumbnails, and scroll isolation from React Flow** + +## Performance + +- **Duration:** 15 min +- **Started:** 2026-01-16T21:30:00Z +- **Completed:** 2026-01-16T21:55:00Z +- **Tasks:** 3 +- **Files modified:** 3 + +## Accomplishments + +- Added left sidebar with search input, category filters (All/Product/Style/Composition/Community), and tag filter pills +- Integrated TemplateExplorerView into WelcomeModal, replacing QuickstartTemplatesView +- Fixed scroll issues caused by React Flow capturing wheel events using onWheelCapture +- Added single static thumbnail images to template cards (ready for future GIF replacement) + +## Task Commits + +Each task was committed atomically: + +1. **Task 1: Add sidebar filter panel** - `a0319e6` (feat) +2. **Task 2: Integrate into WelcomeModal** - `cf27f8d` (feat) +3. **Layout improvements (2-col, thumbnails, colors)** - `f25826b` (feat) +4. **Simplify to single thumbnail** - `aab4c96` (refactor) +5. **Scroll fixes (multiple iterations)** - `afb667c`, `aae10c9`, `21bc34e`, `7aad874`, `998c3ee`, `024f3a9` (fix) + +**Plan metadata:** (this commit) + +## Files Created/Modified + +- `src/components/quickstart/TemplateExplorerView.tsx` - Added sidebar with filters, 2-column layout, scroll fixes +- `src/components/quickstart/TemplateCard.tsx` - Added previewImage prop, static thumbnail display +- `src/components/quickstart/WelcomeModal.tsx` - Replaced QuickstartTemplatesView, added onWheelCapture + +## Decisions Made + +- Two-column layout chosen over 3-column for better visual balance with thumbnails +- Single static thumbnail (first image from template content) instead of animated carousel - simpler, ready for GIF replacement +- Darker sidebar background (bg-neutral-900/80) creates visual separation from main content +- onWheelCapture pattern discovered for isolating modal scroll from React Flow canvas + +## Deviations from Plan + +### Auto-fixed Issues + +**1. [Rule 3 - Blocking] Scroll not working in template gallery** +- **Found during:** Task 3 (human verification) +- **Issue:** Touchpad/wheel scrolling didn't work, only manual scrollbar drag worked +- **Fix:** Multiple iterations - added min-h-0 to flex containers, changed overflow-hidden to overflow-clip, finally used onWheelCapture to stop React Flow from capturing wheel events +- **Files modified:** TemplateExplorerView.tsx, WelcomeModal.tsx +- **Verification:** User confirmed scrolling works with touchpad +- **Committed in:** Multiple fix commits (afb667c through 024f3a9) + +--- + +**Total deviations:** 1 auto-fixed (blocking scroll issue requiring 6 fix iterations) +**Impact on plan:** Scroll fix was essential for usability. Discovered important pattern for React Flow + modal interactions. + +## Issues Encountered + +- React Flow captures wheel events at document level, preventing scroll in overlaying modals +- Solution: Use onWheelCapture (capture phase) to stop propagation before React Flow receives events +- This is a reusable pattern for any scrollable modal over React Flow canvas + +## Next Phase Readiness + +- Phase 25 complete - Template Explorer UI fully functional +- Ready to continue with Phase 26 (Template Preview Rendering) or complete Phase 24-03 (CostDialog UI) + +--- +*Phase: 25-template-explorer-ui* +*Completed: 2026-01-16*