feat: Add label filtering to IssueBacklog panel

Author: emdevelopa

frontend/src/components/IssueBacklog.tsx

@@ -1,4 +1,5 @@
-import { ListTodo } from 'lucide-react';
+import { useState } from 'react';
+import { ListTodo, X } from 'lucide-react';
 import { OpenIssue } from '../types/campaign';
 import { EmptyState } from './EmptyState';
 
@@ -8,6 +9,8 @@ interface IssueBacklogProps {
 }
 
 export function IssueBacklog({ issues, isLoading = false }: IssueBacklogProps) {
+  const [activeLabels, setActiveLabels] = useState<string[]>([]);
+
   if (isLoading) {
     return (
       <section className="card">
@@ -30,15 +33,56 @@ export function IssueBacklog({ issues, isLoading = false }: IssueBacklogProps) {
     );
   }
 
+  const allLabels = Array.from(new Set(issues.flatMap(issue => issue.labels))).sort();
+
+  const toggleLabel = (label: string) => {
+    setActiveLabels(prev => 
+      prev.includes(label) ? prev.filter(l => l !== label) : [...prev, label]
+    );
+  };
+
+  const filteredIssues = activeLabels.length === 0
+    ? issues
+    : issues.filter(issue => issue.labels.some(label => activeLabels.includes(label)));
+
   return (
     <section className="card">
       <div className="section-heading">
         <h2>Contribution backlog</h2>
         <p className="muted">Ready-to-open issue ideas for your public repo after you push it.</p>
       </div>
 
+      {allLabels.length > 0 && (
+        <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', marginBottom: '16px', alignItems: 'center' }}>
+          {allLabels.map(label => (
+            <button
+              key={label}
+              onClick={() => toggleLabel(label)}
+              className={`chip ${activeLabels.includes(label) ? 'active' : ''}`}
+              style={{
+                cursor: 'pointer',
+                border: activeLabels.includes(label) ? '2px solid var(--primary-accent)' : '1px solid var(--border-color)',
+                backgroundColor: activeLabels.includes(label) ? 'var(--primary-subtle)' : 'transparent',
+                outline: 'none'
+              }}
+            >
+              {label}
+            </button>
+          ))}
+          {activeLabels.length > 0 && (
+            <button 
+              onClick={() => setActiveLabels([])}
+              className="control-button"
+              style={{ display: 'flex', alignItems: 'center', gap: '4px', padding: '4px 8px', fontSize: '0.85rem' }}
+            >
+              <X size={14} /> Clear all
+            </button>
+          )}
+        </div>
+      )}
+
       <div className="issue-list">
-        {issues.map((issue) => (
+        {filteredIssues.map((issue) => (
           <article key={issue.id} className="issue-item">
             <div className="issue-topline">
               <strong>