with-sheet

Summary

Who this expense is with — people and groups in one searchable list.

Raw wireframe

• .context/designs/mobile/add/with-sheet.html

Why it is drawn this way

This replaced a horizontal chip scroller. That worked for three items and broke at seven: everything past the third was behind a sideways swipe with no affordance that anything was there, it could not be searched, and it put four different KINDS of thing — yourself, a person, a group, and an action that CREATES a group — on one axis as if they were the same choice. With a flat, five groups and a dozen people it stopped being a picker and became a carousel you scrub.

The row costs the same zero taps when the default is right, which is the case the scroller was built for. What changed is the uncommon path: instead of swiping past six chips looking for "Flat 402", you open a sheet that is searchable and sorted, and it works identically at nine hundred contacts.

The sheet sorts by kind and puts Recent above everything. Just me first, because it is the answer that makes this an expense tracker. Then the three or four contexts actually used this month, MIXED — a person and a group are the same kind of answer to "who is this with", even though they are different rows everywhere else. Then all groups, then all people. New group is last, where a create action belongs.

Recent is derived from the ledger rather than stored. The most recent expense is the best available guess at what the next one is with, and it needs no new state to keep. A pair's group id is not offerable — the person is — so it is mapped back.

The sheet caps its height and scrolls inside itself. The grip, the title and the search field stay put; a sheet taller than the phone is how a simpler picker becomes a worse one.

The underlay is drawn unchanged and inert. Every link in it is blocked by the modal in the app, so none of them is a link in the wireframe either. The sheet's own controls are links, because those are real.

Related

• add
• add-with-person
• add-with-group
• group-new

Sources

• src/components/add/with-sheet.tsx
• src/app/(tabs)/add.tsx