Skip to content

feat: add quick search filter for database rows by title #732

@zacharias-ona

Description

@zacharias-ona

Description

Database views support filtering by property values via the filter bar, but there's no quick way to search/filter rows by title text. In Notion, the filter bar includes a search input that instantly narrows visible rows by matching against the row title. For databases with many rows, this is the fastest way to find a specific entry without setting up a formal filter rule.

This adds a search input to the database toolbar that client-side filters rows by title substring match (case-insensitive). It complements the existing filter engine without replacing it.

Acceptance Criteria

  • A search input appears in the database toolbar (next to filter/sort buttons)
  • Typing in the search input filters visible rows by case-insensitive title substring match
  • Search works across all view types (table, board, list, calendar, gallery)
  • Search combines with existing filters (AND logic — rows must match both search text and active filters)
  • Clearing the search input restores all rows
  • Search state is local (not persisted to view config) — it resets on view switch or page navigation
  • Search input has a magnifying glass icon and placeholder text "Search..."
  • Storybook stories cover the search input in the toolbar
  • E2E test verifies search filtering in table view
  • pnpm lint && pnpm typecheck && pnpm test pass

Dependencies

None

Technical Notes

  • The filter engine in src/components/database/hooks/use-database-filters.ts already produces filteredRows. Add a second filtering step for the search text, or integrate into the existing useMemo chain in database-view-client.tsx.
  • Row titles come from row.title (the page title of the row page). This is already available in the row data passed to views.
  • Keep this client-side only — no new API calls or database queries needed.
  • Place the search input in the toolbar area defined in database-view-client.tsx, near the existing filter/sort buttons.
  • Use shadcn/ui Input component with a search icon from lucide-react.
  • Reference .agents/design.md for input styling (sharp corners, muted placeholder text).

Approval Required

This is a HIGH risk enhancement because it adds new interactive UI to the database toolbar, which has been a high-churn area (20+ UI regression bugs in the last 7 days). The toolbar layout, filter interaction, and view-switching logic are tightly coupled. Comment "approved" to release to the automation queue.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions