- Add search result highlighting with match positions - Implement advanced filters (type, status, date range) - Add relevance scoring algorithm with recency/status boosts - Add search history with localStorage persistence - Create useSearch and useSearchHistory hooks - Add filter UI with popover component - Improve visual feedback and status icons Task: 56ae2be4-fcf1-403a-87fb-ea9de966f456
4.3 KiB
4.3 KiB
Mission Control Search Enhancement
Summary
Enhanced Mission Control's search functionality with the following improvements:
Changes Made
1. Enhanced Search API (/app/api/search/route.ts)
New Features:
- Search Result Highlighting: Added
SearchResultHighlightinterface with match positions for highlighting matching terms in titles and snippets - Advanced Filters: Added support for filtering by:
- Type (task, project, document, sprint)
- Status (open, in-progress, done, etc.)
- Date ranges (from/to)
- Relevance Scoring: Implemented
calculateRelevanceScorefunction that considers:- Exact title matches (+100)
- Title starts with query (+80)
- Title contains query (+60)
- Content matches (+10 per match, max 40)
- Recency boost (+10 for items updated < 7 days, +5 for < 30 days)
- Active status boost (+5 for in-progress/open/active items)
- Performance Metrics: Added
executionTimeMsto track search performance - Improved Snippets: Added
createHighlightedSnippetfunction for better context around matches
Response Structure:
interface SearchResponse {
results: SearchableResult[];
total: number;
query: string;
filters?: SearchFilters;
executionTimeMs?: number;
}
2. Enhanced Quick Search Component (/components/layout/quick-search.tsx)
New Features:
- Search Filters UI: Added Popover-based filter panel with:
- Type filters (Tasks, Projects, Documents, Sprints)
- Status filters (Open, In Progress, Done, etc.)
- Active filter count badge
- Clear all filters button
- Search History: Added localStorage-based search history with:
- Last 10 searches stored
- 30-day expiration
- History display when search is empty
- Individual history item removal
- Clear all history option
- Result count tracking
- Highlighted Results: Added
HighlightedTextcomponent that shows matching terms with yellow background - Improved UI: Better grouping, status icons, and visual hierarchy
3. New Search Hook (/hooks/useSearch.ts)
Features:
-
useSearchhook: Comprehensive search state management with:- Debounced search (configurable, default 150ms)
- Request cancellation support
- Error handling
- Filter management
- Callbacks for results and errors
-
useSearchHistoryhook: Reusable history management with:- Automatic localStorage sync
- Duplicate prevention
- Max item limit (10)
- 30-day automatic cleanup
-
Utilities:
createHighlightedText: Helper for text highlighting
API Usage Examples
Basic Search
GET /api/search?q=mission
Search with Filters
GET /api/search?q=mission&types=task,project&status=open,in-progress
Search with Date Range
GET /api/search?q=mission&dateFrom=2026-01-01&dateTo=2026-12-31
UI Components
QuickSearch
The QuickSearch component now provides:
- ⌘K keyboard shortcut
- Filter button with active count
- Search history (recent searches)
- Highlighted matching terms
- Status icons
- Color indicators for projects
Filter Popover
- Type filter buttons
- Status filter buttons
- Clear all option
- Visual active state
Technical Improvements
-
Performance:
- Debounced API calls (150ms)
- Request cancellation
- Limited to 50 results
- Execution time tracking
-
User Experience:
- Visual feedback during loading
- No results message with filter reset
- Keyboard navigation support
- Persistent search history
-
Code Quality:
- TypeScript interfaces for all types
- Reusable hooks
- Clean separation of concerns
- Proper error handling
Files Modified
/app/api/search/route.ts- Enhanced API with highlighting and filters/components/layout/quick-search.tsx- Enhanced UI with filters and history/hooks/useSearch.ts- New search hook/components/ui/popover.tsx- New shadcn component (auto-installed)
Testing
The build completes successfully with these changes. The search functionality is backwards compatible - existing search functionality continues to work while new features are opt-in.
Future Enhancements (Optional)
Potential additional improvements:
- Fuzzy search with Levenshtein distance
- Search analytics/tracking
- Saved searches
- Advanced date range picker
- Search result pagination
- Full-text search with PostgreSQL