TopDogLabs/gantt-board
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
46fcd1182b
gantt-board/SEARCH_FEATURE.md
Max be3476fd1a feat: Add machine token auth for cron automation 
- Add api_call_machine() function for GANTT_MACHINE_TOKEN auth
- Update api_call() to use machine token when available
- Same pattern applied to both api_client.sh and gantt.sh
- Allows cron jobs to authenticate without cookie-based login
- No breaking changes - cookie auth still works for interactive use
2026-02-26 08:25:29 -06:00

2.8 KiB
Raw Blame History

Gantt Board Search Feature

Overview

Enhanced search functionality for the Mission Control Gantt Board with real-time filtering, text highlighting, and keyboard shortcuts.

Features

1. Search Bar Component

  • Location: src/components/SearchBar.tsx
  • Features:
    • Clean, modern UI with search icon
    • Clear button (X) when query exists
    • Keyboard shortcut hint (⌘K / Ctrl+K)
    • Escape to clear and blur
    • Mobile responsive

2. Keyboard Shortcuts

  • ⌘K / Ctrl+K: Focus search input
  • Escape: Clear search (if text exists) or blur input

3. Highlighting Components

  • Location: src/components/HighlightText.tsx
  • Features:
    • Highlights matching text in yellow (bg-yellow-500/30)
    • Case-insensitive matching
    • Works with titles, descriptions, and tags
    • HighlightMatches helper for highlighting multiple fields

4. Search Scope

Search covers:

  • ✅ Task titles
  • ✅ Task descriptions
  • ✅ Tags
  • ✅ Assignee names (in Search view)
  • ✅ Status and type (in Search view)

5. Real-time Filtering

  • 300ms debounce for smooth performance
  • Instant filter updates in Kanban, Backlog, and Search views
  • Search results count displayed

6. Task Highlighting

In Kanban view:

  • Task titles are highlighted when they match
  • Matching tags get yellow border and background
  • Non-matching tags remain muted

Usage

Basic Search

  1. Type in the search box or press ⌘K to focus
  2. Tasks filter automatically as you type
  3. Click X or press Escape to clear

View Switching

  • Search automatically switches to "Search" view when you type
  • Toggle between Kanban/Backlog/Search views using the view buttons
  • Each view respects the current search query

Files Modified/Created

New Files

  • src/components/SearchBar.tsx - Reusable search input component
  • src/components/HighlightText.tsx - Text highlighting utility
  • src/components/TaskSearchItem.tsx - Search result item component

Modified Files

  • src/app/page.tsx - Integrated SearchBar, added searchQuery prop to KanbanTaskCard
  • src/components/SearchView.tsx - Uses HighlightText for better display

Technical Details

Search Algorithm

  • Case-insensitive string matching
  • Matches partial strings (e.g., "bug" matches "debug")
  • Debounced at 300ms for performance

Highlight Styling

/* Matching text */
bg-yellow-500/30 - Yellow background
ring-yellow-500/30 - Yellow border on tags
text-yellow-200 - Light yellow text

/* Non-matching */
Regular muted styling preserved

State Management

  • searchQuery - Current input value (immediate)
  • debouncedSearchQuery - Debounced value for filtering (300ms delay)

Future Enhancements

Potential improvements:

  • Advanced filters (by status, assignee, date range)
  • Saved searches
  • Search history
  • Full-text search in task comments
  • Fuzzy/partial matching improvements