Change how small number inputs are rendered

[julien-nc]

If the field's default value is under 10, we render it like that:

refs #215

[edward-ly]

Some possible design improvements:

• Add an "active" attribute highlighting the button that was last clicked (or the default value when the form is opened).
• Add a "Custom" button which toggles the visibility of the input field (which would be hidden by default to avoid mixing input types). Clicking on one of the 1-5 buttons would also hide the input field.

[julien-nc]

@edward-ly Thanks for the feedback and suggestions. Both are implemented.

It was a bit tricky to make the state reactive to outside changes, especially when typing into the "custom" input field. If you wanna type "11", you start by typing "1" and the value changes immediately and 1 is considered as not custom so the 1 button is highlighted and the input field disappears. Simple solution is to debounce the number input update event.

Kooha-2025-05-15-11-42-04.webm

[janepie]

Looks good! Cannot test with >4 pictures right now, because OpenAI has a max of 4 I think. Maybe something we could chunk in the future?

[marcelklehr]

Looks good!