Profile Header — Shared Components

Tray shell (tray.vue / tray-navigation.vue) — now simulated as the real right-docked drawer it is, full viewport height with the page dimmed behind it, not a floating card. The top tab row is a vertical rail (icon + label) per your reference, and the drawer is wider (480px) to hold it. Per request, the separate cog-icon Settings tab is gone — on your own profile, "Edit Profile" swaps the Profile tab in place into Change Profile Information (settings.js, avatar_upload.vue) with a "Cancel" to switch back, no tab change. Sign Out sits at the tiny Button variant next to Edit Profile. Includes a real Avatar Picker component (.Avatar Picker, node 23841:9054) the code doesn't visually implement yet. Feed and Community tabs are honest placeholders — not built this pass.

Figma-sourced tokens
Tray
Drawer

The X on the drawer closes it; "Open Tray" behind it reopens to the same tab you left.

Active tab

Per request: the separate cog-icon Settings tab is gone (its content lives inline in Profile via "Edit Profile"), and Profile is pushed to the far right instead of sitting second. tray-navigation.vue ships Feed/Profile/Community/Settings today. Click a tab in the preview itself too.

Feed data

Feed content is bear-research sample copy, structured exactly like the production demo tray it was modelled on. Removing a notification or clearing a section here is destructive (matches the real "Permanently remove" action) — use this to restore it.

Viewer & site
Whose profile is open
Current viewer's role

Site settings
Profile owner
Display name

Avatar photo

Avatar moderation badge

Account state

Interaction states
Follow button

Mute button

Failed action alert
Edge case

When on, every other control is moot — header.vue has no defensive guard for this today. Shown here as a skeleton.

Profile activity
Comment history

Verb phrasing (asked a question / posted / answered) is the real string set from base.json, keyed by content type and switched by isMyProfile. The article titles and comment bodies are bear-research sample content.

Profile — edit view
View mode (your own profile)

Click "Edit Profile" / "Cancel" in the preview itself too — same Profile tab, no tab change. This replaced the separate Settings (cog) tab.

Avatar upload state

Click the avatar circle in the preview to cycle through these. Hover the "Uploaded" state to see the real delete overlay.

Save status

Or just click "Update profile" in the preview — it cycles the same states.

Click a rail item, the avatar, Follow, or Mute directly to cycle their states — the workbench controls stay in sync.

Computed state

Live tokens in this render

Code reference: src/components/tray/tray-navigation.vue (nav chrome, real i18n copy), src/components/tray_content/settings/settings.js + avatar_upload.vue (Change Profile Information fields/logic), src/components/tray_content/profile/header.vue (permutation logic). Figma reference: Shared Components file hyDu1jEHR3HQY6ZZgAfURL — Button (node 61:347, exact tiny/base tokens via get_variable_defs), Avatar (node 61:341), Avatar Picker (node 23841:9054: Default/Hover/Uploading/Uploaded/Delete/Error). "Removed", "Reported", "Unauthorised", and the Avatar Picker's upload-progress/delete-overlay states are documented in the shared library but not yet wired into the current code — included here to show what's available. Feed and Community tabs are placeholders, not built this pass. Note: merging Settings into an in-place "Edit Profile" view on the Profile tab, and the Sign Out placement/size, are this session's proposed reorganization — tray-navigation.vue still ships a separate Settings tab today.