Navigation and screen map

The screen map is v2’s, with its numbering kept so the v2 diagrams remain useful, plus the screens v2 left as placeholders (circle details, add service, sync progress, notifications, settings sections).

Top level

1   Sign in ─────────────────────┐
2   Onboarding (first sign-in) ──┤
3   Dashboard (four tabs) ◄──────┘
     3.1 Contacts   3.2 Circles   3.3 Services   3.4 Profile

The Dashboard is one screen with a top bar (the active profile’s avatar and first name left, header actions with words right), the tab’s title under it, the active tab’s content, and a bottom tab bar (the circle-first look, A101; see Visual design). Tabs keep their own scroll position and navigation stack. On tablets the tab bar becomes a rail and the stacks become list/detail panes (see Tablets).

Full map

#	Screen	Reached from	Kind
1	Sign in	app start when signed out	root
1.1	E-mail code / password reset	1	push
2.1	Welcome	first sign-in	onboarding step
2.2	Build your card (A104)	2.1	step: a checklist hub
2.2.x	Detail sheet for names / phones / e-mails / addresses / dates / photos	2.2 line	sheet (the Profile sheet, A105)
2.3.1	About connected services	2.2	step
2.3.2	Connect a service	2.3.1	step (optional)
2.3.3	Invite people you know	2.3.2	step (optional)
2.4	Notifications and privacy (push permission, telemetry consent)	2.3.3	step
2.5	All set	2.4	step → Dashboard
3.1	Contacts tab	Dashboard	tab root
3.1.1	Contact card	3.1 row (connected)	push / detail pane
3.1.2	Find people: segments Search and In your phone · N (A106)	3.1 Find	push
3.1.2.1	Send invitation	3.1.2 result, 3.3.1.2 result	push
3.1.2.2	Invitation sent	3.1.2.1	replace
3.1.3	Received invitation	3.1 row (received) or notification	push / detail pane
3.1.4	Sent invitation	3.1 row (sent)	push / detail pane
3.1.5	Notifications	header bell	push
3.1.6	Move to circle	contact card “Move”, circle details	sheet
3.2	Circles tab	Dashboard	tab root
3.2.1	Circle details	3.2 circle row or grid column	push / detail pane
3.2.2	Add circle	3.2 add	sheet
3.3	Services tab	Dashboard	tab root
3.3.1	Service details	3.3 row	push / detail pane
3.3.1.3	Review changes	3.3 “Review and sync”, 3.3.1	push
3.3.1.1	Synchronising	3.3.1 sync, 3.3.2	full screen
3.3.1.2	Cross-reference	3.3.1, and as the “In your phone” segment of 3.1.2	push / segment
3.3.2	Add service	3.3 add	sheet → provider flow
3.4	Profile tab	Dashboard	tab root
3.4.1	Detail sheet: one name, phone, e-mail, address, date or photo (A105)	3.4 row or a section’s Add	sheet
3.4.1.1	Who sees it	detail sheet “Change”, a row’s circle labels	sheet
3.4.2	Add profile	profile switcher	the Build your card hub (2.2) reused
3.4.3	Settings	gear on the Profile tab, rail gear	push
3.4.3.x	Account, Appearance, Language, Contacts, Notifications, Signed-in devices, Privacy, Help, About, Licences, Developer (debug)	3.4.3	push on a phone; on a tablet the detail pane beside the section list (selection, see Tablets)
3.4.3.1.1	Change sign-in e-mail, Set / change password	3.4.3 Account	sheet

Rules

• Tab roots preserve state. Switching tabs never resets a list.
• Push slides horizontally; back returns to the parent. Android honours the system back gesture including predictive back; iOS offers interactive swipe-back. Back on a tab root goes to Contacts, then backgrounds the app.
• Sheets (add circle, choose circles, pick type, confirm) are bottom sheets with a grabber and scrim; drag or scrim tap dismisses.
• Replace is used after completing an action so the user cannot go “back” into a submitted form (invitation sent, onboarding finished), exactly as v2’s router.replace.
• Full screen progress (synchronising) blocks navigation except Cancel.
• Deep links: a push notification opens the relevant screen (received invitation, contact card, notifications list); an auth link opens sign-in completion; all through app links / universal links, no custom scheme.
• Profile switcher: the avatar and first name at the top left open a list sheet of the account’s profiles (main + managed), the active one tinted with a check, and Add profile (“For a child or someone you look after”) at the bottom. Choosing one sets the active profile for the whole dashboard, as in v2’s “Selected: [Profile]” banner, but without the banner: the header shows the active profile’s avatar and name, and Contacts, Circles, Services and Profile all show that profile’s data. There is always exactly one active profile; the choice persists across launches.
• Header actions per tab, each an icon with its word (A101): Contacts: bell (notifications, with the unread count) and Find; Circles: Add; Services: Connect; Profile: the gear (Settings). Refresh is pull-to-refresh on every list; the header refresh button of v2 is gone.
• Empty states have one sentence, one action and at most one way out: “No contacts yet. Find people you know by their e-mail, phone or name.” with Find people and “Check your phone contacts” / a circle filter with nobody in it: “Nobody in Book club yet. The filter hides all 48 of your contacts.” with Show everyone and “Move people into Book club” / “No connected services. Connect your address book.” / “Add your first detail.” A list whose first read is still in flight shows skeleton rows, never an empty state. Offline, search-limit and sync-error states are in the tab pages.

Naming

Screen titles in English and Dutch: Contacts / Contacten, Circles / Kringen, Services / Diensten, Profile / Profiel, Settings / Instellingen, Find people / Mensen zoeken, Send invitation / Uitnodiging sturen, Notifications / Meldingen.