Implement creating a task

[d4vidsha]

Creating a task should be similar to what Todoist currently does. You may be able to use react-mentions for this.

• create a task modal
• add task button at bottom of list to invoke a new task modal
• invoke new task modal below highlighted task with a key press
• edit task button on right side of task item

Research

• Investigate react-mentions
• Get up to the end of the Flexbox section in The Odin Project
• Understand grid https://www.theodinproject.com/paths/full-stack-javascript/courses/intermediate-html-and-css#grid
• Learn about Framer Motion https://www.framer.com/motion/
• Build out a similar UI that Todoist has with newfound knowledge of the box model, flexboxes, browser devtools, etc.
  • Build the task list UI
  • Make task list interactive
    • task icon change on hover
    • tick animation on complete
    • sound effect on green tick (investigate to see how possible this is, very possible but a little buggy)
    • Use Radix Primitives checkbox instead of a grid checkbox #41
    • consider any keyboard shortcuts we can implement