[Bug] Any changes in the setting component will immediately update the state

[teoh4770]

Any changes in the setting component will immediately update the state. -> For example, update the pomodoro timer setting will update the pomodoro timer state.

Potential issue with this problem? -> While timer is running, setting the timer setting value will mess up with the current timer value

Previous flow:
update the timer setting in the setting section -> update the timer state immediately

The flow should be like:
update the timer setting in the setting section -> user click confirm (either with enter key or the button) -> update the timer state after form is submitted

[teoh4770]

link about dialog: https://blog.webdevsimplified.com/2023-04/html-dialog/

[teoh4770]

• [X] adding form element within the dialog element
• [X] make timer inputs in the setting not "controlled", means that the value of input is not tied to react states. Doing this prevent the data updates in real-time
• [X] enabled client side form validation on the inputs
• [X] after submit the form, should be update the react state