The statement for issue #11 "Friendlier UX and our own arrow on the select" on the Astro and Solid stack.
Goal: so that a group fills in the bill on a phone or a computer without surprises. Errors are visible at their own field, the focus lands where the next input goes, removal can be undone, "Share" clearly says what happened and what to do next, and both selects show a chevron in the style of the app.
The domain logic, the calculation, the link format and SEO do not change. Already working and removed from the list: submit by Enter, focus on the name after adding a participant, a decimal keyboard for the amount, the currency in the amount caption. The chevron is received by both native selects, the payer select and the currency select. It is drawn by a shared icon component in the secondary text color, new colors are not needed.
Undo of removal relies on a reference to the bill object: the bar is visible only while the current bill is the very one that resulted from the removal. Any other change hides it, there is no timer. A change of the currency does not touch the bill, the bar stays. The hint in the amount field depends on the language: "1500 or 349.90" on the English page and "1500 or 349,90" on the Russian one.
Six fixes. First: an input error stands right under the name field, under the amount field or inside the "For whom" group, the field is marked invalid and linked to the error text, the focus goes to it, the error is removed on editing. Now the only message stands under the button, far from the cause. Second: the amount format is visible in advance, not only after a failed attempt. Third: after adding an expense the focus is on the amount field, because a group usually enters several expenses in a row. Fourth: after removing a participant or an expense a bar appears with a text and an "Undo" button that returns the bill and the address; the cross is next to other crosses, and a miss loses data. Fifth: after the removal the focus goes to "Undo", and after the undo to the form field, otherwise it falls to body. Sixth: on success "Share" shows an icon and "Link copied. Send it to your group — they will see this bill", and on failure says to copy the link from the field.
The plan by files: the icon, the select wrapper component, the field error component, the undo bar, the sections of participants, expenses and currency, the dictionaries of both languages, the styles, the project rules. The rules describe the new components and rules, in the contrast table the row about the error is renamed. Four screenshots in docs, two preview images and the Lighthouse reports need to be updated.
Done criteria: the checks and CI are green, the logic directories are unchanged, both selects are native inside a wrapper with an icon, the errors with the needed attributes and focus, the hint on both pages, the focus on the amount after adding, the undo returns the lists, the summary and the address, an empty error adds no height, the page width is not more than the window, the touch targets are not less than 44 px, the Lighthouse scores are not lower than 95 for speed and practices and 100 for accessibility and SEO. The tests are DOM tests for each of these behaviors, English ones too.
Out of scope: the calculation and the link format, our own dropdown, the Web Share API, confirmation dialogs, timers on the bar, new colors and new dependencies. There are no open questions.