Add All, Active and Completed filter tabs to the todo list

frontend/src/App.tsx

@@ -1,20 +1,23 @@
 import { useState, useEffect } from 'react';
 import type { Todo, TodoCreate } from './types/todo';
 import { fetchTodos, createTodo, updateTodo, deleteTodo } from './api/todos';
+import { matchesFilter, toCompletedParam, type TodoFilter } from './filters';
 import AddTodoForm from './components/AddTodoForm';
+import FilterTabs from './components/FilterTabs';
 import TodoList from './components/TodoList';
 import styles from './App.module.css';
 
 export default function App() {
   const [todos, setTodos] = useState<Todo[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [filter, setFilter] = useState<TodoFilter>('all');
 
-  const loadTodos = async () => {
+  const loadTodos = async (activeFilter: TodoFilter) => {
     try {
       setLoading(true);
       setError(null);
-      const data = await fetchTodos();
+      const data = await fetchTodos(toCompletedParam(activeFilter));
       setTodos(data);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to load todos');
@@ -24,13 +27,15 @@ export default function App() {
   };
 
   useEffect(() => {
-    loadTodos();
-  }, []);
+    loadTodos(filter);
+  }, [filter]);
 
   const handleAddTodo = async (data: TodoCreate) => {
     try {
       const newTodo = await createTodo(data);
-      setTodos((prev) => [newTodo, ...prev]);
+      if (matchesFilter(newTodo, filter)) {
+        setTodos((prev) => [newTodo, ...prev]);
+      }
     } catch (err) {
       alert(err instanceof Error ? err.message : 'Failed to create todo');
       throw err;
@@ -41,7 +46,9 @@ export default function App() {
     try {
       const updatedTodo = await updateTodo(id, { completed });
       setTodos((prev) =>
-        prev.map((todo) => (todo.id === id ? updatedTodo : todo))
+        prev
+          .map((todo) => (todo.id === id ? updatedTodo : todo))
+          .filter((todo) => matchesFilter(todo, filter))
       );
     } catch (err) {
       alert(err instanceof Error ? err.message : 'Failed to update todo');
@@ -72,6 +79,7 @@ export default function App() {
         </div>
 
         <div className={styles.card}>
+          <FilterTabs value={filter} onChange={setFilter} />
           <TodoList
             todos={todos}
             loading={loading}

frontend/src/components/FilterTabs.module.css

@@ -0,0 +1,27 @@
+.tabs {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.tab {
+  padding: 0.375rem 0.875rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #4b5563;
+  background: #f3f4f6;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+
+.tab:hover {
+  background: #e5e7eb;
+}
+
+.active,
+.active:hover {
+  color: #ffffff;
+  background: #667eea;
+}

frontend/src/components/FilterTabs.test.tsx

@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest';
+import { renderToStaticMarkup } from 'react-dom/server';
+import FilterTabs from './FilterTabs';
+
+describe('FilterTabs', () => {
+  it('renders a tab for each filter', () => {
+    const html = renderToStaticMarkup(<FilterTabs value="all" onChange={() => {}} />);
+    expect(html).toContain('>All</button>');
+    expect(html).toContain('>Active</button>');
+    expect(html).toContain('>Completed</button>');
+  });
+
+  it('marks only the selected tab as selected', () => {
+    const html = renderToStaticMarkup(<FilterTabs value="active" onChange={() => {}} />);
+    expect(html.match(/aria-selected="true"/g)).toHaveLength(1);
+    expect(html).toMatch(/aria-selected="true"[^>]*>Active<\/button>/);
+  });
+});

frontend/src/components/FilterTabs.tsx

@@ -0,0 +1,26 @@
+import { FILTERS, type TodoFilter } from '../filters';
+import styles from './FilterTabs.module.css';
+
+interface FilterTabsProps {
+  value: TodoFilter;
+  onChange: (filter: TodoFilter) => void;
+}
+
+export default function FilterTabs({ value, onChange }: FilterTabsProps) {
+  return (
+    <div className={styles.tabs} role="tablist" aria-label="Filter todos">
+      {FILTERS.map((filter) => (
+        <button
+          key={filter.value}
+          type="button"
+          role="tab"
+          aria-selected={filter.value === value}
+          className={`${styles.tab} ${filter.value === value ? styles.active : ''}`}
+          onClick={() => onChange(filter.value)}
+        >
+          {filter.label}
+        </button>
+      ))}
+    </div>
+  );
+}

frontend/src/filters.test.ts

@@ -0,0 +1,43 @@
+import { describe, expect, it } from 'vitest';
+import { matchesFilter, toCompletedParam } from './filters';
+import type { Todo } from './types/todo';
+
+function makeTodo(completed: boolean): Todo {
+  return {
+    id: 1,
+    title: 'Water the plants',
+    description: null,
+    completed,
+    archived_at: null,
+    created_at: '2026-01-05T09:00:00Z',
+    updated_at: '2026-01-05T09:00:00Z',
+  };
+}
+
+describe('toCompletedParam', () => {
+  it('does not filter when showing all todos', () => {
+    expect(toCompletedParam('all')).toBeUndefined();
+  });
+
+  it('maps active and completed to the API parameter', () => {
+    expect(toCompletedParam('active')).toBe(false);
+    expect(toCompletedParam('completed')).toBe(true);
+  });
+});
+
+describe('matchesFilter', () => {
+  it('matches every todo for the all filter', () => {
+    expect(matchesFilter(makeTodo(true), 'all')).toBe(true);
+    expect(matchesFilter(makeTodo(false), 'all')).toBe(true);
+  });
+
+  it('matches only open todos for the active filter', () => {
+    expect(matchesFilter(makeTodo(false), 'active')).toBe(true);
+    expect(matchesFilter(makeTodo(true), 'active')).toBe(false);
+  });
+
+  it('matches only finished todos for the completed filter', () => {
+    expect(matchesFilter(makeTodo(true), 'completed')).toBe(true);
+    expect(matchesFilter(makeTodo(false), 'completed')).toBe(false);
+  });
+});

frontend/src/filters.ts

@@ -0,0 +1,23 @@
+import type { Todo } from './types/todo';
+
+export type TodoFilter = 'all' | 'active' | 'completed';
+
+export const FILTERS: { value: TodoFilter; label: string }[] = [
+  { value: 'all', label: 'All' },
+  { value: 'active', label: 'Active' },
+  { value: 'completed', label: 'Completed' },
+];
+
+/** Value for the API's `completed` query parameter, or undefined to fetch everything. */
+export function toCompletedParam(filter: TodoFilter): boolean | undefined {
+  if (filter === 'all') {
+    return undefined;
+  }
+  return filter === 'completed';
+}
+
+/** Whether a todo belongs in the list for the given filter. */
+export function matchesFilter(todo: Todo, filter: TodoFilter): boolean {
+  const completed = toCompletedParam(filter);
+  return completed === undefined || todo.completed === completed;
+}