Add issue backlog filtering and sorting

[MFA-G]

Summary

• add label filtering controls to the maintainer issue backlog
• add sort options for points, complexity, and title
• cover the default sort, label filter, and title sort behavior with component tests

Closes #461

Verification

• npm test -- --run src/components/IssueBacklog.test.tsx --environment jsdom (blocked: existing root package.json is malformed at line 18 and prevents Vitest config loading)
• npx tsc --noEmit -p tsconfig.json (blocked by existing unrelated TS/JSX syntax errors in CreateStreamForm, RecipientDashboard.test, StreamsTable, and StreamsTable.test)
• git diff --check

Summary by CodeRabbit

• New Features

  • Added label-based filtering for the issue backlog
  • Added sorting options (by points, complexity, or title) for the issue list
  • Updated empty-state messaging to indicate when no issues match applied filters

• Tests

  • Added test coverage for label filtering and sorting functionality

[vercel]

@MFA-G is attempting to deploy a commit to the ritik4ever's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

📝 Walkthrough

Walkthrough

IssueBacklog now filters and sorts the issues list interactively. Users can filter by label and choose from multiple sort modes (points ascending/descending, complexity rank, or title). The component computes visible issues by applying label filters and sort orders to the incoming issues prop and renders them with a new filter control bar.

Changes

IssueBacklog Label Filtering and Sorting

Layer / File(s)	Summary
State and sorting logic frontend/src/components/IssueBacklog.tsx	Adds selectedLabel and sortBy local state, derives available labels and complexity-ranked issues, and computes visibleIssues by filtering and sorting based on current selections.
Filter and sort UI frontend/src/components/IssueBacklog.tsx	Adds filter bar with label and sort <select> controls above the issues list, updates empty-state messaging to reflect filtered results, and renders issue cards from visibleIssues instead of all issues.
Test coverage frontend/src/components/IssueBacklog.test.tsx	Validates default points sorting (high to low), label-based filtering behavior, and sorting by title after control changes using test fixtures and Vitest/React Testing Library assertions.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

A rabbit hops through backlog rows,
With filter chips and sort controls in tow,
The issues now align by label and by grade,
No tangled mess—just clean cascades! 🥕✨

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Linked Issues check	❓ Inconclusive	Code implements label filtering and sorting, but 'Clear filters' button and OR logic for multiple filters are not mentioned in summaries, raising compliance concerns.	Verify that 'Clear filters' button is implemented, multiple label OR logic is functional, and all complexity sorting options (Trivial → High) are correctly mapped.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main changes: adding filtering and sorting functionality to the IssueBacklog component.
Out of Scope Changes check	✅ Passed	All changes are directly related to the linked issue #461 requirements: label filtering, sorting options, and test coverage.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@frontend/src/components/IssueBacklog.tsx`:
- Around line 18-29: The component currently uses a single selectedLabel string
and a <select> UI, but the requirement is toggleable label chips supporting
multiple active labels (OR logic) and a Clear filters action; change
selectedLabel to a Set<string> (or string[] state) and update setSelectedLabel
usage to add/remove labels when chips are clicked (toggling membership), replace
the single-select UI with clickable chips generated from labels (the labels
constant) and a "Clear filters" button that resets the set to empty, and update
visibleIssues to filter by checking if an issue's labels intersect the active
label set (issue.labels.some(l => activeSet.has(l))) so any matching label
includes the issue; also update any code referencing selectedLabel (e.g., the
select block around setSelectedLabel) to handle the new collection type.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 23d71f8e-ccbb-4990-986c-626b9c6b6ed4

📥 Commits

Reviewing files that changed from the base of the PR and between 3c1d1b1 and 0e22108.

📒 Files selected for processing (2)

• frontend/src/components/IssueBacklog.test.tsx
• frontend/src/components/IssueBacklog.tsx

[coderabbitai]

⚠️ Potential issue | 🟠 Major | 🏗️ Heavy lift

Required multi-label chip filtering behavior is not implemented.

Line 18/Line 27-29 and Line 72-87 implement a single-label <select> filter, but the requirement calls for toggleable label chips with multiple active labels using OR logic, plus a Clear filters action. This currently misses the linked issue acceptance criteria.

Also applies to: 72-87

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/components/IssueBacklog.tsx` around lines 18 - 29, The component
currently uses a single selectedLabel string and a <select> UI, but the
requirement is toggleable label chips supporting multiple active labels (OR
logic) and a Clear filters action; change selectedLabel to a Set<string> (or
string[] state) and update setSelectedLabel usage to add/remove labels when
chips are clicked (toggling membership), replace the single-select UI with
clickable chips generated from labels (the labels constant) and a "Clear
filters" button that resets the set to empty, and update visibleIssues to filter
by checking if an issue's labels intersect the active label set
(issue.labels.some(l => activeSet.has(l))) so any matching label includes the
issue; also update any code referencing selectedLabel (e.g., the select block
around setSelectedLabel) to handle the new collection type.