balances-groups

Summary

The same balances, cut by group.

Raw wireframe

• .context/designs/mobile/balances/groups.html

Why it is drawn this way

A group renders as the SAME row shape a person gets. Balances switches the two cuts with one control over one list, and rendering a 56px row on one side and a gradient-banded media card on the other made a cut look like a change of medium.

The group-card that used to be here is gone, and with it six classes. It was a 46px full-bleed gradient band with an overlapping avatar stack, above a name and an amount — about 110px per group. The gradient carried no fact (it was hashed from the name once the Type picker was cut), and the avatar stack on it said "5 people", which the subtitle underneath also said, in words, accurately.

The mark is the overlapping avatar stack, which this app already uses in the With picker. It tells a group from a person instantly and costs 62px of row rather than 46px of band plus a card.

Pairs never appear here. A pair is a group the product created on the user's behalf when they split with one person, not one anybody asked for. The balance is in the People cut, where a person belongs; the expenses are still on spending and in the export, because those are about expenses rather than about groups.

New group is at the BOTTOM of this cut, not in the header. You reach for it while looking at groups, which is the only moment it is the thing you want.

The empty state says what a group is FOR rather than urging one. Splitting with one person needs no group at all, and a product that pushes you to make one before you have anybody to put in it teaches the wrong model of itself.

Related

• balances
• group
• group-new

Sources

• src/app/(tabs)/index.tsx
• src/components/balances/group-balance-row.tsx