Skip to content

feat: Add inline search functionality to Bases views #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
renatomen wants to merge 5 commits into
base: main
Choose a base branch
from
Open

feat: Add inline search functionality to Bases views #9

renatomen wants to merge 5 commits into from

Conversation

@renatomen
Copy link
Owner

@renatomen renatomen commented Nov 22, 2025

Summary

This PR adds inline search functionality to all Bases views (Task List, Kanban, Calendar, and Agenda), allowing users to filter tasks in real-time.

Changes

Task List View

  • ✅ Add enableSearch configuration option to TaskListView
  • ✅ Position search box above task list using insertBefore()
  • ✅ Implement search filtering before rendering tasks
  • ✅ Add "Enable search box" toggle to Task List view configuration UI

Kanban View

  • ✅ Add enableSearch configuration option to KanbanView
  • ✅ Position search box above kanban board
  • ✅ Apply search filtering before task grouping and rendering
  • ✅ Add "Enable search box" toggle to Kanban view configuration UI

Calendar/Agenda View

  • ✅ Add enableSearch configuration option to CalendarView
  • ✅ Position search box above calendar
  • ✅ Apply search filtering before generating calendar events
  • ✅ Add "Enable search box" toggle to Calendar view configuration UI (Layout section)
  • ✅ Works across all calendar modes (month, week, day, list/agenda)

Shared Infrastructure (BasesViewBase)

  • ✅ Centralized search setup in setupSearch() method
  • ✅ Reusable applySearchFilter() method for all views
  • ✅ Idempotent search box creation (only creates once)
  • ✅ Performance monitoring for slow searches (>200ms)
  • ✅ 300ms debounce for search input

Features

  • Opt-in: Search is disabled by default for backward compatibility
  • Real-time filtering: Tasks are filtered as users type (300ms debounce)
  • Consistent UX: Search box positioned above content in all views
  • Code reuse: All views inherit search functionality from BasesViewBase
  • Performance: Includes performance monitoring and warnings for slow searches

Configuration

Users can enable search in two ways:

  1. Via UI: Toggle "Enable search box" in the view configuration dialog
  2. Via YAML: Add enableSearch: true to the .base file frontmatter
---
views:
  - name: My Tasks
    type: tasknoteTaskList
    enableSearch: true
---

Notes

  • External calendar events (ICS, Google, Microsoft) are not filtered by search as they come from separate data sources
  • Search filters TaskNotes items only (tasks, scheduled/due dates, timeblocks, time entries)
  • The Agenda view is a CalendarView configured with calendarView: "listWeek", so enabling search in CalendarView automatically enables it for Agenda views

Testing

  • ✅ Tested in Task List view
  • ✅ Tested in Kanban view
  • ✅ Tested in Calendar view (month, week, day modes)
  • ✅ Tested in Agenda view (list mode)
  • ✅ Verified search box positioning
  • ✅ Verified real-time filtering
  • ✅ Verified configuration UI toggles

Pull Request opened by Augment Code with guidance from the PR author

@renatomen
feat(bases): add inline search functionality to task-list view
395055b 
- Implement TaskSearchFilter for ephemeral task filtering
  - Case-insensitive full-text search across task properties
  - Searches title, status, priority, tags, contexts, projects
  - Supports custom visible properties from view config
  - Performance monitoring for slow operations (>100ms)

- Seamless virtual scrolling integration
  - Search filtering applied before virtual scroll threshold check
  - Automatically switches between virtual/normal rendering based on filtered count
  - Maintains performance with large datasets (tested with 30k+ tasks)
  - Virtual scrolling activates at 100 filtered items threshold

- Create SearchBox UI component
  - Lucide search icon positioned outside input (left)
  - Debounced input (300ms) to reduce filter operations
  - Clear button with keyboard support (Escape key)
  - Proper cleanup to prevent memory leaks
  - BEM-style CSS with Obsidian design tokens

- BasesViewBase ready for reusability
  - Opt-in pattern via enableSearch flag
  - Shared setupSearch(), handleSearch(), applySearchFilter()
  - Component lifecycle integration for automatic cleanup
  - Ready for use in KanbanView, CalendarView, etc.

- Add test coverage
  - 24 unit tests for TaskSearchFilter
  - 24 unit tests for SearchBox component
  - Integration test placeholders for E2E testing

- Update TaskListView to use inherited search
  - Enable search with single flag: enableSearch = true
  - Apply filtering in renderFlat, renderGrouped methods
  - Preserves all existing functionality (grouping, sub-grouping, etc.)
@renatomen
feat: add inline search to task list view
465040d 
- Add enableSearch config option to enable/disable search
@renatomen
feat: add inline search to kanban view
4a522a8 
Implements the same search functionality as TaskListView, with an
"Enable search box" toggle in the view configuration UI. Tasks are
filtered in real-time across all columns using the shared search
infrastructure from BasesViewBase.
@renatomen
feat: add inline search to calendar and agenda views
bbda71b 
- Add enableSearch config option with UI toggle in Layout section
- Apply search filter before generating calendar events
- Reuse BasesViewBase search infrastructure
- Position search box above calendar
- Filter TaskNotes items across all calendar modes
@renatomen
doc: Add animated video demonstrating search box config and use
db27df4 
new file:   docs/assets/Base View Search Box.gif
@renatomen renatomen marked this pull request as ready for review November 22, 2025 10:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@renatomen