Edit todo items

[drunkensponge]

What this does

You can edit titles of todo items, no matter in which state they are (open, paused, completed).

Option 1: Use edit button to enable edit mode of selected item
Option 2: Double click on item title to enable endit mode of selected item

Changes to the title are submitted whenever the textbox loses focus or you hit enter.

Before:

After:

What this does (according to GitHub Copilot)

🤖 Generated by Copilot at 06f50c1

This pull request adds the ability to edit the text of an existing todo item in the todometer app. It updates the Item.jsx component, the appStateReducer function, and the Item.module.css file to implement the editing feature. It also uses React hooks and conditional rendering to handle the user interaction.

🤖 Generated by Copilot at 06f50c1

• Add editing feature for todo items (link, link, link, link)

• Use useState and useRef hooks in Item.jsx to manage editing mode and input value (link)
• Render a form with an input element or a div with the item text based on editing mode (link)
• Add an edit button to the buttons row that toggles editing mode and dispatches UPDATE_ITEM action with edited value (link)
• Handle form submission and input blur events to update the item and exit editing mode (link)
• Modify appStateReducer in AppContext.jsx to update the text property of the item along with the status property (link)
• Add CSS styles for the edit button, the form, and the input element in Item.module.css (link)

Relevant issue

Closes #83

A poem

🤖 Generated by Copilot at 06f50c1

If you want to edit an item's text
You can double-click on it, and next
The Item.jsx will show
An input and a button below
And the appStateReducer will handle the rest