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:
Jason Woltje
2026-02-02 14:50:25 -06:00
parent c3500783d1
commit 3cb6eb7f8b
12 changed files with 1221 additions and 11 deletions

View 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