Docs draft
UserMenu
When to use it
useThe menu under AppHeader's account trigger. Sessions: Premium (no CTA), Free Trial (14-day pill), Go Premium (trial used), Logged Out (two-line rows + CTA).
avoidAny other dropdown — this composition exists only for the account trigger.
menu-itemAnatomy
.UserRow — Profile header: Avatar 64 + Name prop + optional crown 'Premium Member' caption in accent.text + edit pencil. Identity is DATA — the old two-user axis died.
CTA — Full-width primary Button: '14-day free trial' or 'Go Premium'. Absent for premium members.
rows — MenuItem Option instances with Leading Swap icons (Switch/Settings/Bookmark/Crunchylists/History/Notifications/Gift/Log Out) and Trailing Swap chips (NEW Tag on Switch Profile, NotificationBadge count on Notifications). Logged-out rows are two-line (Label + Subtitle Text).
surface — Menu conventions: bg.elevated + shadow.overlay + radius.md, 388 wide.
Design specifications
| width | 388px on color.bg.elevated + shadow.overlay |
| profile-name | type.title-4 in color.text.primary |
| membership | type.caption in color.accent.text |
| separators | MenuItem Separator rows (color.border.subtle) |