WORK-045
ID:WORK-045Status:done

Sidebar search and filter bar for plan site

Add a text input at the top of the sidebar that filters visible items in real-time. Supports plain text fuzzy matching across ID, title, tags, assignee, and milestone, plus structured field:value filter syntax matching the {% backlog %} rune.

Priority:highComplexity:moderateSource:SPEC-015
main View source

Criteria completion

Criteria completion: 8 of 8 (100%) checked; history from Mar 23 to Mar 230%25%50%75%100%Mar 23Mar 23

Relationships

Implements 1
Related 3
Branches 3
main current done
claude/file-naming-convention-LJdwR donechangeset-release/main doneclaude/align-sidenav-styling-4MuxV done
History 4
  1. e900a90
    Created (done)by bjornolofandersson
  2. f262d7b
    Content editedby Claude
  3. f7c2b5a
    • ☑ Text input appears at the top of the sidebar
    • ☑ Typing filters items by matching against ID, title, tags, assignee, milestone
    • ☑ `field:value` syntax works (e.g., `status:ready`, `priority:high`, `tags:css`)
    • ☑ Multiple filters combine with AND logic; multiple values for same field use OR
    • ☑ `Escape` clears the filter
    • ☑ `/` keyboard shortcut focuses the filter input
    • ☑ Filtering auto-expands matching groups (works with WORK-044)
    • ☑ Nav items include `data-tags`, `data-priority`, `data-severity`, `data-assignee`, `data-milestone` attributes
    by Claude
  4. f5b8bf8
    Created (draft)by Claude
    Add work items WORK-037 through WORK-049 for plan site specs

Acceptance Criteria

  • Text input appears at the top of the sidebar
  • Typing filters items by matching against ID, title, tags, assignee, milestone
  • field:value syntax works (e.g., status:ready, priority:high, tags:css)
  • Multiple filters combine with AND logic; multiple values for same field use OR
  • Escape clears the filter
  • / keyboard shortcut focuses the filter input
  • Filtering auto-expands matching groups (works with WORK-044)
  • Nav items include data-tags, data-priority, data-severity, data-assignee, data-milestone attributes

Approach

Client-side behavior (~2KB). All data is already in the DOM via data attributes on nav items (added in WORK-038). No server round-trip needed. The behavior reads data attributes and filters by toggling visibility.

References

  • SPEC-015 (Plan Site UX at Scale — Feature 2)
  • WORK-038 (nav region builder — provides data attributes)
  • WORK-044 (collapsible groups — filtering interacts with collapse state)