fix: align profile create and edit with figma

[jvsena42]

This PR aligns the Create Profile and Edit Profile screens with the v62 Figma handoff and makes the edit form scroll behind Cancel/Save, with the Cancel button blurring what passes under it. iOS twin: bitkit-ios#781.

Description

• Moves the profile header (avatar, name, divider, pubky) into one shared layout used by both screens, with the 32dp gaps and 32dp divider inset from Figma.
• Renders the name in display caps and turns off autocorrect, and centers the dimmed "YOUR NAME" placeholder, which sat off-center before.
• Adds the section dividers Figma shows between bio, links, tags, note and delete, and drops the extra border on link fields.
• Overlays Cancel/Save on the form so content scrolls behind a transparent-to-black gradient, and blurs the content behind the Cancel button as in Figma; the form used to stop above the bar.
• Uses the standard small button with orange text for Delete Profile, left-aligns the public note, and shows the image-square icon on a Gray 6 circle for an empty avatar.
• Narrows the Continue button inset on Create Profile from 32dp to 16dp to match Figma.
• Shows links and tags on your own Profile below a divider, as in the Figma "Profile active" frame, with the small Add Tag button used on contacts.
• Replaces the "Copied" toast on Profile with the Figma "pubky copied to clipboard" popup, which shows the pubky and hides after 3 seconds or on tap.
• Draws the Profile, Edit Profile and Edit Contact top bar over the scrolling content with the Figma black-to-transparent gradient.
• Uses the small Add Tag button and the Figma copy and pencil icons on the contact detail screen too.
• Makes contact links tappable when they are a valid web address, email or phone number: web links open in the browser (https is added when missing), emails and mailto: links open the mail app, and phone numbers (starting with + or under a phone-type label) and tel: links open the dialer; other text, including dates and IP addresses, stays plain.
• Addresses the iOS design review (bitkit-ios#781 review) where Android had the same divergence: home avatar placeholder shows the name initial, Create Profile focuses the name field, Pay Contacts spacing, Profile description spacing and edit/copy icons from Figma, Pubky Choice title and description, a taller empty Bio field, Cancel/Save stay behind the keyboard, and link/tag suggestions use small buttons with the back arrow at the 16dp inset.

Element	Figma	Before	After
Header gaps (avatar / name / divider / pubky)	32	12–16	32
Header divider (Edit)	Inset 32	Full width	Inset 32
Name text	Display caps	Mixed case, autocorrected	Display caps, no autocorrect
Name placeholder	Centered, White 32	Off-center, White 64	Centered, White 32
Section dividers (Edit)	Between every section	Missing after bio/links and add link	Between every section
Link input	White 10 fill	White 10 fill + border	White 10 fill
Public note	Left-aligned	Centered	Left-aligned
Delete Profile button	Small button, #FF4400	Flat White 10 fill	Small button, #FF4400
Footer behind Cancel/Save	Gradient, content behind, Cancel blurred	Content cut off above bar	Gradient, content behind, Cancel blurred
Empty avatar	Gray 6 + ImageSquare 32	Gray 5 + user-square 40	Gray 6 + ImageSquare 32
Continue button inset (Create)	16	32	16
Tags on own Profile	Tags + small Add Tag button	Tags + Add Tag chip	Tags + small Add Tag button
Contact Add Tag	Small button with tag icon, own row	Tag chip with trailing close icon	Small button with tag icon
Contact copy/edit icons	CopySimple and Pencil (duotone)	Copy variant, smaller pencil	CopySimple and Pencil from Figma
Links on own Profile	Link rows below a divider	Link rows, no divider	Link rows below a divider
Copy pubky feedback	"pubky copied to clipboard" popup with the key	Generic "Copied" toast	Popup as in Figma
Top bar on Profile / Edit	Transparent gradient over content	Solid bar, content below	Transparent gradient over content
Home avatar placeholder	Gray 6 + initial "Y"	Gray 4 + user-square	Gray 6 + initial
Create Profile name field	Auto-focused	Not focused	Auto-focused
Pay Contacts	Title→text 8, button inset 16, image 279	16, 32, fills space	8, 16, 279
Profile name→bio→QR→actions	16 / 16 / 16	8 / 24 / 24	16 / 16 / 16
Profile QR size	Screen width − 96 (48 each side)	Fixed 279	Screen width − 96
Profile edit/copy icons	Pencil and CopySimple (duotone)	Smaller pencil, Copy variant	Pencil and CopySimple from Figma
Pubky Choice title/description	"Enter the freedom web" / "Create a new pubky and profile in Bitkit."	"Join the pubky web" / "…or import… Pubky Ring."	Figma copy
Empty Bio field	3 lines (92)	2 lines (~72)	3 lines
Cancel/Save with keyboard open	Behind keyboard	Above keyboard	Behind keyboard
Pubky Choice background	Tag bottom-left, keyring bottom-right	Centered with offsets	Bottom-anchored as in Figma
Link/tag suggestions	Small buttons, back arrow at 16	Outlined chips, back arrow at ~28	Small buttons, back arrow at 16

Out of Scope

• ui/screens/profile/PubkyChoiceScreen.kt: the Figma "Profile Create or use existing" frame, including the Pubky Ring identity list, is unchanged.
• ui/screens/profile/PubkyChoiceScreen.kt: the "New pubky" caption and "Create profile" button text from the iOS review are left to feat: share pubky keys with pubky ring #1329, which rewrites this screen.
• ui/screens/contacts/EditContactScreen.kt: shares the edit form and picks up the same layout; not re-checked against its own Figma frame.

Design

• Profile Create
• Profile Create populated
• Profile active
• Clipboard Copy popup
• Profile Edit

Preview

Screen	Figma	Before	After
Create Profile (empty)
Create Profile (filled)
Edit Profile (top)
Edit Profile (content under footer)
Edit Profile (scrolled to end)
Profile (own)
Pubky Choice
Home (no profile)
Create Profile (focused)
Pay Contacts
Add Link suggestions
Contact detail

QA Notes

Manual Tests

• 1a. Profile → Create Profile: avatar, name, divider and pubky are evenly spaced; empty avatar shows the image-square icon; "YOUR NAME" placeholder is centered.
  • 1b. Type a name: it shows in caps and the keyboard does not autocorrect it.
• 2a. Profile → Edit Profile: dividers separate bio, links, tags, note and delete; link fields have no border.
  • 2b. Scroll: content passes behind Cancel/Save and is blurred inside the Cancel button; at the end Delete Profile sits above the buttons.
  • 2c. Tap Cancel: no changes saved.
• 3a. Profile: links and tags show below a divider; Add Tag is a small button; content scrolls under the transparent top bar.
  • 3b. Profile → tap copy or the QR: "pubky copied to clipboard" popup shows the pubky and hides after 3s or on tap.
  • 3c. regression: Edit Profile → content scrolls under the transparent top bar; tags still listed and editable.
• 4a. Home without profile: avatar shows the "Y" initial.
  • 4b. Profile → Pubky Choice: tag and keyring sit at the bottom as in Figma.
  • 4c. Profile → Create Profile: name field is focused with the keyboard open; Continue stays behind the keyboard.
  • 4d. Create Profile → Continue → Pay Contacts: coin image, title/description and Continue spacing match Figma.
  • 4e. Edit Profile → tap Bio: Cancel/Save stay behind the keyboard.
  • 4f. Edit Profile → Add Link → Suggestions: small-button pills; back arrow aligned with the pills.
• 4g. regression: Edit Profile → change name → Save: saved name keeps the typed casing.
• 5a. Contacts → contact: Add Tag is a small button under the tags; copy and edit icons match Figma.
  • 5b. Contacts → contact → tap a website link: opens the browser; tap an email link: opens the mail app; tap a phone link (e.g. +1 555 123 4567): opens the dialer; plain-text links do nothing.
  • 5c. regression: Contacts → contact → Edit: form renders and saves.

Automated Checks

• Ran just compile, just test and just lint locally; all pass.
• Screenshots taken on a Pixel 9 emulator (API 37) running the dev build.

[github-actions]

Regtest APK

Built from 817cf58 (run).

Download bitkit-dev-debug universal APK (expires in 30 days).

[piotr-iohk]

Staging suite dispatched against fix/profile-ui-figma at 6ed6d83196f8f120607ed2ba20ff1e4ac2761006. The suite includes the @pubky E2E shard (@pubky_staging).

https://github.com/synonymdev/bitkit-android/actions/runs/35972167273

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-ui-figma at 6ed6d83196f8f120607ed2ba20ff1e4ac2761006.

The @pubky failures were the new Create Profile behavior: the name field is focused and Continue stays behind the keyboard, so the flow never reached PayContactsContinue. 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-android/actions/runs/35988075469

[greptile-apps]

Confidence Score: 5/5

The PR appears safe to merge, with only a non-blocking edge case affecting formatted explicit telephone links.

Findings

1.  Formatted Tel Links Rejected ▶

Summary

This PR updates the profile creation, editing, presentation, contact-detail, and related onboarding surfaces to match the current design.

• Introduces a shared profile header and revises form spacing, dividers, placeholders, buttons, icons, scrolling, and keyboard behavior.
• Simplifies the signed-in user’s profile presentation while retaining links and tags in editing and contact views.
• Makes supported contact links tappable and updates associated profile, home, Pay Contacts, and Pubky Choice presentation.
• One edge case remains: explicitly prefixed telephone links with formatted spaces are incorrectly left untappable.

Diagram

%%{init: {'theme': 'neutral'}}%%
flowchart LR
  A[Contact profile link] --> B{Link type}
  B -->|Plain email| C[mailto URI]
  B -->|Plain phone| D[Normalized tel URI]
  B -->|HTTP or HTTPS| E[Web URI]
  B -->|Explicit tel with spaces| F[Rejected as plain text]
  C --> G[Android ACTION_VIEW]
  D --> G
  E --> G

Loading

_{Reviews (2) · Last reviewed commit: "refactor: simplify contact link parsing"}

[pwltr]

No findings on the reviewed head. Manual checks done.