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) andlabels 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.vueandsrc/views/tasks/ShowTasks.vue- Overview viewsrc/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:
useLabelStoreexposeslabelsArrayandgetLabelsByIdsShowTasks.vuealready acceptslabelIdsprop and builds thelabels in [...]filter string- The
TaskFilterParamstype already hass: stringfor search (currently hardcoded to'') useTaskListinProjectList.vuealready syncsparamsto URL query params
The main new work is the FilterBar.vue component and wiring it into the two views.
