State Diagrams

This is a useful tool from react.dev

When planning the structure of state, make a diagram of each possible state a circle and each event that leads to a change of state an arrow.

This can be further distilled by combining some of these states into the same circles in order to remove paradoxes. For example, empty and typing, empty, and submitting can’t all be true at the same time. Only one of those can ever be true. These can be combined into a single called status which would be an enum. You probably don’t need empty at all, since that can be derived from some other state like input (not shown in the diagram).