fix: align profile screens with Figma

[jvsena42]

This PR aligns the create and edit profile screens and the home header spacing with the v62 Figma handoff.

Description

• Matches the profile header layout (avatar, name, divider, pubky) to Figma: 32pt gaps, divider inset to the content, pubky key in Body M SemiBold.
• Adds the section dividers Figma shows between bio, links and tags in Edit Profile, and uses the standard input style (white 10% fill, SemiBold 15) for bio and link fields.
• Replaces the solid footer behind Cancel/Save with a transparent-to-black gradient so the form scrolls behind the buttons, as in the design.
• Uses the brand-orange small button for Delete Profile and the image-square placeholder on a gray 6 circle for an empty avatar.
• Renders the profile name in display caps on the profile screens while keeping the saved casing, and turns off autocorrect, which was replacing names (e.g. "Satoshi" became "Satisfied"). The name field no longer uppercases the existing name when editing starts, which had saved "Satoshi NAKAMOTO" as "SATOSHI ...".
• Capitalizes the first letter of each word of the profile name on Home and leaves the rest as typed ("apple tree" shows as "Apple Tree").
• Shows links and tags below the edit/copy/share actions on your own profile, with tag removal and Add Tag below the tags, as in Profile active.
• Replaces the generic "Copied To Clipboard" toast on your profile with the Figma popup: "pubky copied to clipboard" in orange over the full pubky, shown by the copy button and a QR tap.
• Lets content scroll under a fading header on Profile, Edit Profile and Edit Contact by reusing InsetHeaderScrollView, as Settings and Support already do.
• Sizes the profile QR with the Figma side padding instead of a fixed 279pt, and uses the Figma 24pt pencil/copy/share icons on borderless circle buttons.
• Lets Return insert a line break in the bio by reusing NoteTextEditor with line breaks enabled; the vertical text field it replaced ended editing on Return.
• Fixes tapping the profile QR, which never copied the pubky because the QR view's own tap gesture swallowed the tap.
• Uses the Figma 24pt coins, activity, copy, share, pencil and trash icons on contact details.
• Makes contact link rows open web addresses, emails and phone numbers; plain-text values stay as text.
• Moves Add Tag below the existing tags on contact details.
• Shows a letter avatar ("Y" for "Your name") in the home header before a profile exists, as in Wallet Empty Onboarding.
• Uses the Figma copy on the profile choice screen ("Enter the freedom web", "Create profile") and moves the key and tag illustrations to their Figma position and stacking order.
• Focuses the name field when Create Profile opens and keeps Continue behind the keyboard.
• Lays out Pay Contacts like the other onboarding screens: illustration directly above the text, 8pt between title and description.
• Uses uniform 16pt gaps in the profile header with the bio inset from the edges, and draws the copy icon at the same visual size as edit and share.
• Reserves three lines for the bio field, always shows the "Tags" caption, and hides Cancel/Save while the keyboard is up in Edit Profile.
• Matches the small pill buttons to Figma (13pt SemiBold, 16pt icon, top highlight) and uses them for link and tag suggestions, with the sheet back button inset 16pt.
• Fixes the contact screens to match Figma: same-size copy icon on Contact Detail, no divider under the bio on Add Contact, and a "Notes" label on Edit Contact.
• Counts the hardware wallets row in the home activity slot budget and top-aligns the wallet page, because the extra row overflowed the page and pushed the balance up under the profile name.

Element	Figma	Before	After
Header gaps (avatar / name / divider / pubky)	32pt	16pt	32pt
Header divider	Inset 32pt	Full width (Edit)	Inset 32pt
Pubky key (Edit)	Body M SemiBold 17	Body S 15	Body M SemiBold 17
Section dividers (Edit)	Between every section	Only after links/tags	Between every section
Bio / link input	White 10%, SemiBold 15, 16pt padding	Gray 6 + stroke, Regular 17	White 10%, SemiBold 15, 16pt padding
Delete Profile button	Small button, #FF4400	Flat capsule, red	Small button, #FF4400
Footer behind Cancel/Save	Gradient, content visible	Solid black	Gradient, content visible
Empty avatar	Gray 6 + ImageSquare 32pt	Gray 5 + SF photo / user-square	Gray 6 + ImageSquare 32pt
Name text	Display caps	Mixed case, autocorrected	Display caps, no autocorrect
Own profile below actions	Divider, links, tags, Add Tag	Divider, links, tags list, Add Tag inline	Divider, links, tags, Add Tag below
Copy pubky on profile	Popup with full pubky	Generic toast	Popup with full pubky
Profile / Edit header	Content scrolls under a fading header	Content clipped below the header	Content scrolls under the header
Profile QR width	48pt side padding	Fixed 279pt	48pt side padding
Profile action icons	24pt regular, no ring	16pt bold assets, outlined circle	24pt regular, no ring
Return in bio	Line break	Closes keyboard	Line break
Tap profile QR	Copies pubky, popup	Nothing happens	Copies pubky, popup
Contact action icons	24pt regular set	16pt bold assets	24pt regular set
Contact links	Tappable	Static text	Tappable
Contact Add Tag	Below tags	Inline after tags	Below tags
Home header without profile	"Y" letter avatar	user-square icon	"Y" letter avatar
Home profile name	Title case	Saved casing	First letter of each word capitalized
Choice screen copy	"Enter the freedom web", "Create profile"	"Join the pubky web", "Create profile with Bitkit"	Figma copy
Choice illustrations	Keys bottom-right, tag bottom-left over keys	Tag centre-left under keys	Figma position and order
Create Profile keyboard	Name focused, Continue behind keyboard	Not focused, Continue above keyboard	Figma behaviour
Pay Contacts	Illustration 16pt above text, 8pt title → description	Centred, 24pt title → description	Figma layout
Profile header gaps	16pt everywhere, bio inset 16pt	8pt name → bio, 40pt bio → QR, full-width bio	Figma spacing
Copy icon	18pt glyph	24pt glyph	18pt glyph
Bio field (Edit)	3 lines tall	1 line	3 lines
Tags caption (Edit)	Always shown	Only with tags	Always shown
Cancel/Save with keyboard	Behind keyboard	Floating above keyboard	Hidden while typing
Small pill buttons	13pt text, 16pt icon	15pt text, 14pt icon	13pt text, 16pt icon
Suggestion pills	Small pill buttons	Tag chips	Small pill buttons
Contact Detail copy icon	18pt glyph	24pt glyph	18pt glyph
Add Contact divider under bio	None	Divider	None
Edit Contact notes label	"NOTES"	"BIO"	"NOTES"
Home: header → balance (with hardware wallet)	~49pt, 3 activities	~25pt, 4 activities	~49pt, 3 activities

Out of Scope

• Views/Profile/PubkyChoiceView: the "New pubky" caption on the create card and the "use existing" Pubky Ring identity list come with feat: use pubky ring keys via shared keychain #774, so this PR keeps the existing cards and the Pubky Ring import option.
• Picking a suggestion on the Add Link sheet does not prefill the site's base URL yet; this is a separate change.
• The review referenced Figma v63; the file only contains "Bitkit - Handoff v62", so v62 frames were used.

Design

• Profile Create
• Profile Create populated
• Profile Edit
• Profile active
• Clipboard Copy
• Wallet Empty Onboarding
• Profile Create (choice)
• Pay Contacts Setup
• Add link suggestions
• Contact details
• Contact add
• Contact Edit
• Wallet Hardware

Preview

Figma frames from Handoff v62. Before is master; After is this branch.

Screen	Figma	Before	After
Home, no profile
Home, lowercase name
Home with hardware wallet
Profile choice
Create Profile
Create Profile, name entered
Pay Contacts
Profile
Profile, scrolled
Profile, pubky copied
Edit Profile
Edit Profile, typing
Link suggestions
Contact Detail
Add Contact
Edit Contact

QA Notes

Manual Tests

• 1a. Profile → Create Profile: avatar, name, divider and pubky are evenly spaced; empty avatar shows the image-square icon.
  • 1b. Type a name, tap outside: name shows in caps and is not autocorrected.
• 2a. Profile → Edit: dividers separate bio, links, tags, note and delete; bio and link fields use the lighter input fill.
  • 2b. Scroll down: content is visible through the gradient behind Cancel/Save, and Delete Profile clears the buttons at the bottom.
  • 2c. Tap Cancel: no changes saved.
• 3a. regression: Profile → Edit → append text to an existing mixed-case name → Save: the existing part keeps its casing (e.g. "Apple" + " tree" saves as "Apple tree").
  • 3b. Save the name "apple tree": Home shows "Apple Tree" and Profile shows "APPLE TREE".
• 4a. Home with a paired hardware wallet and 4+ activities: balance sits the same distance below the profile name as without a hardware wallet; 3 activities show.
  • 4b. regression: Home without a hardware wallet: 4 activities show.
• 5. regression: Contacts → contact → Edit: form renders and saves.
• 6a. Profile with links and tags: divider, links and tags show below the edit/copy/share buttons, with Add Tag below the tags.
  • 6b. Profile → remove a tag, then Add Tag: the change saves and shows on the profile.
  • 6c. Scroll Profile, Edit Profile and Edit Contact: content fades out under the header.
• 7. Fresh wallet with Paykit enabled → Home: header shows a "Y" letter avatar and "Your Name".
• 8. Profile → choice screen: "Enter the freedom web", "Create profile" card, keys bottom-right with the tag in front at bottom-left.
• 9a. Choice → Create Profile: name field is focused on open and Continue is hidden behind the keyboard.
  • 9b. Restore Profile (existing pubky): name is not auto-focused.
• 10. Create Profile → Continue → Pay Contacts: illustration sits just above the title; title and description are 8pt apart.
• 11. Profile with a bio: 16pt between key, avatar, name, bio, QR and buttons; copy icon matches edit/share size.
• 12a. Profile → Edit: empty bio field is three lines tall; "Tags" caption shows with no tags; Add Link/Add Tag/Delete use 13pt text.
  • 12b. Tap bio: keyboard opens and Cancel/Save are hidden until it closes.
• 13. Edit → Add Link → Suggestions (and Add Tag → Suggestions): pills match Add Link style; back arrow is 16pt from the edge; picking one fills the label.
• 14a. Contacts → contact with a bio → detail: 16pt gaps between key, avatar, name, bio and buttons; copy icon matches the others.
  • 14b. Contact without a bio: no gap left where the bio would be.
• 15. Contacts → + → paste a pubky → Add: no divider under the bio.
• 16. Contact detail → Edit: notes field is labelled "NOTES"; Edit Profile still shows "BIO".
• 17. Profile → Edit → bio → type, press Return, type again → Save: bio keeps the line break on the profile screen.
• 18a. Profile → tap the QR: pubky is copied and the "pubky copied to clipboard" popup shows the full pubky, then hides after 3 seconds.
  • 18b. Profile → tap the copy button: same popup; tapping it hides it.
• 19a. Contact with links → tap a web link: it opens in the browser; an email opens Mail.
  • 19b. Link saved as plain text (e.g. "@handle"): not tappable.
• 20. Contact with tags: Add Tag sits on its own line below the tags.
• 21. regression: Send → LNURL pay comment and Trezor xpub input: Return still dismisses the keyboard.

Automated Checks

• Unit tests added: cover link-to-URL resolution for contact link rows (web, email, international, labelled and formatted phone numbers, mixed-case schemes, numeric and plain text) in ProfileLinkRowTests.swift (9 tests, passing locally).
• Built and ran on iPhone 17 and iPhone 17 Pro simulators (iOS 26.5); screenshots above are from those runs.

🤖 Generated with Claude Code

[greptile-apps]

Confidence Score: 5/5

The PR appears safe to merge, with only a non-blocking edge case where dotted numeric text can open the dialer.

Findings

1.  Numeric Text Opens Dialer ▶

Summary

This PR aligns profile, contact, onboarding, and home layouts with the v62 design handoff while adding tappable contact links and correcting the home activity budget.

• Introduces shared profile name, editor, button, avatar, and icon styling.
• Updates profile creation/editing, contact details, QR actions, and multiline bio behavior.
• Accounts for each hardware-wallet grid row when limiting recent home activity.
• Adds contact-link URL resolution and focused unit coverage.
• One low-impact phone-detection false positive remains.

Diagram

%%{init: {'theme': 'neutral'}}%%
flowchart LR
  A[Stored contact link value] --> B{Recognized destination?}
  B -->|Web or email| C[Open external URL]
  B -->|Phone-like characters and 7+ digits| D[Normalize to tel URL]
  B -->|No| E[Render static text]
  D --> F[Open dialer]

Loading

_{Reviews (5) · Last reviewed commit: "fix: open formatted tel: contact links"}

[pwltr]

No findings on the reviewed head. The earlier hardware-row finding is fixed. Current unit and integration checks are running; E2E is queued. An older E2E status failure belongs to the superseded run.

Pending manual checks.

[jvsena42]

Thanks for the review. Addressed in b63aa14; screenshots of each screen next to its Figma frame are in the PR description under "Design review follow-up". The Figma file only has "Bitkit - Handoff v62", so I compared against v62.

Home

1. Header shows a "Y" letter avatar before a profile exists.

Create Profile (choice)

1. Copy now "Enter the freedom web" / "Create a new pubky and profile in Bitkit.", same as feat: use pubky ring keys via shared keychain #774.
2. Card title is "Create profile". The "New pubky" caption card and the Ring identity list stay in feat: use pubky ring keys via shared keychain #774, so the Pubky Ring import card is unchanged here.
3. Keys and tag moved to the Figma positions, with the tag drawn in front.

Create Profile

1. Name field is focused on open (not when restoring an existing profile).
2. Continue stays behind the keyboard.

Contact onboarding (Pay Contacts)

1. Illustration sits directly above the text, 8pt between title and description, same pattern as the other onboarding screens.

Profile

1. 16pt gaps throughout the header, bio inset 16pt.
2. Copy icon was exported without padding; it now renders at 18pt to match edit and share.

Edit Profile

1. Bio field reserves three lines.
2. Small pill buttons use 13pt SemiBold text and 16pt icons.
3. Cancel/Save are hidden while the keyboard is open.
4. "Tags" caption always shows.

Add Tag/Link

1. Back button inset 16pt.
2. Suggestions use the small pill button style.

[piotr-iohk]

QA reviewed on 4c5c53f84a706d2ca3ce5ac158a15d4f4106ad9c.

Reviewed the profile, contact, choice, Pay Contacts, and home-header layout against the v62 frames. Twin bitkit-android#1332 at 6ed6d83196f8f120607ed2ba20ff1e4ac2761006. No device run.

No findings on this pull request.

The visual list in the changes-requested review is in this head: “Y” avatar, choice copy, empty-create focus, Continue behind the keyboard, Pay Contacts spacing, 18pt copy icon, three-line bio, Tags caption, Cancel/Save hidden while the keyboard is up, and suggestion pills. Manual tests 6–16 are still unchecked, so the pixel match is not confirmed. The hardware-row comment matches ActivityLatest: one slot per pair, (wallets.count + 1) / 2.

On the twin, restoring a profile that already has a name still focuses the field and opens the keyboard. iOS focuses only when the name is empty.

Run Tests and Run Integration Tests passed. Local E2E passed and does not run @pubky_profile.

[piotr-iohk]

Staging suite dispatched against fix/profile-figma-divergences at 4c5c53f84a706d2ca3ce5ac158a15d4f4106ad9c. The suite includes the @pubky E2E shard (@pubky_staging).

https://github.com/synonymdev/bitkit-ios/actions/runs/35972162770

E2E specs use default-feature-branch, which resolves to main because this branch name is not in bitkit-e2e-tests. Slack posting is off.

[piotr-iohk]

Staging was re-run against fix/profile-figma-divergences at 4c5c53f84a706d2ca3ce5ac158a15d4f4106ad9c.

The @pubky failures were the new Create Profile behavior: the name field is focused and Continue stays behind the keyboard, so CreateProfileSave was not displayed. createProfile now dismisses the keyboard before tapping save. That change is in bitkit-e2e-tests#257 (fix/profile-create-keyboard), and this run uses that branch.

https://github.com/synonymdev/bitkit-ios/actions/runs/35988071715

[jvsena42]

Addressed in 6686718:

1. Copy Pubky (button and QR tap) now shows the Figma "pubky copied to clipboard" popup with the full key instead of the generic toast.
2. Links and tags are back on the Profile screen, with tag removal and Add Tag below the tags.
3. Profile, Edit Profile and Edit Contact use InsetHeaderScrollView, so content scrolls under the fading header like Settings and Support.

The Add Link base-URL prefill is left out of scope as noted.

[pwltr]

Found a bug with the capitalization of the name:

Simulator.Screen.Recording.-.iPhone.17.-.2026-09-24.at.23.09.59.mov

Figma shows the name on the profile screens in uppercase, while on the home screen I believe it should not be transformed

[jvsena42]

Fixed in 5289db3 and be82404.

The name field had .textCase(.uppercase). Once editing started, that uppercased the existing name and wrote it back into the saved value, so "Satoshi NAKAMOTO" plus a few typed characters saved as "SATOSHI ...". The field no longer has it: the name keeps the casing you type while editing and is drawn in caps only on the profile screens, as in Figma.

On Home, the name keeps its saved casing, with the first letter of each word capitalized: "apple tree" shows as "Apple Tree", and "McDonald" stays as is.

Checked on the simulator: saved "apple tree", then Home shows "Apple Tree" and Profile shows "APPLE TREE".