not-found

Summary

What a detail screen shows when the thing it is about is gone.

Raw wireframe

• .context/designs/mobile/states/not-found.html

Why it is drawn this way

Every one of these used to return null, which renders a blank screen with no header and no way back — indistinguishable from a crash, and reachable by perfectly ordinary means: somebody deletes a group you have open, an expense is removed on another device, you follow a link to something that has since been settled.

A dead end that explains itself and offers the way out is the minimum.

One shell, four callers. group and group-settings render "That group is gone", person renders "That person isn't here", and settle-pay's empty state renders "You're square with X" — the same component with its own title and body. It is drawn once here with the group copy, because drawing four near-identical screens teaches a reviewer to skip them.

The achievement icon, not an error icon. Three of the four callers are not failures at all; the fourth is somebody else's deletion rather than the user's mistake, and a red cross would blame them for it.

Related

• group
• person
• settle-pay

Sources

• src/components/ui/not-found.tsx