Priorities

Not all todos are created equal. Let's add priority levels -- Low, Medium, High -- with color coding so urgent tasks visually jump out from the list.

Update the data model

"Add a priority field to the Todo interface. Create a Priority type with 'Low' | 'Medium' | 'High' values. Also add a PRIORITIES constant with display colors -- green for Low, yellow for Medium, red for High. Include border colors for the left-edge indicator."

export type Priority = 'Low' | 'Medium' | 'High';
 
export const PRIORITIES: { value: Priority; label: string; color: string }[] = [
  { value: 'Low', label: 'Low', color: 'text-green-600 bg-green-50 border-green-200' },
  { value: 'Medium', label: 'Medium', color: 'text-yellow-600 bg-yellow-50 border-yellow-200' },
  { value: 'High', label: 'High', color: 'text-red-600 bg-red-50 border-red-200' },
];
 
export interface Todo {
  id: string;
  title: string;
  completed: boolean;
  createdAt: string;
  category: Category;
  dueDate: string | null;
  priority: Priority;
}

💡Info

We use three levels rather than five (or a numeric scale). Three levels are easy to decide between quickly, and the traffic-light color coding (green, yellow, red) makes priorities instantly scannable without reading labels.

Update the AddTodo form

"Add a priority selector to the AddTodo form. Use three small buttons in a row (Low, Medium, High) instead of a dropdown -- it's faster since there are only three choices. Default to 'Medium'. Highlight the selected priority with its corresponding color."

Claude Code will add priority selection:

const [priority, setPriority] = useState<Priority>('Medium');
 
// In the form, add a priority button group:
<div className="flex rounded-lg border border-gray-300 overflow-hidden">
  {PRIORITIES.map((p) => (
    <button
      key={p.value}
      type="button"
      onClick={() => setPriority(p.value)}
      className={`px-3 py-2 text-sm font-medium transition-colors ${
        priority === p.value
          ? p.color + ' border-l border-r'
          : 'bg-white text-gray-500 hover:bg-gray-50'
      }`}
    >
      {p.label}
    </button>
  ))}
</div>

✅Tip

Using type="button" on the priority buttons is crucial. Without it, they default to type="submit" inside a form, which would submit the form when clicked instead of toggling the priority. This is a common React form gotcha that Claude Code handles automatically.

Show priorities in the list

"Update TodoList to display a small colored dot for priority level before the checkbox, and add a left border accent for High priority items. The dot and border should fade when a todo is completed."

Claude Code will add priority indicators:

// Wrapping each todo item:
<div
  key={todo.id}
  className={`p-4 flex items-center gap-3 group ${
    todo.priority === 'High' && !todo.completed
      ? 'border-l-4 border-l-red-400'
      : ''
  }`}
>
  {/* Priority dot before the checkbox */}
  <div
    className={`w-2 h-2 rounded-full flex-shrink-0 ${
      todo.completed
        ? 'bg-gray-300'
        : todo.priority === 'High'
          ? 'bg-red-500'
          : todo.priority === 'Medium'
            ? 'bg-yellow-500'
            : 'bg-green-500'
    }`}
    title={`${todo.priority} priority`}
  />
  {/* ... checkbox, title, etc. */}
</div>

Visual hierarchy in action

The combination of priority colors creates instant visual hierarchy in the list:

Red dot + left border for High -- these grab attention immediately
Yellow dot for Medium -- visible but not alarming
Green dot for Low -- present but subtle

"The priority colors I chose feel too muted. Can you make the High priority stand out more?"

✅Tip

Color tuning is a great use of Claude Code. Describe what you want ("a bit more subtle" or "more contrast" or "add a background tint to High priority items") and it will adjust the Tailwind color classes. You do not need to memorize the full color palette.

Update page.tsx

"Update the addTodo function to accept and store priority. Default sample todos to have varied priorities for visual testing."

const addTodo = (
  title: string,
  category: Category,
  dueDate: string | null,
  priority: Priority
) => {
  const newTodo: Todo = {
    id: generateId(),
    title,
    completed: false,
    createdAt: new Date().toISOString(),
    category,
    dueDate,
    priority,
  };
  setTodos([newTodo, ...todos]);
};

Test priorities

Add a High priority todo -- it should have a red dot and left border
Add a Medium priority todo -- yellow dot, no border
Add a Low priority todo -- green dot, no border
Check that the priority selector buttons highlight correctly when toggled
Verify that the default priority is Medium
Complete a High priority todo -- the red indicators should fade to gray

⚠️Warning

The form is getting wider with all these controls. If it looks cramped on smaller screens, ask Claude Code: "The AddTodo form has too many controls on one line. Refactor it to stack on small screens using flex-wrap and responsive breakpoints." It will make the form responsive.

Three dimensions of organization -- categories, due dates, and priorities -- are now in place. Next, let's add search so users can find specific todos quickly.