Inline filter bar on Overview and List views - label chips, search, and include/exclude toggle

Summary

The current filter system requires users to know (or discover) the text-based filter query syntax (labels = "Bug" && priority >= 3). For the two most-used views - the Overview (home) and List views - a lightweight inline filter bar would make common filtering actions (filter by label, search by text, include vs. exclude) immediately accessible without opening a modal or writing a query.

Proposed UI

A persistent bar sits directly above the task list, with three zones:
[ Search tasks… ] [ Bug | Frontend | Marketing | … → scrollable ] [ Include / Exclude ]

Search input - wired to the existing s parameter on the task collection API

  • Label chips - all available labels shown as small, scrollable chips; click to toggle selection
  • Include / Exclude toggle - switches the generated filter between labels in [...] (show only tasks with these labels) and labels not in [...] (hide tasks with these labels)

Label chips use a compact font size with horizontal scrolling on overflow so the bar stays single-line regardless of how many labels exist. Selected labels are visually highlighted using their existing colour.

Scope

  • src/views/Home.vue and src/views/tasks/ShowTasks.vue - Overview view
  • src/components/project/views/ProjectList.vue - List view
  • New shared component: src/components/tasks/partials/FilterBar.vue

The filter bar state syncs with URL query params (?labels=, ?search=, ?labelMode=) consistent with how other filters already work in these views. It composes additively with any base filter (e.g. done = false) without replacing manually-typed advanced filters.

Related

  • Closes / complements #2377 - this is a scoped, incremental step toward the broader visual filter builder described there
  • Related to PR #2717 - that PR adds keyword chips inside the filter popup; this proposes chips for actual label values in an inline position. The two are complementary.

Implementation notes

The infrastructure already exists:

  • useLabelStore exposes labelsArray and getLabelsByIds
  • ShowTasks.vue already accepts labelIds prop and builds the labels in [...] filter string
  • The TaskFilterParams type already has s: string for search (currently hardcoded to '')
  • useTaskList in ProjectList.vue already syncs params to URL query params

The main new work is the FilterBar.vue component and wiring it into the two views.

1 Like