57. Todo List II

Build an enhanced Todo List component that extends the basic todo list with filtering, drag-and-drop reordering, and local storage persistence.

New Features

1. Filter Functionality

• Filter todos by status: All / Active / Completed
• Visual indication of active filter
• Update count for each filter

2. Drag and Drop Reordering

• Drag todos to reorder them
• Visual feedback during drag
• Maintain order after reorder

3. Local Storage Persistence

• Save todos to localStorage
• Load todos on component mount
• Persist across page refreshes

4. Clear Completed

• Button to remove all completed todos at once
• Only show when there are completed todos

5. Enhanced Data Structure

interface Todo {
  id: number;
  text: string;
  completed: boolean;
  order: number; // For drag-drop ordering
}

type Filter = 'all' | 'active' | 'completed';