popiart-node-canvas/.planning/phases/25-template-explorer-ui/25-02-PLAN.md

phase	plan	type
25-template-explorer-ui	2	execute

Add left-hand filter panel with search and category filters, integrate into WelcomeModal.

Purpose: Complete the template explorer with filtering and search capabilities, replace existing template selection. Output: Fully functional template explorer with sidebar filters, search, and WelcomeModal integration.

<execution_context> ~/.claude/get-shit-done/workflows/execute-phase.md ~/.claude/get-shit-done/templates/summary.md </execution_context>

@.planning/PROJECT.md @.planning/ROADMAP.md

From Plan 01: @src/types/quickstart.ts (TemplateMetadata types) @src/components/quickstart/TemplateCard.tsx @src/components/quickstart/TemplateExplorerView.tsx

Integration points: @src/components/quickstart/WelcomeModal.tsx

Existing patterns:

• Icon-based filter buttons from ModelSearchDialog (Phase 23)
• Search input styling from existing modals

Task 1: Add sidebar filter panel to TemplateExplorerView src/components/quickstart/TemplateExplorerView.tsx Restructure TemplateExplorerView to have a left sidebar with filters:

1. Layout change:

   • Header stays at top (back button + title)
   • Below header: flex row with sidebar (w-48 flex-shrink-0) + main grid area
   • Sidebar has: search input, category filters, tags section

2. Search input:

   • Text input with search icon (magnifying glass)
   • Placeholder: "Search templates..."
   • Filters templates by name and description match
   • Debounce with 200ms delay using useRef/setTimeout pattern

3. Category filters:

   • "All" button (default selected)
   • Category buttons: Product, Style, Composition, Community
   • Use icon buttons similar to provider filter in ModelSearchDialog
   • Single-select (only one category active at a time)
   • Apply bg-blue-500/20 border-blue-500/50 for selected state

4. Tags section (below categories):

   • "Tags" label (text-xs text-neutral-500 uppercase)
   • Show all unique tags from displayed templates
   • Small pill buttons, multi-select
   • Selected tags use blue styling, unselected use neutral

5. Filtering logic:

   • Search: filter by name OR description containing search term (case-insensitive)
   • Category: filter by category match (or all if "All" selected)
   • Tags: filter by ANY tag match (OR logic, inclusive)
   • Apply all filters: search AND category AND tags

6. Empty state:

   • Show "No templates match your filters" message
   • Include button to clear all filters npm run build succeeds, filter logic is correct Sidebar with search, category filters, and tag filters working; templates filter correctly; empty state displayed when no matches

Task 2: Integrate TemplateExplorerView into WelcomeModal src/components/quickstart/WelcomeModal.tsx, src/types/quickstart.ts Replace QuickstartTemplatesView with TemplateExplorerView in WelcomeModal:

1. Update QuickstartView type in quickstart.ts:

   • Change "templates" to "explorer" (optional, can keep "templates" for simplicity)

2. In WelcomeModal.tsx:

   • Import TemplateExplorerView (not QuickstartTemplatesView)
   • Replace QuickstartTemplatesView render with TemplateExplorerView
   • Keep same props: onBack, onWorkflowSelected
   • Widen modal for explorer: change max-w-3xl to max-w-4xl to accommodate sidebar

3. The modal should expand to show the new layout comfortably:

   • Explorer has sidebar + grid, needs more horizontal space
   • Consider adding max-h-[80vh] with overflow handling

4. Remove QuickstartTemplatesView.tsx import (keep file for now, can clean up later) npm run build succeeds, WelcomeModal shows TemplateExplorerView WelcomeModal uses TemplateExplorerView, modal sized appropriately for sidebar layout

Template Explorer with cards layout, sidebar filters, search, and category filtering 1. Run: npm run dev 2. Open http://localhost:3000 3. Click "Templates" in the welcome modal 4. Verify: - Templates display in card grid format (not compact buttons) - Each card shows name, description, node count, category, tags - Left sidebar has search input and filter buttons - Search filters templates as you type - Category buttons filter by category - Tag pills filter by tag (multi-select) - Clicking a template loads it into the canvas - Modal is wide enough for comfortable browsing Type "approved" to continue, or describe issues to fix Before declaring phase complete: - [ ] `npm run build` succeeds - [ ] `npm test` passes (no broken tests) - [ ] Template explorer displays in WelcomeModal - [ ] Search, category, and tag filtering all work - [ ] Templates can be selected and loaded

<success_criteria>

• All tasks completed
• All verification checks pass
• Template explorer replaces old template view
• Filtering works correctly with search, categories, and tags
• UI is responsive and visually consistent
• Phase 25 complete </success_criteria>

After completion, create `.planning/phases/25-template-explorer-ui/25-02-SUMMARY.md`