Mobile patterns

Banking-app building blocks reused across the native screens. Documented here first; promoted into @velon-finance/ui as they stabilize (DSM#39).

List-row menu

Tappable rows grouped in a rounded card, the spine of mobile settings/profile.

┌─────────────────────────────┐
│ ( ◷ )  Informações       ›  │
│ ( ◷ )  Segurança         ›  │
│ ( ◷ )  Notificações      ›  │
└─────────────────────────────┘

• Row: icon chip (size-9 rounded-full bg-primary/10 text-primary) + label + chevron, px-4 py-3.5, active:bg-gray-100.
• Grouped in rounded-2xl border bg-white dark:bg-gray-900; rows separated by a hairline (border-t border-gray-100), not gaps.
• Destructive rows (e.g. Sair) use text-red-600 + a red-tinted icon chip.

Drill-in navigation

The mobile Profile is a menu → full-screen section flow (not tabs). Each row deep-links to a real route (/app/profile/:section) so the Android hardware back button returns to the menu. Section screens reuse the existing web tab components, no duplicated forms.

/app/profile            →  menu (header card + rows)
/app/profile/security   →  full screen + back header  (reuses SecurityTab)

Reusing the web tabs means a security-sensitive component (e.g. SecurityTab) is rendered as-is, so no protected/auth file is touched by the mobile layer.

Initials avatar

Circular avatar showing 1–2 initials when there is no photo. Source order: full name → email local-part → "US". Brand tokens only.

Bottom sheets

Prefer a bottom Sheet (side="bottom") over a centered dialog for mobile contextual actions and pickers. It sits within thumb reach and respects the home indicator. See the Sheet organism; on native, pad the sheet content bottom with env(safe-area-inset-bottom).

Touch & motion

• Use active: states (not hover:) for press feedback. There is no hover on touch.
• Min target 44×44pt. Icon-only controls get an aria-label.
• Keep transitions short (transition-colors); avoid layout-shifting animations in scroll containers.