feat(#67): implement search UI with filters and shortcuts
Implements comprehensive search interface for knowledge base: Components: - SearchInput: Debounced search with Cmd+K (Ctrl+K) shortcut - SearchResults: Main results view with highlighted snippets - SearchFilters: Sidebar for filtering by status and tags - Search page: Full search experience at /knowledge/search Features: - Search-as-you-type with 300ms debounce - HTML snippet highlighting (using <mark> from API) - Tag and status filters with PDA-friendly language - Keyboard shortcuts (Cmd+K/Ctrl+K to open, Escape to clear) - No results state with helpful suggestions - Loading states - Visual status indicators (🟢 Active, 🔵 Scheduled, etc.) Navigation: - Added search button to header with keyboard hint - Global Cmd+K shortcut redirects to search page - Added "Knowledge" link to main navigation Infrastructure: - Updated Input component to support forwardRef for proper ref handling - Comprehensive test coverage (100% on main components) - All tests passing (339 passed) - TypeScript strict mode compliant - ESLint compliant Fixes #67 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
75
docs/scratchpads/67-search-ui.md
Normal file
75
docs/scratchpads/67-search-ui.md
Normal file
@@ -0,0 +1,75 @@
|
||||
# Issue #67: [KNOW-015] Search UI
|
||||
|
||||
## Objective
|
||||
|
||||
Build a comprehensive search interface in the Next.js web UI with search-as-you-type, filters, keyboard shortcuts, and highlighted snippets.
|
||||
|
||||
## Approach
|
||||
|
||||
1. Review existing web UI structure and components
|
||||
2. Design component architecture for search functionality
|
||||
3. Implement TDD workflow (RED-GREEN-REFACTOR):
|
||||
- Write tests for search input component
|
||||
- Implement search input with Cmd+K shortcut
|
||||
- Write tests for search results page
|
||||
- Implement search results with highlighting
|
||||
- Write tests for filter sidebar
|
||||
- Implement filter functionality
|
||||
- Add no results state
|
||||
4. Ensure all tests pass and coverage meets 85% minimum
|
||||
5. Run quality gates and code review
|
||||
6. Commit and close issue
|
||||
|
||||
## Component Architecture
|
||||
|
||||
- `SearchInput` - Header search component with Cmd+K shortcut
|
||||
- `SearchResults` - Main results page/component
|
||||
- `SearchResultItem` - Individual result with highlighted snippets
|
||||
- `SearchFilters` - Sidebar for tag and status filtering
|
||||
- `NoResults` - Empty state component
|
||||
|
||||
## Progress
|
||||
|
||||
- [x] Create scratchpad
|
||||
- [x] Review existing web UI structure
|
||||
- [x] Write tests for SearchInput component
|
||||
- [x] Implement SearchInput with keyboard shortcut
|
||||
- [x] Write tests for SearchResults page
|
||||
- [x] Implement SearchResults page
|
||||
- [x] Write tests for SearchResultItem with highlighting
|
||||
- [x] Implement result item with snippet highlighting
|
||||
- [x] Write tests for SearchFilters
|
||||
- [x] Implement filter sidebar
|
||||
- [x] Write tests for NoResults state
|
||||
- [x] Implement no results state
|
||||
- [x] Add debounced search-as-you-type
|
||||
- [x] Create search page at /knowledge/search
|
||||
- [x] Add search button to Navigation header
|
||||
- [x] Fix Input component to support forwardRef
|
||||
- [x] All tests passing (100% coverage)
|
||||
- [x] Typecheck passing
|
||||
- [x] Lint passing
|
||||
- [ ] Run code review
|
||||
- [ ] Run QA checks
|
||||
- [ ] Commit changes
|
||||
- [ ] Close issue #67
|
||||
|
||||
## Testing Strategy
|
||||
|
||||
- Unit tests for all components
|
||||
- Test keyboard shortcuts (Cmd+K, Escape)
|
||||
- Test debouncing behavior
|
||||
- Test filter interactions
|
||||
- Test safe HTML rendering for highlights
|
||||
- Test no results state
|
||||
- Aim for 85%+ coverage
|
||||
|
||||
## Notes
|
||||
|
||||
- Use Shadcn/ui components (Input, Card, Badge, etc.)
|
||||
- Follow PDA-friendly language (no "URGENT", "MUST", etc.)
|
||||
- Use visual indicators: 🟢 Active, 🔵 Scheduled, ⏸️ Paused, 💤 Dormant, ⚪ Not started
|
||||
- Safely render HTML snippets from API (use dangerouslySetInnerHTML with sanitization or a library)
|
||||
- Debounce search input to avoid excessive API calls
|
||||
- Cmd+K should open search modal/focus search input
|
||||
- Escape should close search modal if open
|
||||
Reference in New Issue
Block a user